Develop Reference

CSS - Setting the top/left properties of a rotated element

Consider I have a relative/absolute positioned div with a transform: rotate property set on it. How does changing the top/left properties of this div affects its position on the screen? In a small demo that I created, it looks like when trying to move that div, by changing its top/left properties, it won't move as expected. For example, in the demo below, i have a relative positioned div, which is rotated by 45deg, and initially positioned at (300px, 300px). When trying to move this div by (5px, 5px), the div will actually move backwards... Why it that?
Here is the demo - Demo (Click the red square in order to move it by 5px in each direction)
Thanks!

The problem is that position attempts to include things like margin, position, etc. (Perhaps it uses rotate as well to calculate position). Therefore, instead of position, use +=number. For example:
$(document).ready(function() {
$('.redSquare').on('click', function() {
$('.redSquare').css('top', "+=5");
$('.redSquare').css('left', "+=5");
});
});
This works as expected.
http://jsfiddle.net/KyD7x/

Updated your code for the expected behavior. Please refer this Pen
$(document).ready(function() {
$('.redSquare').on('click', function() {
$('.redSquare').css('top', parseInt($('.redSquare').css('top')) + 5 + 'px');
$('.redSquare').css('left', parseInt($('.redSquare').css('left')) + 5 + 'px');
});
});

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()

How to snap elements to grid by jquery or javascript

There are some elements that have class='snap'
I want to find these elements in the body. Then snap and resize elements to fit grids by Jquery.
When?
The document is ready.
The window is resized.
Note:
Size of grid cells are 10px
Contents of elements can be different.
Element can move down maximum in 1 cell size. (Up is not allowed).
Because of responsive elements, It's not true to snap the element by specifying width and height.
See on JsFiddle
Any ideas or help would be greatly appreciated.
JsFiddle updated: Removed width of .content in CSS, It can be not specified.

What you could do, and this is just an idea that is perfectible, is getting the offset of the .snap div and remove all margins. Then you snap to the next (right and bellow) lines :
var Content = {
snapElement: function(element){
offset = element.offset();
element.css('left', (Math.ceil(offset.left/10)*10)+'px');
element.css('top', (Math.ceil(offset.top/10)*10)+'px');
element.css('margin', '0');
},
snapElements: function(){
var elements = $("body").find(".snap");
elements.each(function(){
Content.snapElement($(this));
});
}
}
You will also have to make your .snap divs relative :
.snap {position:relative;}
The demo
You can also keep the margins but you will have to subtract them to the left and top.
Edit : A more sophisticated demo that handle width

Retrieved $().position() changes after updating to position: absolute

I'm figuring out a possible solution for a dynamic crossfade of HTML elements. The core of my problem is a strange behaviour of the jQuery's .position() and updating the css "position" property after retrieving the old position.
I've made a JSFiddle to illustrate my problem: http://jsfiddle.net/svenhanssen/DDYVs/
/*
This works. I'll get a position.top from 0 to 90
*/
$("p").each(function( p ) {
var position = $(this).position();
console.log(position.top);
});
/*
This doesn't work. I'll get a position.top of 0 for all elements. Why does the css set effects the position?
*/
$("p").each(function( p ) {
var position = $(this).position();
console.log(position.top);
$(this).css({
position: "absolute"
});
});​
Somehow changing the css "position" property afterwards effects the old property. Does anyone know the reason why and a possible solution?

The moment you set a <p> to position: absolute it is taken out of the document flow, and the next non-absolute <p> is moved upwards to take the freed space. Then you get to that just-repositioned <p> element, and sure enough its top is now 0 (since there are no in-flow elements before it to push it down).
Here's a possible solution:
$("p").each(function( p ) {
var position = $(this).position();
console.log(position.top);
}).css({
position: "absolute"
});​
Note that now all <p> elements are set to position: absolute only after the loop has rolled.
Updated fiddle

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
}