# XHTML (slide show)

1. Aug 22, 2009

### jeff1evesque

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 =
<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();

}

$(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. Aug 22, 2009 ### DaveC426913 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
3. Aug 23, 2009

### jeff1evesque

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.