PDA

View Full Version : Script conflict. Please help to resolve...



Alphawolf
03-13-2008, 12:42 PM
Hello guys,
I have a webpage that uses the following code to swap between layers, using the visible/hidden status in CSS:


<style type="text/css">


/* Specifications for container for layers to show/hide.
Most browsers need both width and height set. */
#container { position:relative; width:796px; height:496px; left:0px; top:0px;}
/* Include id's for all your layers here, with commas between. */
#gallerylyr1, #gallerylyr2, #gallerylyr3, #gallerylyr4, #gallerylyr5, #gallerylyr6, #gallerylyr7, #gallerylyr8, #gallerylyr9, #gallerylyr10 {
position:absolute; visibility:hidden; z-index:100 }
</style>

<script type="text/javascript">
/*************************************************************************
This code is from Dynamic Web Coding at http://www.dyn-web.com/
Copyright 2001-3 by Sharon Paine
See Terms of Use at http://www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/

// resize fix for ns4
var origWidth, origHeight;
if (document.layers) {
origWidth = window.innerWidth; origHeight = window.innerHeight;
window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

var cur_lyr; // holds id of currently visible layer
function swapLayers(id) {
if (cur_lyr) hideLayer(cur_lyr);
showLayer(id);
cur_lyr = id;
}

function showLayer(id) {
var lyr = getElemRefs(id);
if (lyr && lyr.css) lyr.css.visibility = "visible";
}

function hideLayer(id) {
var lyr = getElemRefs(id);
if (lyr && lyr.css) lyr.css.visibility = "hidden";
}

function getElemRefs(id) {
var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? getLyrRef(id,document): null;
if (el) el.css = (el.style)? el.style: el;
return el;
}

// get reference to nested layer for ns4
// from old dhtmllib.js by Mike Hall of www.brainjar.com
function getLyrRef(lyr,doc) {
if (document.layers) {
var theLyr;
for (var i=0; i<doc.layers.length; i++) {
theLyr = doc.layers[i];
if (theLyr.name == lyr) return theLyr;
else if (theLyr.document.layers.length > 0)
if ((theLyr = getLyrRef(lyr,theLyr.document)) != null)
return theLyr;
}
return null;
}
}
</script>




I've been trying to find a way to access specific layers from links on another page. For example: my naming structure for the layers is gallerylyr1, gallerylyr2 etc, and I would like to be able to load the page, displaying specific layers, rather than the default, which is gallerylyr1.

Codeexploiter on this forum gave me a wonderful piece of code which will enable me to do it, but there is a conflict with the above code, in that fact that they both use the onload event handler. That much I know, but I don't know how to resolve it.

The above code uses:


<body onload="swapLayers('gallerylyr1')">

to activate the code and to make gallerylyr1 the visible layer.
Codeexploiters code is as follows:


<script type="text/javascript">
window.onload = function(){
if(location.href.indexOf('layer=') != -1)
if(document.getElementById(location.href.split('layer=')[1]))
document.getElementById(location.href.split('layer=')[1]).style.display = 'block';
}
</script>

...which as you can see has the window.onload instruction in there.

Can anyone provide me with a way to combine these scripts so that I can set which layer is visible from an <A> link in another page, but then be able to swap between layers once I am on the page? I would be VERY grateful to anyone who can help.

For reference, the page I am trying to do this on is found at:

http://www.bluekitedesigns.com/james/gallery.html

Once again, thanks in anticipation,
Nathan

Bob90
03-13-2008, 04:11 PM
try this

<script type="text/javascript">
window.onload = function(){
if(location.href.indexOf('layer=') != -1)
if(document.getElementById(location.href.split('layer=')[1]))
document.getElementById(location.href.split('layer=')[1]).style.display = 'block';
swapLayers('gallerylyr1');
}
</script>


or this


<script type="text/javascript">
window.onload = function(){
swapLayers('gallerylyr1');
if(location.href.indexOf('layer=') != -1)
if(document.getElementById(location.href.split('layer=')[1]))
document.getElementById(location.href.split('layer=')[1]).style.display = 'block';
}
</script>

Alphawolf
03-13-2008, 05:02 PM
Thanks Bob90, I appreciate the help.
It turns out that I might not want the:


swapLayers('gallerylyr1');

...line in the onload handler, as I want the visible layer to be determined within the <a href...> tag on the other page. The link to view a particular layer looks like this:


<a href="gallery.html?layer=gallerylyr2">Gallery</a>

This works really well in setting up the page with the correct layer showing (You can modify the last bit according to what layer should be displayed).

Unfortunately, when then using the links on the page that should swap the layers, the current layer doesn't hide itself, and instead, the two layers (old one and new one) stack on top of each other in an alarming fashion! NOT the desired result...

Here is the link to the page in question, so you can see exactly what I'm dealing with, without the script to access the specific layers remotely:

http://www.bluekitedesigns.com/james/gallery.html

(I couldn't attach the code, as it made this post too long...)

And here is the script that allows me to specify which layer is visible onload:


<script type="text/javascript">
window.onload = function(){
swapLayers('gallerylyr1');
if(location.href.indexOf('layer=') != -1)
if(document.getElementById(location.href.split('layer=')[1]))
document.getElementById(location.href.split('layer=')[1]).style.visibility = 'visible';
}
</script>

Now, they both work individually, but how can I get it so that I specify which layer to be visible when the page loads, THEN when I click on a link on the visible layer, the layers swap as they should do? I'm stumped

If anyone can help, I'll be eternally grateful, and thanks to those who've already taken the time to help me out!

Nathan

Alphawolf
03-15-2008, 01:52 PM
Please help if you can, I really need to get this up and running for my client.

Many thanks,
Nathan