• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 819
  • Last Modified:

Problem with fixed DIV in IE & Firefox

Hi there,

I have designed my perfonal portfolio website www.manalelias.com and I'm encountering one specific problem both in Internet Explorer and Firefox. I am an amateur and would really appreciate an expert's help.

My navigation bar and the div below it (solid color) are absolute but I have applied the following javascript to keep them fixed (meaning they remain apparent/fixed when scrolling sideways):

<script type="text/javascript">
<!--
window.pos = function() {
  if (window.scrollX != null && window.scrollY != null) return { x: window.scrollX, y : window.scrollY };
  else return { x: document.body.parentNode.scrollLeft, y : document.body.parentNode.scrollTop };
};

window.onscroll = function(e) {
  document.getElementById('navigation').style.left = window.pos().x + 'px';
  document.getElementById('under_nav').style.left = window.pos().x + 'px';
};
-->
</script>


The probelm in IE and Firefox is major jerking of the navigation bar when scrolling sideways. I do not have this problem is Safari.

Thanks in advance.

PS: the javascript is at the end of the code. Is it supposed to be in the head section??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>manal</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	width:18720px;
	height:408px;
	z-index:1;
	overflow: auto;
	left: 317px;
	top: 174px;
}
#apDiv3 {
	position:absolute;
	width:19203px;
	height:3000px;
	z-index:1;
	padding: 0px;
	margin-top: 0px;
	margin-left: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	overflow: auto;
	left: 0px;
	top: 0px;
}
-->
</style>
</head>

<body onload="MM_preloadImages('navi_on/on_04.png','navi_on/on_08.png','navi_on/on_17.png','navi_on/on_19.png','navi_on/on_22.png','navi_on/on_15.png','navi_on/on_11.png','navi_on/on_06.png','navi_on/on_02.png')">
<div id="apDiv3"><img src="portraits/back_01.jpg" width="769" height="3000" border="0" /><img src="portraits/back_02.jpg" width="807" height="3000" border="0" /><img src="portraits/back_03.jpg" width="812" height="3000" border="0" /><img src="portraits/back_04.jpg" width="805" height="3000" border="0" /><img src="portraits/back_05.jpg" width="846" height="3000" border="0" /><img src="portraits/back_06.jpg" width="1006" height="3000" border="0" /><img src="portraits/back_07.jpg" width="906" height="3000" border="0" /><img src="portraits/back_08.jpg" width="932" height="3000" border="0" /><img src="portraits/back_09.jpg" width="880" height="3000" border="0" /><img src="portraits/back_10.jpg" width="765" height="3000" border="0" /><img src="portraits/back_11.jpg" width="930" height="3000" border="0" /><img src="portraits/back_12.jpg" width="1155" height="3000" border="0" /><img src="portraits/back_13.jpg" width="911" height="3000" border="0" /><img src="portraits/back_14.jpg" width="909" height="3000" border="0" /><img src="portraits/back_15.jpg" width="914" height="3000" border="0" /><img src="portraits/back_16.jpg" width="1065" height="3000" border="0" /><img src="portraits/back_17.jpg" width="1011" height="3000" border="0" /><img src="portraits/back_18.jpg" width="984" height="3000" border="0" /><img src="portraits/back_19.jpg" width="1010" height="3000" border="0" /><img src="portraits/back_20.jpg" width="991" height="3000" border="0" /><img src="portraits/back_21.jpg" width="795" height="3000" border="0" /></div>
<div id="navigation">
  <p><img src="navi_off/off_01.png" width="201" height="135" border="0" /><a href="nad_design.html"><img src="navi_off/off_02.png" width="134" height="21" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','navi_on/on_02.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="navi_off/off_04.png" alt="dxboards" width="175" height="22" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','navi_on/on_04.png',1)" onmouseout="MM_swapImgRestore()" /><a href="cure.html"><img src="navi_off/off_06.png" width="156" height="19" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','navi_on/on_06.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="navi_off/off_08.png" alt="more" width="194" height="23" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','navi_on/on_08.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_10.png" width="201" height="43" border="0" /><a href="documentary.html"><img src="navi_off/off_11.png" width="134" height="24" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','navi_on/on_11.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="portraits.html"><img src="navi_on/on_13.png" width="118" height="19" border="0" /></a><a href="product_industrial.html"><img src="navi_off/off_15.png" width="194" height="22" border="0" id="Image7" onmouseover="MM_swapImage('Image7','','navi_on/on_15.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="navi_off/off_17.png" alt="other" width="173" height="19" border="0" id="Image8" onmouseover="MM_swapImage('Image8','','navi_on/on_17.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_19.png" alt="collaboration" width="126" height="20" border="0" id="Image9" onmouseover="MM_swapImage('Image9','','navi_on/on_19.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_21.png" width="201" height="36" border="0" /><img src="navi_off/off_22.png" alt="about" width="118" height="10" border="0" id="Image10" onmouseover="MM_swapImage('Image10','','navi_on/on_22.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_24.png" width="201" height="13" border="0" /></p>
</div>
<div id="under_nav"></div>
<div id="apDiv2"><img src="portraits/portraits_01.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_02.jpg" width="626" height="408" border="0" /><img src="portraits/portraits_03.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_04.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_05.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_10.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_11.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_12.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_27.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_13.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_06.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_07.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_08.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_09.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_14.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_15.jpg" width="632" height="408" border="0" /><img src="portraits/portraits_16.jpg" width="632" height="408" border="0" /><img src="portraits/portraits_17.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_18.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_19.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_20.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_21.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_22.jpg" width="628" height="408" border="0" /><img src="portraits/portraits_23.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_24.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_25.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_26.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_28.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_29.jpg" width="635" height="408" border="0" /><img src="portraits/portraits_30.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_31.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_32.jpg" width="609" height="408" border="0" /></div>
<div class="text" id="text">
  <p>BRIEF: NAD Design Solutions is an existing design agency based in Portugal with <br />
    branches in Dubai &amp; Angola. Recreate the company's philosophy/services/brand identity.<br />
    RESPONSE: From a vague mission &amp; style, NAD has been transformed into a progressive <br />
    cutting-edge design agency whose services are specialized in the field of INTERACTION <br />
    DESIGN. &quot;We are a collaborative agency where multi-disciplinary people from different <br />
    corners unite &amp; work together for specific NAD projects. We seek to enhance our relationship <br />
    as humans with design: instead of dictating the latter, we turn it into an interacitve two-sided relationship which might, with time, progress &amp; evolve to have a number of significant <br />
    outcomes. Our relationship with objects &amp; spaces is one that has much impact on our lives. <br />
    Our work is driven by analyzing &amp; observing society, its different groups &amp; associate behaviors. That is why research &amp; data visualization are a dominant tool. Our services include site-<br />
    specific &amp; interactive digital installations; motion graphics for live concerts; content for mobile <br />
  &amp; broadcast; web &amp; information design.&quot;</p>
  <p>BRANDING STYLE: Graphics &amp; imagery are based on NAD's creative approach as well as <br />
    its dominant tools: SPACE (captured through photography) &amp; DATA VISUALIZATION.</p>
</div>
<div class="close" id="closeicon"><a href="nad_design.html"><img src="close.jpg" alt="Close" width="11" height="11" border="0" /></a></div>
<script type="text/javascript">
<!--
window.pos = function() {
  if (window.scrollX != null && window.scrollY != null) return { x: window.scrollX, y : window.scrollY };
  else return { x: document.body.parentNode.scrollLeft, y : document.body.parentNode.scrollTop };
};

window.onscroll = function(e) {
  document.getElementById('navigation').style.left = window.pos().x + 'px';
  document.getElementById('under_nav').style.left = window.pos().x + 'px';
};
-->
</script>
</body></html>

Open in new window

0
manal87
Asked:
manal87
  • 32
  • 17
  • 15
  • +1
2 Solutions
 
Ali KayahanFull Stack DeveloperCommented:
Why you just didnt use position:fixed; instead of javascript ?
0
 
manal87Author Commented:
Because if i simply use position:fixed, the DIV will be fixed both horizontally and vertically.

I want it to remain fixed ONLY when scrolling sideways. In other words, i don't want it to "follow" the viewer when he/she is scrolling up&down.

That's why I was advised by an expert to use javascript.

Now the problem is the jerking in IE and Firefox.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
see example here , hope it helps  

http://jsfiddle.net/F7Bme/
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
manal87Author Commented:
I've already applied a javascript that works great, I just need a conditional statement for IE & Firefox that will stop the jerking. I've never applied conditional statements for other browsers so I don't know how to target this problem specifically.
0
 
manal87Author Commented:
Thank you, I appreciate it.
0
 
Tom BeckCommented:
Hi,
I'm just monitoring this question. Your script does not work in any browser except Safari without jerking, so an IE exception will not be enough. The sample supplied by @erdincgc, although it scrolls the wrong way, uses jquery, not just javascript, and does not jerk in any browser. You should take another look.
0
 
manal87Author Commented:
ok I'm a complete amateur so i don't know where to place the code and how. What do I change in the jquery for the navigation bar to scroll the right way? (fixed sideways).
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
instead of pure JS  try Jquery powered version which seems to work to me.
with fixed and strict positioning something like

#navigation{
    position:fixed;
    bottom:0px;
    left:0px;
}


 
$(window).scroll(function(){
    $('#footer').css('left','-'+$(window).scrollLeft());
});

Open in new window


Jquery plugin must be added of course  ,  preferably use ;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
$('#footer').css('left','-'+$(window).scrollLeft());
should be
$('#navigation').css('left','-'+$(window).scrollLeft());
for you

for fixing in other direction just use similar -top for left-.
0
 
manal87Author Commented:
ok I inserted this in the <head> section:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>


And this in the body:
<script type="text/javascript">
$(window).scroll(function(){
$('#navigation').css('top','-'+$(window).scrollTop());
});
</script>


As you can see i replaced 'left' with 'top' and scrollLeft with scrollTop
But the navigation bar remains fixed both ways .. i don't want it fixed when scrolling up and down .. only sideways.
0
 
manal87Author Commented:
I tried it on IE and it doesn't jerk anymore so that's perfect, thank you.
I just need it to be fixed horizontally ONLY.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
$('#navigation').css('top','-'+$(window).scrollTop());
fixes your nav bar when you scroll up and down ...
i think you need the original code which use scrollLeft

But additionally it seems position:fixed is not suitable for you ,
position: relative; or absolute should do the trick.
0
 
manal87Author Commented:
position: relative and absolute do not work. Only position: fixed does.

I put in the original code like this:

<script type="text/javascript">
var leftInit = $("#navigation").offset().left;
var top = $('#navigation').offset().top - parseFloat($('#navigation').css('margin-top').replace(/auto/, 0));


$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('#navigation').addClass('fixed');
    } else {
        // otherwise remove it
        $('#navigation').removeClass('fixed');
    }
   
    $("#navigation").offset({
        left: x + leftInit
    });
   
});
</script>


But the navigation bar is still fixed both horizontally and vertically.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
you have to change position: fixed to relative or better to absolute


then use this -tested- code

<script type="text/javascript">
$(window).scroll(function(){
  //  alert($(window).scrollLeft());
$('#navigation').css('left',''+$(window).scrollLeft()+"px");
$('#under_nav').css('left',''+$(window).scrollLeft()+"px");
});
</script>
0
 
manal87Author Commented:
Ok I put in exactly the code you gave me.

I tried both position: relative and absolute in the CSS. They both don't work.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
I can see it's working in your page http://www.manalelias.com/ ....

navigation div is fixed when you move slider to right and left and moving when you slide up and down.
isn't this the behavior you want ?
0
 
manal87Author Commented:
No that is not the behavior I want.
On the index page of www.manalelias.com the navigation bar moves with you sideways AND up&down.
I want it to move sideways ONLY, like on http://www.manalelias.com/nad_design.html
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
http://www.manalelias.com/
and
http://www.manalelias.com/nad_design.html
seems the same in Firefox,Opera and Chrome which are compatible with web standarts.

The problem is in IE (not a surprise ,right )
Something like below in head section can solve the IE prob.

<!--[if lte IE 7]>
<style>
#navigation {
position : fixed;
}
</style>
<![endif]-->
0
 
manal87Author Commented:
I think there is still a misunderstanding as to what I am trying to achieve:
As the viewer scrolls sideways: navigation bar scrolls as well
As the viewer scrolls up&down: navigation bar stays in its spot, in other words, doesn't do anything.

I have been testing your jquery code on the index page only. But the reason why http://www.manalelias.com/ and http://www.manalelias.com/nad_design.html look the same is because when I tried your jquery code on the index page, I switched to position:fixed in CSS and that was obviously applied to all the other pages once i uploaded the CSS to the remote site. So please excuse my last comment, i was mistaken. Let us just focus on the index page.

On the contrary to what you said in your last comment, your jquery code is working ONLY in IE. It is only in IE that the navigation bar scrolls sideways, and remains in its spot when scrolling up & down (which is what i have been trying to achieve and what i think is not being understood).

I have now gone back to the old javascript code so that you understand the result that i am trying to achieve. The only problem with the old javascript code is the jerking in all browers (except safari).

The good thing about YOUR jquery code is that it stopped the jerking ... but the navigation bar still scrolls in both ways (except in IE.)
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
Ok, lets make things clear (for me)

1-When you scroll to right you want the navigation div scroll along with the page and always keep it's place on screen fixed.
2-When you scroll to down you want it to behave like position:fixed element and even if you scroll to bottom of the page you will be able to click in it .

Are these  right?

If so beside using the jquery code(to reposition when you scroll to left) using position:fixed should solve this.
Or if you dont want navigation move down with the page when you scroll down just leave position:absolute as it is in online version now.

But before discussing more about these situations i wonder why this page scrolls down ? ... there is nothing in the bottom of your page? I mean if you dont scroll down (as expected) there is no need to fix or scroll anything down  :)
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
btw for any type of usage using a similar jquery code for up/down scrolling can be added additionally.
You can control scrollTop with js as you do with scrollLeft. (to let or disable scrolling down)
0
 
manal87Author Commented:
I want the DIV to behave like position:fixed ONLY when scrolling left&right.

I DO NOT want the div to behave like position:fixed when scrolling to the bottom of the page.

So I DO NOT want to be able to click on the DIV when scrolling to the bottom of the page. The DIV will not show when scolling to the bottom of the page (it remains in its initial place).

I really don't know how to be any clearer. If you go to manalelias.com right now, you will understand exactly what i want. The only problem is the jerking.
0
 
manal87Author Commented:
And the reason why there is the option to scroll to the bottom of the page (even though there is nothing) is because if the person is using a bigger monitor, the background image will end and you will get ugly white space. I do not know how to determine the size of the browser and avoid scrolling.

For example this website http://www.heartscryindia.org/ does not have any scrolling. It adapts to the size of the viewer's browser/monitor. I do not know how to achieve that. I would like to though, but that is another discussion i guess.
0
 
Tom BeckCommented:
I'm not sure how this solution got so far off track. @erdincgc's sample code in post ID:35717043 worked perfectly, it just needed to be changed to lock the object the other direction. I altered it myself but did not post because I thought @erdincgc would. Here's what I did and it worked perfectly.
var topInit = $(".scroll_fixed").offset().top;
var left = $('.scroll_fixed').offset().left - parseFloat($('.scroll_fixed').css('margin-left').replace(/auto/, 0));


$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (x <= left) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }
    
    $(".scroll_fixed").offset({
        top: y + topInit
    });
    
});

Open in new window

0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
Maybe there are some other browser plugins spoiling things but since my post ID#35726787 your homepage is doing exactly what you want. i've tested all IE , Firefox, Opera, Chrome and also Safari . Weird ...

Can  tommyBoy any other friend test and tell us if navigation is fixed or not while scrolling down.

PS: I really wonder why the page needs to be scrolled down.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
pardon me , you'd told that already ... just saw that :)
0
 
manal87Author Commented:
erdingc,

I repeat, since your post D#35726787, my homepage is doing exactly what I want BECAUSE I removed jquery and went back to my old javascript code because that is the result i want. Again, the problem with the old javascript code is the jerking which remains.

tommyBoy,

I put in exactly the code you gave me, along with <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
in the head section. Result: the navigation bar is still fixed in BOTH directions.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
I examined the sample page you told. That page uses a Jquery plugin named supersized which is really cool.
Implementing that to your page would be so nice.
If you interested in here is the main page where you can learn more about.
http://www.buildinternet.com/project/supersized/

0
 
manal87Author Commented:
erdincgc,

thanks for the link :)
I would love to apply that jquery but I have no idea how. I downloaded the zip file and it contains html, css and js ... Don't know what to do with them :s
0
 
Tom BeckCommented:
I'm posting my full test of @erdincgc's jquery solution posted at ID:35717043 with the necessary modifications to make it fixed in the opposite direction. I made one critical change to my last post of the script on this line: top: y + topInit. It should have been top: topInit.

Tested in IE, FF, Chrome, Opera, Safari, and IE Compatibility mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">
.scroll_fixed {
    position:absolute;
    left:210;  
}
.scroll_fixed.fixed {
    position:fixed;
    left:0;
}
.foo { background-color: red; width: 150px; height:150px;}
body { height: 5000px; width: 5000px;margin:0;padding:0 }
</style>
</head>
<body>
<div class="scroll_fixed foo"></div>
<div>    
Quis ipsum ullamcorper dolore vulputate commodo suscipit eum duis  delenit molestie nostrud qui velit molestie zzril at eum ut volutpat,  consequat feugait aliquip amet. Laoreet illum illum suscipit zzril  nonummy dolore, dolore accumsan. Et, augue at tincidunt wisi duis sed  amet feugiat nulla luptatum nisl ut facilisis. Et veniam velit feugait  accumsan magna veniam, nulla vulputate in vero erat duis ea, illum  consequat at, exerci, ullamcorper. Te, dignissim feugiat iusto enim  consequat velit enim enim ea autem nulla eum, accumsan. Tation nisl, eum  in vero blandit et dolore consequat veniam accumsan duis ut eros in  odio delenit. Luptatum hendrerit molestie, et ullamcorper, odio ex, nisl  odio odio iriure minim vel elit exerci dolore, feugait nostrud, dolore  dolor ut. 
Duis autem esse molestie euismod in commodo enim,  exerci qui quis dolore dignissim velit augue, esse et vel et sit iriure  te esse. Molestie autem ut consequat dignissim, facilisi eros quis, et  facilisis consectetuer laoreet aliquip. Suscipit tation dolor dignissim  ex nisl praesent et lobortis eu nulla laoreet zzril ea hendrerit in. 
Vel  nisl ut facilisis nulla veniam velit feugait accumsan magna veniam,  nulla vulputate in vero erat duis ea, illum consequat at, exerci,  ullamcorper duis, dignissim. Iusto iusto enim consequat velit enim enim  ea autem nulla eum, accumsan blandit nisl, eum in. Feugait blandit et  dolore consequat veniam accumsan duis ut eros in odio delenit ea  hendrerit molestie. 
    Ullamcorper iriure ut diam aliquam consequat  at lobortis adipiscing praesent, dolore augue. Feugait ad ex aliquam,  eros, eu consequat autem esse molestie euismod in commodo enim, exerci  qui quis dolore dignissim velit augue, esse et vel et sit. Nostrud te  esse ex autem ut consequat dignissim, facilisi eros quis, et facilisis  consectetuer laoreet aliquip eu tation dolor dignissim ex nisl. In et  lobortis eu nulla laoreet zzril ea hendrerit in sed, vel ut facilisi  vulputate, et enim duis et qui praesent hendrerit minim esse facilisis.  Erat autem delenit hendrerit lobortis lorem, te aliquip nostrud te wisi  iusto at eu dolor, vel, suscipit vel veniam vel quis lobortis tation  tation facilisis tation.
    </div>
<script type="text/javascript" language="javascript">

var topInit = $(".scroll_fixed").offset().top;
var left = $('.scroll_fixed').offset().left - parseFloat($('.scroll_fixed').css('margin-left').replace(/auto/, 0));


$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (x <= left) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }
    
    $(".scroll_fixed").offset({
        top: topInit
    });
    
});
</script>


</body>
</html>

Open in new window

0
 
manal87Author Commented:
tommyBoy,

still didn't work.
My navigation bar is #navigation
So obviously i replaced all .scroll_fixed with #navigation
Also, #navigation has a position:fixed in the CSS

I've attached both my HTML and CSS. I really don't see what i'm doing wrong.
@charset "UTF-8";
/* CSS Document */


#navigation {
	padding: 0px;
	margin-top: 154.8px;
	margin-left: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: fixed;
	z-index: 100;
	left: 0%;
	top: 0%;
	width: 204px;
	height: 426px;
}

#under_nav {
	padding: 0px;
	margin-top: 157px;
	margin-left: -10px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: fixed;
	z-index: 98;
	width: 237px;
	height: 425px;
	background-image: url(under_nav.jpg);
}
.info_icon {
	position: absolute;
	left: 290px;
	top: 173px;
	z-index: 97;
}

.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	line-height: 16pt;
	font-weight: normal;
	color: #666;
	height: 400px;
	width: 565px;
	position: absolute;
	z-index: 97;
	left: 339px;
	top: 193px;
	visibility: hidden;
}

.close {
	position: absolute;
	left: 296px;
	top: 176px;
	z-index: 97;
	visibility: hidden;
}

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>manal</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">

var topInit = $("#navigation").offset().top;
var left = $('#navigation').offset().left - parseFloat($('#navigation').css('margin-left').replace(/auto/, 0));


$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (x <= left) {
        // if so, ad the fixed class
        $('#navigation').addClass('fixed');
    } else {
        // otherwise remove it
        $('#navigation').removeClass('fixed');
    }
    
    $("#navigation").offset({
        top: topInit
    });
    
});
</script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	width:18720px;
	height:408px;
	z-index:1;
	overflow: auto;
	left: 317px;
	top: 174px;
}
#apDiv3 {
	position:absolute;
	width:19203px;
	height:3000px;
	z-index:1;
	padding: 0px;
	margin-top: 0px;
	margin-left: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	overflow: auto;
	left: 0px;
	top: 0px;
}
-->
</style>
</head>

<body onload="MM_preloadImages('navi_on/on_04.png','navi_on/on_08.png','navi_on/on_17.png','navi_on/on_19.png','navi_on/on_22.png','navi_on/on_15.png','navi_on/on_11.png','navi_on/on_06.png','navi_on/on_02.png')">
<div id="apDiv3"><img src="portraits/back_01.jpg" width="769" height="3000" border="0" /><img src="portraits/back_02.jpg" width="807" height="3000" border="0" /><img src="portraits/back_03.jpg" width="812" height="3000" border="0" /><img src="portraits/back_04.jpg" width="805" height="3000" border="0" /><img src="portraits/back_05.jpg" width="846" height="3000" border="0" /><img src="portraits/back_06.jpg" width="1006" height="3000" border="0" /><img src="portraits/back_07.jpg" width="906" height="3000" border="0" /><img src="portraits/back_08.jpg" width="932" height="3000" border="0" /><img src="portraits/back_09.jpg" width="880" height="3000" border="0" /><img src="portraits/back_10.jpg" width="765" height="3000" border="0" /><img src="portraits/back_11.jpg" width="930" height="3000" border="0" /><img src="portraits/back_12.jpg" width="1155" height="3000" border="0" /><img src="portraits/back_13.jpg" width="911" height="3000" border="0" /><img src="portraits/back_14.jpg" width="909" height="3000" border="0" /><img src="portraits/back_15.jpg" width="914" height="3000" border="0" /><img src="portraits/back_16.jpg" width="1065" height="3000" border="0" /><img src="portraits/back_17.jpg" width="1011" height="3000" border="0" /><img src="portraits/back_18.jpg" width="984" height="3000" border="0" /><img src="portraits/back_19.jpg" width="1010" height="3000" border="0" /><img src="portraits/back_20.jpg" width="991" height="3000" border="0" /><img src="portraits/back_21.jpg" width="795" height="3000" border="0" /></div>
<div id="navigation">
  <p><img src="navi_off/off_01.png" width="201" height="135" border="0" /><a href="nad_design.html"><img src="navi_off/off_02.png" width="134" height="21" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','navi_on/on_02.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="navi_off/off_04.png" alt="dxboards" width="175" height="22" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','navi_on/on_04.png',1)" onmouseout="MM_swapImgRestore()" /><a href="cure.html"><img src="navi_off/off_06.png" width="156" height="19" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','navi_on/on_06.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="navi_off/off_08.png" alt="more" width="194" height="23" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','navi_on/on_08.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_10.png" width="201" height="43" border="0" /><a href="documentary.html"><img src="navi_off/off_11.png" width="134" height="24" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','navi_on/on_11.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="portraits.html"><img src="navi_on/on_13.png" width="118" height="19" border="0" /></a><a href="product_industrial.html"><img src="navi_off/off_15.png" width="194" height="22" border="0" id="Image7" onmouseover="MM_swapImage('Image7','','navi_on/on_15.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="navi_off/off_17.png" alt="other" width="173" height="19" border="0" id="Image8" onmouseover="MM_swapImage('Image8','','navi_on/on_17.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_19.png" alt="collaboration" width="126" height="20" border="0" id="Image9" onmouseover="MM_swapImage('Image9','','navi_on/on_19.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_21.png" width="201" height="36" border="0" /><img src="navi_off/off_22.png" alt="about" width="118" height="10" border="0" id="Image10" onmouseover="MM_swapImage('Image10','','navi_on/on_22.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_24.png" width="201" height="13" border="0" /></p>
</div>
<div id="under_nav"></div>
<div id="apDiv2"><img src="portraits/portraits_01.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_02.jpg" width="626" height="408" border="0" /><img src="portraits/portraits_03.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_04.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_05.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_10.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_11.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_12.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_27.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_13.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_06.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_07.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_08.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_09.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_14.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_15.jpg" width="632" height="408" border="0" /><img src="portraits/portraits_16.jpg" width="632" height="408" border="0" /><img src="portraits/portraits_17.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_18.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_19.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_20.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_21.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_22.jpg" width="628" height="408" border="0" /><img src="portraits/portraits_23.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_24.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_25.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_26.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_28.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_29.jpg" width="635" height="408" border="0" /><img src="portraits/portraits_30.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_31.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_32.jpg" width="609" height="408" border="0" /></div>
<div class="text" id="text">
  <p>BRIEF: NAD Design Solutions is an existing design agency based in Portugal with <br />
    branches in Dubai &amp; Angola. Recreate the company's philosophy/services/brand identity.<br />
    RESPONSE: From a vague mission &amp; style, NAD has been transformed into a progressive <br />
    cutting-edge design agency whose services are specialized in the field of INTERACTION <br />
    DESIGN. &quot;We are a collaborative agency where multi-disciplinary people from different <br />
    corners unite &amp; work together for specific NAD projects. We seek to enhance our relationship <br />
    as humans with design: instead of dictating the latter, we turn it into an interacitve two-sided relationship which might, with time, progress &amp; evolve to have a number of significant <br />
    outcomes. Our relationship with objects &amp; spaces is one that has much impact on our lives. <br />
    Our work is driven by analyzing &amp; observing society, its different groups &amp; associate behaviors. That is why research &amp; data visualization are a dominant tool. Our services include site-<br />
    specific &amp; interactive digital installations; motion graphics for live concerts; content for mobile <br />
  &amp; broadcast; web &amp; information design.&quot;</p>
  <p>BRANDING STYLE: Graphics &amp; imagery are based on NAD's creative approach as well as <br />
    its dominant tools: SPACE (captured through photography) &amp; DATA VISUALIZATION.</p>
</div>
<div class="close" id="closeicon"><a href="nad_design.html"><img src="close.jpg" alt="Close" width="11" height="11" border="0" /></a></div>
</body></html>

Open in new window

0
 
Tom BeckCommented:
Three things.

1.) As you said, you have position:fixed on the #navigation. This will override anything else you set and the #navigation will be fixed in both directions no matter what. Change it to position:absolute.

2.) You are using javascript to add class="fixed" to the #navigation, but you have not defined class fixed.

#navigation {
      padding: 0px;
      margin-top: 154.8px;
      margin-left: 0px;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
      position: absolute;      
      left: 0;
      top: 0;
      z-index: 100;
      width: 204px;
      height: 426px;
}
#navigation.fixed {
    position:fixed;
    left:0;
}

3.) You have the javascript in the head section of the page. There are parts of the script that run on load and need to access #navigation. You cannot access an element before it is rendered on the page. Move the javascript to the bottom of the page before the closing body tag.
0
 
manal87Author Commented:
tommyBoy,

thanks for the detailed explanation.
When i switch to position:absolute the DIV remains in place, does not scroll in either direction.
@charset "UTF-8";
/* CSS Document */


#navigation {
	padding: 0px;
	margin-top: 154.8px;
	margin-left: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: absolute;
	z-index: 100;
	left: 0%;
	top: 0%;
	width: 204px;
	height: 426px;
}

#under_nav {
	padding: 0px;
	margin-top: 157px;
	margin-left: -10px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: absolute;
	z-index: 98;
	width: 237px;
	height: 425px;
	background-image: url(under_nav.jpg);
}
.info_icon {
	position: absolute;
	left: 290px;
	top: 173px;
	z-index: 97;
}

.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	line-height: 16pt;
	font-weight: normal;
	color: #666;
	height: 400px;
	width: 565px;
	position: absolute;
	z-index: 97;
	left: 339px;
	top: 193px;
	visibility: hidden;
}

.close {
	position: absolute;
	left: 296px;
	top: 176px;
	z-index: 97;
	visibility: hidden;
}

#navigation.fixed {
    position:fixed;
    left:0%;
}

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>manal</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	width:18720px;
	height:408px;
	z-index:1;
	overflow: auto;
	left: 317px;
	top: 174px;
}
#apDiv3 {
	position:absolute;
	width:19203px;
	height:3000px;
	z-index:1;
	padding: 0px;
	margin-top: 0px;
	margin-left: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	overflow: auto;
	left: 0px;
	top: 0px;
}
-->
</style>
</head>

<body onload="MM_preloadImages('navi_on/on_04.png','navi_on/on_08.png','navi_on/on_17.png','navi_on/on_19.png','navi_on/on_22.png','navi_on/on_15.png','navi_on/on_11.png','navi_on/on_06.png','navi_on/on_02.png')">
<div id="apDiv3"><img src="portraits/back_01.jpg" width="769" height="3000" border="0" /><img src="portraits/back_02.jpg" width="807" height="3000" border="0" /><img src="portraits/back_03.jpg" width="812" height="3000" border="0" /><img src="portraits/back_04.jpg" width="805" height="3000" border="0" /><img src="portraits/back_05.jpg" width="846" height="3000" border="0" /><img src="portraits/back_06.jpg" width="1006" height="3000" border="0" /><img src="portraits/back_07.jpg" width="906" height="3000" border="0" /><img src="portraits/back_08.jpg" width="932" height="3000" border="0" /><img src="portraits/back_09.jpg" width="880" height="3000" border="0" /><img src="portraits/back_10.jpg" width="765" height="3000" border="0" /><img src="portraits/back_11.jpg" width="930" height="3000" border="0" /><img src="portraits/back_12.jpg" width="1155" height="3000" border="0" /><img src="portraits/back_13.jpg" width="911" height="3000" border="0" /><img src="portraits/back_14.jpg" width="909" height="3000" border="0" /><img src="portraits/back_15.jpg" width="914" height="3000" border="0" /><img src="portraits/back_16.jpg" width="1065" height="3000" border="0" /><img src="portraits/back_17.jpg" width="1011" height="3000" border="0" /><img src="portraits/back_18.jpg" width="984" height="3000" border="0" /><img src="portraits/back_19.jpg" width="1010" height="3000" border="0" /><img src="portraits/back_20.jpg" width="991" height="3000" border="0" /><img src="portraits/back_21.jpg" width="795" height="3000" border="0" /></div>
<div id="navigation">
  <p><img src="navi_off/off_01.png" width="201" height="135" border="0" /><a href="nad_design.html"><img src="navi_off/off_02.png" width="134" height="21" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','navi_on/on_02.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="navi_off/off_04.png" alt="dxboards" width="175" height="22" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','navi_on/on_04.png',1)" onmouseout="MM_swapImgRestore()" /><a href="cure.html"><img src="navi_off/off_06.png" width="156" height="19" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','navi_on/on_06.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="navi_off/off_08.png" alt="more" width="194" height="23" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','navi_on/on_08.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_10.png" width="201" height="43" border="0" /><a href="documentary.html"><img src="navi_off/off_11.png" width="134" height="24" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','navi_on/on_11.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="portraits.html"><img src="navi_on/on_13.png" width="118" height="19" border="0" /></a><a href="product_industrial.html"><img src="navi_off/off_15.png" width="194" height="22" border="0" id="Image7" onmouseover="MM_swapImage('Image7','','navi_on/on_15.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="navi_off/off_17.png" alt="other" width="173" height="19" border="0" id="Image8" onmouseover="MM_swapImage('Image8','','navi_on/on_17.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_19.png" alt="collaboration" width="126" height="20" border="0" id="Image9" onmouseover="MM_swapImage('Image9','','navi_on/on_19.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_21.png" width="201" height="36" border="0" /><img src="navi_off/off_22.png" alt="about" width="118" height="10" border="0" id="Image10" onmouseover="MM_swapImage('Image10','','navi_on/on_22.png',1)" onmouseout="MM_swapImgRestore()" /><img src="navi_off/off_24.png" width="201" height="13" border="0" /></p>
</div>
<div id="under_nav"></div>
<div id="apDiv2"><img src="portraits/portraits_01.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_02.jpg" width="626" height="408" border="0" /><img src="portraits/portraits_03.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_04.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_05.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_10.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_11.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_12.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_27.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_13.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_06.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_07.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_08.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_09.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_14.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_15.jpg" width="632" height="408" border="0" /><img src="portraits/portraits_16.jpg" width="632" height="408" border="0" /><img src="portraits/portraits_17.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_18.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_19.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_20.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_21.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_22.jpg" width="628" height="408" border="0" /><img src="portraits/portraits_23.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_24.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_25.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_26.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_28.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_29.jpg" width="635" height="408" border="0" /><img src="portraits/portraits_30.jpg" width="627" height="408" border="0" /><img src="portraits/portraits_31.jpg" width="291" height="408" border="0" /><img src="portraits/portraits_32.jpg" width="609" height="408" border="0" /></div>
<div class="text" id="text">
  <p>BRIEF: NAD Design Solutions is an existing design agency based in Portugal with <br />
    branches in Dubai &amp; Angola. Recreate the company's philosophy/services/brand identity.<br />
    RESPONSE: From a vague mission &amp; style, NAD has been transformed into a progressive <br />
    cutting-edge design agency whose services are specialized in the field of INTERACTION <br />
    DESIGN. &quot;We are a collaborative agency where multi-disciplinary people from different <br />
    corners unite &amp; work together for specific NAD projects. We seek to enhance our relationship <br />
    as humans with design: instead of dictating the latter, we turn it into an interacitve two-sided relationship which might, with time, progress &amp; evolve to have a number of significant <br />
    outcomes. Our relationship with objects &amp; spaces is one that has much impact on our lives. <br />
    Our work is driven by analyzing &amp; observing society, its different groups &amp; associate behaviors. That is why research &amp; data visualization are a dominant tool. Our services include site-<br />
    specific &amp; interactive digital installations; motion graphics for live concerts; content for mobile <br />
  &amp; broadcast; web &amp; information design.&quot;</p>
  <p>BRANDING STYLE: Graphics &amp; imagery are based on NAD's creative approach as well as <br />
    its dominant tools: SPACE (captured through photography) &amp; DATA VISUALIZATION.</p>
</div>
<div class="close" id="closeicon"><a href="nad_design.html"><img src="close.jpg" alt="Close" width="11" height="11" border="0" /></a></div>
<script type="text/javascript" language="javascript">

var topInit = $("#navigation").offset().top;
var left = $('#navigation').offset().left - parseFloat($('#navigation').css('margin-left').replace(/auto/, 0));


$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (x <= left) {
        // if so, ad the fixed class
        $('#navigation').addClass('fixed');
    } else {
        // otherwise remove it
        $('#navigation').removeClass('fixed');
    }
    
    $("#navigation").offset({
        top: topInit
    });
    
});
</script>
</body></html>

Open in new window

0
 
Tom BeckCommented:
I'm mobile at the moment. I can look again later. Can you change one thing just for giggles? From my experience, when you want an element locked to the top, left, you say left: 0; top:0; without "px" or "%". Probably won't make a difference, but I've never seen it done that way. Looks strange.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
hi again :)
 
if you have time i can make a supersized version of your page soon. But for 2 days i'll have limited time to be online.
Until then you all take care .. bb
0
 
Tom BeckCommented:
ok, I pasted your code up just as you posted it, replaced the images with something local, and tested. It fixed the navigation when scrolling right and left, un-fixed it when scrolling up and down. It worked the same as my test page except that up and down scrolling was not as smooth on your page. Have not been able to determine why yet. Maybe the navigation position is not able to redraw as quickly because of the greater amount of content on the actual page.
0
 
manal87Author Commented:
tommyBoy,

I added the % after having tried the code several times, so I tried with and without, no difference.
0
 
manal87Author Commented:
Also, when I test your code (ID: 35730080), the red scroll doesn't scroll. Neither horizontally nor verticallly.
0
 
Tom BeckCommented:
Are you saying you pasted my sample in ID: 35730080, unmodified, to a new html page and it did not work?

Do you have javascript turned off in your browser? What browser are you using and what version?

If we cannot get that simple one working on your system, there's not much hope of getting it working on the actual page.
0
 
manal87Author Commented:
I got rid of the link in the header and downloaded jquery instead. It's finally working.

Is there a way to apply the jquery to both #navigation and #under_nav?
I've tried inserting the script twice, inserting #undernav within the script, nothing worked.
0
 
Tom BeckCommented:
You would need this:

#under_nav.fixed {
    position:fixed;
    left:0;
}
0
 
manal87Author Commented:
I would need that for the CSS .. but where do I add in #under_nav in the script itself?
0
 
Tom BeckCommented:
Replace every instance of #navigation with #under_nav.
0
 
manal87Author Commented:
I don't want to replace #navigation with #under_nav. I want to add #under_nav to the script so that it applies to both #navigation and #under_nav.
0
 
Tom BeckCommented:
I thought you said you duplicated the script to use for the under_nav. Apply the change to the duplicate, or modify the original to change both at once.
0
 
manal87Author Commented:
i'm new at this so thanks for bearing with me!
0
 
manal87Author Commented:
Thanks guys, I appreciate your help and your patience. And please forgive my ignorance :p

tommyBoy,
any idea how i can solve the issue of avoiding unnecessary white space once the background image is over?
0
 
Tom BeckCommented:
You have a series of images in a div (apDiv3) titled "back_01.jpg", "back_02.jpg", etc. that make up the background. They all look very similar. You could save the end user from downloading all those images by just applying one image to the background of the page and let it repeat. Take out the apDiv3 container and add this css: body { background-image:url(portraits/back_01.jpg); }

Thanks for the points.
0
 
manal87Author Commented:
I uploaded the homepage with the jquery and just noticed something. There's no more jerking but the second i begin to scroll, the navigation bar drops down a few pixels and stays there. Any idea why?
0
 
manal87Author Commented:
Also, that happened only after duplicating the script and replacing #navigation with #under_nav
0
 
Tom BeckCommented:
I see that. My guess is that we are not allowing for some padding or margin and it's being removed when the script runs. Try adding experimenting with adding a few pixels to this line:

$("#under_nav").offset({
        top: topInit + 3
    });

I can take a closer look later if you don't get it.
0
 
Tom BeckCommented:
Actually, subtracting makes more sense.
0
 
manal87Author Commented:
i modified the image instead of the script. Made navigation and undernav one image.
In my post ID: 35737263, what I meant was is there a way to determine the height of the browser? Because if the viewer is using a wider monitor and has the option to stretch the browser even further, the background image will be interrupted and white space will appear.
0
 
manal87Author Commented:
That's actually the reason why my page scrolls down for so long even though there's nothing there. To avoid the ugly white space.
0
 
Tom BeckCommented:
There are ways to determine the height of the user's browser. The most cross-browser friendly way is with jquery.

    var h = $(window).height();
    var w = $(window).width();

You would have to run this both onload and onresize to get the values and apply them.

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

With resizeFrame being the function that sets the new size for the background.

At the very least, to avoid the white space, you could just add a background color to the body element so that if someone scrolls past the background images, they would see gray instead of white.  This gray would work: body{background-color:#909090}
0
 
manal87Author Commented:
What I want to achieve is similar to this:
http://buildinternet.com/project/supersized/core/3.1/core-random.html

Except in my case, there would be no VERTICAL scrollbar. Only a HORIZONTAL scrollbar since the viewer needs to scroll sideways.

I tried applying an older version of the jquery as explained here: http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

But all i get is a distorted background image with no scroll bars at all.
My background image is 19185x1160
0
 
Tom BeckCommented:
The jquery plugin cited is designed to resize the background image to the size of the user's browser window. You have a horizontal row of pictures that stretches way beyond the width of any browser window. How is this plug-in going to help? If you are trying to make sure that there is a background behind every photo regardless of the user's monitor size, resolution or zoom level, the only way is a repeating background image or solid color. Then no white background ever shows. The images you are using for your background can easily be adapted for a repeating image. I don't understand the resistance. Not only will you solve the white background issue at the end of the row of images, eliminate the extra downloading of all those background images, you will also eliminate the unnecessary up and down scroll bar when there is no content at the bottom.
0
 
manal87Author Commented:
The sliced images form the entire background image. I can't use one slice and repeat it because the image won't look right. If you look closely the white barriers and sky will be interrupted. And I don't understand how repeat will help avoid the scrolling to the end of the page. I've intentionally extended the image all the way down to avoid having white space if the browser is stretched (considering large monitors as well)
0
 
manal87Author Commented:
Oh and i gave you that example not considering the resizing aspect. I obviously don't want the background image to be resized. Just fixed browser height.
0
 
Tom BeckCommented:
Try this. Paste the markup into a new html page and put the image in the proper path so the page can find it.

Load the page and notice there are no scrollbars because background images and background colors don't count as content. Zoom all the way out. No white background. When you add your long horizontal row of images you will only have a scrollbar at the bottom to go left and right. No scrollbar to go up and down (if your window is large enough). No need for the end user to download 20 images just to get an incomplete background.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<title>Untitled</title>
<style type="text/css">
body {background-color:#909090}
#wrapper {position:absolute;top:0;left:0;width:100%;height:100%;background:url(back_01_modified.jpg) repeat-x}
</style>
  </head>

<body>
<div id="wrapper">&nbsp;</div>
</body>

</html>

Open in new window

back-01-modified.jpg
0
 
manal87Author Commented:
Thanks tommyBoy, much better.
The only problem with not having the vertical scroll bar is when using a smaller monitor (i.e. 14''): even when the browser is maximized, not everything fits. So a few pixels of the row of images are cropped off and the bottom part of the background doesn't show either and there is no option to scroll down.
0
 
Tom BeckCommented:
Scroll bars will appear when ever block elements in the html markup extend past the edges of the browser window. You are getting precisely what you asked for with your layout. See the attached diagram.
pageLayout.jpg
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
i think the last problem -small screen scroll bar requirement- can be solved by adding these lines to the bottom of your html.

client_screenheight=$(window).height();
if(client_screenheight)$('#containerId').css({overflow: 'scroll'});
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
of course you will need to check heigt against a fixed value like 600px
as
if(client_screenheight>600)  
0
 
manal87Author Commented:
I can't thank you guys enough for your help.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 32
  • 17
  • 15
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now