SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dreamweavers Show/Hide Layers Issue

    I have a page where I want to load several small Flash slideshows and then display one by default. Then if a visitor clicks on a specific link, it would "show" that flash movie and "hide" all of the others.

    Here is where I am at so far:
    http://t2graphicdesign.com/life/gallery.html


    Here is my modified javascript:
    Code:
    function MM_showHideLayers() { //v9.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3) 
      with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'none':v; }
        obj.display=v; }
    }

    Here is my HTML:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Lifestyle Construction LLC. - Knoxville, Tennessee</title>
    <meta name="Description" content=""/>
    <meta name="Keywords" content=""/>
    <meta name="target" content=""/>
    <meta name="author" content="Todd Temple at http://www.t2graphicdesign.com"/>
    <meta name="SEO" content="Todd Temple at http://www.t2graphicdesign.com"/>
    <meta name="copyright" content="Lifestyle Construction, LLC."/> 
    <meta name="country" content="USA"/> 
    <meta name="distribution" content="global"/> 
    <meta name="resource-type" content="web page"/>
    <meta name="robots" content="index, follow"/>
    <meta name="user-group" content="public"/> 
    
    <meta name="identifier-url" content="http://www.lifestyleconstruction.com"/> 
    <meta name="revisit-after" content="30 days"/>
    <meta name="rating" content="general"/>
    <meta name="classification" content=""/>
    <meta http-equiv="Keywords" content=""/>
    <link rel="shortcut icon" href="http://www.lifestyleconstruction.com/i/gfx_favicon.ico" />
    <meta name="verify-v1" content="" />
    <link href="c/styles.css" rel="stylesheet" type="text/css" />
    <script src="js/global.js" type="text/javascript"></script>
    <link href="c/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body bgcolor="#000000" onload="MM_showHideLayers('gallery1','','show','gallery2','','hide')">
    <div id="container">
      <div id="header">  
      	<img src="i/gfx_title_gallery.jpg" alt="Lifestyle Construction LLC. - Gallery." width="723" height="94" border="0" /></td>
    
    <ul id="navbar" class="MenuBarHorizontal">
              <li2><img src="i/gfx_logo_btm.jpg" alt="" width="229" height="24" border="0" /></li2>
              <li><a href="index.html">Home</a></li>
              <li><a href="gallery.html">Gallery</a></li>
              <li><a class="MenuBarItemSubmenu" href="about-us.html">About Us</a>
                  <ul>
                    <li><a href="our-staff.html">Our Staff</a></li>
    
                    <li><a href="our-services.html">Our Services</a></li>
                    <li><a href="our-history.html">Our History</a></li>
                  </ul>
              </li>
              <li><a href="awards.html">Awards</a></li>
              <li><a href="contact-us.php">Contact Us</a></li>
              <li><a href="partners.html">Partners</a></li>
    
        </ul> 
    <!-- end #header --></div>
      <div id="gallery1">
      <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','723','height','294','src','gallery1','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','scale','exactfit','movie','gallery1','wmode','transparent','allowscriptaccess','sameDomain' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="723" height="294">
        <param name="movie" value="gallery1.swf" />
        <param name="quality" value="high" /><param name="SCALE" value="exactfit" /><param name="wmode" value="transparent" /><param name="allowScriptAccess" value="sameDomain" />
        <embed src="gallery1.swf" width="723" height="294" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" scale="exactfit"></embed>
      </object>
      </noscript>
      </div>
      <div id="gallery2">
    <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','723','height','294','src','gallery2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','scale','exactfit','movie','gallery2' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="723" height="294">
      <param name="movie" value="gallery2.swf" />
      <param name="quality" value="high" /><param name="SCALE" value="exactfit" />
      <embed src="gallery2.swf" width="723" height="294" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" scale="exactfit"></embed>
    </object>
    </noscript>
    </div>
    
    <div id="bar"></div>
      <div id="mainContent">
        <ul>
        <li><a href="#" onclick="MM_showHideLayers('gallery1','','show','gallery2','','hide')">Fox Run Lot 86</a></li>
        <li><a href="#" onclick="MM_showHideLayers('gallery1','','hide','gallery2','','show')">Fox Run Lot 146</a></li>
        <li><a href="#">Lashbrooke Lot 1</a></li>
        <li><a href="#">Phillips Lot 1</a></li>
    
        <li><a href="#">Project 5</a></li>
        </ul>
    <!-- end #mainContent --></div>
      <div id="footer">
        <p>
          <img src="i/gfx_logo_footer.jpg" alt="Lifestyle Construction LLC." hspace="0" vspace="0" border="0" /><br />
          <br />
          | <a href="index.html">home</a> | <a href="gallery.html">gallery</a> | <a href="about-us.html">about us</a> | <a href="our-staff.html">our staff</a> | <a href="our-services.html">our services</a> | <a href="our-history.html">our history</a> | <a href="awards.html">awards</a> | <a href="contact-us.php">contact us</a> | <a href="partners">partners</a> |<br />
    
        Lifestyle Construction LLC. 2227 Duckcove Drive, Knoxville, Tennessee 37922</p>
        <div id="plug">
        <p><a href="http://www.t2graphicdesign.com/" target="_blank">WEBSITE BY T2 DESIGN</a></p></div>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("navbar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    And my CSS, just in case:
    Code:
    .gallery2 {
    display: none;
    }
    .gallery3 {
    display: none;
    }
    Todd Temple > T2 Design

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The display property does not support the "visible" value - you're confusing it with the visibility property (it can be visible or hidden). You should set the display to 'block' instead of 'visible'.

    That script is also horrible. Using the with statement is not recommended and though in your case will not cause any damage, it also doesn't provide much of a shortcut.

    Unless you intend to support very very old browsers(IE4 & NS4) there is no need to check for getElementById or obj.style. There is also no need to write "arguments" as a property of the function. Your script could be rewritten much more nicely:
    Code Javascript:
    function MM_showHideLayers() { //v9.0
      var i,j,v,obj;
      for (i = 0, j = arguments.length - 2; i < j; i += 3) {
        obj = document.getElementById(arguments[i]);
        if (obj) {
          v = arguments[i+2];
          obj.style.display = v == 'show' ? 'block': (v == 'hide' ? 'none' : v);
        }
      }
    }

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Code Javascript:
    function MM_showHideLayers() { //v9.0
      var i,j,v,obj;
      for (i = 0, j = arguments.length - 2; i < j; i += 3) {
        obj = document.getElementById(arguments[i]);
        if (obj) {
          v = arguments[i+2];
          obj.style.display = v == 'show' ? 'block': (v == 'hide' ? 'none' : v);
        }
      }
    }
    Is there a reason that both of the Flash movies try to load as the page loads? It is showing both of the Flash movies as 'visible' until they all are loaded, and then, after they all are completely loaded, the first Flash movie is 'visible' and the second movie is 'hidden'.

    I really appreciate your help!
    Todd Temple > T2 Design

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, because javascript only kicks in after all the content has loaded.

    If you want only the first one to be visible at the beginning you have to make it so from the outset. Doing this with a server-side language would be simple. All you need to do is give the first one an id of "firstmovie", for instance, and then hide all the others with CSS. Let's say they are all in a div with the class "flashmovies":
    Code:
    .flashmovies {
      display:none;
    }
    #firstmovie {
      display:block;
    }
    An even neater way, of course, would be to switch classes with the javascript instead of changing the 'display' property of the 'style' object.

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Yes, because javascript only kicks in after all the content has loaded.

    If you want only the first one to be visible at the beginning you have to make it so from the outset. Doing this with a server-side language would be simple. All you need to do is give the first one an id of "firstmovie", for instance, and then hide all the others with CSS. Let's say they are all in a div with the class "flashmovies":
    Code:
    .flashmovies {
      display:none;
    }
    #firstmovie {
      display:block;
    }
    An even neater way, of course, would be to switch classes with the javascript instead of changing the 'display' property of the 'style' object.

    I have added the div class and div id as well as the two styles to my CSS and now none of the Flash movies load. I know you are hating me by now... but could you take a quick peek at my code once again?

    LINK-
    http://t2graphicdesign.com/life/gallery.html
    Todd Temple > T2 Design

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The JavaScript code that Dreamweaver generates is a horrible mess. How about googling for this, its one of the most common JavaScript questions. I am sure you will find tons of answers.

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    I have added the div class and div id as well as the two styles to my CSS and now none of the Flash movies load.
    Doesn't look like it to me. I see a flash movie and then when I click another link the new flash movie appears underneath the first one. And you're still using the garbage Dreamweaver produced along with inline event handlers (onclick in your HTML).

  8. #8
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles, I didn't hear back from you soon enough and I got antsy. I did a Google search for the "show/hide javascript' and wandered down a new road. Sorry about that. I am trying to show the client something by today and I wanted to keep moving forward to figure this thing out.

    Let me post a new link to the pages we were working on... Do you have a minute to spare?
    Todd Temple > T2 Design

  9. #9
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Todd Temple > T2 Design

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Todd Temple
    Raffles, I didn't hear back from you soon enough and I got antsy. I did a Google search for the "show/hide javascript' and wandered down a new road. Sorry about that. I am trying to show the client something by today and I wanted to keep moving forward to figure this thing out.

    Let me post a new link to the pages we were working on... Do you have a minute to spare?
    Not really. It's better to do this. Use this script:
    Code Javascript:
    var divs;
    function init() {
      divs = document.getElementsByClass('flashmovies');
      var links = document.getElementById('mainContent').getElementsByTagName('a');
      for (var i = 0, j = links.length; i < j; i++) {
        links[i].onclick = showHide;
      }
    }
    function showHide() {
     
      for (var i = 0, j = divs.length; i < j; i++) {
        if (divs[i].id === this.rel) {
          if (divs[i].className.indexOf('show') < 0) divs[i].className += ' show';
          continue;
        }
        divs[i].className.replace(' show', '');
      }
    }
    if (window.addEventListener) window.addEventListener('load', init, false);
    else if (window.attachEvent) window.attachEvent('onload', init);
    You will need to find yourself a getElementsByClass script. There are billions of them on the internet (just like what you're trying to do here, really, as Pepejeria pointed out).

    This is the HTML by default:
    HTML Code:
    <div class="flashmovies show">First</div>
    <div id="frun86" class="flashmovies">Second</div>
    <div id="frun146" class="flashmovies">Third</div>
    <div class="flashmovies">Fourth</div>
    As you can see, the first one has the class "show" so that it displays by default to start with.
    Code CSS:
    .flashmovies {display:none}
    .show {display:block}
    List of links:
    HTML Code:
    <div id="mainContent">
        <ul>
        <li><a href="#" rel="frun86">Fox Run Lot 86</a></li>
        <li><a href="#" rel="frun146">Fox Run Lot 146</a></li>
        <li><a href="#">Lashbrooke Lot 1</a></li>
        <li><a href="#">Phillips Lot 1</a></li>
        <li><a href="#">Project 5</a></li>
        </ul>
    <!-- end #mainContent --></div>
    The links are connected to their relevant divs using the rel attribute (relating to the ID of the div to show). When you click any of those links it hides all the divs with the class "flashmovies", keeping the one with the ID that relates to the link that was clicked showing.

  11. #11
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like I am wasting your time, since I do not understand the javascript involved to complete this task. I have implemented your code to the best of my ability and it is still not working properly. The links are listed below. Maybe I should hire someone... maybe you... Let me know if I have missed any of your instructions.


    HTML-
    http://t2graphicdesign.com/life/raffles.html


    CSS-
    http://t2graphicdesign.com/c/raffles.css


    JAVASCRIPT-
    http://t2graphicdesign.com/js/raffles.js
    Todd Temple > T2 Design

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You're missing the last two lines of the javascript I posted and you also haven't found yourself a getElementsByClass script (it should only be a four or five line script) as I mentioned you needed to do for it to work.

  13. #13
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a getElementsByClass script and added it to my external javascript document, but, obviously, I do not know how to call it properly. Here is what I found....

    Code:
    // JavaScript Document
    
    var divs;
    function init() {
      divs = document.getElementsByClass('flashmovies');
      links = document.getElementById('mainContent').getElementsByTagName('a');
      for (var i = 0, j = links.length; i < j; i++) {
        links[i].onclick = showHide;
      }
    }
    function showHide() {
    
      for (var i = 0, j = divs.length; i < j; i++) {
        if (divs[i].id === this.rel) {
          if (divs[i].className.indexOf('show') < 0) divs[i].className += ' show';
          continue;
        }
        divs[i].className.replace(' show', '');
      }
    }
    if (window.addEventListener) window.addEventListener('load', init, false);
    else if (window.attachEvent) window.attachEvent('onload', init);
    
    // ---
    /*
        Written by Jonathan Snook, http://www.snook.ca/jonathan
        Add-ons by Robert Nyman, http://www.robertnyman.com
    */
    // ---
    /*
    	Examples of how to call the function:
    	
    	To get all a elements in the document with a "info-links" class:
        getElementsByClassName(document, "a", "info-links");
        
    	To get all div elements within the element named "container", with a "col" and a "left" class:
        getElementsByClassName(document.getElementById("container"), "div", ["col", "left"]);
    */
    // ---
    function getElementsByClassName(oElm, strTagName, strClassName){
    	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    	var arrReturnElements = new Array();
    	strClassName = strClassName.replace(/\-/g, "\\-");
    	var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    	var oElement;
    	for(var i=0; i<arrElements.length; i++){
    		oElement = arrElements[i];		
    		if(oRegExp.test(oElement.className)){
    			arrReturnElements.push(oElement);
    		}	
    	}
    	return (arrReturnElements)
    }
    // ---
    // Revised version May 11th 2007
    function getElementsByClassName(className, tag, elm){
    	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
    	var tag = tag || "*";
    	var elm = elm || document;
    	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    	var returnElements = [];
    	var current;
    	var length = elements.length;
    	for(var i=0; i<length; i++){
    		current = elements[i];
    		if(testClass.test(current.className)){
    			returnElements.push(current);
    		}	
    	}
    	return returnElements;
    }
    // ---
    /*
    	Revised to support looking for multiple class names,
    	no matter in which order they're applied to the element
    */
    function getElementsByClassName(oElm, strTagName, oClassNames){
    	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    	var arrReturnElements = new Array();
    	var arrRegExpClassNames = new Array();
    	if(typeof oClassNames == "object"){
    		for(var i=0; i<oClassNames.length; i++){
    			arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames[i].replace(/\-/g, "\\-") + "(\\s|$)"));
    		}
    	}
    	else{
    		arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames.replace(/\-/g, "\\-") + "(\\s|$)"));
    	}
    	var oElement;
    	var bMatchesAll;
    	for(var j=0; j<arrElements.length; j++){
    		oElement = arrElements[j];
    		bMatchesAll = true;
    		for(var k=0; k<arrRegExpClassNames.length; k++){
    			if(!arrRegExpClassNames[k].test(oElement.className)){
    				bMatchesAll = false;
    				break;
    			}
    		}
    		if(bMatchesAll){
    			arrReturnElements.push(oElement);
    		}
    	}
    	return (arrReturnElements)
    }
    // ---
    // Array support for the push method in IE 5
    if(typeof Array.prototype.push != "function"){
    	Array.prototype.push = ArrayPush;
    	function ArrayPush(value){
    		this[this.length] = value;
    	}
    }
    
    
    /* End getElementsByClassName Function */
    //--
    Todd Temple > T2 Design

  14. #14
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You don't need to do anything with it, except change the name. As you will notice, in the script I provided there is a line containing "getElementsByClass", which has a different name to Snook's script.

  15. #15
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Am I getting close?


    Code:
    // JavaScript Document
    
    var divs;
    function init() {
          div = getElementsByClassName(document, "a", "mainContent");
          links = getElementsByClassName(document.getElementById("mainContent"), "div", ["flashmovies"]);
      
    /*  divs = document.getElementsByClass('flashmovies');
      links = document.getElementById('mainContent').getElementsByTagName('a');
    */
    
      for (var i = 0, j = links.length; i < j; i++) {
        links[i].onclick = showHide;
      }
    }
    function showHide() {
    
      for (var i = 0, j = divs.length; i < j; i++) {
        if (divs[i].id === this.rel) {
          if (divs[i].className.indexOf('show') < 0) divs[i].className += ' show';
          continue;
        }
        divs[i].className.replace(' show', '');
      }
    }
    if (window.addEventListener) window.addEventListener('load', init, false);
    else if (window.attachEvent) window.attachEvent('onload', init);
    Todd Temple > T2 Design

  16. #16
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It really looks like you're blindly copying and pasting stuff without giving any thought to what you're doing or how the code you are trying to use works.

    You have three overwriting getElementsByClassName scripts there. I suggest keeping the one that was updated on May 11th 2007. Also no need to include the Array push method included at the bottom unless you are intending to support versions older than IE5.5.

    These lines are wrong:
    Code:
    div = getElementsByClassName(document, "a", "mainContent");
    links = getElementsByClassName(document.getElementById("mainContent"), "div", ["flashmovies"]);
    I don't know why you bothered playing with the "links" line - the divs one was the only one that needed changing. That should be:
    Code:
    divs = getElementsByClassName('flashmovies', 'div');
          var links = document.getElementById('mainContent').getElementsByTagName('a');

  17. #17
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was blindly copying and pasting due to the fact that I know very little about javascript. That is why I posted on SitePoint. I am trying to learn the suggestions that you and others have posted, but I am not catching on quick enough. You should see me with PHP!


    Anyway, I have made the corrections and it now looks like the links load their respective Flash movies but they are loading underneath the movie that is visible when the page loads.

    http://t2graphicdesign.com/life/raffles.html
    Todd Temple > T2 Design

  18. #18
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The first div also needs an ID to go with its relevant link, that's why it isn't getting hidden. There is also an error between one div and its corresponding link where the id isn't the same as the rel attribute.

  19. #19
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have corrected the 'rel' tag as well as placing an id on the first DIV, and I hate to say it, but the Flash movies are still showing up underneath the first DIV. Do they appear that way on your screen?
    Todd Temple > T2 Design

  20. #20
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    A foolish error on my part. Replace this line:
    Code:
    divs[i].className.replace(' show', '');
    with this:
    Code:
    divs[i].className = divs[i].className.replace(' show', '');

  21. #21
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wooooooooo Whooooooooooooooooooo!

    That works! Is there anyway I can repay you? Perhaps a donation to the PHP Photo Gallery project? Man oh man, I really truly appreciate you sticking with me and helping me out with this show/hide issue. You are a life saver!

    P.S.
    Any thoughts as to why the <div id="bar"></div> style is not showing properly as it is on all of the other pages? The same with the <div id="mainContent">. I had created a style to set the unordered list elements within a stroked box and to center them and, after adding the new javascript, these two divs seem to have broken.... Anyway, if you are finished with me, I totally understand. Thanks again!
    Todd Temple > T2 Design

  22. #22
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    My pleasure. And the PHP Photo Gallery has been ignored for almost a year now! Almost forgot about it.

    Instead of using a div to create a horizontal bar (unnecessary), use CSS.
    Code:
    .flashmovies {border-bottom:7px solid brown}


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
  •