I am trying to create a small tooltip script that mostly relies on css. The bit of JavaScript I can't figure out is how to position the div based on its distance to the browsers edge.
When the div appears I would like it to check how close it is to the top, bottom, left and right. For example if there is not enough space to display the div above the tooltip link it should position it below the link.
Essentially I would like the div to be "aware" of its position and know where to go to make sure it is visible.
Thanks
I just had to write very similar code myself, for use with tipsy (so my solution uses jQuery). Here's the basic math, assuming <div id="mydiv">...</div> is the div you're working with. I account for the div's height and width when measuring the distances to the right and bottom edges as well.
dTop, dBottom, dLeft, and dRight are the distance from the div's top, bottom, left, and right edges, respectively, to the same edge of the viewport. If you want to measure based on the upper-left corner of the div, don't subtract dTop or dLeft when computing dBottom and dRight.
var $doc = $(document),
$win = $(window),
$this = $('#mydiv'),
offset = $this.offset(),
dTop = offset.top - $doc.scrollTop(),
dBottom = $win.height() - dTop - $this.height(),
dLeft = offset.left - $doc.scrollLeft(),
dRight = $win.width() - dLeft - $this.width();
See Measuring Element Dimension and Location for help
This cheat sheet for the Prototype library has a good example.
Related
I am hoping to create an effect similar to this one further down the page, in the 'Designing For 20-Somethings' section.
The effect is essentially to get a long image to change the css top value within a device such as a MacBook or iPhone, so it appears as though the image within the device is also scrolling whilst the user is scrolling the website.
I've created a fiddle to show how far I've got, but this doesn't work well on resize or when initially loaded.
This is some of the code I am using below
var yOffset = $element.offset().top - ($(document).scrollTop() + $(window).height()/diviser)
Any help is appreciated.
OK I see it now. But the movement is so subtle i didn't even notice it. It looks to be a lot of work for something that is pretty much unnoticeable. It appears he's changing the top position of the image based on some percentage change of the full window scroll but only when the image is inside the viewport.
Just off the top of my head (completely untested) something like this would scroll the image up and 1/4 the speed the window would scroll;
var mobiletop = $('.mobile').position().top;
var scrollfactor = 4;
$(window).scroll(function(){
if($(window).scrollTop() > mobiletop){
var imgtop = $('.mobile img').position().top - (($(window).scrollTop() - mobiletop)/scrollfactor);
$('.mobile img').css('top', imgtop + 'px');
}
I'm trying to work out the algorithm for a fixed div that grows in height (while scrolling) until it's equal to the height of the viewport or div with fixed position relative to another div and the bottom of the viewport
I am using Twitter Bootstrap affix to lock my secondary navigation bar (yellow) and my sidebar (black) to the top of the screen when the user scrolls that far.
This works fine. The sidebar is the piece that's giving me trouble. When it is in its in its starting position (as shown in the diagram belorw), I want the top of the bar to sit 30px
down from the secondary navigation bar (yellow) and 30px up from the bottom of the page.
As the user scrolls, the bar should grow in height so that it remains 30px beneath the secondary navigation bar and 30px above the bottom of the screen (As shown in the diagram below)
After the bar is fixed position, I am able to do what I need to do.
.sidebar {
position:fixed;
top:100px;
bottom:30px;
left:30px;
}
What I can't figure out is how to position the TOP of the sidebar relative to my
secondary navigation bar and the BOTTOM of my sidebar relative to the bottom
of the screen. I've tried calculating the height of the sidebar at the beginning and the end of the
scroll but this causes issues.
I've also tried calculating the final height of the sidebar and letting the bottom of
the sidebar just run off the edge of the screen (when it's in its initial position), but
if there's not enough content on the right side to warrant scrolling, I have no way
of getting to the bottom items in the scroll bar. Plus my screen starts bouncing
in a really unattractive way.
below is the current code in use:
ShelvesSideBar.prototype._resize_sidebar = function(_this) {
var PADDING = 50;
var window_height = $(window).height(),
nav_bar_height = $('.nav_bar').height() + $('.secondary_tabs').height(),
sidebar_height = window_height - nav_bar_height - PADDING,
sidebar_scrollable_height = sidebar_height - $('.bar_top').height();
_this.$container.height(sidebar_height);
_this.$container.find('.bar_bottom').height(sidebar_scrollable_height);
/* reset the nanoscroller */
_this.$container.nanoScroller();
};
this code is called on page load and again on window resize. Any help would be greatly appreciated!
I've been trying to do something similar (minus the fixed elements and navbars). What I found was in order to do any sort of relative height scaling every element above the element I wished to scale all the way up to the opening html tags had to have a relative height set, even if it was just height:100%;. (here's my original question Variable height, scrollable div, contents floating)
My goal was to have the body height fixed to window size like a native full screen application would be with my content subareas scrolling, so this is a bit off topic for what you're wanting to accomplish. But I tried using JS/JQ to start off with as you're trying to do currently and found that I simply couldn't get the window height because the default behaviour for height management is to expand the page height until everything on the page fits. And all the getHeight methods I tried we're getting the page height not window/viewport height as promised. So you may wish to try fixing your body's height to the window and going from there using overflow:scroll; to scroll the page.
A quick note on overflow:scroll; if you have users who use WP8 IE (and probably other versions of IE) it may be advantageous to implement FTscroller to handle all your scroll elements as the overflow property defaults to hidden and is a fixed browser property. The only problem with FTscroller is because it uses CSS offsets to move the content container it may wreak havoc on elements that are designed to switched to fix when they reach x height from top of page because technically the top of page (or rather the top of the container they're in) isn't at the top of the page anymore it's beyond it. Just something to be aware of if you do need to cater for this browser.
And apologies for the complexity of my sentence structure. :/
so I was able to figure this out, for anyone still looking. What I ended up doing was binding to the window scroll event and - whenever the scroll occurred - I check if the class "affix" has been added to the sidebar. If it has, then I perform one set of calculations to determine sidebar height. Otherwise, I perform the other set of calculations. Code below:
/* called on window scroll */
var PADDING = 70;
var window_height = $(window).height(),
nav_bar_height = $('.nav_bar').height() + $('.secondary_tabs').height(),
header_height = $('.prof_block').height() - nav_bar_height,
sidebar_height = _this.$container.hasClass("affix") ? window_height - nav_bar_height - PADDING : window_height - (header_height + nav_bar_height) - PADDING,
sidebar_scrollable_height = sidebar_height - $('.bar_top').height();
_this.$container.height(sidebar_height);
_this.$container.find('.bar_bottom').height(sidebar_scrollable_height);
Although we can achieve fantastic animations through various Javascript libraries such as jQuery. I am wondering what's the technique behind the animation?
I can think of using CSS to format the page element.
But how can we place an element on arbitrary position of the page? I mean, not by lines. Is it true that we can think of the client area within the browser window as the Paint canvas?
I am totally new to frontend Web development, I hope I made myself clear. And thank you for answering this junior question.
The jQuery way - and the only cross-browser way - to animate is to set some CSS properties, wait a little, update those properties, wait a little, update those properties...
e.style.position = "absolute";
time_start = Date.now();
time_end = time_start + 10000;
(function tick(){
now = Date.now() - time_start;
if(now > time_end) now = time_end;
e.style.top = now * speed + top_start;
if(now < time_end) setTimeout(tick, 13);
}();
The CSS properties you are interested in are:
position: absolute lets you position the element to an arbitrary location.
display: block or display: inline-block lets an element to have a width and height
top, left, bottom, right define the element position if its position is absolute or relative. left takes precedence over right and top takes precedence over bottom.
width and height define the element's size.
opacity can be animated to fade an element in or out.
padding, border-width, margin and their respective components can all be animated.
You can also animate colors: border-color, color, background.
I really need some help.
I have this test-web: www.sfrpsicologia.com/inicio.html
As you can see, I have centered the green box in the middle of the screen. The problem is that when I resize the height of the window, this box is above the logo and the footer. And what I want is that ALWAYS this div respect the height of the logo and the footer. I need a margin top and bottom that this box never overpass.
Any help please? I dont know much about javascript. I have tried with css styles but as it is positioned absolutely I cant do it.
Thank you very much
Don't use absolute positioning in this case.
You are trying to solve poor design problem with javascript and that's not a good practise.
Use sticky footer approach http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
and overthink your page structure based on that technique.
OK I got what you meant.
Do this , however I don't guarantee it will work because I can't test it on your site but it's supposed to if any obstacles occure you should modify it to work.
I'm useing jQuery you should be familiar with it.
So step 1(get the div) <div id=wrapp> and take it's height
var wrapp = jQuery('#wrapp');
var h = wrapp.outerHeight();
step 2(Set some other variables)
var winH = 0;
var pos = null;
var footerH = 34;
var headerH = 74;
These heights are the elements besides your <div id=wrapp> in your case they might be a few more or less.
var footerH = 34;
var headerH = 74;
The idea is when there's no room for all of them on the screen stop <div id=wrapp> from going upwards.
step 3 (All this is bind to window resize event):
jQuery(window).resize(function(){
winH = jQuery(this).height();
pos = wrapp.position();
if(winH < h + headerH + footerH )
wrapp.css({'top' : pos.top});
else
wrapp.css({'top' : '50%'});
});
Update window height on resize, also get <div id=wrapp> position object
and if(there's no more room according to all the heights you put) fix the top position to current top position of <div id=wrapp> else put it back to percentage.
Here's an example: http://jsfiddle.net/F7mrf/44/
If you got the idea with very little modifications it should work, you'll just have to do the math and put the right numbers, good luck
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
....
}