manal87
asked on
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.s
};
window.onscroll = function(e) {
document.getElementById('n
document.getElementById('u
};
-->
</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??
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.s
};
window.onscroll = function(e) {
document.getElementById('n
document.getElementById('u
};
-->
</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 & Angola. Recreate the company's philosophy/services/brand identity.<br />
RESPONSE: From a vague mission & style, NAD has been transformed into a progressive <br />
cutting-edge design agency whose services are specialized in the field of INTERACTION <br />
DESIGN. "We are a collaborative agency where multi-disciplinary people from different <br />
corners unite & 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 & evolve to have a number of significant <br />
outcomes. Our relationship with objects & spaces is one that has much impact on our lives. <br />
Our work is driven by analyzing & observing society, its different groups & associate behaviors. That is why research & data visualization are a dominant tool. Our services include site-<br />
specific & interactive digital installations; motion graphics for live concerts; content for mobile <br />
& broadcast; web & information design."</p>
<p>BRANDING STYLE: Graphics & imagery are based on NAD's creative approach as well as <br />
its dominant tools: SPACE (captured through photography) & 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>
Ali Kayahan
Why you just didnt use position:fixed; instead of javascript ?
ASKER
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.
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.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
ASKER
Thank you, I appreciate it.
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.
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.
ASKER
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).
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;
}
Jquery plugin must be added of course , preferably use ;
<script src="//ajax.googleapis.com
with fixed and strict positioning something like
#navigation{
position:fixed;
bottom:0px;
left:0px;
}
$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});Jquery plugin must be added of course , preferably use ;
<script src="//ajax.googleapis.com
$('#footer').css('left','-
should be
$('#navigation').css('left
for you
for fixing in other direction just use similar -top for left-.
should be
$('#navigation').css('left
for you
for fixing in other direction just use similar -top for left-.
ASKER
ok I inserted this in the <head> section:
<script src="//ajax.googleapis.com
And this in the body:
<script type="text/javascript">
$(window).scroll(function(
$('#navigation').css('top'
});
</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.
<script src="//ajax.googleapis.com
And this in the body:
<script type="text/javascript">
$(window).scroll(function(
$('#navigation').css('top'
});
</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.
ASKER
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.
I just need it to be fixed horizontally ONLY.
$('#navigation').css('top'
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.
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.
ASKER
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().
var top = $('#navigation').offset().
$(window).scroll(function(
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(
} else {
// otherwise remove it
$('#navigation').removeCla
}
$("#navigation").offset({
left: x + leftInit
});
});
</script>
But the navigation bar is still fixed both horizontally and vertically.
I put in the original code like this:
<script type="text/javascript">
var leftInit = $("#navigation").offset().
var top = $('#navigation').offset().
$(window).scroll(function(
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(
} else {
// otherwise remove it
$('#navigation').removeCla
}
$("#navigation").offset({
left: x + leftInit
});
});
</script>
But the navigation bar is still fixed both horizontally and vertically.
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
$('#under_nav').css('left'
});
</script>
then use this -tested- code
<script type="text/javascript">
$(window).scroll(function(
// alert($(window).scrollLeft
$('#navigation').css('left
$('#under_nav').css('left'
});
</script>
ASKER
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.
I tried both position: relative and absolute in the CSS. They both don't work.
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 ?
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 ?
ASKER
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
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
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]-->
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]-->
ASKER
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.)
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.)
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 :)
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 :)
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)
You can control scrollTop with js as you do with scrollLeft. (to let or disable scrolling down)
ASKER
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.
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.
ASKER
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.
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.
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
});
});
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.
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.
pardon me , you'd told that already ... just saw that :)
ASKER
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
in the head section. Result: the navigation bar is still fixed in BOTH directions.
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
in the head section. Result: the navigation bar is still fixed in BOTH directions.
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/
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/
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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;
}<!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 & Angola. Recreate the company's philosophy/services/brand identity.<br />
RESPONSE: From a vague mission & style, NAD has been transformed into a progressive <br />
cutting-edge design agency whose services are specialized in the field of INTERACTION <br />
DESIGN. "We are a collaborative agency where multi-disciplinary people from different <br />
corners unite & 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 & evolve to have a number of significant <br />
outcomes. Our relationship with objects & spaces is one that has much impact on our lives. <br />
Our work is driven by analyzing & observing society, its different groups & associate behaviors. That is why research & data visualization are a dominant tool. Our services include site-<br />
specific & interactive digital installations; motion graphics for live concerts; content for mobile <br />
& broadcast; web & information design."</p>
<p>BRANDING STYLE: Graphics & imagery are based on NAD's creative approach as well as <br />
its dominant tools: SPACE (captured through photography) & 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>
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.
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.
ASKER
tommyBoy,
thanks for the detailed explanation.
When i switch to position:absolute the DIV remains in place, does not scroll in either direction.
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%;
}<!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 & Angola. Recreate the company's philosophy/services/brand identity.<br />
RESPONSE: From a vague mission & style, NAD has been transformed into a progressive <br />
cutting-edge design agency whose services are specialized in the field of INTERACTION <br />
DESIGN. "We are a collaborative agency where multi-disciplinary people from different <br />
corners unite & 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 & evolve to have a number of significant <br />
outcomes. Our relationship with objects & spaces is one that has much impact on our lives. <br />
Our work is driven by analyzing & observing society, its different groups & associate behaviors. That is why research & data visualization are a dominant tool. Our services include site-<br />
specific & interactive digital installations; motion graphics for live concerts; content for mobile <br />
& broadcast; web & information design."</p>
<p>BRANDING STYLE: Graphics & imagery are based on NAD's creative approach as well as <br />
its dominant tools: SPACE (captured through photography) & 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>
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.
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
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
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.
ASKER
tommyBoy,
I added the % after having tried the code several times, so I tried with and without, no difference.
I added the % after having tried the code several times, so I tried with and without, no difference.
ASKER
Also, when I test your code (ID: 35730080), the red scroll doesn't scroll. Neither horizontally nor verticallly.
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.
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.
ASKER
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.
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.
You would need this:
#under_nav.fixed {
position:fixed;
left:0;
}
#under_nav.fixed {
position:fixed;
left:0;
}
ASKER
I would need that for the CSS .. but where do I add in #under_nav in the script itself?
Replace every instance of #navigation with #under_nav.
ASKER
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.
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.
ASKER
i'm new at this so thanks for bearing with me!
ASKER
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?
tommyBoy,
any idea how i can solve the issue of avoiding unnecessary white space once the background image is over?
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(portr
Thanks for the points.
Thanks for the points.
ASKER
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?
ASKER
Also, that happened only after duplicating the script and replacing #navigation with #under_nav
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.
$("#under_nav").offset({
top: topInit + 3
});
I can take a closer look later if you don't get it.
Actually, subtracting makes more sense.
ASKER
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.
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.
ASKER
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.
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:#909
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:#909
ASKER
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
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
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.
ASKER
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)
ASKER
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.
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.
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"> </div>
</body>
</html>ASKER
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.
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.
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
pageLayout.jpg
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=$(wind
if(client_screenheight)$('
client_screenheight=$(wind
if(client_screenheight)$('
of course you will need to check heigt against a fixed value like 600px
as
if(client_screenheight>600
as
if(client_screenheight>600
ASKER
I can't thank you guys enough for your help.