Update QUERY_STRING without page reload - javascript

I currently have this code snippet in a CGI script:
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
document.location = "?direction=West";
break;
case 38:
document.location = "?direction=North";
break;
case 39:
document.location = "?direction=East";
break;
case 40:
document.location = "?direction=South";
break;
}
};
That will update the QUERY_STRING and then reload the page.
Can this be done without constantly reloading after every key stroke?
JSON? jQuery?
I've tried fiddling with url.replace() and history.pushState().. no luck..

you can use window.history.pushState('page1', 'Title', 'page1?direction=West');
for this.
for more infomation adn help check link

Related

how can give arrow key events in full page image silder

How can give arrow key events in full page image slider, for example the below sample link -> https://www.htmllion.com/examples/pure-css-based-fullscreen-slider-demo.html.
I need the same layout with arrow key events.
Kindly help.
Use Keyboard events in Jquery. Based on the user click navigate the page
Using jQuery you can do something like this.
$(window).on('keyup', function(e){
console.log(e.keyCode); // log the keycode of the key pressed
switch(e.keyCode){
case 37:
console.log('Prev');
break;
case 38:
console.log('Up');
break;
case 39:
console.log('Next');
break;
case 40:
console.log('Down');
break;
}
});
You can add a keydown event to any element and call a function.
In the below example i have used an input text field to add a keydown event and it gives alert on pressing left or right arrow key
function myFunction(event) {
var keyVal = event.keyCode;
switch(keyVal)
{
case 37:
alert('Pressed left');
break;
case 39:
alert('Pressed right');
break;
}
}
<input type="text" onkeydown="myFunction(event)">

JS - convert a KBD event into a link click

Still beginner here, please be gentle :)
I have a CSS-lighbox with 3 links: previous image, next image and exit. The links are like that:
<img src="images/prev.png" />
Then i have a KBD listening script:
function kbdNav(e) {
switch(e.keyCode) {
case 37:
// activate link "prev"
break;
case 39:
// activate link "next"
break;
case 27:
// activate link "exit"
break;
}
}
My goal is that when the KBD arrow is pressed (case 37) the link # prev.png gets activated, so that the lightbox image goes to the previous image. Same for the other 2 cases.
What method can be used for this?
First, select the anchor elements:
var prevLink = document.querySelector('.prev');
var nextLink = document.querySelector('.next');
var exitLink = document.querySelector('.exit');
Then edit the listener as follows:
function kbdNav (e) {
switch (e.keyCode) {
case 37:
prevLink.click();
break;
case 39:
nextLink.click();
break;
case 27:
exitLink.click();
}
}
Consider this topic closed. The solution works, but my HTML was quite messily structured.
I found a better solution with a pure JS gallery/lightbox.

Two Drop Down options with a button

I am trying to get this work.
I have 2 dropdown lists. Once the user select the required value and click the button. The button will load specific URL based on the selected options in both the dropdowns.
https://jsfiddle.net/vs3q879c/
<script>
$(document).ready(function() {
OR = document.getElementById("orientation");
SZ = document.getElementById("size");
ORSZ = OR + SZ;
switch (ORSZ) {
case PA5:
window.location.href = "www.xxxx.wwww/one.html";
break;
case PA4:
window.location.href = "www.xxxx.wwww/two.html";
break;
case PA3:
window.location.href = "www.xxxx.wwww/three.html";
break;
case LA5:
window.location.href = "www.xxxx.wwww/four.html";
break;
case LA4:
window.location.href = "www.xxxx.wwww/five.html";
break;
case LA3:
window.location.href = "www.xxxx.wwww/six.html";
break;
default:
default none();
}
</script>
You have a few mistakes. Instead of using window.location.href, try using window.open("www.my-url.com").
Also, you have 2 default statements in your switch clause, try something like this:
switch (ORSZ) {
case PA5:
window.location.href = "www.xxxx.wwww/one.html";
break;
case PA4:
window.location.href = "www.xxxx.wwww/two.html";
break;
case PA3:
window.location.href = "www.xxxx.wwww/three.html";
break;
case LA5:
window.location.href = "www.xxxx.wwww/four.html";
break;
case LA4:
window.location.href = "www.xxxx.wwww/five.html";
break;
case LA3:
window.location.href = "www.xxxx.wwww/six.html";
break;
default: none();
}
Lastly, when you're getting the select elements by ID, you're grabbing the object instead of the selected value. To fix that, you need to use .value:
OR = document.getElementById("orientation").value;
SZ = document.getElementById("size").value;
ORSZ = OR + SZ;
DEMO: http://jsbin.com/tivocodeza/edit?html,js,output
Yeah, the above - grab the value of the input, not the element.
You are also using jQuery in your fiddle $(document).ready();
if you are doing that, you can use jQuery for everything. Not sure you want that but in case you do, here is a code suggestion:
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
var ORSZ = $('#orientation').val() + $('size').val();
switch (ORSZ) {
case PA5:
window.open("www.xxxx.wwww/one.html", '_blank');
break;
//e
//t
//c
});
});
I added the id="submit" to your button to make it easier to select.

Binding Keyboard to Onclick Event

I am having problems with a jquery slideshow where I want to bind next/right to make the images jump forwards/back.
I used the following code to attempt to do it but it simply refreshes the page.
<script>
$(function() {$(document).keyup(function(e) {
switch(e.keyCode) { case 37 : window.location = $('#prev a').attr('href'); break;
case 39 : window.location = $('#next a').attr('href'); break; }});});
</script>
The I was attempting to call were:
<a href='#' id='prev' onclick='show_image($prev); return false;'>
and
<a href='#' id='next' onclick='show_image($next); return false;'>
Does anyone know an easy way to cut out the middle man and simply bind left/right to the onclick event for each?
Anyhelp would be much appreciated!
This should work:
$(function() {
$(document).keyup(function(e) {
switch (e.keyCode) {
case 37:
$('#prev a')[0].onclick();
break;
case 39:
$('#next a')[0].onclick();
break;
}
});
});​
Just call the onclick event handler of the left or right button based on which key you pressed.
$(function() {
$(document).keyup(function(e) {
switch (e.keyCode) {
case 37:
$('#prev').click();
break;
case 39:
$('#next').click();
break;
}
});
});​

arrow control for Galleria

i'm having a problem with Galleria.
the following code:
<script type="text/javascript">
$(document).keypress(function(e)
{
switch(e.keyCode)
{
case 37: //press left arrow
$.galleria.prev();
break;
case 39: //press right arrow
$.galleria.next();
break;
}
});
</script>
won't work, it says:
$.galleria is undefined
if i use instead Galleria.prev() and Galleria.next()
then it says: Galleria.next is not a function, and the same fo prev.
i hope somebody with more experience can help me.
Thanks in advance,
Adam
galleria seems to have an attachKeyboard method, but i can't get that to work. but playing around with the code you have above, i managed to get arrow controls. try this:
<script>
//start galleria
Galleria.loadTheme('galleria.classic.js');
$('#galleria').galleria();
//obtain galleria instance - this might be the step you are missing
var gallery = Galleria.get(0);
//essentially what you had above
document.onkeyup = KeyCheck;
function KeyCheck(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID) {
case 37: //press left arrow
gallery.prev();
break;
case 39: //press right arrow
gallery.next();
break;
}
}
</script>

Categories