Develop Reference

How to trigger an image to move when users scroll the page?

Is there any way to make an image move up when users scroll the page? I have 2 square images (each 400px in wide and height), both are visible. The left image is fixed by position. The right image is positioned 200px below the left image. I need to make the right image to move up by 200px (get aligned with the left image) when we scroll the page. Then the it stays still on that position.
I found the one on this page is quite the same with what I'm trying to create http://jessandruss.us/#waiting The difference is my images are all visible, while on this page the overflow of the left image is hidden and it gets back to its original position when users scroll up.
Really appreciate any help on this matter. Thank you.

$(document).ready(function(){
var aligned = false; // A flag to tell us when the images are aligned
$(window).scroll(function(){
if($(this).scrollTop() == 192 ) { // when the window scroll to the alignment point...
aligned = true; // the images are aligned
}
if (aligned) { // if they're aligned...
$(".image-2").css("top", 8 + $(this).scrollTop()) // match .image-2's top css property
} // to the window's scrollTop value, +
// 8px for the body's margin.
})
})
Here's a JSFiddle with what I think you want.
There's simply a boolean to tell us when the images are lined up. When they are, image-2's CSS property 'top' is matched to the window's scrollTop value.
The boolean variable is currently hard coded to tell us when the images are lined up (I looked at the window's scrollTop value when they were lined up, 192 in this case). This isn't a great approach since it won't account for changes in the images' positions or sizes, but this should be enough to get to going.
EDIT
https://jsfiddle.net/eLdo0s3w/5/
Here's another method to achieve the same result. As long as having the second image position: fixed is OK, then it should be more efficient, and will hopefully avoid the jumping around that OP says happened with the first method.
It targets image-2's top CSS property and matches it to the window.scrollTop value, until image-2 reaches the necessary point.
Again, this code isn't very reusable, but it should work fine for a one-off situation. If anyone wants improve on it, please do so!

Sounds like you need to use jQuery to link the picture's transform: translateY() property with scrollTop(). It's a little hard to explain in words, but if you provide a jsfiddle I'll show you what I mean.

animations of multiple widths simultaneously, amounting to 100%

I am trying to adjust the widths of two elements to expand to a wider area when a user closes a left panel.
To do this I animate the left panel to right: 100%, and expand the first element to take over more area while keeping the second element with a fixed width (which also is an animation since now the whole div takes up more space so his percentage needs to change in order for it to take up the same pixel width)
The code is rather long so I won't post much of it here, stack overflow requires something so here's how I do the width animations:
$('#centerWeb').animate({
"width": "81.33333333%"
}, {
duration: 1000,
queue: false
});
JSFiddle: http://jsfiddle.net/dpPG7/
I have several problems, the first, the animation isn't 'smooth', it's fidgety, I've heard or people saying that you can use the same timer queue for queuing animations but I couldn't find how (since I believed that small differences in percentages might cause this).
Any ideas anyone could help with?
My second problem is that sometimes, like in the jsfiddle example, one of the center elements bounces down a row. In my complete web this happens when re-expanding the left area however in the JSfiddle example it happens when minimizing the left area.
In the JSFiddle: The left area when clicked removes it and expands the rest, and the red button when clicked expands the left area back.
My third and final problem, the animation of the left area, when expanding it back, doesn't occur at the same time as the expansion of the first center area (the actionList), it occurs once it's finished, despite being queue:false.

As I commented, I personally prefer this codepen example:
#rightContainer{
-webkit-transition: all linear 300ms;
.. /* browser compatibility & remaining styles */
}
#rightContainer.shrink {
left:20%;
}
and
$("#btn").click(function(){
$("#rightContainer").toggleClass("shrink");
});
Which is imo clean & good practise.

width of dynamically inserted div containing text

I have a script that dynamically inserts a div containing text in the dom. The text content is not known in advance.
I need to know the width of this div, but it seems that that the return value of document.defaultView.getComputedStyle(node, "").getPropertyValue("width") or node.offsetWidth cannot be trusted.
I used setInterval to log it, and the value changes over time. For instance, in my case it starts with 929px and then changes to 908px.
This div is in position absolute, it has whitespace nowrap, so I don't think it is being "pushed" by other dom elements or that it somehow changes once inserted.
Is there an elegant way to retrieve the width, or do I have to use an ugly setTimeout to retrieve it once the return value is stable ?

Try:
yourDOMElement.getClientBoundingRect()
This will return an object with top, left, right, bottom, height and width attributes. This should be cross-browser.
Note: If you are going to work with the position attributes (top, left, right, bottom, height) of the returned, take into account scroll offset if necessary.
Update: To ensure this works on older browsers that don't have the width/height attribute, calculate it subtracting right/bottom from left/top.

The viewport can change its size because of the scrollbar. Once the scrollbar appears, its width can no longer be used by the document. Force the scrollbar to exist before you measure the size by adding overflow: scroll or overflow-y:scroll to the <html> element.
The size of a block-level element is, by default, its container width minus margins and padding (even if it's positioned absolutely), which is ultimately the wiewport width unless you set a fixed width somewhere along the way.

Using jQuery, you should be able to do this:
var width = $("div-selector").width();

this is fairly easy?
open the page in a browser and press f12. With firefox there is a button "inspect element" on top and in chrome it's on the bottom. Click it and hover your mouse over it. This should give you the height and width in px. Never been wrong for me.
if it still doesn't show, click it and you can see it in the css panel of the console.

position the pop up

I have several boxes (more than 100) that will be created dynamically in different positions on the screen. Upon clicking each box, I want a slide in pop up with the details.
I want its position to slide in near each boxes. I have done that, but, if some boxes are near the browser window end on the right side, half of the pop up gets hidden in the window.
I want those pop-ups to display fully before the window (as like in excel).
my javascript code for postioning;
function centerPopup(comp_id, top, left) {
$("#popupContact").css({
"position": "absolute",
"top": top + 70,
"left": left + 223
});
}

If I'm understanding your question correctly it's not the overlap with other boxes but losing half the box on the edges of the screen? This sounds like you're using the edge of the window to set the position of the box but you aren't accounting for the width of the box itself. Make sure to get the width of the current box divided by two and subtract this from the max window size. This will position the right edge of your box at the right side of the window (if you imagine a box rendered at the far right of the screen).
Hopefully I'm interpreting your question correctly.

If they are appearing underneath another element, try adding a higher z-index to the style of the popup box. that will allow it to appear over something else with a lower z-index.
I'd need more code, or an example (use jsfiddle.net) to really see what's going on

Applying position:absolute to a style via jQuery fails to center div horizontally upon first page load

This is a followup to my question here. I would like to understand why applying position:absolute to the CSS of a div via jQuery fails, while applying it in a static style works. Here are two jsfiddle examples:
Works: http://jsfiddle.net/jasper/Ty6Af/2/
No worky: http://jsfiddle.net/Ty6Af/3/
Note that the only difference between the two is where I apply position:absolute. Vertical centering always works, but horizontal centering does not work when the page loads for the first time. If you manually re-size the window the div will center correctly.
All of my testing has been on Chrome under Ubuntu thus far.
Anyway, I'm just now delving into the world of web development and these are exactly the kinds of 'quirks' that I need to begin understanding.
EDIT:
#Jasper found something interesting. If you make two calls to .css(), first applying position and subsequently applying a margin, it works. I would love to understand why. Here is an example: http://jsfiddle.net/jasper/Ty6Af/5/

So the issue is with how the width of the div is calculated by the browser depending on its position.
If the div is set to position : static (by default) then it's width is 100% of it's parents width and the element is not allowed to move around the page.
If the div is set to position : relative then it's width is 100% of it's parents width but it can be moved around with left.
If the div is set to position : absolute then its width is determined by the actual content of the div, for instance if there is only a 200px wide <span> element within the div then the div will be 200px wide.
You can test these observations by changing the CSS of your jsfiddle to specify position : relative (etc...) and remove the JavaScript that makes the div position : absolute, then use your Developer Tools to inspect the element and it's calculated width.
The problem with your code is that it sets the position : absolute at the same time it sets the margin of the element by using its width/height (which are calculated differently depending on the position of the element).
If you want to set the position of the div in JavaScript then you can do something like this:
$(function() {
//notice I cached the selector so it can be used in the future as well as set the position of the div
$signuparea = $('#signuparea').css({position : 'absolute'});
$(window).resize(function() {
$signuparea.css({
'margin-top' : '-' + Math.round($signuparea.height() / 2) + 'px',
'margin-left' : '-' + Math.round($signuparea.width() / 2) + 'px',
});
}).trigger('resize');
});
Here's a jsfiddle: http://jsfiddle.net/jasper/Ty6Af/8/

I believe the problem is that when you apply your left and right in your second fiddle, you have yet to add position absolute to the div. Hence, the browser has no idea what do with the left and right values and ignores them initially.
Practically speaking in your second fiddle, you only actually add the position:absolute on the resize trigger. So before you resize your actual div has no positioning.
If you instead add the position absolute on load it works fine:http://jsfiddle.net/Ty6Af/9/
Notice that if you give it position:relative from the start (like this http://jsfiddle.net/Ty6Af/11/ ) it allready applies both the left and right value. The reason you can't actually see the effect of "left" is because it is a block element.
I hope that answers your question, I'm not quite clear on where you are stuck.

http://jsfiddle.net/Ty6Af/7/ this should work, the trigger function in jquery has bugs with chrome so you have to run the function on load too.

The problem seems to be that position:absolute; negates the current layout and requires you to position it.....
See: http://jsfiddle.net/ZHaRD/
Which Jasper explains much more eloquently than myself!