Fixing the position of a div on webpage

Go To StackoverFlow.com

0

I have a div whose position has been fixed. Everything is fine till the window is re-sized. On re-size, when we scroll to the rightmost part of the webpage, the fixed div still remains at the left-most end of screen. I wish it to scroll left along with the window, but not scroll down along with the window.

If I am unclear in expressing my doubt. You can have a live demo here.

Search for any product say Apple Ipod Touch there. Once the results are displayed , resize window and scroll to rightmost part .

Can anyone suggest some CSS or Javascript to resolve the same.

Thanks !

2012-04-04 19:03
by Prashant Singh
Post your code, please - Blender 2012-04-04 19:05
Code or CSS of the webpage ? You can see the demo and the CSS used ther - Prashant Singh 2012-04-04 19:07
Are you referring to the "History" container - Kris Hollenbeck 2012-04-04 19:08
Also is the horizontal scrolling intentional - Kris Hollenbeck 2012-04-04 19:08
No, I am talking about the slider present on the lef - Prashant Singh 2012-04-04 19:09
Horizontal scrolling may be required for systems with smaller resolutio - Prashant Singh 2012-04-04 19:10
With position fixed it will stay exactly in that spot all of the time. Right now your search results are over the top of it. If you set a z-index it will remain on top but be in the way of your search results - Kris Hollenbeck 2012-04-04 19:16
Can we have a div which will contain the slider and will be movable and our slider will remain fixed w.r.t that movable div. Can this be implemented - Prashant Singh 2012-04-04 19:20
SO are you talking like possibly a draggable div that the user can move around - Kris Hollenbeck 2012-04-04 19:35


1

I would restructure your layout and remove position fixed. For example something like this. Obviously this isn't exactly like your code. But the concept is the same. If you have your div with the control inside of the same container as the results and the history, it should then move with it.

#wrapper {
width:960px;
margin:0 auto 0 auto;
}

#left-col,
#right-col {
width:100px;
float:left;
}

#mid-col {
width:710px;
float:left;
}

<!-- holds your column containers -->
<div id="wrapper">

<!-- your control -->
<div id="left-col"> 
</div>

<!-- your search results -->
<div id="mid-col"> 
</div>

<!-- your history -->
<div id="right-col"> 
</div>

</div>
2012-04-04 19:23
by Kris Hollenbeck


0

Either use CSS Media Queries or Javascript. A quick way is on Jquery $(window).resize method.

2012-04-04 19:07
by Panagiotis


0

I think you just need to remove

position: fixed from #completeSlider

at least that worked for me on chrome.

EDIT:

then I'd say you need to use JQuery to handle this. You can't have both a fixed positioning and still relative to other elements. Still remove position: fixed as mentioned above and add some JQuery magic like follows:

$(window).scroll(function() {

$('#completeSlider').offset({ top: $(window).scrollTop(), left: 0});

});

Seems like the standard $ for jQuery is reserved for some other function on your page... try this:

jQuery(window).scroll(function() {

    jQuery('#completeSlider').offset({ top: jQuery(window).scrollTop(), left: 0});

});
2012-04-04 19:10
by Khôi
That will make the slider go UP and hide on scroll DOWN, which is highly undesirabl - Prashant Singh 2012-04-04 19:12
@PrashantSingh I've updated the answe - Khôi 2012-04-04 19:28
USe $s instead of $ - Prashant Singh 2012-04-04 19:48
Ads