I have 2 links, with the class dynamicLoad.
<ul class="navbar">
<li>NEWS</li>
<li>EVENTS</li>
</ul>
and then I have this already working code, which loads external pages into a div named #MainWrapper:
<script type="text/javascript">
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#MainWrapper' ).load( $( this ).attr( 'href' ) );
});
});
</script>
How do I edit this code and my links, so that i can target the 1st link with the classes of both dynamicLoad and news, and then, load another script and/or pages into the main wrapper, without breaking its already working functionality?
You can add both classes to the selector as well as :first, like this:
$(document).ready( function() {
$('a.dynamicLoad.news:first').click(function(e) {
$('#MainWrapper').load(this.href);
return false;
});
});
A return false; calls both event.stopPropagation() and event.preventDefault(), so you can slim down the code a bit for that...like I have above.
You can select the first link with $( "a.dynamicLoad.news" )
Related
I am using Insert Headers and Footers plugin for Wordpress and I am trying to embedd some javascript code will react to the user's actions.
So this is the simple code that I have tried:
$("a#newsLetter").click(function() {
alert("element was clicked");
});
I also tried:
$( "#newsLetter" ).on( "click", function() {
alert("element was clicked");
});
Both did not work, even though I know that jQuery is loaded and included ( I performed a simple test and of alerting some message on page load)
This is the tag shown in the inspector:
<a href="#" class="elementor-button-link elementor-button elementor-size-xl" role="button" id="newsLetter">
Thanks.
EDIT:
This is how I included jQuery
Use the three parameter form, it applies to elements added after the click handler has been added:
$( document.body ).on( "click", "#newsLetter", function() {
alert("element was clicked");
});
If jquery not working then try this
document.getElementById("newsLetter").onclick =function(){
alert('clecked');
}
Link
Try replacing $ with jQuery
jQuery("a#newsLetter").click(function() {
alert("element was clicked");
});
I'm trying to add/remove classes with jQuery to HTML elements generated by JavaScript dynamically. More specifically, to prettyPhoto's HTML in a WordPress theme. I need to add/remove a class to prettyPhoto's main parent div based on the class of a deep child link. This class gets changed by prettyPhoto. And all this HTML appears only when you click on an image on the page. I don't want to fiddle with the actual prettyPhoto script (included in the theme core files), so trying to do it with a jQuery function.
The HTML generated is (roughly) like this:
<div pp_pic_holder>
<1st level child>
...
<6th level child>
<a pp_expand>
And my current js is like this:
<script>
jQuery( 'body' ).on('change', 'div.pp_pic_holder', function() {
jQuery( "a.pp_expand" ).parents( "div.pp_pic_holder" ).addClass( "contracted" ).removeClass( "expanded" );
jQuery( "a.pp_contract" ).parents( "div.pp_pic_holder" ).addClass( "expanded" ).removeClass( "contracted" );
});
</script>
This doesn't work. I've tried with different options with .on and .live following examples from about 15 similar questions here on Stack Overflow, but nothing... I almost don't know js, so reading through the event delegation documentation only broke my brain.
Please help.
Thank you!
UPD:
Thanks to #Pete for his suggestions.
The code that finally made this work is this:
<script>
jQuery( 'body' ).on( 'DOMSubtreeModified', function() {
jQuery( "a.pp_expand" ).closest( "div.pp_pic_holder" ).addClass( "contracted" ).removeClass( "expanded" );
jQuery( "a.pp_contract" ).closest( "div.pp_pic_holder" ).addClass( "expanded" ).removeClass( "contracted" );
});
</script>
I am trying to build an application. I want to allow users to create their own menu (with submenus also). I want to make this with JavaScript to be "live" (something like: to click add a button and then drag and drop to order etc).
Do you think is there any jQuery/JavaScript/etc menu builder already for download?
I have tried to search menu builder javascript/jquery but I only found online menu builders (not to download).
Any type of code is accepted (related to js) - jquery, js, mootools etc
Thanks a lot!!! If the question isn't asked in the right place I will delete.
Edit: I don't need custom styles like "select a design for menu". It only needs t generate HTML <ul> and <li>
Try using jQuery UI alongside with jQuery (you must put jQuery UI script after jQuery and you must include a CSS theme e.g UI lightness). Start off with a <ul> and give it an ID (e.g #menu). Put all the base <li>s inside of it with the default values and the drag-and-drop <ul>s in a different element, e.g #items. Then in your script file, put:
$(function() {
$( "#menu" ).menu();
});
This will turn the ul into a menu. Now you want to make the items drag-and-droppable. In the same function, add this underneath $( "menu" ).menu();:
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
This will let you sort the menu items. To let you move them from place to place, add this to your function underneath ...disableSelection();:
$( "li" ).draggable();
$( "#menu li" ).droppable({
drop: function( event, ui ) {
$( this )
.appendTo( "#items" );
}
});
$( "#items li" ).droppable({
drop: function( event, ui ) {
$( this )
.appendTo( "#menu" );
}
});
I would like to trigger a javascript function when a specific URL is available on the page.
The url looks like:
I would like to use jQuery to detect the url and launch an event.
I have come this far:
$( 'a[href="https://www.mypage.com/my-page/details.jsp"]' ).bind( "click", function() {
alert( "yoehoe" );
});
But it doesn't trigger the alert on a click. on the specific href. Can anyone help me on this one?
You need to wrap the code in document.ready to ensure that event gets bind to respective elements once they are there on page.like this:
$(document).ready(function(){
$( 'a[href="https://www.mypage.com/my-page/details.jsp"]' ).bind( "click", function() {
alert( "yoehoe" );
});});
Demo
Alternatively, You can also use .on() with .click if dom is generated dynamically.like this:
$(document).on("click",'a[href="https://www.mypage.com/my-page/details.jsp"]',function() {
alert( "yoehoe" );
});
I have two span elements in a page. when I call a jquery double click function on both then the function is called only on first element. I am using the following code:
<span id="shiftTime_1">1</span>
<span id="shiftTime_2">1</span>
and jquery function is:
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
when I double click on the element Id of shiftTime_1. then the function works fine. But when I double click on element Id of shiftTime_2 then this function does not respond.
Please help.
Thanks
Use .on if you plan to add elements dynamically (e.g. by using $( "body" ).append( "<span id='shiftTime_2'>1</span>" ); )
$( "body" ).on( "dblclick", "span", function() {
alert( "This works also with dynamically added elements" );
} );
try use inside $(document).ready()
$(document).ready(function(){
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
});
When I try the code, it works just fine:
http://jsfiddle.net/Guffa/pfQfK/
Check if there is something different from your code.