Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

XHTML (slide show)

  1. Aug 22, 2009 #1
    I have this script on one of my webpages that is used to create a slideshow. The code works, however, I am not familiar with javascript- that is used for web design. I have studied java for basic programming, but have never seen the notation $, nor the use of a single quote for the arguement '.slideList li:gt(0)'. Could someone also explain to me what li:gt(0) means (I've never seen the use of semi colons in java like this before), the addClass funtion, along with the .attr function.

    If there is a website I could reference these terms, perhaps that would be best.

    $('.slideList li:gt(0)').hide();

    --------------------------------------------------------------------------------------
    This is the full set of code:
    --------------------------------------------------------------------------------------
    <ul class="slideList">
    <li><img src="PICTURES/"
    alt = "We will soon be incorporating a slide show..."></img></li>
    <li><img src="PICTURES/"
    alt = "... however, we are still undergoing some
    other modifications."></img></li>
    <li><img src="PICTURES/"
    alt = "Since we are a small firm, we are still studying some basic
    concepts..."></img></li>
    <li><img src="PICTURES/"
    alt = "...these concepts will be incorporated on our site in the
    near future."></img></li>
    </ul>

    <script type = "text/javascript" src =
    "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> [Broken]
    <script type = "text/javascript">
    $('.slideList li:gt(0)').hide();
    $('.slideList li:last').addClass('last');
    var cur = $('.slideList li:first');

    function animate()
    {
    cur.fadeOut( 1000 );
    if ( cur.attr('class') == 'last' )
    cur = $('.slideList li:first');
    else
    cur = cur.next();

    cur.fadeIn( 1000 );
    }

    $(function( )
    {
    setInterval( "animate()", 5000 );
    });
    </script>


    -------------------------------------------------------------------------------------
    In my CSS file I have:
    -------------------------------------------------------------------------------------
    ul.slideList
    {
    position: relative; left: 150px; /* See definitions below (#8) */
    }

    .slideList li {
    list-style-type: none; /*Gets rid of bullets next to image/text*/
    position: absolute; /* See definitions below (#9) */
    }

    .slideList img {
    border: 1px solid #e7e7e7;
    padding: 5px;
    background-color: #ececec;
    }

    Thanks,


    JL
     
    Last edited by a moderator: May 4, 2017
  2. jcsd
  3. Aug 22, 2009 #2

    DaveC426913

    User Avatar
    Gold Member

    Yeah, this is jquery stuff. They have the jquery engine referenced: <script type = "text/javascript" src = "http://ajax [Broken] ... jquery/1.3.2/jquery.min.js"></script>

    jquery creates an object, named $. Then they pass strings such as '.slideList li:first' into the object which they then parse.

    .slideList li:first is actually CSS notation. Actually, it's jquery's paraphrased flavour of CSS notation li:first-child

    :first is a pseudo-class; it means the first child.

    Look up http://www.w3schools.com/css/pr_pseudo_first-child.asp" [Broken].


    gt(0) is a call to a function that returns all elements with an index higher than <n>, in this case, 0.

    So, '.slideList li:gt(0)').hide(); hides all li elements.

    http://docs.jquery.com/Selectors/gt" [Broken]


    http://docs.jquery.com/Attributes/addClass" [Broken] is a generic jquery function that ... well ... adds a class to a tag. In this case, it is locating the last li in the ul using the :last-child pseudo-class (which some browsers, but not all, can do) and explicitly gives it a class, called "last".
    i.e.:
    Code (Text):
    <ul class="slidelist">
      <li></li>
      <li></li>
    </ul>
    is converted to
    Code (Text):
    <ul class="slidelist">
      <li></li>
      <li class="last"></li>
    </ul>
    And http://docs.jquery.com/Attributes/attr" [Broken]

    What are you trying to accomplish/change/fix?
     
    Last edited by a moderator: May 4, 2017
  4. Aug 23, 2009 #3
    I am just trying to understand the code to provide different aspects to my webpage. Also sometimes my codes do different things/have different looks on IE and mozilla- so it's nice to know what I'm doing.

    Thanks a lot for your help, it really explained a lot.
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook




Similar Discussions: XHTML (slide show)
  1. XHTML (Flash) (Replies: 2)

Loading...