Forum Moderators: not2easy
you can see the example of what i mean here,
htt*://www.pastthepoint.com/galleries.htm
many thanks,
Dan
how about having all the layers "visible" but just toggling the z-index in the onclick event?
Suzy
how about having all the layers "visible" but just toggling the z-index in the onclick event?
Can someone point me toward a good resource to learn how to use that technique? Would be very, very useful on my site.
You'll need to monkey with it: for example, changing "display" with "z-index".
I learnt a tonne by monkeying with the stuff here:
h*tp://www.yourhtmlsource.com/javascript/dhtmlexplained.html
Something tells me that you have to put "zIndex" rather than "z-index" in the first script; right, says so in the second url I posted (oh boy, I'm going to the WebmasterWorld penalty box for those two urls! Maybe search around or post in the javascript forum if you need more help. Mods, sorry about the urls!
Can someone point me toward a good resource to learn how to use that technique
Matthew, you're here! :)
I'm not a scripty person, so I don't actually know if it's possible to target the z-index via javascript..
perhaps someone else can elaborate if it's possible
Meanwhile I have this which is a work around on the Pure CSS Pop Ups technique, but uses z-index instead of display:none..
Unfortunately this method still exhibits the IE "CSS Popups Bug", but it is very easily worked around... search the phrase
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body {padding: 0; margin: 0;}#popup a, #popup a:visited {
display: block;
width: 130px;
line-height: 30px;
text-align: right;
padding: 0 10px;
margin: 0;
border: 1px solid #666;
text-decoration: none;
font-size: 0.8em;
color: #000;
background: #eee;
z-index: 50;
}#popup a span, #popup #coverup {
display: block;
position: absolute;
top: 0px;
left: 152px;
width: 250px;
height: 160px;
margin: 0px;
color: #000;
background: #fee;
text-align: center;
z-index: -1;
}#popup #coverup {z-index: 50;}
#popup a:hover {
color: #f00;
text-indent: 0;
}#popup a:hover span{
z-index: 100;
}</style>
</head>
<body>
<div id="popup">
<span id="coverup"></span>
<a href="/">Home<span>Home Description Text</span></a>
<a href="/">About<span>About Us Text</span></a>
<a href="/">Links<span>Links to Others</span></a>
<a href="/">Contact<span>Email, Postal Address</span></a>
<a href="/">Terms<span>Terms and Conditions</span></a>
</div></body>
</html>
This should keep the "can't use display: none;" people happy too ;)
Suzy
<added> note IE needs the negative z-index on the span?</added>
[edited by: SuzyUK at 10:17 pm (utc) on Dec. 15, 2003]
perhaps someone else can elaborate if it's possible
When monkeying with the code on the second site I provided above, I was pretty much able to change whatever CSS style I wanted - I tried margins, colors, padding, even the base font-size in a body tag, as a sort of very primitive font-switcher.
(it was fun playing with the DOM)
need the page so that which ever div is made visible by click event it is "on top" so to speak!
any help?
building from what I learnt in the links that I provided (for reference) you can do this:
Click on image one and using JS it sets it's 'textbox' z-index to 3, and the others to 1. Do the same for all of the boxes and yer set.
A downfall for this is that it's js dependant, not exactly 'progressive enhancement'.
And we're moving into js now, so if we keep this up lets link on over and start a new thread in the js forum.
Since you want 'onclick', I guess you have to go with js - however, it would be cool if this method fell back onto the rollover method, for those users that don't have js enabled.
Give this a whack (copy and paste, save as an htm and view it):
<div id="image1" style="width:50px;height:50px;background-color:red;border:1px solid #000;position:absolute;top:0;left:0;z-index:3"></div>
<div id="image2" style="width:50px;height:50px;background-color:blue;border:1px solid #000;position:absolute;top:0;left:0;z-index:2"></div>
<div id="image3" style="width:50px;height:50px;background-color:gray;border:1px solid #000;position:absolute;top:0;left:0;z-index:2"></div>
<p style="position:absolute;top:80px">
<a onclick="document.getElementById('image1').style.zIndex='3';document.getElementById('image2').style.zIndex='2';document.getElementById('image3').style.zIndex='2'; return false;" href="#">image 1</a>
<a onclick="document.getElementById('image1').style.zIndex='2';document.getElementById('image2').style.zIndex='3';document.getElementById('image3').style.zIndex='2'; return false;" href="#">image 2</a>
<a onclick="document.getElementById('image1').style.zIndex='2';document.getElementById('image2').style.zIndex='2';document.getElementById('image3').style.zIndex='3'; return false;" href="#">image 3</a> </p>
This is a 'why i love WW' moment :)
thats just pure magic!
HumpingDan
Dan.. I knew that my code wouldn't work for you but I posted it to:
a) to show it did work
b) to encourage someone to javascript it
I probably should've put that on the JS Forum,
a collaboration indeed it is a WW moment :)
Thanks All!
Suzy
[webmasterworld.com...]
I need to let this sink in a bit, but I wonder if there would be a way to have a fall-back for non-js'ers (other than providing a link to the text in the links - sort of a 'longdescription').
I guess, maybe...
you would have to add the display:none/block to the onclick event as well.. Whew, between this and the php I'm working on my brain feels like alphabet soup!
