I'm working on a little project that uses the mapquest API. While the map is being populated with all the pins that get pulled in, I want to make it where I have a "dummy map" that is shown as a static map and has pins that will fall onto it at random points. The pins will be nothing more than a series of styled div's. I can get them to move about the dummy map, but I cannot get them to each have a different position. How can I get the div's to each drop at a different positions? Also, what would be the best way to stagger the animations so they don't all fire at once? I'll put together a fiddle and include it below. Thanks for any input.
jsfiddle.net/45geyrzx/
First enclose all those divs in another div, that you style this way:
<div id="holder" style="position:relative;">
This "holder" block will have a location on the overall web page that is relative to other stuff; if you add something above it, the block will move downward appropriately.
Then, for each of the divs that you have enclosed by that "holder", style them something like this:
<div id="div00" style="position:absolute; top='0px'; left='0px';">
This div item (note the 2-digit identifier allows for a total of 100 divs this way) will have an absolute position inside the "holder" div. If the "holder" is moved due to some page-edit outside that block, everything inside the block, positioned absolutely, will be moved along with it, staying synchronized in terms of positions.
The key point is that those "top" and "left" values can be randomly assigned. In your JavaScript code you can create an array, something like this:
var x,divarr=[]; //make sure divarr is global
for(x=0; x<100; x++) //do this inside an appropriate JavaScript function, just once
divarr[x]=document.getElementById("div+((x<10)?"0"+x:x));
which lets you access each of the divs at any later time, so that you can change its "top" and "left" coordinates:
divarr[14].style.top=37+"px";
Here I've used 37 as an example, but you can assign any random integer you want.
Related
OK so I am relatively new to JS and the REST API (so please be gentle)
I am using REST to pull from a sharepoint list. This populates a slider with multiple divs that include both an image and text. I would like to make the image a slider itself (without controls) that will swap out images for the unique slider item.
The code is written so a user can populate multiple images on a single slider element and the images will stack on top of each other and change every few moments from one image to another. I am having trouble coming up with a function that will treat each slider div uniquely given an unknown number of images and/or slider elements. I attempted to put walls to say a maximum of 10 sliders elements will exist, but any number of images could be populated for any one slider element.
My REST code works as it should and populates the images in a stack but now i need to assign visibility or order to the images. Each list item can have anywhere from 0-X images.
Unfortunately I dont really have any code per say that would provide value here... the bounds of this is purely 'X' number of elements with 'N' number of images each. I want each element x1, x2, x3... xx to swap images n1, n2, n3...nn every 2-3 seconds.
Here is the resulting HTML for the element. I created a unique id for each element -- this one is element 8 in the sharepoint list (pic8). I then assign a dummyclass for the all images dummyclass I also append a unique ID for each image (2pic0 2pic1 2pic2). I also tried assigning data attributes -- data-index says the pic is the 1st 2nd or 3rd pic of the set and data-max is the max value of data-index -- this was meant to identify that there are 3 total (0, 1, 2) images so the data-max was set as 2 -- hopefully that makese sense.... I am honestly pulling at staws:
<div class="spotlight">
<div class="img_spotlight" id="pic8">
<img class="dummyClass" id="2pic0" data-index="0" data-max="2" src="image1.jpg">
<img class="dummyClass" id="2pic1" data-index="1" data-max="2" src="image2.jpg">
<img class="dummyClass" id="2pic2" data-index="2" data-max="2" src="image3.jpg">
</div>
<div class="spotlight_content">
<div class="spotlight_title"><h3>TITLE</h3></div>
<div class="spotlight_body"><p>WORDS HERE</p></div>
</div>
</div>
My intuition is to use a function that will pull all children from each div and swap visibility or z-index. This function would of course need to exist outside of the ajax query which generates the image stack. Any ideas?
Ok after a bit of research i found an answer via the cycle() jquery plugin http://jquery.malsup.com/cycle2/download/
This effectively takes the children and fades them in regardless of the number of elements. Hopefully this helps someone else in a similar position
Basically I have a bunch of elements inside a div, lets say <div class="wrapper">. I want to be able to scale this outer div and have the elements inside scale properly along with it.
For example, if this were a collection of SVGs all we would have to do is change the transform of the outer SVG. to get this result:
Scaled SVG from blue bounding box
I want to do this same effect with a div wrapper... Is that even possible? (The reason I want to do this is because I want to be able to use img tags etc, otherwise I would simply use the svgs). If it helps, the end goal is to allow the user to drag and drop elements to create their own interface, but it would help if it works on multiple screens.
Credit to #samuellawrentz
Use transform:scale(x, y) to scale any wrapper element
I want to create a website, inspired by http://cirkateater.no/en/ .
The images shall stay at the same position on the Screen (position:fixed), but inside the next div, the second image shall be visible.
My first solution was to use background-images, which worked.
With background-images, it looked like this JSFIDDLE:
http://jsfiddle.net/Ryanous/r7mLm4wg/4/ (i do not own these images)
Consider the following code:
<div class="background" style='background-image:url("http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg");'></div><div class="background" style='background-image:url("http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg");'></div>
But I also want to move the images via JS later on!
You cant manipulate backgroundimages top-offset easily, so I decided to use an img-tag instead.
Now, using the img-tag, the images seem to be independent of their divs, and overlap each other so that always only one image is visible.
( id like to include my current code but stackoverflow wont let me do. four spaces dont do anything, i cant format my code. )
So my question is:
How can I make images be only visible inside a certain div, but keep their positions fixed?
Putting the style overflow:hidden; on the div would hide all that's outside of the div.
I did a search here and couldn't find any questions with answers that were suitable to this.
I am writing a hockey scoring chance tracker and basically I want to show an image of the hockey ice and each time you click on the image it remembers where you clicked, puts a small red circle where you clicked with a number on top. That number is to be an auto incrementing number. Ultimately I want to track where all the mouse clicks are for storage into a database.
To the side of the image will be a form and each time the mouse is clicked it adds a new row to the table. This part is not too hard, I could easily do it with jquery.
The problem I am having is trying to find a quick easy way to keep laying the same image, multiple times, on top of another image, where the user clicks. I have been looking into HTML5/Canvas, as well as just plain javascript/jquery to do this.
I am here asking for suggestions on easy ways to do this.
Thanks
Here's a super simple jsfiddle with the beginnings of how I might go about doing it - let me know if you've any questions/concerns/need help making further improvements, and I'll be glad to update!
http://jsfiddle.net/jking/4dMJG/
(just prevent my divs are images, and the sidebar is a real form...)
Here is how I would do - simple, short way, I don't know how you want to extend it:
I would create an array, and bind event listener to the div you want your user to click on.
Every time the user clicks on this image, an event object is passed through, you can read out the X and Y coordinates of the mouse - .position() or .offset() depending on your layout.
Create a JSON object, which stores these values:
var hit = {
id: 1,
x: 250,
y: 365,
//add more attributes if you like/need
//for this particular 'hit'
}
And the you can store this object (-notation) in an array:
hitz.push(hit);
Now you should 'update' your UI based on this array.
Just loop through with a for...in loop and create your images:
var hockeyIceClone= $("div.hockey-ice").clone(true);
for (var i in hitz) {
var hit = hitz[i];
hockeyIceClone.append(
//assuming that your .hockey-ice div has position:relative at least
var image = $(new Image('image/path.png'));
//add more stuff for image if you like
$(image).css({
position: absolute,
left: hit.x,
top: hit.y
})
);
}
$("div.hockey-ice").replaceWith(hockeyIceClone);
The reason for cloning is because when you loop through an array and append elements to a 'container' placed out and visible on the UI, it might blink as it renders. So you better 'collect' it first, and place them out to the UI together.
Also you can use other methods than cloning, it's only an option.
I want to insert an image tag into a block of text so that the image is, say, 100 pixels down in the DIV.
<div>
A lot of text in a text block and a <img tag> somewhere
that is floated left or right and positioned inside the text block
</div>
So, the tag above is put in the text block to be floated so that it is positioned at 100px DOWN in the DIV. Now, this can't be done statically, it has to be done in javascript since 100px down in the div may be represented by different text depending on font rendering issues and such.
So, is there a way to find what "word" in a text block that is 100px down in the DIV? jQuery perhaps?
The short answer is no
Basically it comes down to the DOM doesn't give a way for you to get an elements pixel position. There are sort of hacks you can do for some browsers, but good luck getting a solution working.
If you cannot get the position of the containing div, you are not going to get the position for the text within.
Leaving aside the no, if you were to find a way to get the div's pixel height, I would follow a procedure similar to the following.
Get the text from inside the div and store it in a local var.
Inside a loop for each word in the text:
Insert a div tag into just before the word.
Get the pixel position of the div tag.
Use this to determine the closest word to pixel pos 100 down.
Once you have the closest position, create a document fragment to build up your new inner for the div
Replace the div's content with the document fragment.