Asipo blog: July 2011

This is to make a javascript slider

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

Asipo blog

Wednesday, July 13, 2011

Cool I want to remember link

javascript slider for div simple

Monday, July 11, 2011

CSS I need to remember link

Thursday, July 7, 2011

microsoft word make landscape orientation on certain some few one page