This question already has answers here:
Prevent form submission on Enter key press
(20 answers)
Closed 9 years ago.
I am trying to scroll down the page using javascript.
I have this code which works fine if if i use javascript:pageScroll() in a link or button:
<SCRIPT LANGUAGE="Javascript">
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
</SCRIPT>
but i need to find out how i can call the pageScroll() function if the user presses enter on their keyboard?
any help would be greatly appreciated.
$(document).keypress(function(e) {
if(e.which == 13) {
//do stuff
}
});
Use jQuery, you might be interested in .keypress(). Here: http://api.jquery.com/keypress/
Also you could have easily avoided this question by doing a simple Google search.
Related
I'm trying to have a next button disabled untill 30 seconds after the space bar has been pressed using jQuery in qualtrics. I've tried a lot of suggestions that have already been made, but nothing seems to work. If anyone could help me out here I'd be super grateful, I'm at a real dead end.
Thanks in advance
Qualtrics.SurveyEngine.addOnload(function() {
/*Place Your Javascript Below This Line*/
var InputId = $("QR~" + this.questionId);
InputId.style.display = "none";
this.disableNextButton();
if (e.keyCode === 0 || e.keyCode === 32) {
this.enableNextButton.delay(30);
}
})
$ in Qualtrics is referring to prototypejs.
You would need to run jquery noconflict to be using jquery, and using the correct identifier to match.
Additionally, you have no event handler to capture your keypress.
I'm very new to JavaScript, and I'm currently trying to add a custom code to my Qualtrics survey that makes it so pressing the enter key continues the survey. I have a code that should be working; however, I'm getting an "Unexpected token )" error.
Here is the code:
Qualtrics.SurveyEngine.addOnload(function()
{
document.addEventListener("keydown", function(e) {
if (e.keyCode === 13) {
function(){
that.clickNextButton();
}
}
}
});
the "clickNextButton" function was found in the Qualtrics API document and is supposed to emulate the next button click. The function is clickNextButton(), but the example provided has the code as that.clickNextButton().
The example they use is below:
//Hides the next button and displays the question
//for 5 seconds before moving to the next page
this.hideNextButton();
var that = this;
(function(){that.clickNextButton();}).delay(5);
I don't need the hiding button function or the delay, but just wanted to include an example of how it is used.
Any help is much appreciated, thanks in advance!
Here is a simplified version that works (updated to hide NextButton):
Qualtrics.SurveyEngine.addOnload(function() {
$('NextButton').hide();
document.on("keydown", function(e) {
if (e.keyCode === 13) $('NextButton').click();
});
});
It depends on the scope, or specifically where the function clickNextButton resides.
If you don't bother with the timeout you should be able to just remove the word 'that' from your Qualtrics.SurveyEngine function and it should work fine.
It's possible the function is not available in your current scope. So if removing 'that' doesn't work. Put it back in and put var that = this; in the line before your function call. It's far from a tidy way to do things at all but it may fix things for you.
Worth reading this.
http://www.w3schools.com/js/js_scope.asp
Didn't Meatloaf say something like... I'd do anything for scope.... but I don't do THAT?
As said in my comment...See if it solves your error
Qualtrics.SurveyEngine.addOnload(function()
{
document.addEventListener("keydown", function(e) {
if (e.keyCode === 13) {
function(){
that.clickNextButton();
}
}
} ); // here was a missing bracket here
});
So I have a video embedded in a question and I needed to disable to Next button for 15 seconds in that way I would know that autoplay video was watched.
And this worked for me so well:
Qualtrics.SurveyEngine.addOnload(function()
{
//Hides the next button and displays the question
//for 15 seconds before moving to the next page
this.disableNextButton();
var that = this;
(function(){that.enableNextButton();}).delay(15);
});
You can change the (15) seconds to any number, the Next Button will be activated and ready to be clicked next, but not automatically send you to next page.
This question already has answers here:
How do I disable right click on my web page?
(30 answers)
Closed 8 years ago.
I want to prevent users from right-clicking on image on my site and saving them.
I know there are many work-around for this, but I still need to do it.
Any help?
Also, this site has this feature - http://finsix.com/dart/#section-colors
It can be html, javascript, jquery. Any solution will do.
$("body").on("contextmenu", "img", function(e) {
return false;
});
This is the "new" way in jQuery. Bear in mind anyone with technical knowledge would be able to get around this.
Use the image as a background-image of a div element, This will keep the easy minded people away from saving it ;)
<script type="text/javascript">
function click (e) {
if (!e)
e = window.event;
if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
if (window.opera)
window.alert("");
return false;
}
}
if (document.layers)
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = click;
document.oncontextmenu = click;
</script>
I have found this script on selfhtml.org.
This function is originally designed to disable the client side context menu and to insert your own context menu. But it can be used for this too.
But keep in mind: By using browser addons like NoScript or opening the image url user could get around this.
This question already has answers here:
Is there a way to force a user to scroll to the bottom of a div?
(6 answers)
Closed 8 years ago.
I can't find a website at the moment, because I'm not at my desk where this is done, but I have seen it when you register there is a Terms of Use. To make sure the user reads it, it appears in a dialogue box (not sure of the exact name of this in HTML) and the "register" button stays greyed out until the user scrolls through the entire Terms of Use. How is this done? I am assuming this is JavaScript, but I don't know how to detect and control this. Some examples of this or how this is done in JavaScript would be very helpful. Thanks!
You can do this without jQuery with the following code:
//Your DIV with the TOS
var i=document.getElementById("ipsum");
//Event Listener for Scroll
i.onscroll=function(){
//Your Button
var y = document.getElementById("yay");
//The height to scroll to:
var x = i.scrollHeight - i.offsetHeight - 1;
if(i.scrollTop >= x)
y.removeAttribute("disabled");
else if(!y.hasAttribute("disabled"))
y.setAttribute("disabled",true);
};
Fiddle with HTML and CSS here.
Also, I agree with everyone else who's posted or commented, this is probably not a good idea.
You want to check the scrollTop is toward the bottom of the scrollHeight on the element.
$('.tos').scroll(function() {
if ($(this).scrollTop() + $(this).height() >= $(this)[0].scrollHeight - 100) {
$('input[type="submit"]').prop('disabled', false);
}
});
Adapted from this answer
Here is a jsfiddle example.
Warning: Before you implement this
This will not detect if the user has read the terms. It is also extremely annoying to have to scroll through these (often tiny) TOS boxes.
A much, much better solution is to require the user to explicitly tick a box stating they have read and understand the TOS.
This question already has answers here:
How do I disable a href link in JavaScript?
(20 answers)
How do you make an anchor link non-clickable or disabled?
(19 answers)
Closed 6 years ago.
I have to disable anchor link depending on a condition if some data comes to that field it should work as a hyperlink and if that data does not come then the link should not be there?
Any ideas on this are welcome.
Case 1:
To disable:
document.getElementById(id).style.pointerEvents="none";
document.getElementById(id).style.cursor="default";
To enable:
document.getElementById(id).style.pointerEvents="auto";
document.getElementById(id).style.cursor="pointer";
Case 2:
If you want the link to be gone (not just disable it):
document.getElementById(id).style.display="none";
to get it back:
document.getElementById(id).style.display="block"; //change block to what you want.
Case 3:
If you want to hide it preserving the space for it:
document.getElementById(id).style.visibility="hidden";
To get it back:
document.getElementById(id).style.visibility="visible";
I couldn't make sense of your question body, so I'll answer your question's title...
How to disable anchor using javascript ?
JavaScript
if (condition) {
document.getElementsByTagName('a')[0].removeAttribute('href');
}
jQuery
...because everyone uses it, right?
if (condition) {
$('a').first().removeAttr('href');
}
with jQuery
if(!data){
$('#linkID').click(function(e) {
e.preventDefault();
});
}
with Prototype
if(!data){
$('linkID').observe('click', function(event) { event.stop() });
}
my link
function check(){
var data =document.getElementById("yourdatafield").value;
if(data)
window.location="your_link_location";
}
With jQuery:
To disable:
$('#anchor_tag').attr("disabled", true);
To enable:
$('#anchor_tag').attr("disabled", false);