I'm working on a search bar. First, the user will only be able to see the search icon. When the user clicks on the search icon then that search icon gets replaced with a div that contains a new search bar. I want that when the user click on the search icon the new div with a transition of 1 second in such a way that it looks like the new div was the expanded version of the search icon.
<img src="https://populusww.com.au/wp-content/uploads/2023/01/search.png" id="Search-Collapse" style="cursor: pointer;" onclick="toggle_div_fun();">
<br/><br/>
<script>
function toggle_div_fun() {
debugger;
document.getElementById("Search-Collapse").style.transition = "all 2s";
debugger;
var divelement = document.getElementById("Search-Collapse");
var searchelement =document.getElementById("Search-Expand");
var menusection =document.getElementById("menu-section");
var searchsection =document.getElementById("search-section");
if(divelement.style.display == 'none'){
divelement.style.display = 'block';
searchelement.style.display = 'none';
menusection.style.width = '65%';
searchsection.style.width = '15%';
searchsection.style.marginTop = '30px';
}
else{
divelement.style.display = 'none';
searchelement.style.display = 'block';
menusection.style.width = '65%';
searchsection.style.width = '15%';
searchsection.style.marginTop = '50px';
}
}
</script>
Display did not work with transition, you can use divelement.style.opacity = 0; to hide your div with effect
and do not forget set opacity for initiate set divelement.style.opacity = 1;
something like this:
<img src="https://populusww.com.au/wp-content/uploads/2023/01/search.png" id="Search-Collapse" style="cursor: pointer;" onclick="toggle_div_fun();">
<br/><br/>
<script>
document.onload = () => {
document.getElementById("Search-Expand").style.transition = "all 2s";
document.getElementById("Search-Collapse").style.transition = "all 2s";
document.getElementById("Search-Collapse").style.opacity = 1;
document.getElementById("Search-Expand").style.opacity = 1;
}
function toggle_div_fun() {
var divelement = document.getElementById("Search-Collapse");
var searchelement =document.getElementById("Search-Expand");
var menusection =document.getElementById("menu-section");
var searchsection =document.getElementById("search-section");
if(divelement.style.display == 'none'){
divelement.style.display = 'block';
searchelement.style.display = 'none';
menusection.style.width = '65%';
searchsection.style.width = '15%';
searchsection.style.marginTop = '30px';
}
else{
divelement.style.display = 'none';
searchelement.style.display = 'block';
menusection.style.width = '65%';
searchsection.style.width = '15%';
searchsection.style.marginTop = '50px';
}
}
</script>
You can do that using CSS opacity in JavaScript simple event listener;
Check this detailed code below if you don't understand any things let me know and I'll try to explain it to you :D
HTML:
<img src="https://populusww.com.au/wp-content/uploads/2023/01/search.png" id="Search-Collapse" style="cursor: pointer;">
<br>
<input type="text" id="Search-Input" placeholder="search query" />
CSS:
body {
background: red;
}
img {
width: 50px;
}
JS:
var searchIcon = document.querySelector('img');
var inputSearch = document.getElementById('Search-Input');
inputSearch.style.opacity = 0;
inputSearch.style.transition = "opacity 1s"
searchIcon.addEventListener('click', function(){
if(inputSearch.style.opacity == 0 || inputSearch.style.opacity == ''){
inputSearch.style.opacity = 1;
}
else {
inputSearch.style.opacity = 0;
}
});
and here is a working example on JSFIDDLE
Related
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box">
<button id="start" type="button" onclick="myStart()" > Start</button>
<script>
function myStart() {
document.getElementById("start").style.display="none";
var rosso = casuale(0,1);
if (rosso==0) {
var imgtest1= document.createElement("input");
imgtest1.src="http://www.w3schools.com/tags/logo_w3s.gif";
imgtest1.type="image";
imgtest1.style.height="50px";
imgtest1.style.width="50px";
imgtest1.style.position="absolute";
imgtest1.style.top="300px";
imgtest1.style.left="0px";
imgtest1.onclick= function() { document.getElementById("box").removeChild(imgtest1)
}
document.getElementById("box").appendChild(imgtest1);
}
else {
var imgtest1= document.createElement("input");
imgtest1.src="https://s3.amazonaws.com/impressivewebs/2014-02/w3schools-logo.jpg";
imgtest1.type="image";
imgtest1.style.height="50px";
imgtest1.style.width="50px";
imgtest1.style.position="absolute";
imgtest1.style.top="300px";
imgtest1.style.left="0px";
imgtest1.onclick= function() { document.getElementById("box").removeChild(imgtest1)}
document.getElementById("box").appendChild(imgtest1);
}
}
function casuale(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
</div>
</body>
I have a little problem with this code:
var rosso = casuale(0, 3)
if (rosso == 0) {
var imgtest1 = document.createElement("input");
imgtest1.src = "graphic/badtarget.png";
imgtest1.type = "image";
imgtest1.style.height = "50px";
imgtest1.style.width = "50px";
imgtest1.style.position = "absolute";
imgtest1.style.top = "300px";
imgtest1.style.left = "0px";
imgtest1.onclick = function() {
error++;
checkerror();
}
document.getElementById("box").appendChild(imgtest1);
} else {
var imgtest1 = document.createElement("input");
imgtest1.src = "graphic/goodtarget.png";
imgtest1.type = "image";
imgtest1.style.height = "50px";
imgtest1.style.width = "50px";
imgtest1.style.position = "absolute";
imgtest1.style.top = "300px";
imgtest1.style.left = "0px";
imgtest1.onclick = function() {
point++;
document.getElementById("box").removeChild(imgtest1);
if (point == maxp) {
livello2(7);
cleartarget();
}
}
document.getElementById("box").appendChild(imgtest1);
}
wheni try to remove the child "imgtest1" with the goodtarget.png image i have no problems, instead when i want to remove the child with the badtarget.png image the button stay here and there is no way to remove it. Why this happens? there is a way to solve this? if needed i can post other lines of code.
Thanks
Edit: Sorry for wasting your time, in the snippet the code works as intended (both the green and the blue images can disappear) but in my program can not.
the lines of code that i use for the remove child is a function that should be called at the end of a level:
var myNode = document.getElementById("box");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
this function cant remove the objects created with the "imgtest1.src = "graphic/badtarget.png";"
Thanks for your time
I am able do this functionality with different button. but i am not able achieve this on click of same button.
Any help/suggestions
Thanks
Toggle the current element using ternary-operator
Use Element.style.display to set the display css
property
var btn = document.getElementById('btn');
var curr = 'div2';
btn.onclick = function() {
document.getElementById(curr).style.display = 'none';
curr = curr === 'div2' ? 'div1' : 'div2';
document.getElementById(curr).style.display = 'block';
};
div {
display: none;
}
<div id="div1">#div1</div>
<div id="div2">#div2</div>
<button id='btn'>Change</button>
Anything like this?
function divchange(){
div1 = document.getElementById("div1");
div2 = document.getElementById("div2");
if(div1.style.display == "none"){
div1.style.display = "block";
div2.style.display = "none";
}else{
div1.style.display = "none";
div2.style.display = "block";
}
}
<button id="divchangebutton" onclick="divchange();">test</button>
<div id="div1">asdf</div>
<div id="div2" style="display:none;">qwert</div>
Problem - If "display:none" sets in css, we cannot get value. "elem.style.display" return empty string.
We can solve it, using Computed Style.
var btn = document.getElementById("btn-toggle");
btn.addEventListener("click", function(){
var one = document.querySelector(".one");
var tow = document.querySelector(".tow");
one.style.display = (getRealDisplay(one) == 'none') ? 'block' : 'none';
tow.style.display = (getRealDisplay(tow) == 'none') ? 'block' : 'none';
});
// get real value of 'display' property
function getRealDisplay(elem) {
if (elem.currentStyle) {
return elem.currentStyle.display;
} else if (window.getComputedStyle) {
var computedStyle = window.getComputedStyle(elem, null);
return computedStyle.getPropertyValue('display');
}
}
.one, .tow{
width:200px;
min-height: 200px;
background-color:burlywood;
}
.tow{
display: none;
background-color:cadetblue;
}
<div class="one">1</div>
<div class="tow">2</div>
<button id="btn-toggle">show hide</button>
/* egg & broke egg pair1 lite & broke lite pair2 pot & frys pair3 */
I would like to know how to make the images pair up or team up. So when you click the egg image it disappears and the broken egg appears. Then this image should also disappear then and one of the other two teams appear randomly lite click lite broke lite appears and disappears randomly and click pot it turns into frys then frys disappears and turns into a random team.
</head>
<body onLoad="setRandomImage()">
<img id="egg.png" src= "http//"onClick="setRandomImage();"/>
<img id="brokeEgg.png" src= "https://" style="display:none"/>
<img id="lite.png" src= "http://" style="display:none"/>
<img id="brokeLite.png" src= "http://" style="display:none"/>
<img id="pot.jpg" src= "https://style="display:none"/>
<img id="frys.jpg" src= "http://style="display:none"/>
<script type="text/javascript">
var myShapes= ["egg.png","brokeEgg.png","lite.png","brokeLite.png","pot.jpg","frys.jpg" ];
function setRandomImage() {
var imgElem = document.getElementById("egg.png")
imgElem.setAttribute('src',myShapes[Math.floor(Math.random()*6)]);
};
</script>
Here's a very simplified one by making use of HTML data-* attributes, but take in consideration:
The value data-image-seq attribute must be img followed by a number.
These numbers must be sequenced
Updated
jsFiddle
var imgs = document.querySelectorAll('.imgs-wrapper img'),
currentIMG = 1;
// attach click events on odd images only, egg, lite, pot, hi1, hello1
for (var i = 0; i < imgs.length; i += 2) {
addEvent(imgs[i], 'click');
}
function addEvent(element, event) {
element.addEventListener(event, function() {
var imgSeq = element.getAttribute('data-image-seq'),
nextImgSeq, nextImg, shownIMG;
imgSeq = parseInt(imgSeq.replace('img', ''), 10);
nextImgSeq = (imgSeq < imgs.length) ? (imgSeq + 1) : 1;
nextImg = 'img[data-image-seq=img' + nextImgSeq + ']';
element.style.display = 'none';
shownIMG = document.querySelector(nextImg);
shownIMG.style.display = 'block';
setTimeout(function() {
shownIMG.style.display = 'none';
showRandomImg();
}, 1000);
});
}
function showRandomImg() {
var randomIMG = returnRandomOddNum();
randomIMG = (randomIMG !== currentIMG) ? randomIMG : returnRandomOddNum();
currentIMG = randomIMG;
randomIMG = 'img[data-image-seq=img' + randomIMG + ']';
document.querySelector(randomIMG).style.display = 'block';
}
function returnRandomOddNum() {
var randomNum = Math.floor(Math.random() * imgs.length);
randomNum = (randomNum % 2 != 0) ? randomNum : randomNum + 1;
return randomNum;
}
.imgs-wrapper { position: relative; }
.imgs-wrapper { cursor: pointer; }
.hide-me { display: none; }
<div class="imgs-wrapper">
<img data-image-seq="img1" src="//dummyimage.com/150x50?text=egg">
<img data-image-seq="img2" src="//dummyimage.com/150x50?text=broke egg" class="hide-me">
<img data-image-seq="img3" src="//dummyimage.com/150x50?text=lite" class="hide-me">
<img data-image-seq="img4" src="//dummyimage.com/150x50?text=broke light" class="hide-me">
<img data-image-seq="img5" src="//dummyimage.com/150x50?text=pot" class="hide-me">
<img data-image-seq="img6" src="//dummyimage.com/150x50?text=frys" class="hide-me">
<img data-image-seq="img7" src="//dummyimage.com/150x50?text=Hi1" class="hide-me">
<img data-image-seq="img8" src="//dummyimage.com/150x50?text=Hi2" class="hide-me">
<img data-image-seq="img9" src="//dummyimage.com/150x50?text=Hello1" class="hide-me">
<img data-image-seq="img10" src="//dummyimage.com/150x50?text=Hello2" class="hide-me">
</div>
Use this function to toggle the visibility of two elements on click:
function bindToggleVisibilityOnClick(firstElemId, secondElemId) {
var firstElement = document.getElementById(firstElemId);
var secondElement = document.getElementById(secondElemId);
firstElement.onclick = function() { toggleVisibility(firstElement, secondElement); };
secondElement.onclick = function() { toggleVisibility(secondElement, firstElement); };
}
function toggleVisibility(checkElem, otherElem){
// If target is invisible
if (checkElem.style.display == "none"
//|| checkElem.style.visibility == "hidden"
) {
checkElem.style.display = "block";
// checkElem.style.visibility = "visible";
otherElem.style.display = "none"
// otherElem.style.visibility = "hidden";
}
else {
otherElem.style.display = "block";
checkElem.style.display = "none"
// checkElem.style.visibility = "hidden";
}
};
bindToggleVisibilityOnClick("egg", "brokenEgg");
#egg { display: block; }
#brokenEgg { display: none; }
<div id="egg"><p>hi</p></div>
<div id="brokenEgg"><p>hi2</p></div>
Use as such:
// Should now toggle visibility on click
bindToggleVisibilityOnClick("egg", "brokenEgg");
Also note I've left lines to toggle visibility instead of display, which will hide the element but leave the space that it takes up.
EDIT: If you want it to change once and not revert, comment out that second binding in the function as follows:
function bindToggleVisibilityOnClick(firstElemId, secondElemId) {
var firstElement = document.getElementById(firstElemId);
var secondElement = document.getElementById(secondElemId);
firstElement.onclick = function() { toggleVisibility(firstElement, secondElement); };
//secondElement.onclick = function() { toggleVisibility(secondElement, firstElement); };
}
function toggleVisibility(checkElem, otherElem){
// If target is invisible
if (checkElem.style.display == "none"
//|| checkElem.style.visibility == "hidden"
) {
checkElem.style.display = "block";
// checkElem.style.visibility = "visible";
otherElem.style.display = "none"
// otherElem.style.visibility = "hidden";
}
else {
otherElem.style.display = "block";
checkElem.style.display = "none"
// checkElem.style.visibility = "hidden";
}
};
bindToggleVisibilityOnClick("egg", "brokenEgg");
#egg { display: block; }
#brokenEgg { display: none; }
<div id="egg"><p>hi</p></div>
<div id="brokenEgg"><p>hi2</p></div>
If I understood the question correctly you ca use an object instead of an array for myShapes.
var myShapes = {
"egg.png": "brokeEgg.png",
...
}
so when you click an image you can find the paired one.
Ok i'll try very hard to explain exactly what I'm trying to accomplish.
I know that if I want a div to stay at the bottom of a page I can simply do this..
<div id="foo" style="position: fixed; bottom: 0: width: 100%">
blah text
</div>
But I don't want this to always be at the bottom of the page..
I have code like this..
<html>
<head>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';"
else
e.style.display = 'block';
}
</script>
</head>
<body>
<div id="firstDiv" style="display: block;">
......
</div>
<div id="secondDiv" style="display: none;">
......
</div>
<div id="thirdDiv" style="display: none;">
......
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
..repeated 20 times or w/e..
</body>
</html>
I want to do something like http://www.snyderplace.com/demos/collapsible.html
BUT i really don't want to use someone elses library if at all possible... I'm open to using jQuery etc, just don't want to use someone elses library if all possible unless its very bare bones and not a FULL library.
I only know how to hide and show the current ones HTML. I know i would prolly have to do something like..
if (e.id = "firstDiv") {
secondDiv.style.display = 'none';
thirdDiv.style.display = 'none';
} elseif { ....
....
}
Ok so what I want to be able to do is if i have a TON of data inside the [firstDiv] and its so much data that the page has a scroll bar and the [secondDiv] and [thirdDiv] would normally pushed all the way down the page... I want [secondDiv] and [thirdDiv] to stack ontop of eachother and always at the bottom of the page...
But then if I click on [secondDiv] then the [firstDiv] contents will obviously disappear, but I want [firstDiv] to stay at top of page no matter what, then [secondDiv] to be right under neath it which will then show its HTML while [thirdDiv] will still stay static at the bottom of the page....
Then if I was to click on [thirdDiv] then it would just then be [firstDiv] [secondDiv] and [thirdDiv] stacked in order at the very top while now of course showing the HTML of the [thirdDiv]...
LOOOONG explaination later i'm wanting to do a Collapseable system that hides the other divs content while keeping them in order HOWEVER the twist is that the divs below the [firstDiv] always still show up at the bottom of the page no matter what.
Hopefully this makes sense!
I ended up solving and having to do this myself. My answer is TERRIBLY UGLY, but it does work... I would love if anyone could help re-write it so its not so ugly I would greatly appreciate it...
I ended up having to create a Header to act as the (Accordion Header) then a div below it that acted as the div that held the results of the HTML/Content..
Then each Accordion Header I just set onclick="toggle_visibility('firstDivHeader');" or whatever the header that was clicked and then it did the following..
http://jsfiddle.net/t8Le7qqv/ - I wanted to add finished result incase anyone wanted to know how to do this.
<script type="text/javascript">
function toggle_visibility(id) {
if (id == 'firstDivHeader')
{
document.getElementById('firstDivResults').style.display = 'block';
document.getElementById('firstDivHeader').style.top = '0';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'none';
document.getElementById('secondDivHeader').style.top = '';
document.getElementById('secondDivHeader').style.bottom = '82px';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'none';
document.getElementById('thirdDivHeader').style.top = '';
document.getElementById('thirdDivHeader').style.bottom = '41px';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'none';
document.getElementById('forthDivHeader').style.top = '';
document.getElementById('forthDivHeader').style.bottom = '0px';
document.getElementById('forthDivHeader').style.position = 'fixed';
} else if (id == 'secondDivHeader')
{
document.getElementById('firstDivResults').style.display = 'none';
document.getElementById('firstDivHeader').style.top = '0';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'block';
document.getElementById('secondDivHeader').style.top = '41px';
document.getElementById('secondDivHeader').style.bottom = '';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'none';
document.getElementById('thirdDivHeader').style.top = '';
document.getElementById('thirdDivHeader').style.bottom = '41px';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'none';
document.getElementById('forthDivHeader').style.top = '';
document.getElementById('forthDivHeader').style.bottom = '0px';
document.getElementById('forthDivHeader').style.position = 'fixed';
} else if (id == 'thirdDivHeader')
{
document.getElementById('firstDivResults').style.display = 'none';
document.getElementById('firstDivHeader').style.bottom = '0';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'none';
document.getElementById('secondDivHeader').style.top = '41px';
document.getElementById('secondDivHeader').style.bottom = '';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'block';
document.getElementById('thirdDivHeader').style.top = '82px';
document.getElementById('thirdDivHeader').style.bottom = '0';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'none';
document.getElementById('forthDivHeader').style.top = '';
document.getElementById('forthDivHeader').style.bottom = '0px';
document.getElementById('forthDivHeader').style.position = 'fixed';
} else if (id == 'forthDivHeader')
{
document.getElementById('firstDivResults').style.display = 'none';
document.getElementById('firstDivHeader').style.top = '0';
document.getElementById('firstDivHeader').style.bottom = '';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'none';
document.getElementById('secondDivHeader').style.top = '41px';
document.getElementById('secondDivHeader').style.bottom = '';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'none';
document.getElementById('thirdDivHeader').style.top = '82px';
document.getElementById('thirdDivHeader').style.bottom = '';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'block';
document.getElementById('forthDivHeader').style.top = '123px';
document.getElementById('forthDivHeader').style.bottom = '';
document.getElementById('forthDivHeader').style.position = 'fixed';
}
}
</script>
Thanks for the design pattern. It really helped me when I was looking to build something similar to what you had done. Here's my version as per your re-write request :) Things to note: I'm using jQuery selectors rather the the javascript ones you used, my divs are named differently and my row height is different, but you'll get the idea.
function toggle_visibility(id) {
// Setup the accordion divs
var sectionHeaderIds = ["#sectionOneHeader", "#sectionTwoHeader", "#sectionThreeHeader",
"#sectionFourHeader", "#sectionFiveHeader", "#sectionSixHeader"];
var sectionDetails = ["#sectionOneDetail", "#sectionTwoDetail", "#sectionThreeDetail",
"#sectionFourDetail", "#sectionFiveDetail", "#sectionSixDetail"];
var rowHeight = 30;
var chosenSectionId = 0;
var numSections = sectionHeaderIds.length;
// Get the index of the selected section
for (var i = 0; i < numSections; i++) {
if (sectionDetails[i] == id) {
chosenSectionId = i;
}
}
// Loop through the divs
for (var i = 0; i < numSections; i++) {
var sectionHeader = $(sectionHeaderIds[i]);
var sectionDetail = $(sectionDetails[i]);
sectionHeader.css('position','fixed');
if (sectionDetails[i] == id) {
sectionDetail.css('display', 'block');
} else {
sectionDetail.css('display', 'none');
}
sectionHeader.css('top',(i <= chosenSectionId) ? i * rowHeight : '');
sectionHeader.css('bottom',(i > chosenSectionId) ? (numSections - i - 1) * rowHeight : '');
}
}
I'm trying to connect previous and fwd buttons to a gallery and I want the previous button to be hidden on first image of the gallery but javascript doesn't seem to be working at all.
Javascript
var imageGallery = new Array();
imageGallery[0] = '1.png';
imageGallery[1] = '2.png';
imageGallery[2] = '3.png';
imageGallery[3] = '4.png';
imageGallery[4] = '5.png';
var imgCount = 0;
function next() {
imgCount++ ;
document.getElementById("gallery").src = imageGallery[imgCount] ;
}
function previous() {
imgCount--;
document.getElementById("gallery").src = imageGallery[imgCount] ;
}
if(document.getElementById("gallery").getAttribute("src") == "1.png")
{
document.getElementById("previous").style.visibility = 'hidden';
}
else
{
document.getElementById("previous").style.visibility = 'visible';
}
HTML
<div id="img">
<img id="gallery" src="1.png" style="height:420px; width:744px" >
<div id="imgNav">
<a id="previous" href onclick="previous(); return false;">previous</a>
<span style="color:#666; font-size:0.9em"> | </Span>
<a id="next" href onclick="next(); return false;">next</a>
</div>
</div>
Actually the logic is if 'src' attribute of id 'gallery' is '1.png' then 'visibility' of element with id 'previous' is 'hidden' else not but doesn't seem to be working. Can anyone help figuring it out.
You're probably trying to check on an image that's not totally loaded yet. Did you remember to place your code to run just when the page is fully loaded (in case it's placed in the page headers - you didn't mention whether it is or not)?
UPDATED
var imageGallery = new Array();
imageGallery[0] = '1.png';
imageGallery[1] = '2.png';
imageGallery[2] = '3.png';
imageGallery[3] = '4.png';
imageGallery[4] = '5.png';
var imgCount = 0;
function checkNav() {
var previousLnk = document.getElementById("previous");
var nextLnk = document.getElementById("next");
previousLnk.style.visibility = imgCount == 0 ? 'hidden' : 'visible';
nextLnk.style.visibility = imgCount >= (imageGallery.length - 1) ? 'hidden' : 'visible';
}
function setImg() {
var gallery = document.getElementById("gallery");
gallery.src = imageGallery[imgCount];
}
function next() {
imgCount++;
setImg();
checkNav();
}
function previous() {
imgCount--;
setImg();
checkNav();
}
window.onload = function () {
checkNav();
}
Demo: http://jsfiddle.net/N7V9E/