Develop Reference

1 pixel offset at certain window widths

I get a really interesting glitch in both Safari and Firefox with the following JSFiddle:
http://jsfiddle.net/68gcy2gp/
You have to click on the red box to toggle the blue overlay.
I have two left floated relative positioned li elements with a width of 32% plus 1% right margin. I then put a div element positioned absolute with top/left 0 over the li element. The width of this div will be set to the same width the 32% li has (via jQuery).
On certain screen widths I get then a 1px glitch (too long or too short). Like this screenshot shows it:
How can I prevent this glitch?

Okay, as an official answer:
jQuery .width() or .innerWidth() is rounding the width of subpixel to the next integer value either with floor or ceil, depending on the value. To avoid that you can use some raw javascript:
$('.person').each(function() {
var front = $(this).find('.front');
var back = $(this).find('.back');
var link = $('');
link.on('click', function() {
var width = $(front)[0].getBoundingClientRect().width;
back.innerWidth(width);
back.toggle();
});
$(this).wrap(link);
back.hide();
});
The following function is for checking pixel errors by resizing the window with active overlay:
$(window).resize(function() {
$('li').each(function() {
var back = $(this).find('.back');
var width = $(this)[0].getBoundingClientRect().width;
back.width(width);
});
});
If you use .innerWidth() instead of getBoundingClientRect() you will see the error you have stated.

Using Jquery to toggle on and off items based distance to top

I am creating a site in which there are a number of fixed background images that you scroll past. Associated with each fixed background is an image slider (or text) that is hidden until the title is clicked on. These items are all fixed positioned.
I was able to make this work by using z-index to place items in order top to bottom/first to last and then have each disappear in turn using:
$(document).scroll(function() {
$('#porttitle').toggle($(this).scrollTop() < 225);
});
However, I am unable to use this because the length pixel distance down on the page changes based on the screen size. I am pretty new to Jquery but wanted to try to use .offset .top to have the item disappear not based on the pixel length to the top of the page but instead when an element appears on the screen. This is what I have so far but it isn't seeming to work.
$(document).scroll(function() {
$('#porttitle').toggle($(this).scrollTop() < $(‘article.post-100’).offset().top);
});
Here is the link to the site: http://s416809079.onlinehome.us (not final location - just developing)
Any thoughts?
Thanks!

I think this may work for you, read the comments on the code for a line by line explanation.
Working Example
$(window).scroll(function () { // When the user scrolls
$('div').each(function () { // check each div
if ($(window).scrollTop() < $(this).offset().top) { // if the window has been scrolled beyond the top of the div
$(this).css('opacity', '1'); //change the opacity to 1
} else { // if not
$(this).css('opacity', '0'); // change the opacity to 0
}
});
});
I'm conditionally changing the opacity rather than using toggle because:
...jQuery does not support getting the offset coordinates of hidden
elements or accounting for borders, margins, or padding set on the
body element.
While it is possible to get the coordinates of elements with
visibility:hidden set, display:none is excluded from the rendering
tree and thus has a position that is undefined.
Related documentation:
.offset()
.each()
.scroll()
.scrollTop()

Jquery animate position is not working with margin-top?

I created a jsbin which has a div with labels
And I want to scroll to a specific label.
however it is working correctly only if margin-top is 0.
HOwever If I test it with margin-top:100px it is not accurate... http://jsbin.com/idinob/8/edit
why is that ?
The animate command is :
$('.d').animate({
scrollTop: $(".s210").position().top
}, 200);
});
And I did use position and not offset because im talking a about a span which is inside the div. so we are talking about position and not offset.
it seems that $(".s210").position().top is affected by the margin-top.
why ?

You should set the position property to relative:
span { position: relative }

How can I move a background image pattern around?

I've looked around for this but I couldn't find an answer, and I don't have a clue how I would do it. What I am looking for is a JavaScript or jQuery script that will "move" a background image to the right in a div container, so that the pattern will have an "animated" effect.
How would it be possible to do this? I apologize if I have not explained the question in enough detail.

You can use the CSS background-position property to set the position of the background.
Here's a live example that moves the background one pixel to the right every quarter second, resetting when it reaches 100 pixels.
HTML:
<div id="theDiv">This is the div</div>
CSS:
#theDiv {
background-image: url(http://www.gravatar.com/avatar/7b13c109d50df67d5f7d0b1d901d7fb7?s=32&d=identicon&r=PG);
background-repeat: no-repeat;
}
JavaScript:
jQuery(function($) {
var pos = 0;
move();
function move() {
++pos;
if (pos > 100) {
pos = 0;
}
$("#theDiv").css("background-position", pos + "px");
setTimeout(move, 250);
}
});

You cannot use jQuery.animate on a background position, because:
All animated properties should be animated to a single numeric value.
And background-position is not a single numeric value property.
Thus, your best bet is to not use a background image in this case directly. You could re-do your layout so that the image is actually an absolutely positioned <div> (the size of your background image) within another fixed-size <div> container (position: relative; overflow: hidden;). And then to make it "move" -- animate CSS left property on your absolutely positioned <div>.

Scrolling div within bounds

I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?

You change the z-index using css:
div.class {
z-index: 60;
}

You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.

You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}