is there a simple way to get the div elements fitting completely in a defined area?
Example:
<div id="redbox"> RESIZE DIV </div>
<div id="grid">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
I got 4 Boxes (grey) and I am able to resize a div (red on top of all boxes). After resize I want to know which of the div elements are fitting completely in this area.
Does anyone knows how to do this? Is there a method or function in JQUERY?
It looks to me like the withinBox plugin might help you solve this (jquery.fn.withinBox). You could use the code like this:
var area = $('#redbox'),
offset = area.offset(),
selected = $('#grid div').withinBox(offset.left,
offset.top,
area.width(),
area.height()
);
What I'd do with JQuery is loop through all the elements to check, getting their .offset() value, plus width and height.
Then for each element I'll get these four valuyes:
X1 (offset().top)
Y1 (offset().left)
X2 (= X1 + width)
Y2 (= Y1 + height)
I will use these values to check the following four points (still for each element to check)
x1,y1 x1,y2 x2,y2 x2,y1 (the four corners)
Provided we have done the same tring with the "covering" DIV (retrieving it's four corners xd1, yd1, xd2, yd2), I will reason like this:
If one or more of these points falls into my "covering" DIV, then consider the DIV "covered".
Edit: I didn't know there was a plugin for that, I guess it's internal mechanics are like mine, but I bet it's a more simple solution than mine :)
I don't think there is already complete solution for this. According that this may various.
But you can use document.elementFromPoint function for that.
Knowing absolute position of re-sizable div you can create map of coordinates and then see what elements under that div.
Related
I write a userscript for a website, and the script includes a jQuery UI draggable. Greatly simplified, the site has two rows, and each row has two divs placed horizontally.
The site layout previously used two columns with inner divs instead of rows. The draggable was constrained to the right column's parent, which is exactly what we wanted. Now, however, there's no way to constrain to the right "column" because that column no longer exists in the DOM.
Is there a way to fluidly contain the draggable div to the right column of divs without the old parent element? I can add elements to the DOM (or do whatever) if needed, we have the full power of jQuery and jQuery UI available. I know it would be possible to use a droppable on the top right div, but from what I understand that would cause the draggable to snap between the two. If that's the only option then I'll do that, but if there's another method I would love to see it.
FIDDLE
<div id="outercontainer">
<div id="toprow">
<div id="topleft"></div>
<div id="topright"></div>
</div>
<div id="bottomrow">
<div id="bottomleft"></div>
<div id="bottomright"></div>
</div>
</div>
<div id="dragme"></div>
The actual containment value used in constraining position is an array of coordinates that's being calculated based on the object you set in the options themselves. But you can access this containment property on the draggable instance and modify them as you wish. The only restriction is that it needs to be a rectangle, you cannot mix shapes.
In your case, you can simply work out the coordinates from the elements.
$("#dragme").draggable({
// You still need to set a value for containment
// else it won't be checked when evaluating the position
containment: 'document',
start: function(e, ui) {
// You simply set a left, top, right, bottom coordinates.
// You need to set it on start so if the elements have been
// resized, the containment follows.
var cont = [
$('#topleft').offset().left + $('#topleft').outerWidth(),
$('#toprow').offset().top,
$('#toprow').offset().left + $('#toprow').outerWidth() - ui.helper.width(),
$('#bottomrow').offset().top + $('#bottomrow').outerHeight() - ui.helper.height(),
]
$(this).draggable('instance').containment = cont;
}
});
https://jsfiddle.net/nxxbh8eL/
How (using either jQuery, or JavaScript...)
<div style="background-color:red;height:10px;width:10px;float:left;"></div>
<div style="background-color:red;height:10px;width:10px;float:left;margin-left:25px;"></div>
<br>
<div style="background-color:red;height:10px;width:10px;margin-left:15px;" id="2">
Do I get what element is closest to id=2? I need this type of selector, and any help would be appreciated. :)
Note that I don't mind setting a position:relative or absolute and left:(number)px to these elements.
I need a code that would work in a dynamic environment; you know, when blocks keep getting created and keep scrolling forwards and changing left position. Could I use .position() perhaps? Somehow?
Thank you. :)
That's a fun thought experiment...
To solve this, you'd probably want to calculate the offset of each element, and compare those coordinates (top and left) to other elements.
Assuming you want to find the element closest to compareEl, and you have compareElTop and compareElTop, loop through all elements on screen (except compareEl), and do something like this:
var topDiff = Math.abs(compareElTop-elements[x].offset().top);
leftDiff = Math.abs(compareElLeft-elements[x].offet.left);
Pair with the lowest topDiff+leftDiff is closest.
Here is a nice jsFiddle for you to play around with! All kinds of awesome.
For example if you want to get DOM elements that is closest with #2:
<span>before</span>
<div style="background-color:red;height:10px;width:10px;margin-left:15px;" id="2"> </div>
<span>after</span>
Javascript:
$(function(){
var prevIt = $('#2').prev();
var nextIt = $('#2').next();
});
Here is demo
I was looking into ebay.com and the way that items are displayed (scroll down on the page and see div content the items boxes have different height)
<div id="content" class="content">
I am thinking of doing something similar but the problem that I am having is that somehow I need to cater for the spaces between each item because the divs will be generated automatically.
Can I do this with css (maybe grouping some items together and keep a margin / distance from each other automatically)?
Example fiddle here:
You can do it with CSS up to a certain level of quality, by floating elements;
after that, you must use JavaScript.
But you should really check out Masonry, because I guess it's exactly what you need.
You can use :first-child (or :last-child) to change the margin on the first or last element so you get neat spacing.
I have multiple divs on a page and in a certain div there are more child divs that get floated to go across the page. I want to be able to use javascript to see the width of the window and then divide my set width of the divs to work out how many to display.
I have found the 2 pieces of code. One that measures window width and the other to slice the divs and hide the rest.
$('div').slice(4).hide();
var width = $(window).width();
$(window).resize(function(){
if($(this).width() != width){
width = $(this).width();
console.log(width);
alert(width);
}
});
My Problem is how to select only the divs within my speciedfied div. I have tried this but it hasn't worked. Don't even know if i'm goin in the right direction
$("#mainContent2").append(('div').slice(4).hide());
Is javascrpt the right way to go about this or would css be able to do what I'm after?
Many Thanks
EDIT: HTML
<div id='mainContent>
<p></p>
<div>
<div id='mainContent2'>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
</div>
If you have got the number of div to show in particular div then you can use this code.
$(#mainconetent2 > div).slice(4).hide());
I'm not sure whether I correctly understood your problem, but JQuery offers the child-selector for selecting children of a specific element. Then you have access to its parameters and can set whatever you want.
I'm trying to create an script draw something in an element by mouse and I'm using Raphaeljs to do that.
For correct drawing I need to find top and left of input element. I'm using var offset = $("#input").offset(); to get left and top.
But the top value isn't correct. It's 10px lower than the real top distance. I think the 10px maybe change in different resolutions then I can't add 10px to it normally then I want to know how can I fix the problem!
I uploaded my test here.
The jQuery .offset() function has this limitation:
Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.
The body in this case has a 10px top border, which is why your drawing is off by 10 pixels.
Recommended solution:
var offset = $("#input").offset();
x = x - offset.left - $(document.body).css( "border-left" );
y = y - offset.top + $(document.body).css( "border-top" );
After fighting with this for a while and reviewing various potential answers I have concluded that jQuery offset().top (and presumably DOM API that it uses) is too unreliable for general use. Not only is it documented as excluding html level margins, but it also returns unexpected results in several other cases.
position().top does work, but it may not be practical / possible to design the page so that it is equivalent.
Fortunately I have found that element.getBoundingClientRect().top gets the position relative to the viewport perfectly. You can then add on $(document).scrollTop() to get the position from the top of the document if required.
I have two different solutions:
1) You can calculate above element's total height with outerHeight(true) method. This method will calculate height with margins, paddings and borders.
And this won't create conflict, it will return true value.
Here is jsFiddle example.
html
<div class="header"></div>
<div class="nav"></div>
<div class="myEle"></div>
jQuery
var myEleTop = $('.header').outerHeight(true) + $('.nav').outerHeight(true);
2) If you defined top css to the element which is postioned relative to the body, you can use this value too:
parseInt($('#myEle').css('top'));