The main concept was taken from here and modify it alot http://www.sitepoint.com/forums/javascript-15/slide-div-horizontally-449624.html
Below will be the code, if you want to see the demo, refer to this page http://legendarytesting.zymichost.com/codemo/sliderfinal.html
Note to remember
- I have test and work well on these browser (except for different browser slide with different speed)
- Google Chrome (v10.0.648.205)
- Firefox (v5.0)
- Opera (v11.11)
- Safari (v5.0.5)
- Internet Explorer (v8.0.6001)
- Using these script, it will store value on element (not store inside the javascript which I think much better method). You may change these code for your own needs
- Note the padding must be inside the 3rd div, else it will run out of alignment (depend on your browser)
- The 2nd div (with 999px width) must be put and always put additional width (browser compability purpose also)
- Variable "Column width" is important, you need to add the padding value also (300px actual + 10px padding = 310px)
<html>
<head>
<title>Simple Slider</title>
<script type="text/javascript" language="javascript">
//<![CDATA[
function snapColumn( snapToCol)
{
slidingDiv = document.getElementById("d1");
divWidth = document.getElementById("columnwidth").innerHTML;
currentCol = document.getElementById("currentcolumn").innerHTML;
slidingDiv.style.left = -1 * (snapToCol-1) * divWidth;
document.getElementById("currentcolumn").innerHTML = snapToCol;
document.getElementById("poswatch").innerHTML = slidingDiv.style.left;
}
function slideLeft( stopPos)
{
slidingDiv = document.getElementById("d1");
document.getElementById("functiondebug").innerHTML = parseInt(document.getElementById("functiondebug").innerHTML) + 1;
if( parseInt(slidingDiv.style.left) > stopPos){
slidingDiv.style.left = parseInt(slidingDiv.style.left) - 2 + "px";
document.getElementById("poswatch").innerHTML = slidingDiv.style.left;
setTimeout(function(){slideLeft(stopPos)}, 2);
}
else{
document.getElementById("slidestatus").innerHTML = 0;
}
}
function nextColumn()
{
if( document.getElementById("slidestatus").innerHTML == 1){
return false;
}
document.getElementById("slidestatus").innerHTML = 1;
slidingDiv = document.getElementById("d1");
divWidth = document.getElementById("columnwidth").innerHTML;
currentCol = document.getElementById("currentcolumn").innerHTML;
currentCol = parseInt(currentCol) + 1;
stopPos = -1 * (currentCol-1) * divWidth;
if( currentCol > parseInt(document.getElementById("columntotal").innerHTML)){
document.getElementById("slidestatus").innerHTML = 0;
return false;
}
//alert(stopPos);
//slidingDiv.style.left = stopPos; //Snap to the position immidietely
slideLeft( stopPos);
document.getElementById("currentcolumn").innerHTML = currentCol;
}
function slideRight( stopPos)
{
slidingDiv = document.getElementById("d1");
document.getElementById("functiondebug").innerHTML = parseInt(document.getElementById("functiondebug").innerHTML) + 1;
if( parseInt(slidingDiv.style.left) < stopPos){
slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
document.getElementById("poswatch").innerHTML = slidingDiv.style.left;
setTimeout(function(){slideRight(stopPos)}, 2);
}
else{
document.getElementById("slidestatus").innerHTML = 0;
}
}
function previousColumn()
{
if( document.getElementById("slidestatus").innerHTML == 1){
return false;
}
document.getElementById("slidestatus").innerHTML = 1;
slidingDiv = document.getElementById("d1");
divWidth = document.getElementById("columnwidth").innerHTML;
currentCol = document.getElementById("currentcolumn").innerHTML;
currentCol = parseInt(currentCol) - 1;
stopPos = -1 * (currentCol-1) * divWidth;
if( currentCol < 1){
document.getElementById("slidestatus").innerHTML = 0;
return false;
}
//alert(stopPos);
//slidingDiv.style.left = stopPos; //Snap to the position immidietely
slideRight( stopPos);
document.getElementById("currentcolumn").innerHTML = currentCol;
return true;
}
//]]>
</script>
</head>
<body>
<label>Variable</label>
<table border="1">
<tr>
<td>DIV current style.left</td>
<td><div id="poswatch">0</div></td>
</tr>
<tr>
<td>Check function executed</td>
<td><div id="functiondebug">0</div></td>
</tr>
<tr>
<td>Current column</td>
<td><div id="currentcolumn">1</div></td>
</tr>
<tr>
<td>Max no of column</td>
<td><div id="columntotal">3</div></td>
</tr>
<tr>
<td>Column width</td>
<td><div id="columnwidth">310</div></td>
</tr>
<tr>
<td>Slide Status</td>
<td><div id="slidestatus">0</div></td>
</tr>
</table>
<div style="height: 50px;"></div>
<label>Use this to slide</label><br/>
<b onclick="previousColumn()">< BACK</b> | <b onclick="nextColumn()">NEXT ></b>
<div style="height: 50px;"></div>
<label>Use this to snap to specific column</label><br/>
<a onclick="snapColumn(1)">[1]</a> | <a onclick="snapColumn(2)">[2]</a> | <a onclick="snapColumn(3)">[3]</a>
<div style="height: 50px;"></div>
<!-- 1st div -->
<div style="width: 310px; overflow: hidden; border: 1px dashed black;">
<!-- 2nd div -->
<div id="d1" style="width: 999px; position: relative; left: 0px;">
<!-- 3rd div (a) -->
<div style="width: 310px; height: 100px; background-color: plum; float: left;" align="right">
<div style="padding: 5px;">
<b>SPARTA !!!!!!!!!!!!!!!!!!!!!</b>
</div>
</div>
<!-- 3rd div (b) -->
<div style="width: 310px; height: 100px; background-color: bisque; float: left;" align="right">
<div style="padding: 5px;">
<b>IS !!!!!!!!!!!!!!!!!!!!!</b>
</div>
</div>
<!-- 3rd div (c) -->
<div style="width: 310px; height: 100px; background-color: powderblue; float: left;" align="right">
<div style="padding: 5px;">
<b>THIS !!!!!!!!!!!!!!!!!!!!!</b>
</div>
</div>
</div>
</div>
</body>
</html>If you wandering how I convert these code into HTML syntax, refer it here http://puzzleware.net/CodeHTMLer/default.aspx
No comments:
Post a Comment