HTML/CSS Understanding XHTML Slide Show w/ Javascript & jQuery

[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 argument '.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>
<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

 

[DaveC426913]

Yeah, this is jquery stuff. They have the jquery engine referenced: <script type = "text/javascript" src = "http://ajax ... 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" .


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"


http://docs.jquery.com/Attributes/addClass" 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.:

<ul class="slidelist">
  <li></li>
  <li></li>
</ul>

is converted to

<ul class="slidelist">
  <li></li>
  <li class="last"></li>
</ul>

And http://docs.jquery.com/Attributes/attr"

What are you trying to accomplish/change/fix?

 

[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.