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>
Related
I'm working on a component that displays information from an array on click of an image.
Without going into a lot of detail, for each of the 12 images I have displaying, they have certain ids that are relevant to that slot in the HTML. So #person_0 is associated with #bio_0, #close_0, etc. And #person_1 is associated with #bio_1, #close_1, etc.
What I am having trouble with right now is finding an efficient way to loop through jQuery similar to the below:
$( "#close_0" ).click(function() {
$( "#bio_0" ).hide();
});
$( "#close_1" ).click(function() {
$( "#bio_1" ).hide();
});
$( "#close_2" ).click(function() {
$( "#bio_2" ).hide();
});
Rather than write this 12 times, is there a simple means to loop through this? What I'm clear on is how to pass in a variable into the div id (i.e. #close_0 - where 0 would be the variable).
Any tips?
Ideally, if these elements have a class, then you would do $( ".someclass" ).click(...
If not, you can loop by ids like this:
for(var i=0; i<12; i++)
{
$( "#close_"+i ).click(function() {
$( "#bio_"+i ).hide();
$( "[id^=person_]" ).removeClass("active");
});
}
PS. I did not understand what you are trying to do with removeClass and if that's related to the elements you attach click events to
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 am trying to place onClick actions on two buttons (Managed and Unmanaged) which determines the style of multiple elements that have the 'managed-only-trigger' class.
The clicking of the Unmanaged button works fine, but when clicking Managed, the removeClass function doesn't seem to be working (it should remove the 'cloud-text-managed-only' override class and return the div to a normal style), it's throwing the following error:
Here is the jQuery and an example element (for reference):
// Managed / Unmanaged Functions
$( "#tab-managed" ).click(function() {
// re-enable the managed features
$( ".managed-only-trigger" ).RemoveClass( "cloud-text-managed-only" );
});
$( "#tab-unmanaged" ).click(function() {
// Ensure that we switch managed elements to disabled:
$( ".managed-only-trigger" ).addClass( "cloud-text-managed-only" );
});
<li class="cloud-tick managed-only-trigger">Some text that when unmanaged is clicked will turn grey based on the stylesheet</li>
Any help is appreciated.
Its 'removeClass' Not 'RemoveClass' :
$( ".managed-only-trigger" ).removeClass( "cloud-text-managed-only" );
I have a table that you can select rows and edit fields with from a dialog. These table rows typically have an icon for drag and drop capability, as well as an icon for attachments. The issue is that when you edit the text from the dialog, the icons clear regardless of whether I use .html() or .text(). I believe using a form of .content() is viable, but I'm not sure how to go about it. I've tried to avoid clearing the images with .not() with no luck. Any ideas? Thanks in advance. http://jsfiddle.net/BWCBX/11/
$( ".saveBtn" ).click(function() {
properties.eq(0).html($("#name").val());
properties.eq(1).html($("#perm").val());
});
With what you have you can just replace the text like this:
$(".saveBtn").click(function () {
properties.get(0).firstChild.nextSibling.nodeValue = $("#name").val();
properties.eq(1).text($("#perm").val());
$(".prop").dialog("close");
});
Fiddle
But it would be better to wrap your text in another element, and set the value for it for better operation.
you can use .content() like this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents()[1].textContent=$("#name").val();
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/19/
Edit
if you need the code to work on IE lower than 9 you can do this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents().eq(1).wrap("<span></span>").parent().html($("#name").val());
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/20/
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" )