Dividers afloat - expanding current script with multiple additions

I am currently utilizing this website as a hub for showcasing my various web projects. The jsfiddle code provided in response to this particular inquiry is exactly what I need, however, I am unsure of how to have multiple divs moving simultaneously across the screen. Ideally, I want these divs to contain text links similar to the "WEIRD CREEP" example. Despite attempting to modify the script myself, my limited knowledge of coding has hindered my progress.

Answer №1

Is this the solution you've been searching for?

http://jsfiddle.net/Xw29r/865/

I made a modification to the animateDiv function to accept an object as input

function animateDiv(obj){
var newq = makeNewPosition();
var oldq = $(obj).offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);

$(obj).animate({ top: newq[0], left: newq[1] }, speed, function(){
  animateDiv(obj);        
});

};

Additionally, I iterated through all div elements using .each method

$("div").each(function(i,v){animateDiv(v)});   

Answer №2

Here is the solution you've been searching for:

$(document).ready(function(){

    $(".example_selector").each(function() {
         animateDiv($(this));
    });
});

For a complete example, check out this fiddle:

http://jsfiddle.net/cfLG8/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform strings in a table into integers within a specified scope

My World.json file is quite large and contains extensive data on countries worldwide. I've been utilizing a list to display this data in a table format, with the intention of sorting all values accordingly. However, I have encountered an issue - all m ...

Leveraging jQuery to interact with MySQL database in PHP Laravel framework

I seem to have hit a roadblock with my database, which is quite intricate. Here's the breakdown of the tables used for the questions: product - contains product details such as shoes productattribute - houses different variations of products like bl ...

Dealing with multiple parameters within the app.param() function

Currently, I am developing an API using Express.js and facing a challenge in implementing an app.param() function for handling the id parameter in a GET request: app.param('id', (req, res, next, id) => { const envelopeIndex = Number(id); ...

What is the best way to customize a div depending on the validation status of all reactive form fields within it?

I am facing a challenge with a rather complex form that contains multiple fields. Some of these fields are used to create logical blocks, and I would like to emphasize the surrounding div if any of these included fields are invalid. Can you suggest the bes ...

The beta version of Angular 2.0 introduces the BrowserDomAdapter for easy access to the DOM

I have a Component in Angular 2.0 that is attempting to utilize the DOM Adapter API from Angular's BrowserDomAdapter documentation. The initialization of this DomAdapter can be found here. However, I am uncertain about whether the Dom Adapter needs t ...

Utilizing SubHeaders in Material UI Select Menu for Enhanced Organization

I'm facing a challenge in setting up a lengthy list of Menu Items on a Select control that incorporates sticky SubHeaders. The issue arises when the items scroll, as they end up obstructing the subheaders. To tackle this problem, I examined the Mater ...

Weird occurrences observed when JSON wraps my objects

I am sending the following request to my server: $.ajax({ url: url, data: JSON.stringify({ SecretKey: e.Code, CommentId: e.Id, Direction: direction, VoteType:1}), type: "POST", contentType: "application/json;charset=utf-8", }); After the ...

Determine the employees' salaries and display any salaries that are below 5000

Hi everyone, I'm looking for guidance on how to properly utilize the Flat or flatMap method to flatten this array of employee data. Specifically, I want to retrieve the names and salaries of employees whose salary is less than 5000. const employeeData ...

What should I do when the ng-click event doesn't open a new window

<p ng-click='window.location.href="{{data.url}}"''>{{data.name}}</p> Is there anything incorrect about this code snippet? I attempted using onclick as well, but encountered an error in the console. ...

"Exploring the power of Node.js by utilizing ObjectArray and implementing

Can I compare two arrays of objects in JavaScript? My goal is to find the common objects between these two arrays: First object array: [ { id_0: 356, name_0: 'xxxxx', id_1: 33, name_1: 'yyyyyy', id_ ...

Stop the running of JavaScript in Internet Explorer 6

I am looking for advice on how to prevent certain parts of my JavaScript code (using jQuery) from running in IE6. Can anyone recommend the best methods to achieve this? Appreciate any help you can provide, thank you! ...

Utilizing JQuery AJAX to Submit a JSONP Form with File Attachments

I have been working on implementing a contact form for our clients who create websites with their own domains through us. As part of our services, we provide hosting and a web editor to help them build their websites. The contact form they include on their ...

Changing CSS styles dynamically using PHP

After stumbling upon a customizer live preview layout picker, I have finally found what I've been searching for – a live layout changer for WordPress. This solution works like a charm, but I'm wondering if there is a more efficient way to write ...

The Bootstrap popup fails to display when adding the bootstrap.min.css file

I am experiencing difficulties with CSS as I am relatively new to it. Currently, I am utilizing the bootstrap popup in the following example. Upon clicking the 'Full Spec' button, a popup box appears. However, it seems that the file bootstrap.mi ...

Numerous jQuery pop-up windows are being generated instead of just one as intended

When I load an editing form asynchronously on my web page using jQuery.get and display it within a jQuery dialog, multiple instances of the div that I apply .dialog to are unexpectedly being appended to document.body. Here is the code snippet for loading: ...

Developing a countdown clock with php and asynchronous javascript (ajax)

Can anyone provide guidance on how to create a real-time database timer? I have a starting time in the database and I am using PHP, looking to incorporate JS or AJAX for optimal functionality. Here is a rough outline of my plan: BEGIN Request server ti ...

CSS styling for the dropdown list in the content/option section

Can someone help me with a simple question I've been researching for hours without success? I'm trying to figure out how to style the content/option/popup of a dropdownlist on the right side of the 'open button' like in this screenshot ...

Use the zoom feature on D3 to enhance two graphs in an HTML document

I have been experimenting with d3 libraries lately and came across http://bl.ocks.org/jroetman/9b4c0599a4996edef0ab. I successfully used it to draw a graph based on data from a tsv file and enable zoom in and out functionality, which worked well for me. Ho ...

Covering a doughnut shape with a twisting spiral

I want to achieve a hula hoop covered in tape effect using three.js. The 3D model should look similar to the image below. https://i.sstatic.net/lj9cR.jpg I have been able to create the hoop in 3D space using TorusGeometry and pan around, but I am strugg ...

Ensure that both textarea and pre elements have equal dimensions and line wrapping behavior in Internet Explorer

I am in the process of implementing a dynamic textarea that resizes automatically, based on a technique discussed in this article: Alistapart: Expanding Textareas (2011). The idea is quite straightforward: by using a pre element to mirror the input in the ...