CSS dynamic position of tooltip on hover with jQuery - javascript

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
....
}

Related

Center an element in middle on screen for an horizontal scroll list

I'm attempting to have the element clicked being positioned automatically at the center of the screen. The list is having a horizontal scroll with some overflow-x : scroll which is hiding what's outside of the div(screen).
I can't find out what coordinates to pass to scrollLeft().
$('#timepicker li').on('click',function(){
var maxScrollLeft= $("#timepicker").scrollLeft('#timepicker').prop('scrollWidth') - $("#timepicker").width();
$('#timepicker').animate({
scrollLeft:
});
});
Please see my codepen: codepen
thank you.
Its a little tricky, but here's the solution.
var left = $(this).offset().left
var width = $("#timepicker").width();
var diff = left - width/2
$("#timepicker").scrollLeft($("#timepicker").scrollLeft()+diff)
Basically what i've done is get the present left position of the clicked element and divide it with half of the width of the container. This gives the difference which the scroller has to move in order to take the elment to the middle. Hope you understood the logic.
Here's the codepen attached
http://codepen.io/prajnavantha/pen/eNwWgx
You can copy paste this in the code pen click handler and see it working.
try this
$('#timepicker li').on('click',function(){
var pos=$(this).position().left; //get left position of li
var currentscroll=$("#timepicker").scrollLeft(); // get current scroll position
var divwidth=$("#timepicker").width(); //get div width
pos=(pos+currentscroll)-(divwidth/2); // for center position if you want adjust then change this
$('#timepicker').animate({
scrollLeft: pos
});
});

Javascript How to keep DIV in window boundary

Hey I have a "box" div which can move its position based on clicking of arrows. How can I keep the Box from going outside the window's bounds or in other words just go to the borders and not cross the boundaries.
Fiddle provided:
var elementStyle = document.getElementById("divId").style;
JSFiddle
I updated your fiddle basically you need to add checks and if your check doesn't pass then set the new position to 0.
if (newPosition < 0) {
elementStyle.top = 0;
} else {
elementStyle.top = newPosition + px;
}
Fiddle here:
https://jsfiddle.net/8t9cqyqd/7/
for bottom and right the window will keep scrolling. If that's not desirable then you need to get the window size and do the same kind of check and then set the right and bottom positions to the container size minus the size of your moving box. I can update the fiddle for that if you'd like.
updated fiddle to handle the "right" direction:
https://jsfiddle.net/8t9cqyqd/9/
Something along these lines:
var x = $("#divID").position();
if(x.left > $(window).width())
//disable up arrow movement
Just do that for all positions changing out width() with height() for the Y position

Detecting when user has scrolled to the pixel just before seeing the footer

I'm trying to detect when my user has scrolled to the point just before he sees the first pixel of the footer.
Here is how I'm trying to calculate the position just before the footer:
footerVisible = $(document).height() - $(window).height() - $('footer').height() - 1;
alert(footerVisible);
I'm taking the height of the whole document and subtracting the viewport height and the height of the footer.
This alerts me 3695.
Now I'm logging the scroll position like this:
$window.scroll(function(e){
console.log($window.scrollTop());
}
When scrolling all the way to the bottom of the document (ie: seeing the full footer and end of document) the console indicates I'm at position 3211.
My logic is clearly flawed somewhere...
How can I calculate the 'scrollTop' position that the user will be on just before he sees the first pixel of the footer.
Can anyone provide a fiddle that throws an alert juste before the user sees the footer?
EDIT
Fiddle available here
To see the "first pixel of the footer", the scroll position will have to be one pixel less from one window height from the height of the footer.
var footerVisible = $(document).height() - $(window).height() - $('footer').height() - 1;
Your scroll function should be something like this:
$(window).scroll(function() {
if( $(window).scrollTop() >= footerVisible ) {
alert('Footer Visible');
}
});

javascript scroll to bottom of div if current scroll location is near bottom

I am working on a script that will append text (varies on size) to a div block (varies in height) with overflow scroll. After this text is appended I need the div block to be scrolled to the bottom in order to see the new appended text, however I need it only to scroll to the bottom if the current scroll position is around 10% of scroll close to the bottom, otherwise it would be annoying if it scrolled down while viewing the top portion of the div.
This is what I came up with, it is run after text is appended:
var divblock = document.getElementById('div'); //the block content is appended to
var divheight = divblock.offsetHeight;//get the height of the divblock
//now check if the scroller is near the bottom and if it is then scroll the div to the abslute bottom
if (***HELP HERE***) divblock.scrollTop=divblock.scrollHeight; ///scroll to bottom
much appreciated thanks!
if( divblock.scrollTop < divblock.scrollHeight )
div.scrollTop + lineheight > scrollHeight
Like this?
You just need to check to see if scrollTop is greater than 90% of the scrollHeight.
if (divblock.scrollTop > divblock.scrollHeight*0.9) {
divblock.scrollTop=divblock.scrollHeight;
}
scrollHeight = scrollTop + clientHeight + [fudge factor]
The "fudge factor" seems to be around 30-40 (pixels) for me. So try this:
if ((divblock.scrollTop + divblock.clientHeight + 50) > divblock.scrollHeight) {
...
}

Scrolling div within bounds

I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?
You change the z-index using css:
div.class {
z-index: 60;
}
You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.
You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}

Categories

Resources