Results 1 to 6 of 6

Thread: Script for targeting hidden layers from a different page needed

  1. #1
    Join Date
    Apr 2006
    Location
    London
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Script for targeting hidden layers from a different page needed

    Hello chaps!
    I am looking for a script that does the following:
    I have a page that uses visible and hidden layers to display content onClick. I have been asked by my client to be able to link directly to the page, showing specific layers from specific links. For example, if the default visible layer on the page is called "lyr1", and there are other hidden layers on the page called "lyr2", "lyr3" etc., is it possible to link to the page from another page, but to specify which layer should be visible when the page loads?
    I'm fairly sure that the layer-swap script I use will not allow me to do this, so I'm looking for something new that will.
    I hope you can help,
    Many thank in anticipation.
    Nathan

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Consider the following code

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title> </title>
    		<style type="text/css">
    		
    		</style>
    		<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>
    	</head>
    	<body>
    		<div id="one" style="display:none;">This is the first layer </div>
    		<div id="two" style="display:none;">This is the second layer</div>
    		<div id="three" style="display:none;">This is the third layer</div>
    	</body>
    </html>
    After saving the page open the browser and load the page in the following manner, assume that the file name is test.htm

    Code:
    file:///C:/Documents%20and%20Settings/Code/Desktop/test.htm?layer=two
    We pass a parameter in to the page whose name is layer and value is two. This tells my JS function to display the div element whose ID is two. In other words you are passing the ID of the element which you want to display. If the page contains any element with the mentioned ID then it will be displayed - assuming that the element with the ID is hidden.

    Like this if you want to load the element whose ID is three use the following url
    Code:
    file:///C:/Documents%20and%20Settings/Code/Desktop/test.htm?layer=two
    Note that the file save location will change based on your storage location.
    Last edited by codeexploiter; 03-12-2008 at 03:22 AM.

  3. #3
    Join Date
    Apr 2006
    Location
    London
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Hello Code Exploiter,
    Thank you so much for your reply. I'm not getting any joy with it at the moment however...
    It all seems to make perfect sense to me in your explanation, but when I copy and paste the code and save it as htm files, I just can't get it to work.
    (IE is also throwing its info bar at me and warning me about the active x content on the page - would this happen to users on the website?)

    Where you say:

    "assume that the file name is test.htm"

    I'm a little confused, as the link you you then specify:

    "file:///C:/Documents%20and%20Settings/Code/Desktop/3.htm?layer=two;"

    has the page titled "3.htm" I don't know whether it's me being a bit basic in my knowledge, or whether the link should read:

    "file:///C:/Documents%20and%20Settings/Code/Desktop/test.htm?layer=two;"

    I've tried both, and all I get is a blank page.

    I'm not very experienced at this kind of thing, so I wondered if you could suggest anything I might be doing wrong.

    Would I be right in assuming that in order to default to the standard layer, I would use the same process, but specify "layer=one" in the <a> tag on the other page?

    In an ideal world, I want to be able to keep exactly the same functionality as is already on the page (http://www.bluekitedesigns.com/james/gallery.html) but be able to link to the gallery page from within another page, specifying which layer should be displayed when the page loads. Do you think that that is possible?

    Thanks again for your time,
    Regards, Nathan

  4. #4
    Join Date
    Apr 2006
    Location
    London
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Code exploiter you are a genius!

    I fiddled about with what you gave me, and I took the semi colon off the address link, and it works brilliantly. I'll now try to integrate what you've given me with my current layer swap script and see how I get on. A thousand thank yous!
    Regards, Nathan

  5. #5
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Hi Alphawolf,

    I've made some logical problems in my posting in which I've mentioned to assume the file name as test.htm and used another file name 3.htm in my explanations but apart from that it should work correctly.

    Some typos were there in my earlier posting and I've correct them now anyway happy to hear that you've got what you were looking for
    Last edited by codeexploiter; 03-12-2008 at 03:23 AM.

  6. #6
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi I'm new to this forum and I've been looking for the script to enable visible and hidden layers to display content onClick. I see you have done this on your sites and I was wondering if you could upload the script.
    thanks, Len

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •