Prevent Arrow Key Scrolling?
Nov 23, 2011I searched a while on the web for this but i didn't find a solution that really worked. So is there a way how i can prevent IE9 from scrolling when i use the arrow keys?
View 7 RepliesI searched a while on the web for this but i didn't find a solution that really worked. So is there a way how i can prevent IE9 from scrolling when i use the arrow keys?
View 7 RepliesFor those without the time or patience to read the full post i have summarised a list of my issues, for the full description of the reasons behind them please read on.
Disabling the text cursor in a specific text field (not the mouse cursor but the one which is controlled by the keyboard inside the field)
Adjust the blink rate or the colour of a carat.
Anyone who has some in-depth knowledge about browser based games who would like to tell me about how they stop arrow keys from scrolling around the page.
I am currently constructing a page which displays a gallery of images and I have been trying to correct one final issue for some time now.
I have used a pair of buttons to navigate through the table cells in which the images are stored by using a getElementByTagName function and having the buttons adjust the index of the desired image. This works fine.
My issue arises from the fact that I also assigned the arrow keys using onkeydown and the relevant keycodes to call the same function so that the user can navigate the table via those keys. It all worked perfectly until I tested the page while it was zoomed in far enough that the browser scrollbars kicked in and with each arrow key press the page would scroll while also changing the selected image.
This in itself kind of highlighted the fact that I shouldn't really be hijacking default browser functions, so the logical solution was to a) provide the user with the option to enable arrow key navigation and b) prevent the document from scrolling about while this option is enabled.
So for:
a) I created a button which when pressed activates the onkeydown functions for the arrow keys and then changes into a button which will deactivate them again onclick.
b) was a hell of a lot more difficult to fix but in the end I found what I will call a "back door" method where I insert a read only text field, set it to match the background (which is conveniently black) so it is invisible, and force the document focus into the text field while the button is active. This disables the scrolling completely while the navigation is turned on and works perfectly... in firefox.
Someone extremely clever at Microsoft decided to code IE to make the text entry cursor contrast with whichever background is selected for the field, as a result I'm stuck with a blinking white carat next to my buttons which may be one of the most irritating things I have ever seen on a black background.
So again, I would be extremely happy if someone could suggest a solution to any of the following:
Disabling the text cursor in a specific text field (searched far and wide about this and the only answer anyone gets seems to be 'why bother using a text box at all' or 'removing my carat would make me extremely angry as a user' but usually because they dont specify why they want to hide it).
At least adjust the blink rate or the colour of the carat to make it less annoying or invisible (seen one example about the blink rate in JS but it seemed angled towards game coding and I couldnt get it to work on my page - tips appreciated).
An alternative or all-round better way to approach the navigation function issue as I'm not too pleased about having an invisible, barely functioning text field in the middle of my page - I've seen a few posts about setting up a div which acts as its own window but I haven't yet seen it working.
Anyone who has some in-depth knowledge about browser based games who would like to tell me about how they stop arrow keys from scrolling around the page.
One thing that I am fixed on keeping is that it is the arrow keys which navigate the table, I know an instant solution would be to use ASDW but I've been bashing away at this for so long that it's getting personal now.
are there any basic commands to prevent an iframe from scrolling its parent when iframe is longer than parent?
View 1 Replies View RelatedOn this test page, if you click the contact link, then submit, the page jumps to the top.. i guess that page is refreshing?? How can I prevent this jump to the top and have the page stay still?
View 7 Replies View RelatedI am using the following code from this site.
but for some reason if the page is long the whole page scrolls up so the top of the calendar is at the top of the browser, which actually hides the box that the date will end up in.
can anyone see how I can alter the code so that the page does not scroll up, but have the calendar show just below the box that the date will go in and the page does not scroll?
here is the full code that I am using to test this out with. code...
So I have a webpage listing a bunch of book titles. I have coded a popup message with the book summary to appear when the title is clicked on. There is one problem. After the viewer reads a summary he or she clicks ok on the popup message, and then the window automatically scrolls back to the top. This will be a nuisance; if the user is half way or close to the end of the list, he or she would have to keep scrolling back down to his or her spot after reading the book summary.
View 2 Replies View RelatedI'm using a code snippet to have a cursor placed in a form field once a page loads, see the below posted code.The form field in question is located below the fold.The problem is that when the page loads it will scroll the page downwards to show the form field, I don't want that happen. I only want the cursor to appear...not the whole page to scroll downwards when the page loads.what I can do to prevent the page from scrolling downward when using this code?It's happening with similar codes as well that places a cursor inside the form field.I only want the page to scroll downward when the user decides to scroll downward, not because of the cursor placement.
Code HTML4Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[code]....
I've gotten .load to load content into a div but if the window is not at the top of the page it scrolls back to the top each time the new content is loaded but I wanted to avoid any sort of change on the page other than the content in the div. It seems pointless if the user has to scroll back down to the div where the content is each time? code...
Is there a way to keep the window in the same position? Also while I'm at it - is there a more efficient way to write this considering I have 9 pages or should I just write this code out for each instance?
is it possible to scroll / jump to say, 10px above a div? i tried adding padding, but it doesn't work.also, when I use <a href="#xxxx">, is it possible to prevent the browser from adding #xxxx to the url in the browser?
View 6 Replies View RelatedjQuery - Scrolling browser Window. I have two demos of scrolling page content with jQuery.
This one - [url] is scrolling the contents inside a container and it works as I wanted on Mac/PC
Code:
I need the same effect as above but I need to scroll the whole browser window.
I have a demo here - [url]
Code:
Problem here is on the Mac the transition are jumpy and it seems to flash the first yellow div before sliding up or down. Testing on a PC it will slide down but won't slide up. How can I get the whole browser window to slide up and down with a smooth transition.
im searching for a plugin/code example for text scrolling. I got some text in a <div> if text is longer than for example 300px it gets cut and is scrolling from start to end, stops for a second and then scrolls back, stops and all over, and if its not long enough than 300px then just displays normaly. Something similar to the Song name scrolling inin anyMP3 player.
View 2 Replies View RelatedI have two divs. One of them contains an input field the other a list of suggestions. What I would like is the ability for the user to come down in the second div with the use of the arrow key an also scroll through the list of suggestions. This is how it looks:
<div id="first"><input type="text" /></div>
<div id="second">
<ul>
<li>suggestion</li>
[Code].....
I KNOW I should know this, but it isn't working, so clearly I don't. On a form displaying an image, I have a javascript script that looks at the arrow keys.It's working. Everytime I hit a key it goes through the script.
My problem is that once I hit one of a set of keys I want to leave the form and go to the php code so I can get the next correct image. Is it just a submit? If so, what am I doing wrong?
[Code]...
I know it's hitting the script because my alert comes up. But I'm NOT leaving the form and running the php... What do I need to change?
I've seen websites that have things like feedback and an arrow facing up that either take you to the top of the page or opens a form to give your feedback.
View 4 Replies View RelatedDoes anybody know why doesn't onkeypress catch up/down arrow keys
while it catches left/right arrows? My only supposition is that up/
down keys are used for moving between form elements, anyway does
anybody know any solution to this problem?
How can I implement a rising/falling trend arrow based on a number
that may rise or fall. For example, if the number (variable) is 100
and changes to 101, the "arrow" changes to "up", if the number goes
back to 100, the arrow changes to "down". I'm not a statistical guru
but I am sure there is a definition for this.
I am getting my number variable from a sql server via a query.
I have a little problem that i hope can be solved. You start to type in an <input> field and a list of results show based on what you type, I have a list of Airports in MySQL that is check for LIKE of what is typed in and the matches show that can be selected. But you can only scroll with the mouse and not the arrow keys.
Does anyone know how I may allow arrow keys as well as the mouse to select their choice?
Disable Arrow Keys I am creating an online flash gaming site, Aaron's Game Zone: [URL]Some of the games on it use the arrow keys, however IE also uses them to scroll the page. I am learning JavaScript and am trying to write some script to pervent the page scrolling up and down while playing a game.For example.Guardian Rock uses the arrow keys to slide around, at the same time the page scrolls.[URL]
Here is the script I've tried to write to pervent the scrolling:
<script type="text/javascript">
function KeyPressHappened(e){
if (!e) e=window.event;
[code]....
so I've been trying to get the code for the scroll arrows found at
http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm
to work.
well I got the first set to work for the top text box on the site I'm working on.
BUT THEN! haha I tryed duplicating the code to use it for a bottom text box on the same site and they mess eachother up so that both arrow sets run the same box.
Basically I want a right and down arrow to appear depending on whether a div appears. If the header div is clicked, the subdiv's display toggles block or none. At the same time id like the arror img to change accordingly.
This is my current function, it works fine
I've tried many times to add a script that'll change the src but no luck at all..
The image name is simply arror$categoryId...By the way, the reason for the '. .' etc is because this is printed via php.
Can someone help me get started on some browser-independent code for moving an image with the arrow keys? That is, if I press the up arrow, the image will move 10 pixels up; if I press the left arrow, the image will move 10 px left.
View 6 Replies View Relatedi have a single checkbox in a div whose scroll property is set to true the checkbox is populated with data filed frm database. so depending on the number of data items , there will be the checkboxes i want that on pressing down/up arrow key the focus shld shift to the previous/next checkbox , and on pressing spacebar the checkbox shld be selected / deselected and on presing tab the focus shld come out of teh div control have checkbox on to the next control
at presnet before using the below code if i press tab the cursor moves to next checkbox, so if i have 50 checkboes in the div i need to press tab 50 times to shift to next control
I want to move something with the arrow keys, but some aprt of script is incorrect and it's not working
</style>
<script type="text/javascript">
function setup() {
row=0;
[Code].....
I have a goofy fun interactive site I am working on that has a few pages that have iframes of pictures, textareas and buttons from other sites. Now the problem I have is that the cursor always changes to a hand or text cursor or something and I want it to remain an arrow the entire time. I know how to control this when the image, button, ect is on my page, but not when it is from an iframe.
I have tried all of the CSS codes to keep cursor default but nothing worked (again I think because I am using iframes).
Does anyone know any javaScript techniques to keep the cursor as an arrow for an entire page?
I'm using the below to limit the input into a text box to just letters,
numbers, hyphens and full stops, but I also need to allow the backspace,
delete and arrow keys to come through. How can I do this?
<script language="JavaScript" type="text/javascript">
<!--
function onKeyPressBlockNumbers(e)
{
var key = window.event ? e.keyCode : e.which;
var keychar = String.fromCharCode(key);
reg = /^[.a-zA-Z0-9_-]*$/;
return reg.test(keychar);
}
//-->
</script>
<form>
<input type="text" onkeypress="return onKeyPressBlockNumbers(event);" />
</form>
According to the Apple docs, the round arrow in a list means that the next page is the final page. In Jquery, the default is the gray chevron pointing to another list. How do I make the round arrow (arrow in circle) icon appear instead?
View 1 Replies View Related