I'm having a beyond frustrating problem which I have no idea how to tackle.
My question: How do I determine how many elements exist between two positions in a viewport (a scrollable div in this occasion)?
Say I have a scrollable <div> that has a height of 150 px, but has a viewport at 450px with the majority of it being hidden. The div has children that are 30px high, 15 of them.
Question 2: How could I find out how many first children exist between n1 and n2, it seems pretty easy but it's proving not to be.
I've created a jsFiddle where I have partly solved the solution, it works if the top value is set to 0, but it doesn't work if it's anything else. For example, with this solution I am able to determine that there are 7 visible divs between 0 and 200px. But if I change it to determine how many are between 30px and 230px it tells me 0, when again it should be 7.
Help please!
Try this instead:
var $this = $(this),
topOffset = $this.offset().top;
if (topOffset >= top && topOffset <= bottom) {
elements++;
}
This checks to see if the current element's (in the each()) top offset is greater than the top variable's value and increases the elements only then. This way, you don't need to be constantly updating the height variable.
And this works, as you can see here.
Change it so that the 'height' starts equal to the top value.
Your javascript should be:
var container = $('div#container'),
top = 30,
bottom = 230,
height = top,
elements = 0;
container.find('div').each(function(n)
{
if (top <= height && height < bottom)
{
height = height + $(this).height();
elements++;
console.log(top, bottom, height, elements);
}
});
$('span.top').text(top);
$('span.btm').text(bottom);
$('span.num').text(elements);
That worked for me, Good luck!
Related
How to check if two div HTML elements intersect/overlap/touch each other?
The two divs are fixed at the X axis so they can only move up and down
I got both top and bottom positions for both div elements
If you already have both top and bottom, then it's just a conditional:
if ((top1 <= top2 && bottom1 >= top2) || (top2 <= top1 && bottom2 >= top1)) {
// intersect/overlap/touch
}
I believe you have to consider the element height, as well as their offsets.
Then it's just a matter of checking:
Which one is is closer to the top (top1>top2)? Realize that if you have the offset of the divs, you will have to check which one is closer to 0.
Check if the value from TOPMOST_TOP_VALUE+TOPMOST_DIV_HEIGHT > top2.
If condition 2 is true, you have intersecting divs.
Hope I could help.
I suggest you assign them some size (width, height and border). Also you can use UI debugger (by using F12 key) to see actually where those are located.
I'm trying to create a script that will keep divs fixed in their position no matter where they are on the screen when the page is scrolled... Basically, if a div is 50 px from the top, it will stay 50 px from the top of the current window. If a div is 0 px from the top, it will stay 0 px from the top.
I don't want a fixed div because of the cut-off problems they have... So please don't recommended changing the position to 'position: fixed;'...
A script I was working with was essentially doing the following:
window.onscroll = function() {
var elements = document.getElementsByClassName('sticky_div');
var doc = document.documentElement;
for (i = 0; i < elements.length; i++) {
rect = elements[i].getBoundingClientRect();
if (doc.scrollTop > rect.top) {
elements.style.top = doc.scrollTop + rect.top;
} else {
elements.style.top - doc.scrollTop - rect.top;
}
}
}
I'm sorry if that actually comes out wrong. I accidentally deleted my original code... Either way, the above method caused to be too laggy and it would jump the headers and divs. Are there any other ways of doing this using less over-the-top processing to do?
elements.style.top = doc.scrollTop; works very well but it won't allow for divs that are positioned elsewhere on the page...
Here's a JSFiddle for the reason why I don't want to use fixed divs (try scrolling horizontally):
https://jsfiddle.net/o27L3uss/
So I have this issue with setting a margin that dynamical decreases and increases to a minimum of 8px and maximum of 40px.
The margin is being set between 11 different blocks which are inside a container. The container can be a minimum width of 960px or a maximum of 1280px and always has a fixed height.
How can I make it so that the space (margin-left) in between the boxes always stretches to fill the container correctly?
Below is an image of what I am aiming for at 960px width
Now an an image of it at it's full width of 1280px
As you can see from the images all im trying to do is separate the boxes as the resolution is changed.
I currently have something like this using jQuery
$(window).bind('resize', function(){
var barWidth = $(".topBar").width();
$(".barModules li").css('margin-left', my dynamic value here));
});
I'm stuck on how I should be calculating this and if that's even the right way to go about it :/
An example of what I have so far: http://jsfiddle.net/m4rGp/
If...
n = number of LI elements in .barModules
then...
dynamic margin = (barWidth - n * (width of one LI)) / (n - 1)
So your code would look like:
$(window).bind('resize', function(){
var n = $(".barModules li").length;
var barWidth = $(".topBar").width();
var liWidth = $(".barModules li:first").width; // if set through CSS, read the "style" attribute instead...
var dynMargin = (barWidth - n * liWidth) / (n - 1)
$(".barModules li").css('margin-right', dynMargin + "px")); // "margin-right" instead of "margin-left"
$(".barModules li:last").css('margin-right', '0px'); // don't need margin on last element.
});
// if .length isn't returning the a value for "n", there are other ways to count the sub-elements, check the "children()" method at jquery.com
I wouldn't do that with javascript. Its a lot of work
You could make a table with cells that are set to the width you want.
http://jsfiddle.net/HZKpM/
You can even add a minwidth in various places.
I would advise using CSS. Just create an outer box around each box.
<div class="outer"><div class="inner">text</div></div>
Here is a jsfidle http://jsfiddle.net/HZKpM/3/
I'm writing a simple tooltip that can hold HTML tags. Please check http://jsfiddle.net/Qkwm8/ for the demo.
I want the tooltip box to show properly regardless of the position of element, in this case <a>, that shows tooltips on mouseover event.
The tooltips are shown fine except when <a> floats right (or is at the end of the line) or at the bottom of the screen where it doesn't show properly, it appears off the screen
If the <a> floats right, or at the end of the line, or is at the bottom of the screen, I want the tooltip to change position so it remains visible
Thank you.
Update demo link
here's the complete result: http://jsfiddle.net/Qkwm8/3/
You can use the document width to check how wide the html document is and adjust the left position accordingly. Say:
//set the left position
var left = $(this).offset().left + 10;
if(left + 200 > $(document).width()){
left = $(document).width() - 200;
}
I used 200 here because you are setting your tooltip to 200px wide. Something similar can be done with height.
There is also a window width but I always get confused about the difference so you should check which one gives you better results.
An example of the bottom of the page is:
//set the height, top position
var height = $(this).height();
var top = $(this).offset().top;
if(top + 200 > $(window).height()){
top = $(window).height() - 200 - height;
}
Again, using 200 since you are setting your tooltip to 200px height.
$('a.show-tooltips').mouseover(function() {
if(($(this).parent()).css('float')) =="right") add the proper class to left
else -> the proper class the right
....
}
I'm trying to use the left variable to replace '1493' in this code. It works fine when it's a number but when I changed it over to use 'left' the if statement stops working.
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var postCount = $(".post").length;
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
if(left >= columnLength) {
$(".num").text(left);
}
});
Does anyone have any ideas where I'm going wrong with this? Any pointers would be great.
You may need to force it to be an integer:
var left = parseInt($(document).scrollLeft());
Lets take a look at the math you have really quick.
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
You are basically cancelling out width, and (postCount*743). It leaves you with --1493 which is positive 1493. The following would have the same effect:
var columnLength = 1493;
So, the reason the if statement fires when you put in the static value 1493, is because columnLength ALWAYS equals 1493 which, of course satisfies this condition:
if (1493 >= columnLength)
You could as easily write:
if (1493 >= 1493)
That said, it should still, theoretically fire when left becomes greater than or equal to 1493. But left is the current horizontal scroll position in pixels. It would be a HUGELY wide page to hit a scroll position of 1493.
Edit: Here's a fiddle to give an idea of how fast the scroll position increases: http://jsfiddle.net/vdQ7B/16/
EDIT 2:
Here is an update in response to your comment.
As I understand it, you were trying to get a horizontal scrollbar that would, essentially, scroll forever.
Please see the following fiddle for a demo: http://jsfiddle.net/vdQ7B/40/
The code is below:
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var viewportwidth = window.innerWidth;
// If our scrollbar gets to the end,
// add 50 more pixels. This could be set
// to anything.
if((left + viewportwidth) === width) {
$("body").css("width", width + 50);
}
});
Per the comments in the code, we simply increase the width of the body if we determine we've reached the end. scrollLeft() will only tell us the number of pixels that are currently not visible to the left of the viewable area. So, we need to know how much viewable area we have, and how much is hidden to the left to know if we've scrolled all the way to the end.
If you have a scroll bar on an inner element, like a div, you'd need to update with width of the div, not the body.
Note: You may also need to use $(window) instead of $(document) to get scrollLeft() to work across all browsers.
Note: See here about using "innerWidth". There are some compatibility issues, and you may need to expand it a bit to handle other cases (IE6).