Using shift key and click to go to the next slide - javascript

Hei guys, i added these lines of code as javascript on succes of a click box in captivate :
document.onkeydown = function (e) {
if (e.keyCode == 16) {
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide', 5);
}
};
It does good what it does but after first atempt even if im on another slide and i press shift key it goes to slide 5 :( Another question is, how to set an mousedown and onkeyup event on same button. What i try to achieve is to jump to next slide if i press shift key and i click on a click box.
EDIT: new code:
document.onmousedown = function (e) {
var currentSlide = document.Captivate.cpEIGetValue('m_VarHandle.cpInfoCurrentSlide');
if(currentSlide == 5 && e.keyCode == 16){
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide' , 5);
}
};
As i think it, should fire the function when i click on it, BUUUT , unfortunately it doesnt work... seems like Captivate doesnt recognize onmousedown event :|
RE-EDIT : i figurate out how to make it work. Here's the code :
document.onkeydown = function(e) {
var currentFrame = document.Captivate.cpEIGetValue('m_VarHandle.rdinfoCurrentFrame');
var currentSlide = document.Captivate.cpEIGetValue('m_VarHandle.cpInfoCurrentSlide');
if(currentSlide == 5 && e.keyCode == 16){
document.Captivate.cpEISetValue('m_VarHandle.rdcmndGotoFrameAndResume' , 491);
}
};
document.onkeyup = function(e) {
var currentSlide = document.Captivate.cpEIGetValue('m_VarHandle.cpInfoCurrentSlide');
if(currentSlide == 5){
document.Captivate.cpEISetValue('m_VarHandle.rdcmndGotoFrameAndResume' , 485);
}
};
Now everything's just PERFECT! its exactly what i wanted to do... but it works only on localhost... only when i press F12 in Captivate :( if i try to run exported swf or html from captivate it crush :((( Any ideea ?

var slide = 4;
document.onkeydown = function (e) {
if (e.keyCode == 16) {
slide++;
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide', slide);
}
};
Bassically you want to increment the position (second argument of cpEISetValue), in your code, you always set it to 5. Also make sure to reset it when it reaches the max slider position.

You can check the SHIFT key inside the click:
var slide = 4;
$('body').click( function (e) {
if (e.shiftKey) {
slide++;
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide', slide);
}
});
check here

If you want to set a click with a shift key you can use this:
$(document).click(
function(e){
if(e.shiftKey){
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide', 5);
}
}
);
the same works with ctrlKey, and altKey
And to change the page fine you need a control variable like this:
var current_page = 1;
$(document).click(
function(e){
if(e.shiftKey){
current_page++
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide', current_page);
}
}
);
I think this is the final code that you need (you maybe need to change document to an id or class that you are using like "#element_id" or ".element_class")

Related

Return a key-press whilst another key is held down

So what I need is to be able to hold down the spacebar key and the script needs to repeatedly spam the spacebar key as if I was doing it by tapping.
I have some code already written but I can't get it to work like I want.
document.addEventListener("keydown", function(event) {
if (event.keyCode == 32) {
var i = 0;
setInterval(() => {
var e = document.createEvent('HTMLEvents');
e.keyCode = 32;
e.initEvent(++i % 2 > 0 ? 'keyup' : 'keydown', false, true);
window.dispatchEvent(e);
}, 35);
}
});
So basically this works, when I press the spacebar it repeatedly presses the spacebar up and down, however it doesn't stop doing it when I release the space bar, however it doesn't actually start until I press the spacebar which means it's somewhat working.
I know the problem is with this line e.initEvent(++i % 2 > 0 ? 'keyup' : 'keydown', false, true);
but I've actually recovered this code from another project and can't figure out what it's doing or how.
Does anyone have any suggestions?
Not sure if this is what you need. Have a look. Event has a repeat property.
let test = 1;
let temp = document.querySelector('.test');
temp.innerHTML = test;
document.addEventListener("keydown", function(event) {
if (event.keyCode == 32) {
console.log(event.repeat);
test += 1;
temp.innerHTML = test;
}
});
<div class = 'test'>
<div>

Jquery keydown only works once

EDIT: I solved it by changing = to ==, but that didnt fully solve it but then I added a change to $currentSlide and now it works! Yay!
$(document).keydown(function(e) {
if(e.keyCode == 39)
{
if($currentSlide == $slide1){
slideShow(slide2);
$currentSlide = $slide2;
}
else if($currentSlide == $slide2){
slideShow(slide3);
$currentSlide = $slide3;
}
else if($currentSlide == $slide3){
slideShow(slide1);
$currentSlide = $slide1;
}
}
})
I have searched for an answer but haven't found anything that suits my question. I am a noob on javascript so bear with me.
I have a function that works as a slideshow. (I use $ in front of my jquery variables, I have a lot of javascript variables too so I just use it to separate them.)
var $currentSlide = "#slide1";
var $slide1 = "#slide1";
var $slide2 = "#slide2";
var $slide3 = "#slide3";
function slideShow($slide) {
if ($slide != $currentSlide){
$($currentSlide).fadeOut(500);
$($slide).delay(500).fadeIn(500);
$currentSlide = $slide;
}
};
To call this function, I use a simple link with parameter depending on which slide is active.
onclick="slideShow(slide2)"
And then I want to change slide with keypress (to right). This is my code for the keypress:
$(document).keydown(function(e) {
if(e.keyCode == 39) {
if ($currentSlide = $slide1){
slideShow(slide2);
} else if($currentSlide = $slide2) {
slideShow(slide3);
} else if($currentSlide = $slide3) {
slideShow(slide1);
}
}
})
It works perfectly when using the links but when I press key it behaves very weird. First click works like a charm, but then it doesnt work any more. If I click to get the third slide, another click will put next slide on top of slide3 but slide3 never goes away.
I realise there is some huge mistake by me here but I'm too much of a beginner to fix it. Any ideas?
your if-else conditions will always be true, because you used '=' instead of '=='. since your first if condition will be true it always shows slide2 and it looks to you that it only worked once
$(document).keydown(function(e) {
if(e.keyCode == 39) {
if ($currentSlide == $slide1){
slideShow(slide2);
} else if($currentSlide == $slide2) {
slideShow(slide3);
} else if($currentSlide == $slide3) {
slideShow(slide1);
}
}
})
The second problem maybe caused by the clock on the slideshow, if you are using one. When you click the next/previous button you need to reset the clock of your slideshow.
There are two issues
You do an assignment in your if conditions, so they always are true. Instead use the comparator ===;
In the onclick attribute you specify an undefined variable, since the $ is missing from it
Beside correcting this, I would suggest to use a class for your slide elements, not individual IDs. So use class="slide" instead of id="slide1" in your HTML, and apply it to all slides -- they can share the same class.
Then store the sequence number of the current slide, counting from 0.
I would also remove all the onclick attributes on the slide elements and deal with click handlers from code, which can be done quite concisely with $('.slide').click( ... ):
var currentSlideNo = 0; // zero-indexed
function slideShow(slideNo) {
if(slideNo != currentSlideNo){
$('.slide').get(currentSlideNo).fadeOut(500);
currentSlideNo = slideNo;
$('.slide').get(currentSlideNo).delay(500).fadeIn(500);
}
};
$('.slide').click(function () {
slideShow((currentSlideNo + 1) % $('.slide').length);
});
$(document).keydown(function(e) {
if (e.keyCode == 39) {
slideShow((currentSlideNo + 1) % $('.slide').length);
}
});

jQuery keyup working incorrectly

I am trying to make an integer variable increment every time the Enter key is pressed. This variable is then used to output a value from an array.
$(document).keyup(function(e) {
if (e.keyCode == 13) {
console.log(++currSteps);
$('#output').text(outNum[currSteps])
if(outNum[currSteps] % 2 == 0){
$('body').css("background", "#4b84e5")
}
else if(outNum[currSteps] == 1){
$('body').css("background", "#9dd622")
}
else{
$('body').css("background", "#d16323")
}
}
});
The problem occurs when I actually press Enter. On the first press, it works properly, and increments the variable currSteps and displays the next value in the array. However, when I press Enter again, it reverts it back to the original value of currStep, as long as Enter is held down, it will display the original value.
Now, yes, this event is for keyup, therefore it makes sense that things will work oddly on keydown. However... if I open up the developer tools and click around in the console, and then return to my original window, the keyup code works perfectly. Why is this only working after the developer tools have been opened?
I have tried this on jQuery 1.11.1 and 1.10.2.
Edit: currSteps and outNum declarations.
$('#in').click(function(){
$('#output').empty();
$('#steps').empty();
var steps = 0
currSteps = 0
var inNum = parseInt($('#input').val());
var col = '#ffffff'
outNum = []
outNum.push(inNum)
...
I allowed to myself to write a little of your missing variables defition: JSFiddle
$(document).ready(function() {
var currSteps = 0;
var outNum = { 0: 0, 1: 1, 2: 2 };
$(document).keyup(function(e) {
if (e.keyCode == 13) {
console.log(++currSteps);
$('#output').val(outNum[currSteps] + ' ' + currSteps)
if(outNum[currSteps] % 2 == 0){
$('body').css("background", "#4b84e5")
}
else if(outNum[currSteps] == 1){
$('body').css("background", "#9dd622")
}
else{
$('body').css("background", "#d16323")
}
}
});
});
Is you problem still actual with upper demo?

Jquery keydown event only working every second press?

Essentially I've created a thumbnail gallery which you can scroll through using the left and right arrows. The right arrow event works perfectly fine, so I assumed that the left arrow event would be the same except with a (-) value. However when I press the left key it only goes to the previous thumbnail every SECOND time.
Can somebody take a look at my code and let me know what I'm missing? Thanks!
$(document).bind("keydown", function(event) {
if (event.keyCode == 39)
{
$("#thumbnail img").each(function(i) {
if ($(this).hasClass("currentThumb"))
{
currentSelectionIndex = i;
$("#thumbnail img").removeClass("currentThumb").addClass("thumb");
if (currentSelectionIndex == 14 && parseInt($('#end').text()) < parseInt($('#total').text()))
{
nextImages(currentCategory.value);
}
}
if(i == currentSelectionIndex + 1)
{
$(this).removeClass("thumb").addClass("currentThumb");
$(this).parent().click();
}
});
}
if (event.keyCode == 37)
{
$("#thumbnail img").each(function(i) {
if ($(this).hasClass("currentThumb"))
{
currentSelectionIndex = i;
$("#thumbnail img").removeClass("currentThumb");
$("#thumbnail img").addClass("thumb");
if (currentSelectionIndex == 0 && parseInt($('#start').text()) > 1)
{
prevImages(currentCategory.value);
}
}
if(i == currentSelectionIndex - 1)
{
$(this).removeClass("thumb").addClass("currentThumb");
$(this).parent().click();
}
});
}
});
Reversing your selection should be enough to make it go in reverse.
$.fn.reverse = [].reverse; // at the top of your code
// in the event handler for left arrow
$("#thumbnail img").reverse().each(function(i) {
don't forget to change back to +
It may works using keyup instead of keydown. I had some issues with it. If it doesn't work use http://jsfiddle.net so that we can easier solve it.

using a function on textbox focus?

I want to add a autocomplete function to a site and found this guide which uses some js code which works really nice for one textbox: http://www.sks.com.np/article/9/ajax-autocomplete-using-php-mysql.html
However when trying to add multiple autocompletes only the last tetbox will work since it is the last one set.
Here is the function that sets the variables for the js script
function setAutoComplete(field_id, results_id, get_url)
{
// initialize vars
acSearchId = "#" + field_id;
acResultsId = "#" + results_id;
acURL = get_url;
// create the results div
$("#auto").append('<div id="' + results_id + '"></div>');
// register mostly used vars
acSearchField = $(acSearchId);
acResultsDiv = $(acResultsId);
// reposition div
repositionResultsDiv();
// on blur listener
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) });
// on key up listener
acSearchField.keyup(function (e) {
// get keyCode (window.event is for IE)
var keyCode = e.keyCode || window.event.keyCode;
var lastVal = acSearchField.val();
// check an treat up and down arrows
if(updownArrow(keyCode)){
return;
}
// check for an ENTER or ESC
if(keyCode == 13 || keyCode == 27){
clearAutoComplete();
return;
}
// if is text, call with delay
setTimeout(function () {autoComplete(lastVal)}, acDelay);
});
}
For one textbox I can call the function like this
$(function(){
setAutoComplete("field", "fieldSuggest", "/functions/autocomplete.php?part=");
});
However when using multiple textboxes I am unsure how I should go about doing this, here is something I did try but it did not work
$('#f1').focus(function (e) {
setAutoComplete("f1", "fSuggest1", "/functions/autocomplete.php?q1=");
}
$('#f2').focus(function (e) {
setAutoComplete("f2", "fSuggest2", "/functions/autocomplete.php?q2=");
}
Thanks for your help.
You should be using classes to make your function work in more than one element on the same page. Just drop the fixed ID's and do a forEach to target every single element with that class.

Categories