SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript FadeIn List Items - Simple issue

    Hi,

    I'm really not great with Javascript.

    Currently the code below animates each list item loading when the page loads, however I'd like the list items to animate each time a tab is clicked.

    I have the following code. What do I change to the code below to achieve the above?

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>Simple List FadeIn</title>
    <style>
      ul#thisisthelist1 li, ul#thisisthelist2 li{
        display:none;
      }
    </style>
    
    <script type="text/javascript">
    /* idTabs ~ Sean Catchpole - Version 2.2 - MIT/GPL */
    (function(){var dep={"jQuery":"http://code.jquery.com/jquery-latest.min.js"};var init=function(){(function($){$.fn.idTabs=function(){var s={};for(var i=0;i<arguments.length;++i){var a=arguments[i];switch(a.constructor){case Object:$.extend(s,a);break;case Boolean:s.change=a;break;case Number:s.start=a;break;case Function:s.click=a;break;case String:if(a.charAt(0)=='.')s.selected=a;else if(a.charAt(0)=='!')s.event=a;else s.start=a;break;}}
    if(typeof s['return']=="function")
    s.change=s['return'];return this.each(function(){$.idTabs(this,s);});}
    $.idTabs=function(tabs,options){var meta=($.metadata)?$(tabs).metadata():{};var s=$.extend({},$.idTabs.settings,meta,options);if(s.selected.charAt(0)=='.')s.selected=s.selected.substr(1);if(s.event.charAt(0)=='!')s.event=s.event.substr(1);if(s.start==null)s.start=-1;var showId=function(){if($(this).is('.'+s.selected))
    return s.change;var id="#"+this.href.split('#')[1];var aList=[];var idList=[];$("a",tabs).each(function(){if(this.href.match(/#/)){aList.push(this);idList.push("#"+this.href.split('#')[1]);}});if(s.click&&!s.click.apply(this,[id,idList,tabs,s]))return s.change;for(i in aList)$(aList[i]).removeClass(s.selected);for(i in idList)$(idList[i]).hide();$(this).addClass(s.selected);$(id).show();return s.change;}
    var list=$("a[href*='#']",tabs).unbind(s.event,showId).bind(s.event,showId);list.each(function(){$("#"+this.href.split('#')[1]).hide();});var test=false;if((test=list.filter('.'+s.selected)).length);else if(typeof s.start=="number"&&(test=list.eq(s.start)).length);else if(typeof s.start=="string"&&(test=list.filter("[href*='#"+s.start+"']")).length);if(test){test.removeClass(s.selected);test.trigger(s.event);}
    return s;}
    $.idTabs.settings={start:0,change:false,click:null,selected:".selected",event:"!click"};$.idTabs.version="2.2";$(function(){$(".idTabs").idTabs();});})(jQuery);}
    var check=function(o,s){s=s.split('.');while(o&&s.length)o=o[s.shift()];return o;}
    var head=document.getElementsByTagName("head")[0];var add=function(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;head.appendChild(s);}
    var s=document.getElementsByTagName('script');var src=s[s.length-1].src;var ok=true;for(d in dep){if(check(this,d))continue;ok=false;add(dep[d]);}if(ok)return init();add(src);})();
    </script>
    
    </head>
    <body>
    
    <div id="usual1" class="usual"> 
      <ul> 
        <li><a class="selected" href="#tab1">Tab 1</a></li> 
        <li><a href="#tab2">Tab 2</a></li> 
      </ul>
      
      <div id="tab1">
    	  <ul id="thisisthelist1">
    	   <li>1</li>
    	   <li>2</li>
    	   <li>3</li>  
    	  </ul>  
      </div>
      
      <div id="tab2">  
    	  <ul id="thisisthelist2">
    	   <li>4</li>
    	   <li>5</li>
    	   <li>6</li>  
    	  </ul>  
      </div> 
    </div> 
     
    <script type="text/javascript"> 
      $("#usual1 ul").idTabs(); 
    </script>
    
    <script>
    $(document).ready(function () {
      
    	$("ul#thisisthelist1 li").each(function(i){
    	  $(this).delay(i*400).fadeIn('slow');
    	});
    	  
    	$("ul#thisisthelist2 li").each(function(i){
    	  $(this).delay(i*400).fadeIn('slow');
    	});    
    
    });
    
    </script>
    
    </body>
    
    </html>
    I'm really not sure where to begin and would love some guidance with this.


    Many thanks for any pointers.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Have a look at the following jsFiddle and make sure its the effect you desire, if it is study the code and let me know if you don't understand something.

    Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow!! Many thanks, SgtLegend.

    The only slight difference I was hoping for is that only one tab can display at the one time. Is this possible? So if tab1 is open and I click tab2, tab1 would close and tab2 would then open.

    I really owe you a virtual beer. What's your poison?

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and secondly, is there a way I can hyperlink to "tab2" so if a user clicks on it from (say) an email, that tab would open initially as opposed to the default tab1?

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem, as for the second part of your question yes it's very possible to do that. I didn't have a chance to fully test the code because I'm heading off to bed but it should work fine.

    Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic - Many, many thanks!! This is plenty to get me started :-)

    I may be back, but I really appreciate your efforts. Thanks again

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi SgtLegend.

    I just have a couple more queries if it's ok.

    Using this as the example...

    1) How do I display my Tabs (Tab 1 and Tab 2) inline (next to one another) instead of underneath one another....aaand still keep the UL's appearing underneath?

    2) Is there a way if I visit the site www.site.com/#tab1 it would open Tab 1 automatically?


    Many thanks again for all your help.

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got an answer for Q.1

    HTML Code:
    <a href="#" style="position:absolute;top:60px;left:0px">Tab 1</a>
    <a href="#" style="position:absolute;top:60px;left:120px">Tab 2</a>
    It's a bit of a dirty fix so I'm off for a bath of sheer shame scrubbing proportions


    I'm still totally lost for Q.2 so any pointers would mean a lot.


    Thank you


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
  •