I am working on making a div randomly move around a page.
This is a related question
Now, I have replaced the div with a picture like an "arrow" and I want it to randomly move while also pointing in the right direction by changing its rotation angle as it moves, instead of always pointing up.
I think I might need to rotate it at some angle while it moves, but I am unsure of how to calculate the angle between the old and new points.
Any help would be greatly appreciated!!!
Give this a shot
$(document).ready(function(){
moveImage();
});
function generateNewPosition(){
// Obtain viewport dimensions (excluding the div dimension)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function moveImage(){
var newCoordinates = generateNewPosition();
$('img').animate({ top: newCoordinates[0], left: newCoordinates[1] }, function(){
moveImage();
});
};
JsFiddle with speed control http://jsfiddle.net/D6Svc/
Hey there, I'm looking for a way to prevent files from being dropped in the web browser. I've attempted window.addEventListener("drop",function(e){ e = e || event; e.preventDefault(); } ...
I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...
I am experiencing an issue where the code works perfectly on Chrome but fails to function properly on Safari. I have been unable to pinpoint the cause of this discrepancy and any assistance or insights would be greatly appreciated. For those interested, a ...
Greetings everyone! I am currently working on a website built with CodeIgniter. In one of my functions, I need to fetch data from MySQL and display the result in JavaScript as part of an Ajax call. Here is my PHP function for retrieving data: public func ...
Below is the code snippet I'm working with: for (var i = 0; i < 2; i++) { $.ajax({ type: "GET", async: false, url: "/MyController/MyMethod", success: function (data) { if (i == 0) { $ ...
In my possession is a container: #box1 { height:100px; width:208px; } along with a series <li id="first"><strong>FIRST</strong> </li> <li id="second"><strong>SECOND</strong&g ...
Having a bit of trouble here with my code snippet featuring 'font awesome' icons in circles. I'm looking to add text beneath each icon, but the alignment within the circle is proving to be a challenge. Check out the code in this link to see ...
I am currently facing a challenge where I need to skip a loop iteration based on the response received from an Ajax call. The issue lies in the fact that I am unable to access the Ajax response outside of the actual Ajax call. While I have managed to fin ...
I am facing an issue with some buttons that have specific classes. Here is an example: https://i.sstatic.net/CVIR2.png Each of these buttons contains JSON data stored in a data attribute. I have created a function to detect when a button is clicked and p ...
When working on my AJAX-page, I encountered the task of fetching data from a database. On my initial page, I have included del image for deleting a record. Passing the file cid as 'rmvfile' to the next page, I was able to fetch and display them o ...
I need the #blue div positioned below the #green div The #blue div should have a margin-top: -10px; property <style> #red{ width: 400px; border: 1px solid red; } #green{ width: 100%; height: 100px; ...
If we have the following HTML input: <p>A</p> <p>B</p> <p>C</p> <div>D</div> <p>E</p> <p>F</p> <p>G</p> We can select B, C, F and G using the following code: $('p + ...
I'm currently working on a feature that involves an image uploader for various platforms, each with its own set of recommended image dimensions. For example: platform 1 - dimension 920 x 300, platform 2 - 210 x 200, and platform 3 - 790 x 270. When th ...
I'm attempting to recreate the text effect found here: . However, I'm facing issues getting it to work despite using the same code. This is the HTML I am using: <h1><span></span>Sign Up</h1> My CSS looks like this: h1 { ...
I have a table where I am utilizing sumtr for the table footer, and displaying all the information within datatables. My requirement is to show all the values as currency. However, I am unable to modify the values after sumtr because it won't be able ...
After integrating a swipeJS photo slideshow into my jQuery mobile application, I encountered an issue. I am trying to create points for counting the pictures similar to what is seen on this page: Although I have added the necessary HTML and CSS code to my ...
Can someone assist me in displaying 6 images retrieved from a MySQL database on an MVC Razor view? Images 1 and 6 should be placed in separate divs labeled "item", while images 2, 3, 4, and 5 should be grouped together in a div called "item-small". Below i ...
I am currently developing a website where I have a div covered by an SVG. When I use this SVG as a background image and apply background-position: center center, it functions as expected. However, my issue arises when I try to add additional CSS in this ma ...
Can a countdown script be created using PHP? Websites like 4shared.com or megaupload.com utilize a similar script that starts counting from 20 seconds to 0. I am able to see how many seconds are left on the web page before I can click on the download but ...
Take a look at this HTML : <div class="container"> <a id="1"></a> <a id="2"></a> <a id="3"></a> <a id="4"></a> <a id="5" class="specific"></a> <a id="6"></a ...