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
Related
I have two div's.The height of first div changes with the height of second div.But code seems to have some trouble.My code is below.
For example,
<div id="profile1">akdsfkj</div>
<div id="schedules1" style="min-height:150px;"></div>
<script>
document.getElementById('profile1').style.height=$('#schedules1').height();
</script>
Thanks in advance
The height property on the DOM style object requires units, but jQuery's height() method just returns a number (of pixels). So:
document.getElementById('profile1').style.height=$('#schedules1').height() + "px";
// Change ----------------------------------------------------------------^^^^^^^
But note that the style attribute on your schedules1 element is invalid, you've used min:height:150px rather than min-height:150px. (It's fixed in the question now.)
Also, it's a bit odd to mix jQuery and straight DOM code in this way. Using all jQuery:
$('#profile1').css("height", $('#schedules1').height());
By using Jquery we can do this..
var fheight=$('#profile1').height();
$('#schedules1').css('height',fheight);
This works (jsfiddle):
HTML (change min:height to min-height):
<div id="profile1">akdsfkj</div>
<div id="schedules1" style="min-height:150px;"></div>
JavaScript (use jQuery to set the height):
$('#profile1').height($('#schedules1').height());
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'm creating a split page with a menu on the left, and the main content on the right. When I click on a menu item, I want to scroll the main content to that item.
I found JavaScript scrollTo(), which takes offset arguments.
Is there any way to determine the offset of a particular <p> or other element within a <div>? Or perhaps there is another way to scroll to an element without knowing its offset?
EDIT
Thanks for the replies. Looks like everyone gave similar answers. However, I ran into a problems with this. It seems that offset().top (or position().top) return different values depending on the current scroll position.
My jsFiddle is here: http://jsfiddle.net/gBTW9/4/embedded/result/
If I scroll to the top and selection Section 4, it works as expected. But once I've scrolled, it stops working correctly. Can anyone see what is happening.
There are jquery methods offset and position stat can help there.
Also there is good scrollTo plugin which accepts elements and much more.
You can get the vertical offset of an element using $('p').offset().top. You can combine this with scrollTop() using this:
$('div').scrollTop($('p').offset().top);
You need to use position() rather than offset(). If you know the id of that you can easily find the position of that paragraph tag
jQuery: Difference between position() and offset()
If i didn't misunderstood you just need an animated scrolling to a particular element, something similar on what I did on my portfolio.
Assuming that the menu on the left is fixed, then just scroll the page to the element you want to scroll to:
$("html, body").animate({
scrollTop: $('#element').offset().top
});
If you need to move a particular element over another element then:
$("#element1").animate({
top: $('#element2').offset().top
});
Why try it the hard way, when you can use a HTML native attribute??
call me old school, but i like to keep it simple.
within your menu:
use:
<ul>
<li>
Paragraph 1
</li>
</ul>
instead of
<ul>
<li>Paragraph 1</li>
</ul>
this will make your section jump to the # (id) that equals Paragraph1
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.
I am trying to find a simple way to have a div with just text in it automatically scroll the text vertically. I don't want to use a framework (though I do use Prototype, so if it is easier using Prototype then that is fine, but no Scriptalicious).
I assume there has got to be a way to do this with a few lines of code, but I am not familiar enough with Javascript to know how to most effectively do that.
This might not be conventional but you can try the <marquee> tag
it works both in IE and FF, and the last time I checked, safari too.
<marquee behavior="scroll" direction="up" height="250"
scrollamount="2" scrolldelay="10"">
Your content goes here
</marquee>
should give you what you want,
and you can style them like any <div>...
and then there is the added advantage of having no javascript...
Edit in response to your comment
It gets better, try this in any browser
onmouseover="this.stop()" onmouseout="this.start()"
And this in IE
style="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0,
FinishOpacity=100,
Style=1, StartX=0, FinishX=0, StartY=0, FinishY=10)
progid:DXImageTransform.Microsoft.Alpha( Opacity=100, FinishOpacity=0,
Style=1, StartX=0, FinishX=0, StartY=90, FinishY=100)"
As attributes of the marquee tag...
function scrollDivUp(id){
document.getElementById(id).scrollTop-=1
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}
try something like that maybe.
you could also change the .scrollTop-=1 to .scrollTop+=1 to scroll the other way.
You would also need a scrollable div which can be done by constraining the size and setting the overflow style property ie. style="width:200px; height:300px; overflow:auto"
Try changing the div's scrollTop. There is an example here.
I see that the correct answer isn't given yet. I think you have to look at cloneNode() for instance. And clone the element you want to scroll. When the first element is at the last point of scrolling then place the duplicated element after the first element. And when that duplicated element is almost at the end, place the original after the duplicate and so on!