SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    click to load a list

    Hi

    Is it possible to click on an element of the list, then load another list?

    EX: lets say you have a list with 4 elements: A,B,C,B and when a user clicks on A, it will load a list under A with another 4 elements: 1,2,3,4.

    Can this be done with Javascript ?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    If you have elements A,1,2,3,4,B,C,B you can then hide 1,2,3,4 when the page loads and show them when A clicked on.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could also use AJAX
    to get the data, and then parse the response.

    Offcourse you'll have the drawbacks of AJAX then.
    (for example: when javascript isn't enabled, the user won't get all the data, with the method of pmw57 you want have that problem if implemented well)

  4. #4
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you make the set 1 click and shows the list of images ? is it onclick() ?

    Code:
    <ul>
        <li><a href="#">set 1</a>
           <ul>
               <li><img src="1.jpg"></li> 
               <li><img src="2.jpg"></li>
           </ul>
        </li>   
       <li><a href="#">set 2</a>
           <ul>
               <li><img src="1.jpg"></li> 
               <li><img src="2.jpg"></li>
           </ul>
        </li> 
    </ul>

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this maybe:

    HTML: (notice the anchor's class name)

    Code HTML4Strict:
    <ul>
        <li><a href="#" class="OpenUL">set 1</a>
           <ul>
               <li><img src="1.jpg"></li> 
               <li><img src="2.jpg"></li>
           </ul>
        </li>   
       <li><a href="#" class="OpenUL">set 2</a>
           <ul>
               <li><img src="1.jpg"></li> 
               <li><img src="2.jpg"></li>
           </ul>
        </li> 
    </ul>

    JAVASCRIPT: (Put just above </body>)

    Code JavaScript:
    <script type="text/javascript">
    var LinkToOpenUL = document.getElementsByTagName("A");
    for ( var i = 0 ; i < LinkToOpenUL.length ; i++ ) { 
     if ( LinkToOpenUL[i].className == "OpenUL" ) {
      LinkToOpenUL[i].parentNode.childNodes[2].style.display = "none";
      LinkToOpenUL[i].onclick = function() { 
       if ( this.parentNode.childNodes[2].nodeName == "UL" ) { 
        this.parentNode.childNodes[2].style.display = (this.parentNode.childNodes[2].style.display=="block") ? "none" : "block";
       } 
      }
     }
    }
    </script>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you put the Javascript code in a external file ?

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep....

    Code:
    <script type="text/javascript" src="FILE-NAME.js"></script>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried with external, but it won't work and even If I put the whole code above </head> won't work too. The only place that will work is above </body>

    would you explain why?

    Thanks

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you need to put it in the <head> section then you'll have to put it within an onload function...

    Like this:

    Code JavaScript:
    if(window.onload) window.onload = function() {
     var LinkToOpenUL = document.getElementsByTagName("A");
     for ( var i = 0 ; i < LinkToOpenUL.length ; i++ ) { 
      if ( LinkToOpenUL[i].className == "OpenUL" ) {
       LinkToOpenUL[i].parentNode.childNodes[2].style.display = "none";
       LinkToOpenUL[i].onclick = function() { 
        if ( this.parentNode.childNodes[2].nodeName == "UL" ) { 
         this.parentNode.childNodes[2].style.display = (this.parentNode.childNodes[2].style.display=="block") ? "none" : "block";
        } 
       }
      }
     }
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  10. #10
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh thanks! Why is it that when I click on "Set 2" link, the set 2 word comes underneath "Set 1" even If I set it " Float: left" for those two LI ?
    EX: Set 1 Set2 becomes
    Set 1
    Set2

    Is there a way to set them just next to each other ?

    Thanks

  11. #11
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could float them left ... or set them to display:inline...

    Post your current html/css if you need more help with the styling.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  12. #12
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the HTML
    Code:
     <ul class="topic">
                        <li class="lister"><p class="OpenUL">1</p>
    		               <ul class="listing">
    					         
    				  	         <li ><img id="large" src="images/large1.jpg" title="pic" border="0" /></li>
    				  	         <li ><img id="large" src="images/large2.jpg" title="pic" border="0" /></li>
    				  	         <li ><img id="large" src="images/large3.jpg" title="pic" border="0" /></li>
                          </ul>
                        </li>
                       <li class="lister"><p class="OpenUL">2</p>
    		               <ul class="listing">
    					        <li ><img id="large" src="images/small1.jpg" title="Pic" border="0" /></li>
    					        <li ><img id="large" src="images/small2.jpg" title="Pic" border="0" /></li>
    						  	<li ><img id="large" src="images/small3.jpg" title="Pic"  border="0" /></li>
                         </ul>
                      </li>
    </ul>

    CSS

    Code:
    ul.topic{
    	position: relative;
    	top: 0px;
    	width: 50px;
    	height: 20px;
    	left:0;
    	
    }
    ul.topic li p{
        position: relative;
    	float: left;
    	font-size: 12px;
    	top:0;
    	padding: 2px;
    	margin: 0px;
    	color:#aaa;
    	text-decoration: none;
    	display: inline;
    	list-style-type: none;
    }
    
    ul.listing{
    	position: relative;
    	top: 10px;
    	left:10px;
    	width: 730px;
    	height: 620px;
    	
    }
    .listing li {
       float: left;
       padding: 0;
       margin: 1px 0 1px 1px;
       list-style-type: none;
       display: block;   
    }

  13. #13
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why is it that the click does not work on IE 7 ? Also, is it possible to display the first set1 by default ?

    Thanks

  14. #14
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok... This should be what ur after:

    Notice that in the HTML the UL you want to show by default now has an ID of "show": (you can only give this ID to one UL)

    HTML:
    Code HTML4Strict:
    <ul class="topic">
        <li class="lister"><a class="OpenUL" href="#">1</a>
            <ul class="listing" id="show">
                 <li><img id="large" src="images/large1.jpg" title="pic" border="0" /></li>
                 <li><img id="large" src="images/large2.jpg" title="pic" border="0" /></li>
                 <li><img id="large" src="images/large3.jpg" title="pic" border="0" /></li>
           </ul>
        </li>
        <li class="lister"><a class="OpenUL" href="#">2</a>
            <ul class="listing">
                <li>d<img id="large" src="images/small1.jpg" title="Pic" border="0" /></li>
                <li><img id="large" src="images/small2.jpg" title="Pic" border="0" /></li>
                <li><img id="large" src="images/small3.jpg" title="Pic"  border="0" /></li>
          </ul>
       </li>
    </ul>

    And the new script (to go in <HEAD>):

    Code JavaScript:
    <script type="text/javascript">
    window.onload = function() { 
     var LinkToOpenUL = document.getElementsByTagName("A");
     for ( var i = 0 ; i < LinkToOpenUL.length ; i++ ) { 
      if ( LinkToOpenUL[i].className == "OpenUL" ) {
       var UL = LinkToOpenUL[i].parentNode.childNodes[2];
       (UL.id!="show") ? UL.style.display = "none" : UL.style.display = "block";
       LinkToOpenUL[i].onclick = function() { 
        if ( this.parentNode.childNodes[2].nodeName == "UL" ) { 
         this.parentNode.childNodes[2].style.display = (this.parentNode.childNodes[2].style.display=="block") ? "none" : "block";
        } 
       }
      }
     }
    }
    </script>

    Does that work?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  15. #15
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks the default did show up. However, when I click on set 1 link then click on set 2 link , it works fine, but after clicked on set 2, then click on set 1, it doesn't work and I click on set2 again, some how the gallery displays set 1 images. any clue?

  16. #16
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's odd, it seems to work perfectly over here. Sometimes it seems like it's not working if you try to click too fast - i.e. you have to wait for one 'thing' to happen before another thing can happen.

    Could you post a link to the page so I can see?
    If you don't want to post it publically you could PM it to me.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  17. #17
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just send the link through PM.

  18. #18
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you check out the link?

  19. #19
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Yep I had a look. I did not realise you were doing this type of thing when I first offered the script... - I thought you were going to use it for a menu or something.

    Anyway, I have overcomplicated it quite a bit and if/when I have time I'll try and go over it again.

    Below is a working script... which is, like i said, a bit overcomplicated...

    Code Javascript:
    <script type="text/javascript">
    window.onload = function() {
     var LinkToOpenUL = document.getElementsByTagName("A");
     for ( var i = 0 ; i < LinkToOpenUL.length ; i++ ) {
      if ( LinkToOpenUL[i].className == "OpenUL" ) {
       var UL = LinkToOpenUL[i].parentNode.childNodes[2];
       (UL.id!="show") ? UL.style.display = "none" : UL.style.display = "block";
       LinkToOpenUL[i].onclick = function() {
        if ( this.parentNode.childNodes[2].nodeName == "UL" ) {
         this.parentNode.childNodes[2].style.display = "block";
      var ULs = document.getElementsByTagName("UL");
      for ( var x = 0 ; x < ULs.length ; x++ ) {
       if(ULs[x].className=="listing") {
       ULs[x].style.zIndex = 5;
      }
      }
      this.parentNode.childNodes[2].style.zIndex = 10;
      return false;
        }
       }
      }
     }
    }
    </script>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  20. #20
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WoW! Thanks a lot! I think its a bit advance for me to understand at this point. I will try my best to understand this whole logic. Thank you !

  21. #21
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I have a sentence on top of the larger image, looks like the zIndex will cover the sentence and not be able to see it.

  22. #22
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! Is it ok to use your code in a E-commerce site?


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
  •