CODEWITHSUNDEEP
javascriptjquery
Tony
Tony

Reputation: 1869

Using one javascript code on multiple sections

I don't know much about jQuery but I've been using the following javascript code to make a table keep the scroll bar location upon pageback:

<script type="text/javascript">
    window.onload = function () {
        var strCook = document.cookie;
        if (strCook.indexOf("!~") != 0) {
            var intS = strCook.indexOf("!~");
            var intE = strCook.indexOf("~!");
            var strPos = strCook.substring(intS + 2, intE);
            document.getElementById("grdWithScroll").scrollTop = strPos;
        }
    }
    function SetDivPosition() {
        var intY = document.getElementById("grdWithScroll").scrollTop;
        document.cookie = "yPos=!~" + intY + "~!";
    }
</script>

and

<div id="grdWithScroll" onscroll="SetDivPosition()">

It works great for a single div. But how could I extend this for use with a second div section?

Upvotes: 1

Views: 273

Answers (3)

Tony
Tony

Reputation: 1869

Found what I was looking for here:

http://social.msdn.microsoft.com/Forums/nb-NO/jscript/thread/ad18ed20-8ae2-4c13-9a51-dcb0b1397349

<script language="javascript" type="text/javascript">

//This function sets the scroll position of div to cookie.
function setScrollPos() {
    var div1Y = document.getElementById('div1').scrollTop;
    var div2Y = document.getElementById('div2').scrollTop;
    document.cookie = "div1Pos=!*" + div1Y + "*!" + 
    " div2Pos=|*" + div2Y + "*|";
}

///Attaching a function on window.onload event.
window.onload = function () {
    var strCook = document.cookie; if (strCook.indexOf("!~") != 0) {
        var intS = strCook.indexOf("!~");
        var intE = strCook.indexOf("~!"); 
        var strPos = strCook.substring(intS + 2, intE);
        document.body.scrollTop = strPos;
    }

    /// This condition will set scroll position of <div> 1.
    if (strCook.indexOf("iv1Pos=!*") != 0) {
        var intdS = strCook.indexOf("iv1Pos=!*");

        var intdE = strCook.indexOf("*!");
        var strdPos = strCook.substring(intdS + 9, intdE);
        document.getElementById('div1').scrollTop = strdPos;
    }

    /// This condition will set scroll position of <div> 2.
    if (strCook.indexOf("iv2Pos=!*") != 0) {
        var intdS = strCook.indexOf("iv2Pos=|*");
        var intdE = strCook.indexOf("*|");
        var strdPos2 = strCook.substring(intdS + 9, intdE);
        document.getElementById('div2').scrollTop = strdPos2;
    }
}

</script>

Upvotes: 1

supertopi
supertopi

Reputation: 3488

Instead of a single div id, you could use class attribute to define all the divs you want the feature to be used on.

<div id="grdWithScroll" class="coolScroll" onscroll="SetDivPosition()">
</div>
<div id="abcWithScroll" class="coolScroll" onscroll="SetDivPosition()">
</div>

Use jQuery (or other libraries) to easily select all divs with said class and access the scrollTop attribute

$('.coolScroll').each( function()
{
// do something with scrollTop
}

You could also use the class selector to set the onscroll function.

$('.coolScroll').attr( 'onscroll' , 'javascript:SetDivPosition()' );

Upvotes: 1

Scorpion-Prince
Scorpion-Prince

Reputation: 3634

Instead of using document.getElementById, you can asign the same class name to all the divs for which you want this functionality, and then user the jQuery selector $(".scrollgrid") to select the multiple divs, and store the scroll tops. If you do not want to use jQuery, you can look at the custom functions that people have written to select the elements by class name. Here is an example.

http://www.netlobo.com/javascript_getelementsbyclassname.html

Upvotes: 1

Related Questions