I know this has been asked before in various places but i cannot understand why this is working. On toggle it should show/hide the div. Can some tell me why? Thanks
JS:
jQuery('.box-toggle.fl.active').on('click', function(event) {
jQuery('#box-content').toggle('show');
});
fiddle: https://jsfiddle.net/amurray4/cwdt4xeL/
You need to include the jQuery library in your project
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
jsFiddle demo
also, since you use an anchor <a> to register the click, in order to prevent page-jump-to-top following an anchor use Event.preventDefault(), and to secure your jQuery $ alias use:
jQuery(function( $ ){ // Secured $ alias and DOM ready
// Now use $ (for jQuery) freely:
$('.box-toggle.fl.active').on('click', function(event) {
event.preventDefault();
$('#box-content').toggle('slow'); // Use "slow"
});
// other DO Mready code here
});
Related
I have a simple button that calls a function inside index.html, and the function itself is in script.js, the function works when not using $( document ).ready(function() { //...}); but as soon as I add this line (at script.js), it won't work. This is how it looks:
index.html:
<button onclick="myFunction()">Click</button>
script.js with $( document ).ready: (Not working)
$( document ).ready(function() {
function myFunction(){
alert("Alright!");
}
});
script.js without $( document ).ready: (Working)
function myFunction(){
alert("Alright!");
}
Jquery solves this problem using selectors and binding events
In this cas use $('button').click(); to listen when the button is clicked.
Remove inline onclick
Hope this helps :>
$( document ).ready(function() {
$('button').click( () => alert("Alright!"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
You must have to add a library of JavaScript called jQuery. Because you are using the syntax of jQuery. (A rich and powerful JavaScript Library)
in Vanilla JavaScript we use document.getElementById('btnSubmit')
But in jQuery we write $('#btnSubmit') to do the same thing.
That's why you need to use the jQuery Library. You can use it directly form cdn or you can download it offline.
If you want to use cdn just add this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
One more thing in jQuery we use
$(document).ready(function(){
//your code goes here
})
to make sure that the Script will be effective after the DOM parsing/rendering is completed.
Thank you.
Another option is that u can create a variable outside of the document.ready scope. Probably, not your best option, but will get job done.
var func;
$(document).ready(function(){
func= function()
{
alert('Alright!');
}
});
<button onclick="func()">Click</button>
The scope of the anonymous function in$( document ).ready() no longer available when the execution of the function is finished . So can't call the function from this scope.
That happen because when the HTML is loaded onClick attribute is readed but this function is still not loaded.
The best approach in this case is make the binding on ready event.
I have a conflict with my javascript which is causing elements not to fadein. I have a button set to fadein after 10 seconds which works fine when I remove my javascript that I'm using for something else.
Can anyone help me figure out what the conflict might be?
You can see the test page I'm working on here: https://training.handcraftedbusinessfilms.com/test-fade-in/
I've currently removed the javascript that is causing the conflict but you can see it below.
<script type="text/javascript">
// Custom code by James
jQuery( document ).ready( function ( jQuery ) {
// binds to the plugin's function
jQuery( "input[name='gform_payment_method']" ).on( 'click', gfpStripeToggleCreditCard() );
// triggers the change to default option
jQuery( "input[id^=gform_payment_method_card_]" ).click();
console.log("Hello James");
});
</script>
Bro, your script is correct, but I see that you have 2 calls of "document.ready" in different parts of the html, so just need use once. I have merged and tested the script in the "head" tag and it works:
<script>
$(document).ready(function() {
$("div.button").fadeIn(2000);
//By James
//binds to the plugin's function
jQuery( "input[name='gform_payment_method']" ).on( 'click', gfpStripeToggleCreditCard );
//triggers the change to default option
jQuery( "input[id^=gform_payment_method_card_]" ).click();
console.log("Hello James");
});
</script>
The jquery was being called before it was defined in the header b/c the scripts were injected into the header via the theme and we couldn't control exactly the order of the scripts.
The solution was to create a site specific plugin that set a function to hold off on calling any jquery before the jquery was defined.
I have a html file and js file I want to execute JS when a button is clicked in html. for this I can use onclick event in html but the condition is that I should not modify the HTML file.
I tried to add eventlistener in my JS but that didn't worked.
<p align=center>
<button class="stdbutton" id=button2 name=button2>
Click Me
</button>
</p>
$("button2").click(function() {
alert("button2 clicked");
});
please see the fiddle link for further reference: http://jsfiddle.net/gqpr0g9w/
thanks in advance
Try the FIDDLE,
Basically the first issue with your fiddle was you are using js library other than jquery. Jquery code won't execute without referencing the jquery library.
Secondly you are using an invalid selector,
$("button2")
you can replace this with an id based selector (# selector) as per your markup
$("#button2")
And finally try wrapping the code under jquery closure under document ready event that will ensure that the event will attach when the related object is loaded on the browser.
Finally will becomes
$(document).ready(function() {
$("#button2").click(function() {
alert("button2 clicked");
});
});
Hope it works for you..
Include jQuery in your jsfiddle. Use one of the below to attach an event listener for click using jQuery
$("#button2").on("click", function() {
alert("button 2 clicked");
});
or
$("#button2").click(function() {
alert("button2 clicked");
});
case jQuery is included in the html:
js file -
$("#button2").click(function() {
alert("button2 clicked");
});
// notice the # symbol before the word "button2" representing that we are looking for an ID
case jQuery is NOT included in the html:
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/myJavaScript.js"></script>
jQuery script must first be included
and then you can execute the same code as shown above.
Well, you are trying to use jQuery, but there is no jQuery included in your html-File. In fact there is no script included in your html at all like
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/myJavaScript.js"></script>
I don't think you will be able to do that without modifying the html-file.
I'm having a hard time with overriding a core jQuerymobile function.
Here's the link to JQM library Im using: http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js
I changed line 5873
.appendTo( wrapper )
to following code:
.appendTo( *My own code* )
But I'm aware that changing the code directly inside JQM library isnt the best way to achieve what I need. So I would like to make an override in a custom js file.
How would I do it, in order to override the least of the JQM lib code? Thanks in advance.
That code is found within a delegated event handler, so you could overwrite that event handler with your own from an external file.
Lines 5788 to 5884 (with most of the code redacted):
$( document ).delegate( ":jqmData(role='listview')", "listviewcreate", function() {
...
.appendTo( wrapper )
...
});
So in your external JS code you can remove this event handler and attach your own:
$(document).undelegate(":jqmData(role='listview')", "listviewcreate").delegate(":jqmData(role='listview')", "listviewcreate", function () {
//your version of the above code here
});
Note that .delegate() and .undelegate() should be replaced with .on()/.off() if you're using jQuery 1.7 or newer.
Try this code after jquery initialized
jQuery.fn.extend({append: function() { **Your code here** } });
Just include a custom JavaScript file after you load jQuery, but before you bring in jQuery mobile.
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
I am trying to apply a style when the mouseenter event is triggered, but if I uncomment the following untouched selector - even the document ready stops working.
<body>
<div id="1" class="button untouched"></div>
<script src="/jquery.js"></script>
<script>
$(document).ready(function(){
alert("JQuery is working");
});
/*
$(".untouched").mouseenter($function(){
$(this).addClass("touched");
});
*/
</script>
</body>
I am following the example found at:
http://api.jquery.com/mouseenter/
And I get the following error in Firebug:
missing ) after argument list
[Break On This Error]
$(".untouched").mouseenter($function(){
Since it does not work, I've made a mistake, but I don't know what. All I know is that none of my code works if I let that run. I downloaded the latest 1.7.2 version of jQuery, which I know is available on the page because the alert() runs with the other commented out.
No need for the $ in front of the function. Also, the mouseenter event function code should be inside the document ready.
<script>
$(document).ready(function(){
alert("JQuery is working");
$(".untouched").mouseenter(function(){
$(this).addClass("touched");
});
});
</script>
In your script the $(".untouched") part should be within the ready function. Also,
mouseenter($function(){ the $ sign is not correct.
Your final script should look like this:
$(document).ready(function(){
alert("JQuery is working");
$(".untouched").mouseenter(function(){
$(this).addClass("touched");
});
});
You have an extra $ you shouldn't in front of the word function. You probably also want to remove the untouched class:
$(".untouched").mouseenter(function(){
$(this).removeClass("untouched").addClass("touched");
});
You can easily perform this right from css
.untouched
{
background: green;
}
.untouched :hover
{
background: blue
}
In JQuery if you want to use .mouseover you need to functions - one for when you put the mouse over, one for when the mouse isn't over. This is easier in css , there is just a :hover filter
$('.untouched').mouseover(function() {
$(this).addClass('touched');
});
$('.untuoched').mouseout(function() {
$(this).removeClass('touched');
});