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
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