CSS fixed position: only horizontal

Technology and Gaming Help and Support
#21

Okay, first of all, thanks Hyperbyte! That was the very best solution until FireTime came along :3 I give you 20 more cookies.

Despite exams coming up, I spent an inordinate amount of time on this (I’m so going to fail everything :frowning: ), since there was a little bug with it that just wouldn’t do for me.

Fortunately FireTime was nice enough to give me his Steam and help me out personally (and the post above). You’re a real life saver, I really mean it :stuck_out_tongue:

Thanks again everyone!

#22

Okay one more little detail:

When the window is resized without a horizontal scrollbar present, the div doesn’t get scrolled.
So far I’ve tried:

$(window).resize(function () { $("#navwrapper").scrollLeft(window.offsetWidth); });

and

$(window).resize(function () { $("#nav").style.left += window.offsetWidth; });

But no luck. Gonna keep trying though :stuck_out_tongue:

Edit: Also document.body. instead window.
Edit edit: it seems the .resize event isn’t being detected or something.
Edit edit edit: haha, I’m such a moron. I simply had to center nav inside navwrapper by making nav relatively positioned and giving it an automatic margin.

#23

yep the fabled margin: 0px auto 0;

some time I miss the tag

#24

the moronic part is that I actually already knew about that :retard: glad it works now though

one more little detail (lol): everything under the navwrapper is now ‘inaccessible’, so to speak, to the cursor. For example, text under it can’t be selected.

I might do some searching to fix that tomorrow, but if anyone can think of something off the top of their head, it would be greatly appreciated.

Also, I’d like to thank everyone again, lol.

#25

I’m starting to annoy myself by asking, but IE has decided to stop doing the JQuery thing, while I changed nothing of significance to it. I also did undo several hundred times with no results.

Relevant code:

html {
height: 100%;
}

body {
margin: 0;
width: 100%; height: 100%;
}

#bg {
position: relative;
margin: 0 auto;
width: 1200px; min-height: 100%;
}

#navwrapper {
position: fixed; bottom: -147px; left: 0;
width: 100%; height: 164px;
overflow: hidden;
}

#nav {
position: relative;
margin: auto;
width: 1200px;
}

#navtext {
position: absolute;  top: 0px; left: 126px;
width: 170px; height: 164px;
}

#word {
position: absolute; top: 17px; left: 37px;
width: 60px; height: 55px;
}

#word a {
position: absolute; left: 0;
width: 100%; height: 100%;
}

(there are three more divs like word, only with different values for top, left, width and height)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="opmaak.css" rel="stylesheet" type="text/css">
<script src="jquery-1.4.4.js"></script>
</head>
<body>
	<div id="bg">
		<div id="navwrapper"><div id="nav">
		<div id="navtext">Menu
			<div id="word"><a href="word.html"></a></div>
			<div id="sound"><a href="#"></a></div>
			<div id="image"><a href="#"></a></div>
			<div id="fun"><a href="#"></a></div>
		</div>
		</div></div>
	</div>
<script>
	$(window).scroll(function () { $("#navwrapper").scrollLeft(window.pageXOffset); });
	$("#navtext").hover(
		function () { $("#navwrapper").css({bottom: 0}); $(this).css({color: 'grey', 'border-color': 'grey'}) }, 
		function () { $("#navwrapper").css({bottom: -147}); $(this).css({color: 'black', 'border-color': 'black'}) }
	);
</script>
</body>
</html>

Removing navtext and .hover() has no effect.

I’m at a complete loss as to how to proceed. I googled a bit, found nothing relevant, but that may be because I suck.

Any help is appreciated, if not, I understand :3

also, changing all the divs (excluding div a) contained in navwrapper to position: relative doesn’t help

edit: just in case anyone is reading this, the problem seems to be window.pageXoffset, even though it worked before :slight_smile:

#26

if browser = MSIE {document.body.scrollLeft} else {window.pageXoffset}

edit: some real code

jQuery.fn.Xpos = function(f) { 
		if($.browser.msie){
			return document.body.scrollLeft ;
		}else{
			return window.pageXoffset ;
}

EDIT EDIT: See if document.body.scrollLeft works in the other browsers, if it does just use that, else you have to keep the browser check.

#27

Yeah I tried that (well, without the if statement just to test in IE), but it still doesn’t work in IE. On the upside, when I alert it it returns 0 instead of undefined.
It does recognize document.body though, and I haven’t found any other alternatives for scrollLeft on google yet.

But thanks : D

#28

well here is an all in one fix

https://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Also the checking is good so the performance loss for competent browsers should be minimal.

#29

Okay, first when I tried that script it still didn’t work, even though it gave back numbers other than 0. I then changed position to relative for the elements in my container, and presto, it worked!

I guess that means it would have worked without that script too, with just document.body.scrollLeft, but that script is definitely better either way.

Maybe I can do some tinkering and get it to work without position: fixed at all, that would probably be much better.
Edit: scratch that, I didn’t really think it through :rolleyes:

Thanks! You’re a real life saver :3
I’m learning more javascript/jquery from you than I could on my own :smiley:

Edit: apparently, it works even when I only change #navtext’s position to relative (in addition to the javascript changes). Or when I remove navtext and change either one of the contained divs to relative. Apparently at least three of them need to be relative, or something. IE is so weird.

#30

:stuck_out_tongue: jquery is fun to mess around with. Try staying away from plugins at first (hell try to stay away from jquery lean basic JS for a script or two) This way you can get a good foundation using he language so once you start using plugins you can tweak them to your liking. The jquery documentation and the w3c/w3 schools contain just about everything you could ever want in the way of JavaScript.

#31

Yeah, I’m going to be getting Javascript along with the webdesign classes I’ll have after my exams. The messing around I’ve been doing should help with that greatly :smiley:

#32

I had a situation that look like similar to yours, I solved with a little javascript.
In example below, the text inside span moves to the right and is always visible when I use horizontal scrollbar, appears fixed but it doesn’t.
You can copy the code as is and try.
The same can be applied to vertical movements using .scrollTop instead of scrollLeft.

 <html><head>                           
<style type="text/css">                 
.divgen {                   
  background-color: #d9d9b0;            
  overflow-x:auto; overflow-y: hidden;  
  width:500px;}                         
.divelenco {                  
  height:100px;                         
  width:2300px;                         
  overflow-x:hidden; overflow-y: auto;} 
.spansoggetto {                  
  position:relative;}                   
</style>    
</head>                            
<body>
<div class="divgen" onscroll="OnScrollDiv(this)">                                                  
<div id="divelenco" class="divelenco">                                                             
<table width="2300px" cellpadding="3" cellspacing="3">                                             
<tr><td colspan="5" align="left"><span id="sogg1" class="spansoggetto">TitleXXXX 1</span></td></tr>
<tr style="background-color:#fafac1">                                                              
<td width="20%">variouos data1</td>                                                                
<td width="20%">variouos data2</td>                                                                
<td width="20%">variouos data3</td>                                                                
<td width="20%">variouos data4</td>                                                                
<td width="20%">variouos data5</td>                                                                
</tr>
<tr><td colspan="5" align="left"><span id="sogg2" class="spansoggetto">TitleXXXX 2</span></td></tr>
<tr style="background-color:#fafac1">                                                              
<td width="20%">variouos data1</td>                                                                
<td width="20%">variouos data2</td>                                                                
<td width="20%">variouos data3</td>                                                                
<td width="20%">variouos data4</td>                                                                
<td width="20%">variouos data5</td>                                                                
</tr>
<tr><td colspan="5" align="left"><span id="sogg3" class="spansoggetto">TitleXXXX 3</span></td></tr>
<tr style="background-color:#fafac1">                                                               
<td width="20%">variouos data1</td>                                                                 
<td width="20%">variouos data2</td>                                                                 
<td width="20%">variouos data3</td>                                                                 
<td width="20%">variouos data4</td>                                                                 
<td width="20%">variouos data5</td>                                                                 
</tr>                                                                                              
</table>                                                                                            
</div>                                                                                              
</div>                                                                                              
<input type="hidden" name="maxsog" id="maxsog" value="3">                                           

<script language=javascript>                                                           
 function OnScrollDiv(divobj) {                                                        
   x = document.getElementById("maxsog").value;    //number of subjects on the page         
   for (i=1;i<=x;i++) {                                                                
     document.getElementById("sogg" + i).style.left = divobj.scrollLeft;               
   }                                                                                   
 }                                                                                     
</script>                                                                              
</body>                                                                                
</html>
#33

Thanks, but I got it working about a month ago.

Founded in 2004, Leakfree.org became one of the first online communities dedicated to Valve’s Source engine development. It is more famously known for the formation of Black Mesa: Source under the 'Leakfree Modification Team' handle in September 2004.