How to scroll to a newly added dom element? - javascript

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

Related

Getting the width of a newly added element

I need to get the width of a newly added item using JavaScript or jQuery. I know if I need to bind an event to a newly added element I can use event delegation or the .on() method in jQuery. But in this case I’m not binding an event I just need to get the width of that element. How can I do that?
$('#box').width(); // won’t work
document.getElementById("box").width; // won't work either
To get the width
You can just use jQuery's .width() method:
$('#box').width() // Should give you the pixel width with no px/rem/%
// Or plain ol' Vanilla JS
document.getElementById('box').offsetWidth
// Or mix it up
$('#box')[0].offsetWidth
Possible issues
Make sure your element has been created, it is visible and you added it to the DOM.
Your element contains floated elements or absolutely positioned elements and therefore has not gained any width.
You're trying to retrieve the elements width prior to the DOM rendering.
Make sure your element is not affected by any stylesheet and has somehow become inline.
Loading issue
Make sure that your script is on the bottom of the page and/or you are using jQuery's .ready() method:
$(document).ready(function(){
$('#box').width();
});
// Shorthand for the above
$(function(){
$('#box').width();
});
Demos
VanillaJS Demo
jQuery Demo
If anyone can think of other issues or solutions please contribute to the answer.
Try this:
var box = document.getElementById('box');
alert(window.getComputedStyle(box).width);

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.

Adding a class to a .click function

new to StackOverflow and relatively new to JavaScript/jQuery. I've been trying to develop a website that contains a vector map (using the Raphael plugin), and when a particular area of the map is clicked, I want it to open a Lightbox using the Colorbox plugin. I have the Raphael and Colorbox plugins working individually (I've got the hover function working for Raphael, and I've got the Colorbox to work when a normal link is clicked). However, I'm not sure how to get the Colorbox to work when it is a Raphael element that is clicked.
This is because I think I need to add the "inline" class to the Raphael element, however my .click function can only get a url (I can't add a class).
Apologies if this question doesn't make much sense, I've been going round in circles for hours now.
Current .click function. locs is an array of the Raphael objects in a separate document. locarr is an array containing these objects for a for-loop. id and url are elements of the Raphael object.
.click(function(){
location.href = locs[locarr[this.id]].url
})
The Colorbox works with a normal link, like below. But I can't figure out a way to add the class to my .click function. I've tried various versions of .addClass and similar with no success.
LINK
I think my problem is because the Raphael objects do not exist in the HTML (the url is taken straight from the JavaScript document.
Sorry again if this doesn't make sense. Thanks.
Not going to pretend to try and understand full well what you want, so I am going off the current title. If thats the case and you want to add a class to an element for styling purposes of one sort or another and you want it to do this when the link is clicked on you can try..
$('.inline').click(function(e)
{
e.preventDefault();//stops the mouse click from triggering a normal click event
$(this).addClass('className');//adds a defined class from your stylesheet
//$(this).css({"color":"#FF0"});//changes the style properties without a class
});
Since your saying in the comments your JS is generating the link. You can try..
$('body').delegate('click', '.inline', function(e)
{
e.preventDefault();//stops the mouse click from triggering a normal click event
$(this).addClass('className');//adds a defined class from your stylesheet
//$(this).css({"color":"#FF0"});//changes the style properties without a class
});
or you can try
$('.inline').live('click', function(e)
{
e.preventDefault();//stops the mouse click from triggering a normal click event
$(this).addClass('className');//adds a defined class from your stylesheet
//$(this).css({"color":"#FF0"});//changes the style properties without a class
});

how to add draggable functionality on a div when using a template

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

Smooth slideup/down after creating DOM elements

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
});
}

Categories