Hi, I am new to jQuery and I am having trouble with the syntax, selectors and refining when trying to create functions. I was hoping someone might be able to help.
What I am trying to achieve:
I have a gallery consisting of a ul with images placed in vertically stacked list items. The ul is in a fixed size wrapper with overflow:hidden so only the first list item displays. The user clicks a button and the first li is hidden using hide(400). This makes the other list items flow up and reveals the second list item within the wrapper window.
When the last list item is visible, the click will show(400) all of the list items again, causing them to flow back into order and only the first item will be showing again.
Further clicks will repeat this process from the beginning.
I know what I would like to do in terms of code, but I am having trouble with the correct syntax, selectors and refining.
I have included the html and description version of the code I was hoping to create. I know the code could be much more efficient by placing functions into varibles and testing for true false, but I would like to see the steps with my longer code description for learning purposes. Perhaps afterwards someone can blast it off in two lines.
Regardless, thanks to anyone who can help with this. I love the possibilities of jQuery and look forward to learning more.
Thanks in advance! ThomUI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list hiding test</title>
<style>
.listWrapper {
height:25px;
width:380px;
background-color:#d6d6d6;
float:left;
font-size:18px;
margin:0;
list-style:none;
overflow:hidden;
}
span { color:blue; text-decoration:underline; cursor:pointer; }
.example { font-style:italic; }
a.nextItemBtn {
background-color:#888888;
cursor:pointer;
width:120px;
height:120px;
float:left;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<ul class="listWrapper">
<li ><a href=""><img src="" />pic 1</a></li>
<li ><a href=""><img src="" />pic 2</a></li>
<li ><a href=""><img src="" />pic 3</a></li>
<li ><a href=""><img src="" />pic 4</a></li>
</ul>
<a class="nextItemBtn"><img src="" />see more</a>
<script>
var listLength = 4; //number of li items in the ul, this will be dynamic, here we test with 4
var listCounter = 0; //show(400) all list items once we reach the end (listLength -1)
var listPosition = [0]; //the first spot in the returned set of matched elements, incremented at each click()
$(".nextItemBtn").click(function () {//click nextItemBtn
if (listCounter == listLength -1) {//if we reach the end of the list, make the entire list visible again using show(400)
$(".listWrapper li").show(400); //show all list items
listCounter = 0;//reset the listCounter, this will allow the user to see the first list item again while the rest remain overflow:hidden
listPosition = [0];//reset list position
}
else {
$(.listWrapper li[listPosition]).hide(400);//get the first li in listWrapper and hide(400)
listCounter ++;//add one to the number of li items we have hidden
listPosition ++;//add one to the index position so next click() the second li in listWrapper will hide(400), next time the third etc
//I'm pretty sure you can't stick a variable in for an index number... doh!
}
});
</script>
</body>
</html>