Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Scroll Down Select List Automatically

    A Form has 2 select lists & a button (actually, it's a ASP.NET app; hence I am using the .NET controls instead of the usual HTML Form elements but ASP.NET finally converts the .NET controls into HTML Form elements). Both the select lists get populated with records from a database. Users can also select multiple items in both the select lists.

    When a user selects items from the 1st select list & then clicks the button, those items get appended at the very end of the 2nd select list. At the same time, the items that were selected by the user in the 1st select list get deleted from the 1st select list.

    Assume that both the select lists have 10 items. At any given point of time, only 6 items are displayed to users (to view the remaining items, users have to scroll down the select lists).

    When items are transferred from the 1st select list to the 2nd select list, those items get selected in the 2nd select list. For e.g. if a user selects 3 items from the 1st select list & clicks the button, the 3 items not only get appended at the end of the 2nd select list but also get selected in the 2nd select list. Since the 3 items get appended at the very end of the 2nd select list, the last 3 items in the 2nd select list get selected. No problems till this point.

    What I want is since the last 3 items in the 2nd select list are selected, the 2nd select list should automatically scroll down so that the 3 selected items get displayed to the user. In other words, I don't want users to scroll down the 2nd select list to view the 3 selected items.

    Can this be done using JavaScript? If yes, then how?

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    something like this perhaps:

    Code:
    <select id="menu" size="6">
    <option>Blah #1</option>
    <option>Blah #2</option>
    <option>Blah #3</option>
    <option>Blah #4</option>
    <option>Blah #5</option>
    <option>Blah #6</option>
    <option>Blah #7</option>
    <option>Blah #8</option>
    <option>Blah #9</option>
    <option>Blah #10</option>
    </select>
    <br />
    <input type="button" value="click me" onclick="scrollIt('menu');" />
    
    <script type="text/javascript">
    
    function scrollIt(id)
    {
        document.getElementById(id).scrollTop = document.getElementById(id).scrollHeight;
    }
    
    </script>
    Last edited by chump2877; 03-03-2007 at 10:21 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I couldn't make it work, my dear friend. The 2nd select list behaves as usual; it doesn't scroll to the selected item at the bottom.

    Any other ideas/suggestions?

    Thanks,

    Regards

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    That is the only way to make it work, as far as I know....

    You can attach the JS code to any event handler...you are not restricted to onclick...

    What I have given you is an example....

    Perhaps you should post your code, so that we can see where and how that code needs to be implemented...

    And can I just say that using the .NET framework here is kind of like using an HTML editor...it enables the user to create web pages without really knowing or having to know how to code (Javascript)....So you program your site with ASP, C#, Visual Basic, whatever, and then the code is converted server-side and sent as JS to your browser....I guess I'm just not a proponent of that technology...
    Last edited by chump2877; 03-04-2007 at 12:00 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I even set the Height of the 2 select lists to 150 & edited your code a bit:

    function scrollIt(id){
    alert(id)
    document.getElementById(id).scrollTop = 150;
    alert(document.getElementById(id).scrollTop);
    }

    The first alert message correctly gets the id (which is ListBox2) but the second alert message says document.getElementById(id).scrollTop is zero though it has been assigned a static value of 150 in the preceding line!

    I know I am making a very very minute mistake somewhere down the line but just can't seem to detect that mistake.

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    I think maybe i recreated your problem....in the following code (that should mimic your code's functionality fairly closely), the scrollTop property of the select menu returns zero even after it's been assigned a value....To make things interesting, this only occurs in IE -- the following code works great in FF:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
    
    <head>
    
    <title></title>
    
    <style type="text/css">
    
    #menu_container
    {
        width:225px;
        margin:50px auto;
    }
    
    #menuDiv1,#buttons
    {
        float:left;
        margin:0 auto;
        width:75px;
    }
    
    #buttons p
    {
        text-align:center;
    }
    
    #menuDiv2
    {
        float:right;
        margin:0 auto;
        width:75px;
    }
    
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    </head>
    
    <body>
    
    <div id="menu_container">
        <div id="menuDiv1">
            <select id="menu" size="6" multiple="multiple">
                <option value="1">Blah #1</option>
                <option value="2">Blah #2</option>
                <option value="3">Blah #3</option>
                <option value="4">Blah #4</option>
                <option value="5">Blah #5</option>
                <option value="6">Blah #6</option>
                <option value="7">Blah #7</option>
                <option value="8">Blah #8</option>
                <option value="9">Blah #9</option>
                <option value="10">Blah #10</option>
            </select>
        </div>
        <div id="buttons">
            <p><input type="button" value="->" onclick="moveIt('menu','menu2',1);" /></p>
            <p><input type="button" value="<-" onclick="moveIt('menu','menu2',2);" /></p>
        </div>
        <div id="menuDiv2">
            <select id="menu2" size="6" multiple="multiple">
                <option value="11">Blah #11</option>
                <option value="12">Blah #12</option>
                <option value="13">Blah #13</option>
                <option value="14">Blah #14</option>
                <option value="15">Blah #15</option>
                <option value="16">Blah #16</option>
                <option value="17">Blah #17</option>
                <option value="18">Blah #18</option>
                <option value="19">Blah #19</option>
                <option value="20">Blah #20</option>
            </select>
        </div>
        <div style="clear:both"></div>
    </div>
    
    <script type="text/javascript">
    
    function moveIt(id,id2,dir)
    {
        var menu1 = document.getElementById(id);
        var menu2 = document.getElementById(id2);
        var optionsArr1 = menu1.getElementsByTagName("option");
        var optionsArr2 = menu2.getElementsByTagName("option");
        var removedNode;
        var i = 0;
    
        if (dir == 1)
        {
            if (menu1.value == "") return false;
    
            for (k=0; k<optionsArr2.length; k++)
                optionsArr2[k].selected = false;
    
            while (i < optionsArr1.length)
            {
                if (optionsArr1[i].selected)
                {
                    removedNode = menu1.removeChild(optionsArr1[i]);
                    menu2.appendChild(removedNode);
                    i--;
                }
                i++;
            }
            alert(menu2.scrollHeight);
            menu2.scrollTop = menu2.scrollHeight;
            alert(menu2.scrollTop);
        }
        else if (dir == 2)
        {
            if (menu2.value == "") return false;
    
            for (k=0; k<optionsArr1.length; k++)
                optionsArr1[k].selected = false;
    
            while (i < optionsArr2.length)
            {
                if (optionsArr2[i].selected)
                {
                    removedNode = menu2.removeChild(optionsArr2[i]);
                    menu1.appendChild(removedNode);
                    i--;
                }
                i++;
            }
            menu1.scrollTop = menu1.scrollHeight;
        }
    }
    
    </script>
    
    </body>
    
    </html>
    In my first code example, in my previous post in this thread, the code worked in IE...again, now it doesn;t work in IE, but it does work in FF...I can;t figure it out...Maybe someone here can...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #7
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    One more day, a little more progress...I took another look at the code, and I sort of fixed it in IE...but try moving some items, and then moving the exact same items back to the previous select menu...scrollTop suddenly returns to zero again in IE, and it doesn't work...but again, everything works great in FF:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
    
    <head>
    
    <title></title>
    
    <style type="text/css">
    
    #menu_container
    {
        width:225px;
        margin:50px auto;
    }
    
    #menuDiv1,#buttons
    {
        float:left;
        margin:0 auto;
        width:75px;
    }
    
    #buttons p
    {
        text-align:center;
    }
    
    #menuDiv2
    {
        float:right;
        margin:0 auto;
        width:75px;
    }
    
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    </head>
    
    <body>
    
    <div id="menu_container">
        <div id="menuDiv1">
            <select id="menu" size="6" multiple="multiple">
                <option value="1">Blah #1</option>
                <option value="2">Blah #2</option>
                <option value="3">Blah #3</option>
                <option value="4">Blah #4</option>
                <option value="5">Blah #5</option>
                <option value="6">Blah #6</option>
                <option value="7">Blah #7</option>
                <option value="8">Blah #8</option>
                <option value="9">Blah #9</option>
                <option value="10">Blah #10</option>
            </select>
        </div>
        <div id="buttons">
            <p><input type="button" value="->" onclick="moveIt('menu','menu2',1);" /></p>
            <p><input type="button" value="<-" onclick="moveIt('menu','menu2',2);" /></p>
        </div>
        <div id="menuDiv2">
            <select id="menu2" size="6" multiple="multiple">
                <option value="11">Blah #11</option>
                <option value="12">Blah #12</option>
                <option value="13">Blah #13</option>
                <option value="14">Blah #14</option>
                <option value="15">Blah #15</option>
                <option value="16">Blah #16</option>
                <option value="17">Blah #17</option>
                <option value="18">Blah #18</option>
                <option value="19">Blah #19</option>
                <option value="20">Blah #20</option>
            </select>
        </div>
        <div style="clear:both"></div>
    </div>
    
    <script type="text/javascript">
    
    function moveIt(id,id2,dir)
    {
        var menu1 = document.getElementById(id);
        var menu2 = document.getElementById(id2);
        var optionsArr1 = menu1.getElementsByTagName("option");
        var optionsArr2 = menu2.getElementsByTagName("option");
        var removedNode;
        var i = 0;
        var j = 0;
    
        if (dir == 1)
        {
            if (menu1.value == "") return false;
    
            for (k=0; k<optionsArr2.length; k++)
                optionsArr2[k].selected = false;
    
            for (k=0; k<optionsArr1.length; k++)
                if (optionsArr1[k].selected) j++;
    
            while (i < optionsArr1.length)
            {
                if (optionsArr1[i].selected)
                {
                    removedNode = menu1.removeChild(optionsArr1[i]);
                    menu2.appendChild(removedNode);
                    i--;
                }
                menu2.scrollTop = menu2.scrollHeight + (j * optionsArr1[0].offsetHeight);
                i++;
            }
        }
        else if (dir == 2)
        {
            if (menu2.value == "") return false;
    
            for (k=0; k<optionsArr1.length; k++)
                optionsArr1[k].selected = false;
    
            for (k=0; k<optionsArr2.length; k++)
                if (optionsArr2[k].selected) j++;
    
            while (i < optionsArr2.length)
            {
                if (optionsArr2[i].selected)
                {
                    removedNode = menu2.removeChild(optionsArr2[i]);
                    menu1.appendChild(removedNode);
                    i--;
                }
                menu1.scrollTop = menu1.scrollHeight + (j * optionsArr2[0].offsetHeight);
                i++;
            }
        }
    }
    
    </script>
    
    </body>
    
    </html>
    Anyone see why it's screwing up in IE still?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    If you're still interested, I've solved the problem...

    The scrollTop property does not work on select elements in IE 6....A workaround for this might be to create a scrollable div that looks and behaves like a select element (even then, I don;t know if the scrollTop property would work for sure without testing this theory)...

    To make the scrollTop property work in IE 7, I had to set the property twice in a row...don;t ask me why this works...

    Here's the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
    
    <head>
    
    <title></title>
    
    <style type="text/css">
    
    #header
    {
        font-weight:bold;
        text-align:center;
        width:550px;
        margin:50px auto;
    }
    
    #menu_container
    {
        width:225px;
        margin:50px auto;
    }
    
    #menuDiv1,#buttons
    {
        float:left;
        margin:0 auto;
        width:75px;
    }
    
    #buttons p
    {
        text-align:center;
        margin-top:15px;
    }
    
    #buttons input
    {
        width:34px;
    }
    
    #menuDiv2
    {
        float:right;
        margin:0 auto;
        width:75px;
    }
    
    </style>
    
    <!--[if gt IE 6]>
    <style type="text/css">
    #buttons p {margin-left:3px;}
    </style>
    <![endif]-->
    
    <!--[if lte IE 6]>
    <style type="text/css">
    #menu_container {width:229px;}
    </style>
    <![endif]-->
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    </head>
    
    <body>
    
    <p id="header">This script works in IE 7 and Firefox 2.0. The "scrollTop" property doesn't work with select elements in IE 6, so part of this script will fail in that browser.</p>
    
    <div id="menu_container">
        <div id="menuDiv1">
            <select id="menu" size="6" multiple="multiple">
                <option value="1">Blah #1</option>
                <option value="2">Blah #2</option>
                <option value="3">Blah #3</option>
                <option value="4">Blah #4</option>
                <option value="5">Blah #5</option>
                <option value="6">Blah #6</option>
                <option value="7">Blah #7</option>
                <option value="8">Blah #8</option>
                <option value="9">Blah #9</option>
                <option value="10">Blah #10</option>
            </select>
        </div>
        <div id="buttons">
            <p><input type="button" value="->" onclick="moveIt('menu','menu2',1);" /></p>
            <p><input type="button" value="<-" onclick="moveIt('menu','menu2',2);" /></p>
        </div>
        <div id="menuDiv2">
            <select id="menu2" size="6" multiple="multiple">
                <option value="11">Blah #11</option>
                <option value="12">Blah #12</option>
                <option value="13">Blah #13</option>
                <option value="14">Blah #14</option>
                <option value="15">Blah #15</option>
                <option value="16">Blah #16</option>
                <option value="17">Blah #17</option>
                <option value="18">Blah #18</option>
                <option value="19">Blah #19</option>
                <option value="20">Blah #20</option>
            </select>
        </div>
        <div style="clear:both"></div>
    </div>
    
    <script type="text/javascript">
    
    function moveIt(id,id2,dir)
    {
        var menu1 = document.getElementById(id);
        var menu2 = document.getElementById(id2);
        var optionsArr1 = menu1.getElementsByTagName("option");
        var optionsArr2 = menu2.getElementsByTagName("option");
    
        if (dir == 1)
            alterDOM(menu1,menu2,optionsArr1,optionsArr2);
        else if (dir == 2)
            alterDOM(menu2,menu1,optionsArr2,optionsArr1);
    }
    
    function alterDOM(sender,receiver,opsArr,opsArr2)
    {
        var removedNode;
        var i = 0;
    
        if (sender.value == "") return false;
    
        for (k=0; k<opsArr2.length; k++)
            opsArr2[k].selected = false;
    
        while (i < opsArr.length)
        {
            if (opsArr[i].selected)
            {
                receiver.appendChild(opsArr[i]);
                i--;
            }
            i++;
        }
        receiver.scrollTop = receiver.scrollHeight;
        receiver.scrollTop = receiver.scrollHeight;
    }
    
    </script>
    
    </body>
    
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #9
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, my friend, none of the 2 code snippets work. Rather, both of them add to my problems by throwing a .NET security-related error.

    Any other suggestions?

    I never thought that this would be such a big issue to cope up with!

    I need a concrete solution desperately, RJ..

  • #10
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also I think scrollTop does work in IE6. I have a script which uses scrollTop & it works absolutely fine in IE6. What the script does is it automatically scrolls down the page. So I think it's not true that scrollTop doesn't work in IE6.

  • #11
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    good luck with the errors in your .NET framework (I don;t know how to troubleshoot that)....the html/javascript is valid and safe....Of course, any code that you allow to run client side in your browser is potentially harmful, and maybe that's what is triggering the errors...try lowering the security or something (again I really only know what i need to know about .NET)...

    And, I repeat, scrollTop doesn;t work for HTML select elements in IE 6....It works perfectly fine for other scrollable DOM elements in IE 6...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #12
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    After a lot of permutations & combinations, I concluded that the problem comes up only if the select list allows multiple items to be selected. For e.g. in the following select list which allows users to select only 1 item

    <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>

    if the 10th item from the 1st select list is moved to the 2nd select list, then using ASP.NET code, not only can 1 select the 11th item in the 2nd select list but by default, the 2nd select list scolls down automatically to show that the 11th item is selected. I don't have to write any additional JavaScript code for making the 2nd select list to scroll down to the selected item.

    The problem comes up if & only if the select list allows users to select multiple items in the select list.

  • #13
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    The problem comes up if & only if the select list allows users to select multiple items in the select list.
    It seems like, in this case, that moving more than one option at a time is a more user-friendly interface....only moving one at a time, for large select lists, could be cumbersome....

    So if I had to choose between 1) the ability to automatically scroll down to the bottom of the receiving select menu and 2) the ability to move more than one option at a time, I would choose #2....

    I did some testing with scrollTop and scrollable divs, and the property can be trusted cross-browser (including IE 6)...So you don;t even have to make the preceding choice if you convert your HTML select elements to scrollable divs....but doing so does require a bit more programming to simulate the default browser behavior of HTML select elements...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #14
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try lowering the security or something (again I really only know what i need to know about .NET)...
    I did try that as well but in that case, none of the items selected in the 1st select list to move them to the 2nd select list move to the 2nd select list.....(problems galore)!!
    And, I repeat, scrollTop doesn;t work for HTML select elements in IE 6....It works perfectly fine for other scrollable DOM elements in IE 6...
    Oh! I am sorry.....you were referring only to the select list. But why has the select list been made the odd man out as far as scrollTop is concerned? When scrollTop can work with other elements, why has the poor select list been sidelined? That's really unfair!

    Pleeeeeeeeeeaseeeeeee RJ, help me out in some way! You are my last hope. If you give up, then I probably have to commit suicide!!

  • #15
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    I've already given you some options...

    If you absolutely need the automatic-scrolling-down effect, create some scrollable divs with the CSS overflow property set, and tailor them to look and behave like HTML select elements...

    Otherwise use the following script, and IE 6 users just won;t have the automatic-scrolling-down effect (you can't please everybody ALL of the time -- IE 6 users will still have an experience, it just won;t be the optimal esperience):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
    
    <head>
    
    <title></title>
    
    <style type="text/css">
    
    #header
    {
        font-weight:bold;
        text-align:center;
        width:550px;
        margin:50px auto;
    }
    
    #menu_container
    {
        width:225px;
        margin:50px auto;
    }
    
    #menuDiv1,#buttons
    {
        float:left;
        margin:0 auto;
        width:75px;
    }
    
    #buttons p
    {
        text-align:center;
        margin-top:15px;
    }
    
    #buttons input
    {
        width:34px;
    }
    
    #menuDiv2
    {
        float:right;
        margin:0 auto;
        width:75px;
    }
    
    </style>
    
    <!--[if gt IE 6]>
    <style type="text/css">
    #buttons p {margin-left:3px;}
    </style>
    <![endif]-->
    
    <!--[if lte IE 6]>
    <style type="text/css">
    #menu_container {width:229px;}
    </style>
    <![endif]-->
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    </head>
    
    <body>
    
    <p id="header">This script works in IE 7 and Firefox 2.0. The "scrollTop" property doesn't work with select elements in IE 6, so part of this script will fail in that browser.</p>
    
    <div id="menu_container">
        <div id="menuDiv1">
            <select id="menu" size="6" multiple="multiple">
                <option value="1">Blah #1</option>
                <option value="2">Blah #2</option>
                <option value="3">Blah #3</option>
                <option value="4">Blah #4</option>
                <option value="5">Blah #5</option>
                <option value="6">Blah #6</option>
                <option value="7">Blah #7</option>
                <option value="8">Blah #8</option>
                <option value="9">Blah #9</option>
                <option value="10">Blah #10</option>
            </select>
        </div>
        <div id="buttons">
            <p><input type="button" value="->" onclick="moveIt('menu','menu2',1);" /></p>
            <p><input type="button" value="<-" onclick="moveIt('menu','menu2',2);" /></p>
        </div>
        <div id="menuDiv2">
            <select id="menu2" size="6" multiple="multiple">
                <option value="11">Blah #11</option>
                <option value="12">Blah #12</option>
                <option value="13">Blah #13</option>
                <option value="14">Blah #14</option>
                <option value="15">Blah #15</option>
                <option value="16">Blah #16</option>
                <option value="17">Blah #17</option>
                <option value="18">Blah #18</option>
                <option value="19">Blah #19</option>
                <option value="20">Blah #20</option>
            </select>
        </div>
        <div style="clear:both"></div>
    </div>
    
    <script type="text/javascript">
    
    function moveIt(id,id2,dir)
    {
        var menu1 = document.getElementById(id);
        var menu2 = document.getElementById(id2);
        var optionsArr1 = menu1.getElementsByTagName("option");
        var optionsArr2 = menu2.getElementsByTagName("option");
    
        if (dir == 1)
            alterDOM(menu1,menu2,optionsArr1,optionsArr2);
        else if (dir == 2)
            alterDOM(menu2,menu1,optionsArr2,optionsArr1);
    }
    
    function alterDOM(sender,receiver,opsArr,opsArr2)
    {
        var removedNode;
        var i = 0;
    
        if (sender.value == "") return false;
    
        for (k=0; k<opsArr2.length; k++)
            opsArr2[k].selected = false;
    
        while (i < opsArr.length)
        {
            if (opsArr[i].selected)
            {
                receiver.appendChild(opsArr[i]);
                i--;
            }
            i++;
        }
        receiver.scrollTop = receiver.scrollHeight;
        receiver.scrollTop = receiver.scrollHeight;
    }
    
    </script>
    
    </body>
    
    </html>
    Put down Visual Studio and .NET for a minute, and just copy and paste that code into a HTML file, and load the HTML file in a browser...You'll see that it works as I described...

    Are you bound to using .NET here?....it seems like it's giving you nothing but problems....I hard code everything (no fancy editors - I just use a simple scripting editor), and draw from my previous code that I've written, or code repositories, to get the job done....I find that fancy editors and some (not all) frameworks get in the way of real "web" development, and curb your comprehension of what you're doing...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •