This is related to a question I've asked previously: Calling Javascript function after loading an AJAX page
Basically, before all the thumbnails were loaded dynamically into one container called #left_box. Using the script below, I can get it to highlight one div out of all the siblings.
$('.thumbnail_small').live('click', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
However, in order to accommodate a new feature, I had to split the thumbnails into even more containers called .contain. Basically #left_box contains a series of .contain that hold x number of thumbnails. Now when I click on a thumbnail in one .contain, it only affects the siblings within that container rather than the larger container #left_box.
I tried
$('#left_box').on('click', '.thumbnail_small', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
but it doesn't work. Any ideas? Thanks in advance.
I'd suggest repeating your seletor, using the not method to exclude the current element:
$('#left_box').on('click', '.thumbnail_small', function(){
$(this).css('border-color','#000');
$('#left_box .thumbnail_small').not(this).css('border-color','#ccc');
});
This will select all .thumbnail_small inside your #left_box, exclude the clicked one, then applying the css to the rest of them.
Related
Running into a spot of both with trying to target elements within a div.
I have a list of items on a page and I want to be able to show a description <div class="meta-description"> when the title (h4 / a) is hovered.
I can get this to work so that all h4 hovers show all descriptions, but I would like to be able to isolate it to the individual items within a div <div class="content-meta">.
Appreciate one option would be to set individual IDs for each, but this is for a template, so would rather avoid if possible.
Any guidance most appreciated!
Thanks
Instead of using selector for indicating the element. There are many traversing method, such as
.siblings()
.parent()
.prev()
.next()
and many others...
Try to use them in your case.
I am still a bit new to JS & JQuery, so please excuse what may be a simple and stupid question.
Background:
I have a div on my page that holds several divs (#idle-variable). On click of the top level div, it basically shows the other divs (#addvariable). Nothing more than display: none; and .show(). Easy. On another action within that div (change of drop down), I essentially want to inject/insert that top level div (#idle-variable) underneath the first instance.
Issue:
Essentially, the .click function is not working on my newly inserted div. This may be because the two div's share the same ID, BUT I have a sneaky suspicion that it's not recognized in the DOM. A friend of mine said something about I have to "re-run" my jquery in order for it to be readable in the DOM.
Question:
How can i make this work properly? I want to be able to add a dynamic number of these idle-variables to the page and I need to make sure my .click function works for all added DIVS.
$(function(){
$('#idle-variable').click(function(event) {
$("#addvariable").show(400);
});
});
//create variable in db & show value entry
$("#variabletype").change(function() {
$("#varholder").css("display", "inline-block");
$.ajax({
type: "POST",
url: "/myphpfile.php",
data: {"variabletype": $("#variabletype").val()},
success: function(){
$( "#idle-variable" ).after("<div id="#idle-variable>content</div>");
}
});
});
Well to make the code work it would need to use on and ids are only supposed to be on one element. If it can be on the page multiple times you need to use classes.
$(document).on("click,'#idle-variable', function(event) {
$("#addvariable").show(400);
});
you should be using classes
$(document).on("click,'.idle-variable', function(event) {
//$("#addvariable").show(400); //not sure how this relates to the clicked element.
$(this).find(".addvariable").show(400); //if it is a child
});
You also have a typo in your code with quotes.
The ID based selector will be applied to the first element only.
See the example here http://jsfiddle.net/9GN2P/2/
If you are looking to bind same event handler to multiple elements, definitely go with the class based approach, instead of ID based approach.
And, you are expecting event handler to work with dynamically created elements as well. If you are using older versions of jquery, use the live method like
$('yourselector').live('click',function(){
});
Since live is deprecated and if you are in a new version, use the 'on' method
$('containerselector').on('click','yourselector',function(){
});
Editing to answer your comment:
To create dynamic element and append to DOM, you can follow the bellow pattern. Here, I will create a DIV with id "newID", class "newClass", content "NEW DIV!!" and a click event handler for it. And it will be pushed into another div with id 'containerID'
$('<div />',{
id:'newID',
'class':'newClass',
text:'NEW DIV!!',
click:function(){alert('hi');}
})
.appendTo('div#containerID');
This is just a demo.
I am using ImageFlow SEE i want to add div on Top of Image once images clicked and Slides into Center.
I tried checking js file but MoveIT() function is called so many times in js and m not able to identify ,
t.wrap('<div class="f1_card"></div>');
when should i write to wrap div around image.
Thanks,
You can use the prepend() function of jquery. You just need to select the image element and then call prepend function. See the example:
$('.target_image').prepend('<div class="f1_card"></div>');
This will be ok if you want to add an element if you want to add prior to an element. But if you want to wrap an element with a div then you have to use wrap() function.
$('.target_image').wrap('<div class="f1_card"></div>');
And obviously you have to put this code above within the click function or similar event you want. see the example:
$('.target_image').on('click', function(){
$(this).prepend('<div class="f1_card"></div>');
});
Here div with class 'f1_card' will be the parent class of your target_image element. Hope this will help you.
If you're using an animation function, perhaps you could try something like this.
$('.myimage').click(function () {
$(this).animate({
/*.do stuff...*/
}, 'slow', function (){
$(this).prepend('<div class="f1_card">my content here</div>');
});
});
This works as follows. When you click your image, it will perform your jquery animation. Once the correct animation has been performed the function will then, at the destination (in this instance, the clicked div) prepend an element. According to the API documentation this will "insert content, specified by the parameter, to the beginning of each element in the set of matched elements."
You could center the div and use z-index in css.
For each checkbox on the web page, I replace it with a slider that I borrowed from jsfiddle.net/gnQUe/170/
This is done by going through the elements when the document is loaded.
Now the problem is that when more content is loaded via ajax, the new checkboxes are not transformed.
To solve the problem, I used AjaxComplete event to go through all the elements again and replace the checkboxes with sliders.
Now the problem happens that elements that were already replaced, get two sliders. To avoid that I check if the checkbox is hidden and next element is div of class "slider-frame", then don't process the re-process the element.
But I have a lot of other such controls as well, and I am presume I am not the only one that has this problem. Is there another easy way around it?
There exists jQuery live/on( http://api.jquery.com/on/ ) event but it requires an event as an argument? whereas I would like to change the look of my controls when they are rendered.
Another example of the same problem is to extend some controls that are loaded via ajax with jQuerys autocomplete plugin.
Is there a better way to accomplish this other than changing some attributes on the element.
To summarize, on document load I would like to process every element in DOM, but when more elements are loaded via ajax then I want to change only the new elements.
I would assume that when the element's are transformed into a slider, a class is added to them. So just add a not clause.
$(".MySelector").not(".SomeClassThatSliderAddsToElement").slider({});
So in the case of your code do something like this
$('.slider-button').not(".sliderloaded").addClass("sliderloaded").toggle(function(){
$(this).addClass('on').html('YES');
$('#slider').val(true);
},function(){
$(this).removeClass('on').html('NO');
$('#slider').val(false);
});
Since you said you do not want to add anything else, how about you change the toggle function to click.
$(document).on("click", ".slider-button", function(){
var elem = $(this);
elem.toggleClass("on");
var state = elem.hasClass("on");
elem.text(state?"YES":"NO");
elem.parent().next().val(state);
});
Running fiddle: http://jsfiddle.net/d9uFs/
I want to add draggable functionality on a div at runtime. The div's id is generated with the following code:
var Exp=0;
view.renderFunction = function(id1){
var id= id1 + Exp++;
$("#"+id).draggable();
};
This is my function where the id is dynamically generated when I drop div.
But when I apply the draggable method it can't move. How can I move div?
It will work, have tested this.
Make sure of the following points:
Make sure you know what is Exp++ (you haven't mentioned about it in the question)
The element on which you call draggable() is a valid DOM element.
Try calling it on document ready or DOM ready
Here is a working fiddle: http://jsfiddle.net/gopi1410/ByWCS/
Are you facing trouble with dragging itself or is the problem only with dropping it anywhere? This should be pretty straight forward. Here is a sample that shows dragging a child div from one parent div to another:
How to enable dragging a div from one parent div to another
var id= id1 + Exp++;
$("#"+id).draggable();
What is Exp++, and are you sure that you are calling .draggable() on an existing element? Also, is that renderFunction ever called with an id?
I used kinetic.js and now it working fine