Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    security problem with home-made DHTML menu script...

    I have a page I am using DHTML on, to make an entire website in the one page. Each sub-page of content is simply separated into one of 6 DIV's, and using display:hidden CSS, I show only one DIV at a time.

    The CSS and Javascript I use is here;

    Code:
    <style type="text/css">
    	#biography {
    		background: #fff3cd;
    		margin:10px 10px 10px 10px;
    		}
    
    	#gallery {
    		background: #fff3cd;
    		margin:10px 10px 10px 10px;
    		}
    
    	#faq {
    		background: #fff3cd;
    		margin:10px 10px 10px 10px;
    		}
    
    	#rates {
    		background: #fff3cd;
    		margin:10px 10px 10px 10px;
    		}
    
    	#links {
    		background: #fff3cd;
    		margin:10px 10px 10px 10px;
    		}
    
    	#contact {
    		background: #fff3cd;
    		margin:10px 10px 10px 10px;
    		}
    
    </style>
    
    <script type="text/javascript">
    
    function biography() {
    	document.getElementById('biography').style.display=""
    	document.getElementById('gallery').style.display="none"
    	document.getElementById('faq').style.display="none"
    	document.getElementById('rates').style.display="none"
    	document.getElementById('links').style.display="none"
    	document.getElementById('contact').style.display="none"	
    	}
    	
    function gallery() {
    	document.getElementById('biography').style.display="none"
    	document.getElementById('gallery').style.display=""
    	document.getElementById('faq').style.display="none"
    	document.getElementById('rates').style.display="none"
    	document.getElementById('links').style.display="none"
    	document.getElementById('contact').style.display="none"	
    	}
    	
    function faq() {
    	document.getElementById('biography').style.display="none"
    	document.getElementById('gallery').style.display="none"
    	document.getElementById('faq').style.display=""
    	document.getElementById('rates').style.display="none"
    	document.getElementById('links').style.display="none"
    	document.getElementById('contact').style.display="none"	
    	}
    	
    function rates() {
    	document.getElementById('biography').style.display="none"
    	document.getElementById('gallery').style.display="none"
    	document.getElementById('faq').style.display="none"
    	document.getElementById('rates').style.display=""
    	document.getElementById('links').style.display="none"
    	document.getElementById('contact').style.display="none"	
    	}
    	
    function friends() {
    	document.getElementById('biography').style.display="none"
    	document.getElementById('gallery').style.display="none"
    	document.getElementById('faq').style.display="none"
    	document.getElementById('rates').style.display="none"
    	document.getElementById('links').style.display=""
    	document.getElementById('contact').style.display="none"	
    	}
    	
    function contact() {
    	document.getElementById('biography').style.display="none"
    	document.getElementById('gallery').style.display="none"
    	document.getElementById('faq').style.display="none"
    	document.getElementById('rates').style.display="none"
    	document.getElementById('links').style.display="none"
    	document.getElementById('contact').style.display=""	
    	}
    	
    </script>
    The DIVs simply each have the 6 listed IDs, and are otherwise typical. The links are each done as follows (with each having the appropriate function and text);
    Code:
    <a href="#" onclick="biography()">Biography</a>
    Now, this works, except in some browsers I get a security error (such as in IE6, "To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer. Click here for options..."). In addition to the error, all 6 DIVs are displayed at once, one beneath the other, which looks horrible and makes the menu of links I made irrelevant (and non-functional).

    Aside from this major problem, I have another personal issue; I would prefer to use a single function that replaces the 6 individual functions...but am unsure how to write that. So that a click from a link instead calls the function like; onclick="display(biography)" and shows biography while hiding the other 5 divs, and another would call onclick="display(gallery)" and display the gallery but hide the other 5 divs. That is secondary to the security issue and related display problem...

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Let me guess you are testing the page locally? Locally you are going to get that warning. On a server it should go away.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, indeed I am testing it locally... I guess this shows my ineptitude, lol.

    So now I loaded the page to a server and you are correct that in all browsers (at least, the 5 I can test), it works fine.

    So that 'fixes' the major problem, leaving me the secondary question - would it be very difficult to rewrite those 6 functions into one?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Glad you asked. If you hadn't responded so soon I was going to append that to my previous post but it will be put into this one
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Content Switcher</title>
    <style type="text/css">
    .content { /* be sure your content divs have class="content" */
    background:#FFF3CD;
    margin:10px;
    }
    </style>
    <script type="text/javascript">
    var saveState = true; // set this to false if you do not want the selected content to be remembered
    // DO NOT EDIT BELOW ================================
    
    // This adds style tags to the head of the document hiding the content ONLY if JS is enabled
    // IF JS is disabled then users will still see the content, this so no one is left out
    var createStyle = document.createElement('style');
    createStyle.setAttribute('type','text/css');
    var createProp = document.createTextNode('.content {display:none;}');
    createStyle.appendChild(createProp);
    document.getElementsByTagName('head')[0].appendChild(createStyle);
    
    // This is the function that actually shows the desired content, you pass the id of the content div into the function
    function showContent(what)
    {
    	var thecontent = document.getElementsByTagName('div');
    	for(var i = 0; i < thecontent.length; i++)
    	{
    		if(thecontent[i].className == 'content')
    		{
    			thecontent[i].style.display = 'none';
    		}
    	}
    	document.getElementById(what).style.display = 'block';
    	createCookie('whichcontent',what,9999);
    	return false;
    }
    
    // This function creates a cookie if saveState is set to true allowing the browser to remember which content was clicked
    function createCookie(name,value,days)
    {
    	if (days)
    	{
    		var date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		var expires = "; expires="+date.toGMTString();
    	}
    	else var expires = "";
    	document.cookie = name+"="+value+expires+"; path=/";
    }
    
    // This function allows you to retrieve the cookie value
    function readCookie(name)
    {
    	var nameEQ = name + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0;i < ca.length;i++)
    	{
    		var c = ca[i];
    		while (c.charAt(0)==' ') c = c.substring(1,c.length);
    		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    	}
    	return null;
    }
    
    // This checks to see if saveState is equal to true.
    // If it is then it runs the showContent() function using the readCookie() value.
    window.onload = function()
    {
    	if(saveState && readCookie('whichcontent') != null)
    	{
    		showContent(readCookie('whichcontent'));
    	}
    }
    </script>
    </head>
    <body>
    <!--Be sure to follow the same format for the links or they will not work properly.-->
    <a href="#" onclick="return showContent('biography')">Biography</a> <a href="#" onClick="return showContent('gallery')">Gallery</a> <a href="#" onClick="return showContent('faq')">Faq</a> <a href="#" onClick="return showContent('rates')">Rates</a> <a href="#" onClick="return showContent('links')">Links</a> <a href="#" onClick="return showContent('contact')">Contact</a>
    <div id="biography" class="content">This is the biography content</div>
    <div id="gallery" class="content">This is the gallery content</div>
    <div id="faq" class="content">This is the faq content</div>
    <div id="rates" class="content">This is the rates content</div>
    <div id="links" class="content">This is the links content</div>
    <div id="contact" class="content">This is the contact content</div>
    </body>
    </html>
    Last edited by _Aerospace_Eng_; 12-04-2006 at 02:48 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay... wow.

    That is a modification of the dynamic tab script on dynamicdrive, yes? I started to do that myself; but then I looked at the size of it and thought, "It has to be able to be done more simply."

    So my 6 functions were written, using much less code, even though it took 6 separate functions. It lacks a feew features; such as changing the state of the active 'tab' and saving a cookie - but I didn't want either of those capabilities.

    Is there no simpler way to do it in a single function?

    [edit] Oh, and another probable issue; I have many other DIVs in my page besides the content DIVs, and while I have a long way to go on being a good coder... I think it would hide everything that is a DIV, aside from the one...yes? That would be a problem for me.
    Last edited by kargrafx; 12-04-2006 at 02:18 AM.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No its not a modification. I wrote it myself. And no it won't hide all divs on the page. It would only hide divs that had class="content". Here is the slimmed down version. It doesn't remember the content div that was clicked and all divs are hidden by default.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Content Switcher</title>
    <style type="text/css">
    .content { /* be sure your content divs have class="content" */
    background:#FFF3CD;
    margin:10px;
    display:none;
    }
    </style>
    <script type="text/javascript">
    // This is the function that actually shows the desired content, you pass the id of the content div into the function
    function showContent(what)
    {
    	var thecontent = document.getElementsByTagName('div');
    	for(var i = 0; i < thecontent.length; i++)
    	{
    		if(thecontent[i].className == 'content')
    		{
    			thecontent[i].style.display = 'none';
    		}
    	}
    	document.getElementById(what).style.display = 'block';
    	createCookie('whichcontent',what,9999);
    	return false;
    }
    </script>
    </head>
    <body>
    <!--Be sure to follow the same format for the links or they will not work properly.-->
    <a href="#" onclick="return showContent('biography')">Biography</a> <a href="#" onClick="return showContent('gallery')">Gallery</a> <a href="#" onClick="return showContent('faq')">Faq</a> <a href="#" onClick="return showContent('rates')">Rates</a> <a href="#" onClick="return showContent('links')">Links</a> <a href="#" onClick="return showContent('contact')">Contact</a>
    <div id="biography" class="content">This is the biography content</div>
    <div id="gallery" class="content">This is the gallery content</div>
    <div id="faq" class="content">This is the faq content</div>
    <div id="rates" class="content">This is the rates content</div>
    <div id="links" class="content">This is the links content</div>
    <div id="contact" class="content">This is the contact content</div>
    </body>
    </html>
    Try things before you think they won't work.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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