Dynamically adding divs through jquery - javascript

I am adding elements like div dynamically in the page using jquery.The div CSS is position : absolute .Now my problem is when i add more than 1 div element at the same time than it all overlaps each other. Is there any way so that without changing my element's position property these are not overlaps?

Check out masonry plugin. It is dynamic layout plugin that auto arranges the div elements as the new elements are added in document it prevents the overlaps of the elements. Check out this link.
Simply specify the container div let it with id container you need to call function
$(".container").masonry();
and then when you add more div inside container you just need to call the function
var $newElems = $( newElements );
$(".container").masonry( 'appended', $newElems );

You define place of absolutely positioned objects with top, bottom, left, right css properties . So you have to alter these dynamically as well.
For example: The first element has top: 0, left:0 , the second top: 0, left: 50 and so forth...

When you add an element as positioned absolute and provide no valid top and left values the element will be positioned absolutes with both top and left as 0.
In your case all the elements you are adding should be taking position (0,0) so they are overlapping one above other.
One solution is to calculate the positions of each and layout them using adding corresponding top and left values to them along sith css({'position' : 'absolute'}) but that requires some math in most cases.
Dont worry, your browser already knows that math and you can use it in most cases, so add the divs without 'position' 'absolute'. Now browser layouts them well. After the browser has finished laying out them, take the DIVs and get their present position and use the position to layout them using absolute position.
for(var i=0; i < noOfDivs; i++){
{
$('#parentDiv').append('<div class="childDiv"/>');
}
$('.childDiv').css({
'position': 'absolute,
'top' : $(this).position().top,
'left' : $(this).position().left
});
The code is not tested, if DIVs are positioned one by one it should again cause problems, you should either iterate them from last to first or save all positions and apply them later. If jQuery is updating all positions in a single DOM access this will work fine.

Related

How to add class to elements which are not fully visible in viewport?

I have something like a carousel with elements inside of a container with overflow: hidden
I can scroll left and right and I want to determine which elements are not visible at all or only half is visible (like on this picture) and when add to this invisible and half visible elements a class.
Width of each element is for example 100px but width of container depends on screen size. I can get number of elements which are visible (by dividing offsetWidth of container by width of one element)
Alse I know that there is such thing as getBoundingClientRect() but not sure how to use it in this case.
example
Here you can see how I try to implement getBoundingClientRect but I can't figure out which elements to target. I want to add class to the div which is partially seen (4th) and if on the first click part of the first div would be seen - to it too.

Make div stick to non-child div with JQuery

So I'm trying to make a double slider in Owl-Carousel 2.0,
The first slider has 9 images, which means it has 9 dots. These dots are in placed in a container, #customdots. I'm trying to make the position of these dots be: horizontally centered (which works), and appear on top of the second slider, so position, bottom should be the height of the second slider (#sync2).
I tried using JQuery to do this, with the following line of code:
$("#customDots").css('bottom', $("#sync2").outerHeight()+ "px");
However, this doesn't get the actual #sync2 height, and it doesn't update on moving the window, neither does using height().
How would I go about making this #customDots div stick to the top of #sync2, when it can't be a child of #sync2?
See full codepen here: http://codepen.io/JJvanSteijn/pen/aJxgdW
I would wrap #sync2 in an element (I created #sync2Container), use that new element to position the second slider at the bottom of the window, and just add the dots to the top of that element. http://codepen.io/mcoker/pen/JWgKxJ
You need to add height to the CSS for #sync2:
#sync2{height:210px}
and use JS code to get the height:
$('#customDots').css('padding-bottom','0px');
$('#customDots').css('bottom',sync2.outerHeight());
Hope it's useful.

Top property is not honored in table row

Is it possible to keep the top row moving like we move the first column in a table using jQuery?
The code I used to keep the first column moving during scroll is something like this.
$('#table-name').scroll(function () {
var _left = $(this).scrollLeft();
$('.firstTd').css('left', _left);
});
when I use the same technique to top property to a table row...through the CSS gets applied it is not honored by the browsers.
P.S: I used left property on td element and want to apply the same technique to a tr tag
Demo here: https://jsfiddle.net/8w4qac30/7/
EDIT
Oops, understood the question bad. I'll keep the info below, but actually my answer is this.
As trs are quite picky, the only thing I can think of is to select all the tds and move them, like you do with the first one, like this: https://jsfiddle.net/8w4qac30/9/
Old answer
left, top, right and bottom are positioning attributes, and for them to work you should set the position attribute too.
position attributes come in different flavors:
relative means to position the element relative to itself, so if you add, for example, left: 20px to a relative positioned element, it simply will shift its position 20 pixels to the left.
absolute means to position the element relative to the first parent that is also relative or absolute positioned.
fixed means to position the element relative to the browser window and will keep fixed during scrolls without additional code. I think that you should go this way.
Check this:
Check the positions here: https://www.w3schools.com/cssref/pr_class_position.asp

Dynamically display page list as one line on mobile

I have a list of anchor elements (it's a page navigator at the bottom of the page). On mobile, the list wraps to two lines. I want to keep it at one line for easier mobile use, and display only the page numbers that will fit within the screen. I don't want to do whitespace: nowrap; or overflow-x: scroll -- I want to have as many elements as possible display on one line without scrolling or disappearing into the horizontal ether.
I was thinking I'd determine the window width with jQuery, and if the width of the list as a whole exceeds the width of the screen, show only the elements on either side of the active page div that will fit on one line. Is there such a thing as "select certain number of siblings"?
I know .siblings() exists in jQuery as well as the CSS sibling selector, but these either select all siblings or only the one immediately adjacent sibling. I want to dynamically select the siblings on either side of the active element (page) depending on screen size.
Without any code, it's hard to tell exactly what you're doing. But I would use whitespace: nowrap; so that the elements are as wide as they can be, then you can loop through them and compare their width to the viewport or container width, and selectively hide them. (or alternatively, hide them by default with opacity: 0; or visibility: hidden; and only show the ones whose widths are less than the container/viewport). Something like this:
var cw = $('.container').width();
$('footer li').each(function() {
if ($(this).width() > cw) {
$(this).addClass('hidden');
}
});
You can set the width of each element to window width/number of items
var numberOfAnchors=$("a").length;
$("a").css("width",$(window).width()/numberOfAnchors+"px");
but make sure that the anchor display is different to display:inline

How to know if my element is overflowed

I have a slider that contains N elements. Each element will by translated by N pixels when the user click on the next button. When the element is out of the wrapper div, it disappears because it is overflowed by another element.
My plugin does not use any margins, just the transform property.
I would like to know if there is a way to know if my element is out of the div. :visible does not work for my problem because the element is already visible but overflowed.
If I understand correctly, one way to do it would be to compare the position of this element to the size (width/height or both) of his parent.
With Jquery you could do it this way:
<script>
//This is the position of the right side of the element
//relative to his parent
var rightPos = $("#element").position().left + $("#element").width();
//And bottom side
var botPos = $("#element").position().top + $("#element").height();
if (rightPos > $("#element").parent().width()) {
//The element is outside the right limit of the the parent block
} else if (botPos > $("#element").parent.height()) {
//It's outside the bottom limit of the parent block
}
</script>
If it's not the parent you could then adapt this code to compare the position to the width of the correct div, preferably by using the jquery offset() method instead of position().
By determine parent width and get child width then use if condition
if($('span').width() > divWidth){
alert('Overflowed!');
// do something!
}
jsFiddle Demo
if you update your question with your html then I can update with your codes.
You could give the wrapper div the CSS property of overflow: hidden
This would mean that any elements inside of it are not visible when they leave the bounds of the wrapper.
Otherwise you could check whether your element is outside of the wrapper div using jQuery to compare the position to that of the parent.
There is a nice tool for testing if an element is visible on the screen.
Detect if a DOM Element is Truly Visible
It looks at an object and checks each of its parents to see if it’s still visible to the user.

Categories