Smooth slideup/down after creating DOM elements - javascript

I have a larga amount of xml data in $(db). When a certain element is clicked, a function traverses through $(db) and creates new DOM elements inside a hidden div. How can I then smoothly slide down the div?
$('li').live('click', function(){
// many $('div.content').append(....
$('div.content').slideDown();
});
In the above example the div.content becomes visible, however without the slide effect. If I, instead of creating DOM elements load an html document with the vary same content, the slide effect works properly. I think that when creating a lot of new DOM elements the browser jams, and then cannot perform a smooth animation. How could I sort this problem out? Would it be possible to create all the DOM elements inside a variable, and then display it as it would happen when you use .load()?

If you can select the newly created element from the DOM, this method will work nicely (needs jQuery). You will simply show the elements you created and then scroll the browser into view.
function scrollTo(element){
$("html, body").animate({
scrollTop: $(element).position().top
});
}

Related

How can I move a dom element created after the page loads?

I am using a plugin named anchorific.js to create named anchors and corresponding menu on the fly from h3 tags.
To get it working in a .net page I had to move the div containing the menu so it was the last item on the page.
Now I want to move the div elsewhere, but running .append() after the anchorific code won't work. What can I do to move this element?
To make dom manipulations after the dom is loaded simply use $(document).ready(function() {}) or $(window).load(function() {}) in jQuery or if you prefer window.onload = function() {} in vanilla javascript.

Jquery, Targeting New Elements

I am quite new to the realm of Javascript and the Jquery Library, so bear with me please.
I am manipulating the DOM by adding new divs within a parent div like so:
var newdiv = document.createElement('div');
var addTst = document.getElementById("tst");
addTst.appendChild(newdiv)
<div id ="tst">
//new divs will appear here
</div>
$("#tst div").draggable(); *//things I need to be draggable*
#tst div{
height:50px;
width:50px;
background:red;
margin:20px;
display:inline-block;
}
However I am attempting to use Jquery UI, to target these new elements and make them draggable. (The new divs are added by the user after the initial document loading, without refreshing the Jquery/page).
Of course Jquery only loads once so anything added after remains undraggable.
I already have some AJAX in there, which is loading data fine, but it is quite long and I dont want to re-run the entire AJAX function just to refresh the parent divs contents (Assuming AJAX can update a div with new contents).
To help illustrate I have added a Fiddle:
http://jsfiddle.net/YuGhj/2/
As you can see, the first red box drags fine, but if you add a new child using the button, they are not draggable.
I am most likely totally misunderstanding how jquery/AJAX works.
TL;DR
To put it shortly, I need a way to target elements added dynamically after the first page load, and apply a drag function to them. I assume I need to refresh the div somehow, without losing any contents.
Thanks!
Manipulating the DOM is much easier with jQuery. Here's code to create a div, append it, and call draggable on it:
$('<div/>').appendTo('#tst').draggable();
Demo: http://jsfiddle.net/MvXR3/
A lot of people seem to misunderstand how selecting and binding work. When you do this:
$("#tst div").draggable();
That finds all elements that match "#tst div" at the time the line executes and calls draggable() on those elements. When you add a new element, you need to call draggable() on the new element. The previous call doesn't apply.

using jQuery to change, only the elements that were loaded via ajax

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/

How to scroll to a newly added dom element?

Say the user is viewing a particular part of the page, when behind the scenes an auto update feature runs, and right above or below the user's screen some more content is added.
I have the id of the newly added content's div.
How can I smoothly scroll the user to the newly added div using jquery or plain javascript? Must work in all major browsers.
Here's what I use for jQuery
$('html,body').animate({scrollTop: jQuery("#ID").offset().top},'slow');
I think, this should work...with jquery.
$(window).scroll($('#newly-added-elem').offset().top);
UPDATE: smooth scrolling can be achieved with this:
$('body').animate({scrollTop: $('#newly-added-elem').offset().top},'slow');
Use an anchor:
<a name="newelement">.... new element stuff here ...</a>
then change the page's URL to point at that new element:
http://example.com/yourpage.html#newelement

Javascript sibling onclick

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.

Categories