Develop Reference

Issue with jQuery/CSS transitions between slides disrupting position:fixed performance inside slide

Hi I'm working on 'page' style transitions between elements on a page. My approach is pretty much this which works fine but when I put something with position 'fixed' inside one of the 'pages' the functionality just isn't happening - its working more like absolute positioning. The code is basically..
<nav id="navigation-bar">
<!-- Content Goes Here --->
</nav>
#navigation-bar {
position: fixed;
top: 0;
width: 100%;
}
Does anyone know if theres a solution to this? Or if not a possible alternative? If you position the navigation bar outside of the 'page' it works but I'm not sure how to link the #navigation-bar to 'transition' at the same time/style as the slide I also think this makes things more complicated - there is also an element on the mobile view that needs to be in the page to work that is also position fixed and I need an approach that essentially works with positioning the html inside the panel/page but can be positioned fixed and works.

That's the way position:fixed works extract the element of all the DOM.
An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled.
On other side position:absolute is able to extract the element but position it relative to another containing block.
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box. To demonstrate this, in the example below you will make one of your elements fixed. You will make the other one very tall in order to cause a scrollbar, to make it easier to see the effect it has.
So if you have one element with fixed position inside each div it doesn't matter because is extracted and positioned in relation to the primary container. Then the best you can do is work with position:absolute.

How to allow vertical scroll in absolute layout?

I'm working on this website right now http://antoniobrandao.com/v4
All objects are placed in absolute positions. Unfortunately this doesn't enable vertical scrolling.
I've read that using position:static in a parent element (in my case, the DIV sections-wrapper ) would do the trick, and yes a scrollbar appears, but the contents seem visually destroyed when I attempt to scroll after setting position: fixed to my sections-wrapper DIV.
I'm new to HTML5 so if anyone could give me a hint I would be most thankful!
thanks

I found out the answer to my own question.
The solution was to manually (via JavaScript) set the height of my "sections-wrapper" and "background" to match the height of the contents of the sections within the "sections-wrapper".
This is because the "sections-wrapper" doesn't know automagically how tall is the stuff within itself, so we must tell it ourselves. The downside is that we must always be updating this values when the contents change height within the wrapper. Not too bad.
so if the stuff within my wrapper is eg. 1200px:
$('.background').css('height', '1200px');
$('#sections-wrapper').css('height', '1200px');

Setting two element's position(relative) using javascript and css - Stopping them move across

I'm having trouble with setting 2 div's position without one of them moving to the right/left the width of the other div. They push any elements either side over by they're own width.
What I mean by this, a visual:
How can I stop this from happening, whilst keeping both of the divs relative?
EDIT:
I realize, absolute is right for what I need as found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/. However... I need them to be draggable, but if the #wrapper is set to relative, then they can't be dragged. Is there a way to make the elements so that they can be draggable with the #wrapper being relative?
Link to example http://jsfiddle.net/QddTt/13/

Found out the problem. My wrapper had z-index:-99; in there for some reason. Removing that allowed me to drag my elements when the wrapper was static.
So the main solution: setting the position to absolute for both elements.

How to expand a DIV without affecting other elements

I'm wondering how I could expand a 'div' without affecting the layout of the other elements in the page. Specifically, I'd like to achieve an effect similar to this - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/. If you hover your mouse over any product, you'll see that the box expands showing more information; however, other elements such as the product image below is not affected by the expansion.

use absolute position.
rather you can also achive the same effect by writing onhover event on the div with adding an additional div at that position with higher z-index.

use absolute positioning, and then you can grow/shrink the div and it won't effect any other elements around it.

Add position:absolute; to style of your div. This way it won't interfere with other elements but still overlap them, and you can specify any width and height to them.

Absolutely position your div and make sure the z-index is at the top level. It CAN be done using just CSS, but it'll probably be easier with js as well.

Stack a div under an absolutely positioned image that changes in scale

I used a jquery image scaling plugin for a large image on this page I am building: http://seans.ws/sandbox/test/thrive/
I am trying to put a navigation div below the image, but I cannot do so because the image is absolutely positioned, and the scale of the image changes, so I cannot just specify a padding-top value for the navigation to get it to show up under the photo.
Any help would be greatly appreciated.

I would put both image and navigation div in one container and specify absolute position on it (instead of image). It seems to be simplest and most straightforward solution.

First, does the image have to be absolutely positioned? Generally if you want the image to be placed relative to other elements on the page or you want other elements on the page to be placed relative to the image they are placed relative, sometimes within an absolutely positioned <div>
If you explain why the image has to be absolutely positioned there may be an easier solution.
Assuming that absolute positioning of the image is required, the only possibility I can imagine is either modifying the jQuery plugin or making a second javascript to edit the padding-top as the image is resized.
If you need the image absolutely positioned on the page but relatively positioned to all other elements, I suggest putting the image and the content (which you want to appear underneath it) inside of an absolutely positioned <div> element, but leaving them each relatively positioned.

You could get the height value, and then work out how much padding you need.
var myheight = $('.maxAtOrigImageSize').height();
$('.nav').css('paddingTop', myheight+'px');
However, you would need to add an event for when the window changes size, so that if the user adjusts the window size, you can update the padding of the nav.
I'm answering your question, but I feel there is a cleaner solution. I would create a containing DIV for the resized image to sit in, and follow that with a nav DIV. The nav would always naturally be in the right place when resized, at the bottom of the image. You may want to consider changing the way you implement this.