JQuery Keyup event doesn't work - javascript

So, I need use this event so I can navigate trought blog posts. I use the 'J' key to go to the previous post and the 'K' key to go to the next post.
My problem is that the event works on the first try but then doesn't work anymore.
When i restart the browser it works if i press J or K and it redirects me to the previous/next post. But then if I press again it does nothing.
Sorry if I can't explain it exactly enought and thanks for helping.
$(document).keyup(function (event) {
if (event.keyCode == 74) {
var left_link = $('#nav-left a').attr('href');
alert(left_link);
if(typeof left_link !== 'undefined' && left_link !== false)
window.location = left_link;
}
else if (event.keyCode == 75) {
var right_link = $('#nav-right a').attr('href');
alert(right_link);
if(typeof right_link !== 'undefined' && right_link !== false)
window.location = right_link;
}
});
Even if I don't do the redirect and only those alerts it doesn't work.

After you've changed the location, a new document is loaded. A document without a listener for keyup events.

There was a problem with the script loading, I applied a delay of 1 second and now it works just fine.
Thanks anyway.

Related

Disable browsers' back button, completely

Need to prevent users going to the previous page, completely.
When I use the following code it works but it's not what I need exactly. When pressing the back button it says "Document Expired":
Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
Response.Cache.SetValidUntilExpires(false);
Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetNoStore();
Another idea - to open a new window without toolbar:
<script>
function PopupWithoutToolbar(link) {
var w = window.open(link.href,
link.target || "_blank",
'menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=no,dependent,width=800,height=620,left=0,top=0');
return w ? false : true;
}
</script>
yahoo
But, still... If the user presses the backspace button on a keyboard he can go back. It seems that this approach is only for hiding and not disabling buttons.
Is there any way to simply ignore the back button?
I am not entirely sure if this will work, but you can try handling the event with javascript.
Like if you want to entirely disable the backspace button from allowing users to go back you can do like
$(window).on("keypress", function (e){
if(e.keycode == "backspace")
e.preventDefault();
})
I could figure out the keycode for backspace for you , but that isn't too hard to figure out. Also this uses jquery, but you can use just raw javascript. just wasn't sure what it would be offhand.
I'm using a slightly different solution:
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
}
Based on your post it sounds like your only issue is disabling the backspace button from allowing the user to go back.
Here's what I do for that using jquery. Still allows backspace to work inside enabled text editing inputs, where it should.
// Prevent the backspace key from navigating back.
$(document).unbind('keydown').bind('keydown', function (event) {
var doPrevent = false;
if (event.keyCode === 8) {
var d = event.srcElement || event.target;
if ((d.tagName.toUpperCase() === 'INPUT' && (d.type.toUpperCase() === 'TEXT' ||
d.type.toUpperCase() === 'PASSWORD' ||
d.type.toUpperCase() === 'FILE')) ||
d.tagName.toUpperCase() === 'TEXTAREA') {
doPrevent = d.readOnly || d.disabled;
}
else {
doPrevent = true;
}
}
if (doPrevent) {
event.preventDefault();
}
});
Simplest thing ever:
window.onhashchange = function (event) {
//blah blah blah
event.preventDefault();
return false;
}
You can handle the location domain etc from that (window.location) then cancel the event if you want in this case.
How to Detect Browser Back Button event - Cross Browser
To disable the back button in the browser you can use use the following code in your JavaScript on the page on which you want to disable the back button.
<script>
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};
</script>

Pressing any keyboard buttons removes hash url

I have found a bug on a website I am maintaining. What happens is if you click any button on the keyboard, the hash url gets removed and the browser jumps to the top of the page. I thought this was an issue with my smooth scroll function but I removed it completely and nothing changed. I also tried to set default actions for arrow clicks but it still removed the hash url.
You can see it happening here, and all you need to do is click any button on your keyboard to see the issue.
Is there anyway to prevent the browser from removing the hash url?
The problem seems to be in the Javascript file named app.js included within your website.
Somewhere, you check for keyboard input like this:
$(document).keyup(function(e) {
if(e.keyCode == 37 || 39) { //left right arrow
var activeMem = $('.detail-active').find(textCenter).text();
var spaces = activeMem.toString().replace(/ /g, '-');
var comma = spaces.replace(',', '').toLowerCase();
var clean = comma.replace('.', '').toLowerCase();
if (clean.substring(clean.length-1) == ".") {
clean = clean.substring(0, clean.length-1);
}
var hash = '#'+clean;
location.hash = hash;
}
});
The problem is with this condition if(e.keyCode == 37 || 39).
It should be if(e.keyCode == 37 || e.keyCode == 39)

Infragistics WebDataGrid - Loading Edit Mode after page is loaded

I have a strange problem, but it doesnt seem like I can find a solution:
I want to enter the edit mode of the WebDataGrid, when the user navigates from page X to the page with the grid.
My code is something like this:
function GridRowEnterEditMode(src, validationGroup) {
var savePageValidate = undefined;
if (typeof (Page_ClientValidate) != "undefined") {
savePageValidate = Page_ClientValidate;
Page_ClientValidate = undefined;
}
var row = jQuery(src).parents("tr[type='row']").get(0)._object;
var editingCore = row.get_grid().get_behaviors().get_editingCore();
if (editingCore != null) {
var rowEditingTemplate = editingCore.get_behaviors().get_rowEditingTemplate();
if (rowEditingTemplate != null) {
rowEditingTemplate.enterEditMode(row);
}
}
if (savePageValidate != undefined) {
Page_ClientValidate = savePageValidate;
}
if (typeof (Page_ClientValidate) != "undefined" && validationGroup != null) {
Page_ClientValidate(validationGroup);
}
}
While it works when I shoot this when a button is clicked, it seems like I cant find the correct event to load this after the page is loaded client side.
I tried document.ready, document.load, pageLoad, I setted a timer for a delay etc. etc., it always shoots at this code:
var row = jQuery(src).parents("tr[type='row']").get(0)._object;
Has anyone a idea, what I can do to delay this further or if there is a infragistics way to get this?
I asked in their forum as well, but didnt get a helpfull answer so far.
Matthias

Send tweet using 'enter' key (Greasemonkey)

I'm attempting to create a Greasemonkey script that can submit a tweet when a user hits the 'enter' key. I've gotten this to work fine on a simple HTML page (with the help of a few excellent tips on this site). However, when I try to use the code on my twitter page, the alert only fires if a tweet is not currently being authored.
document.onkeyup = function(event){
var keyCode;
if (window.event) // IE/Safari/Chrome/Firefox(?)
{
keyCode = event.keyCode;
}
else if (event.which) // Netscape/Firefox/Opera
{
keyCode = event.which;
}
if (keyCode == 13){
alert("Enter pressed");
}
}
My next thought was to test for a more specific keypress event. So I tried testing for a key event within the new tweet textarea:
document.getElementsByClassName("twitter-anywhere-tweet-box-editor")[0].onkeyup = function(event)
...but this event never seems to fire. I also tried grabbing the element by tag:
document.getElementsByTagName("textarea")[0].onkeyup = function(event)
...but not dice there either. I wonder if this has to do with the fact that the new tweet window is not loaded from the get-go at window.onload(). Thoughts?
I got it thanks to this post. I've also posted the full Greasemonkey script here.
setInterval (function() { checkForTweetbox (); }, 500);
function checkForTweetbox () {
var tweetbox = document.querySelector ('div.tweet-box textarea'); //check for new tweet window
if (tweetbox) {
if (! tweetbox.weHaveProcessed) {
tweetbox.weHaveProcessed = true;
// alert ('New tweet-box found!');
}
}
tweetbox.onkeydown = function(event){
if(event.keyCode == 13){ //13 = Enter keycode
document.querySelector ('a.primary-btn').click(); //there must be at least one character in the textarea
}
}
}

.Net - Disabling going back one page when user clicks "Backspace" keyboard button

Basically sometimes I need to show a form that is pre-populated with a record. Depending on the users privileges, he may or may not be able to edit the data.
The problem I'm encountering is that sometimes a user will try to edit a textbox that's been disabled by clicking on it and hitting the "backspace" button to edit the text. This causes the browser to go back one page... Annoying.
If it's asp .net you can simply do it like this:
<script language=javascript>
function cancelBack()
{
if ((event.keyCode == 8 ||
(event.keyCode == 37 && event.altKey) ||
(event.keyCode == 39 && event.altKey))
&&
(event.srcElement.form == null || event.srcElement.isTextEdit == false)
)
{
event.cancelBubble = true;
event.returnValue = false;
}
}
</script>
<body onkeydown=cancelBack()>
You need to catch the keyboard event in javascript and stop it from executing. What server-side code you are using (ASP.NET) doesn't make a difference.
window.onkeydown = function(event) {
if(event.keyCode == 8)
return false;
}
Just tested in Chrome and it seems to work
Place this under in the document ready function if you have one
window.onkeydown = function (event)
{
if (event.keyCode == 8) {
return false;
}
}

Categories

Resources