I'm trying to add an element to the middle of the elements list.
I have tried adding it using jQuery with insertAfter method and applying isotope('reLayout').
However, this doesn't really work.
$('#insertAfter a').click(function() {
var $newEl = $(fakeElement.getGroup()).first();
$newEl.insertAfter($container.children().eq(3));
$container.isotope('reLayout');
return false;
});
jsfiddle
Any ideas how to make it work?
Thanks
Isotope does not allow you to manually insert an element into a specific position since it's supposed to automatically handle the element placement. One way to solve your problem is to add a special attribute to every element that can be used to sort the elements in the required order. Then, configure Isotope to use the created attribute to sort the elements. When you need to insert an element, assign a value to that attribute of the new element that will place it into the required position.
Please see the solution on jsfiddle: http://jsfiddle.net/9V2Mj/20/
Related
I have common jQuery function and two div tags. Both div tags have different names but both containing elements of identical ids now i want to use this common Jquery function for them both?
I have implemented common function but it's not working for both.
Here's link to my jsfiddle -jsfiddle.net/xS7zF/1/
In my jsfiddle there are two div tags namely example1 and example2 and both tags have elements of identical ids. Function is working fine for first div but not for second.
please help me to sort out this.
Yeah, under the hood, jQuery selection on an ID will use the Document.GetElementById() function implemented by the browser, which is really fast, but (i guess depending on the browser) will stop after it finds the first element, since ID's should be unique and no further searching is needed after the first one is found.
For instance, rename the divs with id="eb" to class="eb" and you can still target specific elements using $("#example1 .eb") and $("#example2 .eb")
UPDATE:
Using your new Fiddle I created this: http://jsfiddle.net/xS7zF/5/
I cleaned up a lot of code and hopefully you can see what I have done. I changed all elements that appear twice from id to class. Now, when you attach an event to an element using $(".classname").click(), it attaches to all the elements. In the handler function where you set HTML and do your show()/hide(), you don't target a specific element using it's ID, but you find it relative to the element that does the event. You can do this using parent(), parentsUntil(), next(), find(), etc. Check jQuery docs for all possibilities. So for instance, the change-handler attaches to all inputs with name=Assets. But instead of doing $("#b1").show(), I go to the parent of the specific input that fires using $(this).parent(). Then I find the element with a class=".b1", which it will only find the one that is next to this specific input and I set the HTML to just that element.
Since there is another input, the same actions happen when THAT input changes, but instead it finds IT's parent, and finds the element with class=".b1" that is next to IT. So both divs with input are contained since they act on elements relative to itself and not across the document.
For extra fun and to show you how flexible this way of programming is, here is a fiddle with the Javascript-code unchanged, but with the exact same question-div copied 8 times. No matter how many times you repeat this, the same code will act on as many divs as you create since everything works relative. http://jsfiddle.net/xS7zF/7/
Hopefully this helps, the rest is up to you!
ID's must be unique, you should not repeat them. You could replace id with class and in the jQuery function do (".ub").each() or manually referencing the object using eq(x). e.g. (".ub").eq(1).
You shouldn't assign same id's to different elements.
You CAN but you SHOULDN'T. Instead of giving the same id, use class
IDs must be unique, try fix this, change to classes.
You can try something like this:
$("div div:first-child")
instead of
$("#eb")
But depends of the rest of your page code. So, change to classes first and use
$(".eb")
when jQuery / javascript find the first ID it would ignore the rest, please read more about it
http://www.w3schools.com/tags/att_global_id.asp
Hey guys bit of an odd questions but if I add div tags using JQuery .html() and give them an ID can I then use .click on them? The code might explain what I am trying to do. If not is there a possible work around?
I am trying to dynamically change my site without going to a new site.
So if I create Divs with an ID.
$("#funTime").click(function(){
var htmls = $("#content2").html();
$("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>");
});
$("#button1").click(function(){create();});
$("#button2").click(function(){forannimation();});
$("#button3").click(function(){createOnMouse();});
It does not work but I do not know why.
Thanks in advance.
No you would need .on() to be able to handle dynamic added elements.
$('#content2').on('click', '#button1', function() {
// do your stuff
});
Also note that you can only add a single element with a certain id to the DOM. In your example everytime when the element with id #funTime is clicked you add en element with the same id.
You could improve your code by adding the button with some class instead of an id to the DOM or having a counter to produce unique ids. Or by preventing other clicks on #funTime by using .one() depending on your needs.
You can only assign an event handler to an element that exists. So the assignment of handlers should be done after the creation of the elements:
$("#funTime").click(function(){
var htmls = $("#content2").html();
$("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>");
$("#button1").click(function(){create();});
$("#button2").click(function(){forannimation();});
$("#button3").click(function(){createOnMouse();});
});
However, several calls clicks on funtime will result in several elements with the same id, which results in an invalid document. Either prevent duplicate ids (e.g. implement a counter) or use classes.
You can actually create elements, bind events to them, all before they are on the screen. Backbone and others to it this way too.
var myNewDiv = $("<div ...>");
myNewDiv.click(function(){});
$(something).append(myNewDiv);
If you want to add events to things that are not yet on the page you must you use jQuery delegate.
You should use an on() listener for dynamically added elements
$("#content2").on('click','#button1',function(){create();});
This will add a listener to check for live added buttons in the selected container (#content2)
To do add thehandler as elements are created would need to add it within the click handler right after elements are appended....otherwise need to use delegation methods like on()
This would work:
$("#funTime").click(function(){
var htmls = $("#content2").html();
$("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>");
/* elements exist can add event handlers*/
$("#button1").click(function(){create();});
$("#button2").click(function(){forannimation();});
$("#button3").click(function(){createOnMouse();});
});
More common current practice is to use delegation that allows for future elements and can be run on page load
If I call .hide() on an element, will/can jQuery select it in a normal dom selector.
If jQuery does normally select hidden elements, what is the proper way to select only visible elements. Can I use a css selector, or is there a more valid way of doing this?
Yes. The hide function only stores the current value of the display css property of your element, then set it to none. So the dom selectors will not be affected by it unless they try to match elements with a particular display css value.
Check it here.
Have a look at the jQuery hide function documentation.
Yes it will count hidden elements.
Yes, it just adds a display:none style to the element... .remove() on the other hand will not show up in counts. But that completely gets rid of it, and unless you store the value somewhere it is not retrievable.
What I'm assuming you want to do is to count the visible items. I would instead do the following:
$('.element').addClass('hide');
var count_of_visible_items = $('.element:not(".hide")').length;
console.log(count_of_visible_items);
I'm appending values into a div through jQuery, but I've realized what gets appended isn't affected by my javascript functions.
$(".div").append("<input type='text' class='textForm' placement='Value' />");
What I have setup in my javascript code is that it takes the attribute placement of any class "textForm" and makes it a value. But I've realized that once a value is appended, it isn't effected by my javascript. Any ideas on how to fix this issue?
If you are currently using
$(".textForm").click(){}
then now use
$(document).on("click",".textForm",function(){//Dtuff here})
This will attach the .on("click") to the document object and as such it will be enabled on all elements that exist and all elements that are created matching the .textForm selector.
I guess you have some events bounded to some elements like which are not working after the append . something like this.
$(function(){
$(".someClass").click(function(){
//dome some thing
});
});
If you want the same functionality to work on the newly injected( dynamically added via append /jquery ajax etc...) DOM elements, you should consider using jquery on. So your code should be changed like this
$(function(){
$(document).on("click",".someClass",function(){
//dome some thing
});
});
on will work for current and future elements
I'm not sure I understand the bit about why you're copying values from the placement attribute into the input value, but I can offer this suggestion to get your form fields to appear.
$("div").each(function() {
$(this).append($("<input type='text' class='textForm' placement='Value' />"))
});
I'm assuming that you want to identify your div via the tag name, and not the class name. If this is the case, your jQuery selector will need to be "div", and not ".div". Also, you need to wrap your HTML in $() in order to generate a DOM element.
I'm trying to change the border color of an image using its id with jquery
( photo['id'] is passed in from a previous function )
the ids of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When I try to use this same code using its class it works,
but I can't use this method since there are multiple images on the same
page with the same class
$('img.flickr_photo').click(function() {
$("this.flickr_photo").css('border-color','#777');
});
This is what you need to do:
$('img.flickr_photo').click(function(){
$(this).css('border-color','#777');
});
I would always always add a css class rather than an inline style.
Much more maintainable and extensible.
Example:
$('img.flickr_photo').click(function(){
$(this).addClass('greyishBorder');
});
Either photo['id'] is wrong, or is changing after you set up the click handler.
To test for the first case, you can alert (or console.log with FireBug, or whatever) the length of the jQuery selection:
alert($('#photo'+photo['id']).length);
The solution in the second case is to use 'this'. In the click handler, 'this' is set to the element that caused the click event.
$('#photo'+photo['id']).click(function(){
$(this).css('border-color','#777');
});
Edit: #Dreas Grech is right, as long as you want to apply the behavior to all the elements with the flickr_photo class. If you can generalize the selector to select all the elements with a single query, it's better to do that.