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.
Results 1 to 14 of 14
  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts

    Prevent page from scrolling (only temporarily)

    I need to stop the page from scrolling when using the up and down keys, but only temporarily.

    I want the user to be able to focus on a list and then use the up and down keys to scroll through the items in the list (basically like a select box but with a ul instead) but without the page scrolling as well.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    uh... not even close.

    I don't mean to sound rude or ungrateful but did you even read it?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by NancyJ View Post
    uh... not even close.

    I don't mean to sound rude or ungrateful but did you even read it?
    No! of course not.
    Why would I bother to read it?
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    scroll="no" <-- Place that in your body part of CSS
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #6
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Quote Originally Posted by BabyJack View Post
    scroll="no" <-- Place that in your body part of CSS
    again, not even close to what I'm looking for.

  • #7
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Quote Originally Posted by effpeetee View Post
    No! of course not.
    Why would I bother to read it?
    To find out if its even vaguely in the area of what the question was about? It was an article on scrollers in Windows Media Center Markup Language O.o

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    inspired by BabyJack, overflow: hidden,
    more detailed:
    - set overflow: hidden
    - attach a onkeydown, onkeyup or if I'm not wrong a onkeypress, to manage the keycode for up and down keys and box scroll

    I don't have any idea how to trigger the reverse process when the user finish, maybe a onblur, but onblur what?

    why you can't use a listbox instead of all this?

    regards

  • #9
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Overflow:hidden still allows you to scroll up and down with the up and down keys.

    why you can't use a listbox instead of all this?
    That would defeat the point But more specifically because they can't be styled properly.

    I've found a way around the problem by leaving the focus on the text box. In firefox I can set the field to readonly so that prevents users from typing in the text box (and gets rid of the text cursor) but it still captures the key input but in ie, setting it to readonly moves the scroll bar up and down again. Ideally I need something that prevents users typing in the text box and gets rid of text cursor but while still retaining focus on the text box.

  • #10
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    No offence, but your question makes no sence. Adding <body scroll="no"> disables scrolling then delete it temporarily! =]
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #11
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Quote Originally Posted by BabyJack View Post
    No offence, but your question makes no sence. Adding <body scroll="no"> disables scrolling then delete it temporarily! =]
    body scroll="no" only works in IE - its something microsoft made up and it removes the scroll bars which I don't want to do.
    My question makes perfect sense, I want to temporarily prevent the up and down arrows from scrolling the window.

  • #12
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by BabyJack View Post
    No offence, but your question makes no sence. Adding <body scroll="no"> disables scrolling then delete it temporarily! =]
    no offence ut there is no scroll atrribute,

    Quote Originally Posted by NancyJ View Post
    Overflow:hidden still allows you to scroll up and down with the up and down keys.
    yes, it just make the scrollbar invisible.

    That would defeat the point But more specifically because they can't be styled properly.
    for me is less painfull to style it,

    regards

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Give this a try


    Code:
    <script type="text/javascript">
    
    function getKey(e) {
    keycode=(!e?event.keyCode:e.which)
    if(keycode==38||keycode==40){
    return false
    }
    }
    
    document.onkeydown = getKey
    
    </script>

    Sorry mines no good either
    Last edited by Mr J; 06-09-2008 at 08:47 PM. Reason: No good
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #14
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's what I've been toying with so far.

    Click on "ONE" then use the up/down arrow keys


    Code:
    <script type="text/javascript">
    
    count=0
    
    function getKey(e) {
    keycode=(!e?event.keyCode:e.which)
    
    if(keycode==38){count--} // up
    if(keycode==40){count++} // down
    
    if(count==document.getElementById("myul").getElementsByTagName("A").length){
    count=0
    }
    
    if(count<0){count=document.getElementById("myul").getElementsByTagName("A").length-1}
    
    document.getElementById("myul").getElementsByTagName("A")[count].focus()
    
    return false
    
    }
    
    document.onkeydown = getKey
    
    </script>
    
    
    <ul id="myul">
    
    <li><a href="#null" onclick="count=0">one</a>
    <li><a href="#null" onclick="count=1">two</a>
    <li><a href="#null" onclick="count=2">three</a>
    <li><a href="#null" onclick="count=3">four</a>
    
    </ul>
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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