I'm confused on how this set of code is suppose to select the button by pressing the "g" on the keyboard:
Any help on this?
Concept of keypress in jquery
$(selector).keypress(function)
You may follow http://www.k68.org/wp-content/uploads/2010/11/Key_Codes.htm
Use this code :
<html>
<head>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).keypress(function(event){
if(event.which == 103) {
//Your Code
}
})
})
</script>
</body>
</html>
As i can read your provided code image will work.
it has one problem which trap all event of this element which is not right based on description of provided example.
their should be $('.btn').toggleClass("btn-like")
Related
Before asking this, I did some research on event capturing and bubbling. However, it still does not solve my problem.
I am writing an userscript for this website. Basically, I cannot change the website's code and I can only change my own userscript's code. The website has the window capture the event before my script can get it.
Here is a simplified example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//I cannot change this code (it is part of the webpage):
$("p")[0].addEventListener("click",function(){
alert("p");
});
$(window)[0].addEventListener("click",function(){
alert("window");
},true);
//I can change this code (it is part of my userscript):
$("body")[0].addEventListener("click",function(){
alert("body: I want to come first");
});
});
</script>
</head>
<body>
<p>Click Here</p>
</body>
</html>
Edit: Clarification
for this example, I would want the "body" alert to come first, without disabling the "window" or "p" alert. So I would want the result to be either:
"body", "window", "p"
or
"body", "p", "window"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body")[0].addEventListener("click",function(){
alert("body: I want to come first");
});
window.RemoveEventListener('click',alert,true);
//I cannot change this code (it is part of the webpage):
$("p")[0].addEventListener("click",function(){
alert("p");
});
$(window)[0].addEventListener("click",function(){
alert("window");
},true);
//I can change this code (it is part of my userscript):
});
</script>
</head>
<body>
<p>Click Here</p>
</body>
</html>
You can using this as i have disabled the event alert and added your script at the starting of the script tag.
I know this question may be stupid, but I'm new to JQuery and failed to guess (even after hard search at Google) Why My Function failed to Show me Alert on Click Event of Button, (I'm trying to do more tasks but for debugging purpose I'm showing alert).
<!DOCTYPE html>
<html>
<head>
<title>WebSite Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
$(document).ready(function(){
$('#foo').click(function(){
alert('ggg');
});
});
</script>
</head>
<body>
<input type="button" name="" value="Get Data" id="foo">
</body>
</html>
As #Pranav mentioned, you should separate the scripts, so each can work.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').click(function() {
alert('ggg');
});
});
</script>
I'm Totally Agreed with Answers of above two users, You have to Put Your Code away from the tags referencing the Libraries, What you need to do is place your logical code may be of Javascript or JQuery in Another Script Tags
I found this jsfiddle code, and I need it and I want to try that in my php file, but it doesn't work, whereas it's the same code, i just copied and paste and I don't change anything, but it still doesn't work.
My Code:
<!DOCTYPE html>
<?php
?>
<html>
<head>
<title></title>
<script>
$("#update").click(function() {
$("#counter").html(function(i, val) {
return val*1+1
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.jss"></script>
</head>
<body>
<button id="update" type="button">Click Me</button>
<div id="counter">10</div>
<?php
?>
</body>
</html>
Please show me my fault. Any help would be appreciated!
You should really be able to debug this yourself. Open your javascript console, and notice it says ReferenceError: $ is not defined. This means jquery isn't loaded. Now look at the URL you put in your script-src. Why does it end with in .jss? You have a typo there.
If you correct that you'll still get the same error. Why? Because you use jquery before including it. So put the included jquery library before the custom code.
Now, it still won't work. Why? Because you attach an event before the DOM is loaded; so when your script is processed, the button doesn't exist! So have a look at http://api.jquery.com/ready/ and you should know what to add, wrap your javascript inside $(function() {...}) and you're good to go
Maybe it's just a typo in jquery.min.jss
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.jss"></script>
it must be jquery.min.js
Or you placed your javascript before the jquery reference.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#target').click(function() {
$('#output').html(function(i, val) { return val*1+1 });
});
});
</script>
</head>
<body>
<button id="target" type="button">Click Me</button>
<div id="output">10</div>
</body>
</html>
In my website there are "boxes" that open when you click on the song name, but I would like to make the one that is open to close when you click on another song name. So just one box would be open at the time. The code that invokes boxes to appear is just below. Does anyone know the solution how i could achieve that ? P.S with image it would be a lot more understandable but I am not allowed to add images.
<script type="text/javascript">
var showOrHide = true;
function parodyti (a) {
$(function () {
$("#nauj-" + a).slideToggle('slow', function () {})
})
};</script>
You can the jquery concept to do it . Jquery provides you with the method .toggle() to work it out . An example code will be like this :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
This will toggle on button press between the two strings Good Bye and Hello .
Use .click(function() to achieve your task.
Refer Jquery toggling the element one at a time link for your reference.
This may help you : http://jsfiddle.net/fd46R/
Its just a sample for your reference.
$(function(){
$('ul.child').hide();
$('ul.parent a.slide').click(function(){
$('ul.child').slideUp('slow');
$(this).next().find('a').show();
if( $(this).next().is(':hidden') ) {
$(this).next().slideDown('fast');
}
return false;
});
});
I have tried to set a item to read only, as you see in the code i have tried several way and can't get that to work. Can anyone help me with this?
<html>
<script>
//test.Attributes.Add("readonly","readonly")
//document.getElementById('testtt').setAttribute('readonly', 'readOnly');
// document.getElementByID('test').value=readOnly;
//document.getElementByID('test').readOnly = true;
// $("#test").attr("readonly", "readonly");
//$("#test").removeAttr("readonly");
//$('#test').attr('readonly', 'readonly');
$("#test").attr("readonly")
</script>
<body>
<input id="test" type="text" value="text" />
</body>
</html>
$('#test').attr('readonly', true);
working example : http://jsfiddle.net/FBUDt/
this should work for you:
$("#test").attr("readonly", "readonly");
remember that the DOM needs to be loaded before you try to find the element
you could use jquerys DOM-ready
$(function() {
$("#test").attr("readonly", "readonly");
});
what version of jquery are you using?
You should try wrapping your code into $('document').ready();
According to the documentation,
The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
So it would be:
$('document').ready(function(){
$("#test").attr("readonly", "readonly");
});
You can't refer to an element that is created later in the document. Move the script down below the form, or place it in a document.ready block. Also, you should use $.prop() in jQuery 1.6+
$(function(){
$('#test').prop('readonly', true);
});
I would go with
document.getElementById('test').setAttribute('readonly', 'readOnly');
But that is not the issue. The position of your script is where it goes wrong. You are trying to change element which does not exist.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>testcase</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div class="some container">
<input id="test" type="text" value="text" />
</div>
<script type="text/javascript" charset="utf-8">
document.getElementById('test').setAttribute('readonly', 'readOnly');
</script>
</body>
</html>
If you place your scripts right befor the closing </body> tag , then it is executes as soon as DOM has been built.
And please. Stop using JS libraries to do the most basic things.
you are missing
$(document).ready(function() {
$('#test').attr('readonly', 'readonly');
});
sample
http://fiddle.jshell.net/Pe4J5/