Jump to content

background images in absolute anchor arrows for scrolling horizontal li menu bar scripted for ff4


Greywacke
 Share

Recommended Posts

hi there.i have the menu as follows, an include mainmenu.php, included within the div with id container.

	<a id="larr" href="java script:void(0);" onmouseover="scroll(0,1);" onmouseout="stop(0,1);" onmousedown="scroll(0,10);" onmouseup="stop(0,10);" title="Scroll Menu Left">«</a>	<div id="cont"><span id="menu"><ul>                <li<?php echo ($p==10)?" class=\"current\"":""; ?>><a href="?p=10" title="Configuration Manager" accesskey="g" tabindex="1" target="_parent">Configuration</a></li>                <li<?php echo ($p==1)?" class=\"current\"":""; ?>><a href="?p=1" title="Region Manager" accesskey="r" tabindex="2" target="_parent">Regions</a></li>                <li<?php echo ($p==2)?" class=\"current\"":""; ?>><a href="?p=2" title="Service Manager" accesskey="s" tabindex="3" target="_parent">Services</a></li>                <li<?php echo ($p==3)?" class=\"current\"":""; ?>><a href="?p=3" title="Supplier Manager" accesskey="s" tabindex="4" target="_parent">Suppliers</a></li>                <li<?php echo ($p==9)?" class=\"current\"":""; ?>><a href="?p=9" title="Price Manager" accesskey="p" tabindex="5" target="_parent">Prices</a></li>                <li<?php echo ($p==11)?" class=\"current\"":""; ?>><a href="?p=11" title="Data Manager" accesskey="d" tabindex="6" target="_parent">Data</a></li>                <li class="spacer"></li>                <li<?php echo ($p==12)?" class=\"current\"":""; ?>><a href="?p=12" title="Consumer Manager" accesskey="c" tabindex="7" target="_parent">Consumers</a></li>                <li<?php echo ($p==13)?" class=\"current\"":""; ?>><a href="?p=13" title="Survey Manager" accesskey="s" tabindex="8" target="_parent">Surveys</a></li>                <li class="spacer"></li>                <li<?php echo ($p==4)?" class=\"current\"":""; ?>><a href="?p=4" title="Premium Lead Manager" accesskey="p" tabindex="7" target="_parent">Premium</a></li>                <li<?php echo ($p==6)?" class=\"current\"":""; ?>><a href="?p=6" title="Transaction Manager" accesskey="t" tabindex="8" target="_parent">Transactions</a></li>                <li class="spacer"></li>                <li<?php echo ($p==7)?" class=\"current\"":""; ?>><a href="?p=7" title="Freemium Lead Manager" accesskey="f" tabindex="9" target="_parent">Freemium</a></li>                <li<?php echo ($p==8)?" class=\"current\"":""; ?>><a href="?p=8" title="Opportunity Manager" accesskey="o" tabindex="10" target="_parent">Opportunities</a></li>                <li class="spacer"></li>                <li<?php echo ($p==5)?" class=\"current\"":""; ?>><a href="?p=5" title="Blacklist Manager" accesskey="b" tabindex="11" target="_parent">Blacklist</a></li>                <li<?php echo ($p==0)?" class=\"current\"":""; ?>><a href="?p=0" title="Documentation" accesskey="d" tabindex="12" target="_parent">Documentation</a></li>            </ul></span></div>	<a id="rarr" href="java script:void(0);" onmouseover="scroll(1,1);" onmouseout="stop(1,1);" onmousedown="scroll(1,10);" onmouseup="stop(1,10);" title="Scroll Menu Right">»</a>

then in the stylesheet for this page, default.css i have the following css 3.0 for the rounded corners of the tabs:

div#cont {	position: relative;	top: -18px;	overflow-x: visible;	overflow-y: visible;	width: 100%;	height: 26px;}#container span#menu {	position: absolute;	z-index: 50;	top: 0px;	left: 0px;	width: 1162px;	height: 26px;	display: inline;}#container a#larr {	position: absolute;	z-index: 60;	top: 119px;	left: 0px;	display: inline-block;	height: 18px;	color: #acacac;	background: #DDDDDD url("../images/bg_header.jpg") left bottom scroll repeat-x;	font: normal normal bolder 12px/16px 'Verdana';	text-decoration: none;	padding: 5px 2px 3px;	background: none;	margin: 0px;	cursor: default;}#container a#larr:hover {	color: #808080;}#container a#rarr {	position: absolute;	z-index: 61;	top: 119px;	right: 0px;	display: inline-block;	height: 18px;	color: #acacac;	background: #DDDDDD url("../images/bg_header.jpg") left bottom scroll repeat-x;	font: normal normal bolder 12px/16px 'Verdana';	text-decoration: none;	padding: 5px 2px 3px;	background: none;	margin: 0px;	cursor: default;}#container a#rarr:hover {	color: #808080;}#container ul {	position: relative;	top: -10px;	left: -26px;	width: auto;	height: 26px;	list-style-type: none;}#container li {	float: left;	background: #7fc241;	border-radius: 5px 5px 0px 0px;	margin: 0px 2px 0px 0px;	height: 26px;}#container li a {	display: block;	color: #ffffff;	font: normal normal bolder 12px/16px 'Verdana';	text-decoration: none;	padding: 5px;}#container li a:hover {	text-decoration: underline;}#container li.current {	float: left;	background: #2d540a;	border-radius: 5px 5px 0px 0px;	margin: 0px 2px 0px 0px;	height: 26px;}#container li.current a {	display: block;	color: #ffffff;	font: normal normal bolder 12px/16px 'Verdana';	text-decoration: none;	padding: 5px;}#container li.current a:hover {	text-decoration: underline;}#container li.spacer {	float: left;	background: none;	margin: 0px;	width: 5px;	height: 36px;}

this is all run clientside via a defer script sessionticker.php with the following java script:

var ts;var scr;var s = 0;var smlr = 0; 										// Scroll Menu on Larger Resolutions (1 / 0)var larr = document.getElementById("larr");var rarr = document.getElementById("rarr");if (!smlr) {	window.onresize = function () {    	s = 0;    	menu.style.left = s+'px';        if (document.body.clientWidth>menu.children[0].clientWidth) {        	larr.style.visibility = 'hidden';            rarr.style.visibility = 'hidden';        } else {        	larr.style.visibility = '';            rarr.style.visibility = '';        }    }    window.onresize();}function scroll(dir,amt) {	window.clearInterval(ts);	switch (dir) {		case 0:	// scroll left			scr = function() {            	if (document.body.clientWidth>menu.children[0].clientWidth) {                	if (s > 0) {						s -= amt;                        if (s < 0) s = 0;            			menu.style.left = s+'px';                    }                } else {                	if (s > document.body.clientWidth - menu.children[0].clientWidth + larr.clientWidth) {						s -= amt;                        if (s < document.body.clientWidth - menu.children[0].clientWidth + larr.clientWidth) s = document.body.clientWidth - menu.children[0].clientWidth + larr.clientWidth;            			menu.style.left = s+'px';                    }				}            }            break;		case 1:	// scroll right        	scr = function() {            	if (document.body.clientWidth>menu.children[0].clientWidth) {                	if (s < document.body.clientWidth - menu.children[0].clientWidth + larr.clientWidth) {						s += amt;                        if (s > document.body.clientWidth - menu.children[0].clientWidth + larr.clientWidth) s = document.body.clientWidth - menu.children[0].clientWidth + larr.clientWidth;            			menu.style.left = s+'px';                    }                } else {                	if (s < 0) {						s += amt;                        if (s > 0) s = 0;            			menu.style.left = s+'px';                    }				}            }			break;	}	ts = window.setInterval(scr,18);}function stop(dir,amt) {	window.clearInterval(ts);}

with the default setting, this scrolls the horizontal menu bar if the document body width is wider than the menu width.my problem is CSS. i need to apply the header background image to the anchors with id's larr and rarr, so the menu does not display under their z-order. how would i get - in firefox 4, a background image on a color to be defined for those two absolute positioned anchors? i've been struggling with this for the past 5 hours after googling, attempting relative positions, inline as well as inline-block displays for the anchors yet no success. not even block displays work! the larr and rarr anchors do not want to have a background applied, nor a background color - despite the position and colors being applied in the shorthand style definitions...(i do not want the horizontal menu bar to display under the z-order of the left and right arrows) please help - i am at my wits ends here!

Edited by Pierre 'Greywacke' du Toit
Link to comment
Share on other sites

just had a thought - perhaps i should specify the backgrounds to the larr and rarr anchors CSS 3.0 style - and not CSS 2.1 style...noticed on the w3schools site, that the specification is in a completely different order for the shorthand 0o i believe using the border-radius declarations might have made the default.css document register as CSS 3.0 by the browse:

background: #dddddd 0px -119px 1px 163px repeat-x padding-box padding-box scroll url("../images/bg_header.jpg");

this was converted from the following CSS 2.1 specification:

background: #dddddd url("../images/bg_header.jpg") left bottom scroll repeat-x;

will report back after testing :)

Edited by Pierre 'Greywacke' du Toit
Link to comment
Share on other sites

unfortunately this does not change a thing... :)how will i get a background image to display in an absolute positioned anchor, with a z-index over the scrolling menu??? 0o

Link to comment
Share on other sites

The background: none will remove any background image or color defined before it.#container a#rarr {position: absolute;z-index: 61;top: 119px;right: 0px;display: inline-block;height: 18px;color: #acacac;background: #DDDDDD url("../images/bg_header.jpg") left bottom scroll repeat-x;font: normal normal bolder 12px/16px 'Verdana';text-decoration: none;padding: 5px 2px 3px;background: none;margin: 0px;cursor: default;}

Link to comment
Share on other sites

ah thank you for your clarity there dsoneuk :) i did not even notice that in firebug! xDbut sadly, removing those styles from the css definitions did not do the trick :(ps: the MAIN problem all along was that the image file was defined as jpg and i had created png backgrounds for a "fading out effect" into the header background... :) thanks for your help though it brought me closer to the final solution! :P

Edited by Pierre 'Greywacke' du Toit
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...