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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    show/hide div HELP!!

    hi there i have a simple javascript that i found on the net to show/hide a div where it shows the div then when you click the link it hides the link.
    i would like to modify it so that the div is hidden first then shows when the link is clicked.

    i am new to javascript so sorry if this sounds a daft question

    Code:
    function toggleview(element1) {   element1 = document.getElementById(element1);   
    if (element1.style.display == 'block' || element1.style.display == '')      element1.style.display = 'none';   
    else      element1.style.display = 'block';   return;}
    thanks in advance
    carl

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there minis_r_me,

    and a warm welcome to these forums.

    Have a look at this example, it may suit your requirements...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <link rel="stylesheet" type="text/css" href="#">
    
    <style type="text/css">
    #mylink {
        color:#000;
     }
    #mydiv {
        margin-top:10px; 
        display:none; 
     }
    </style>
    
    <script type="text/javascript">
      var obj;
    window.onload=function() {
       obj=document.getElementById('mydiv').style;
       document.getElementById('mylink').onclick=function() {
       this.firstChild.nodeValue=(this.firstChild.nodeValue=='Hide Div')?'show div':'hide div';
    
       invertdisplay(obj);
       return false;
      }
     }
    
    function invertdisplay(obj){
       obj.display=(obj.display=='block')?'none':'block';
     }
    </script>
    
    </head>
    <body>
    
    <div>
    <a id="mylink" href="#">show div</a>
    </div>
    
    <div id="mydiv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    minis_r_me (05-06-2008)

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    cheers coothead

    i didnt think of changing my css to hide it i kept trying to change the javascript atleast its sorted now

    cheers
    carl

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    A few tips/observations about Coothead's code (if I might be so bold)

    • Re: elements which will be initially hidden, but which can be made visible again using js…

    It's best to make their initial hidden state dependent upon js. As the code stands, users with CSS on and js off/unsupported will have a hidden div and no way to show it.

    • Any links which perform a solely js-dependent function should ideally be added to the page using js. Otherwise, those w/o js are offered a dead/unusable link.

    • It's arguably better to add or remove a custom className rather than manipulate the style object directly. For simple on/off states - i.e. those without transitioning, such as animated fades or movement - adding a custom className to denote that an object is hidden can also provide semantic value to the document.

    Fwiw, here's how I might go about it…
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Blah</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    
    	.hidden {
    		display: none;
    	}
    
    </style>
    
    <script type="text/javascript">
    
    	window.onload = function() {
    
    		var trgtObj = document.getElementById('myDiv');
    		trgtObj.className = 'hidden';
    
    		var toggleHolder = document.getElementById('toggleHolder');
    		var toggleLink = document.createElement('a');
    			toggleLink.href = '#';
    			toggleLink.onclick = function() {
    				toggleObj(trgtObj);
    				this.firstChild.nodeValue = (this.firstChild.nodeValue == 'Hide') ? 'Show' : 'Hide';
    				return false;
    			}
    
    		var toggleLinkText = document.createTextNode('Show');
    		toggleLink.appendChild(toggleLinkText);
    		toggleHolder.appendChild(toggleLink);
    
    	}
    
    	function toggleObj(trgtObj) {
    
    		trgtObj.className = (trgtObj.className == 'hidden') ? '' : 'hidden';
    
    	}
    
    </script>
    
    </head>
    <body>
    
    <div id="toggleHolder"></div>
    
    <div id="myDiv">
    	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>
    
    </body>
    </html>
    On a side-note:
    Note that when manipulating the style.display property directly, it generally makes a toggle function more reusable if you avoid explicitly using 'block' as one of the values. By simply setting a blank value, unhidden objects will revert to their default display value: inline, block, etc…
    However, as mentioned, adding/removing classNames is more optimal for most purposes.

    The className handling in the code above could benefit from some checks to ensure that existing classNames are not overwritten and that classNames are more cleanly removed. I used that code above as a more complete, though not entirely complete, example of what I might consider a 'best practise approach' to the task in hand.
    I can repost the example with the more considerate class handlers in their if you're interested.

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Bill,

    thanks for reminding me that my coding skills are slipping back into sloppiness.

    This is due, well it's my excuse anyway, to my advancing years and an increasing shortage of grey cells.

    coot

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by coothead View Post
    Hi there Bill,

    thanks for reminding me that my coding skills are slipping back into sloppiness.

    This is due, well it's my excuse anyway, to my advancing years and an increasing shortage of grey cells.

    coot
    No worries. Being a jQuery user, I've grown rusty too when it comes to straight DOM scripting. Had to stop and think a couple of times.

    Happens to the best of us.

  • #7
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help

    if anyone can help please contact me at my email address
    everlastinglove1982@gmail.com

    thank you

    so here is my issue i have the following code and i would like to put it on my url but i want it so that it is hidden from everyone


    <div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="270" width="435" style="width:435px; visibility:visible; height:270px;" border="0" data="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_regular.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=27746851">
    <param name="allowScriptAccess" value="never" />
    <param name="allowNetworking" value="internal" />
    <param name="movie" value="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_regular.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=27746851" />
    <param name="menu" value="false" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    </object><br /><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15cGxheWxpc3Qub3Jn"><img src="http://www.myplaylist.org/mc/images/create_regular.jpg" border="0" /></a><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15cGxheWxpc3Qub3JnL3N0YW5kYWxvbmUvMjc3NDY4NTE=" target="_blank"><img src="http://www.myplaylist.org/mc/images/launch_regular.jpg" border="0" /></a><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15cGxheWxpc3Qub3JnL2Rvd25sb2FkLzI3NzQ2ODUx"><img src="http://www.myplaylist.org/mc/images/get_regular.jpg" border="0" /></a> </div>




    thank you


  •  

    Posting Permissions

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