URL hash page jump... fixed header overlapping - javascript

So here's the deal,
I have a fixed header/navbar, and when I jump to something via a #urlhash it overlaps it.
Now I could add a div that goes before the content and jump to that, but that would end up messing the whole style up.
So I'm wondering, is there a JavaScript/jQuery trick to add about 200px of padding after a jump?

You could add an absolute positioned empty ( ) div with top:-200px and jump to that. Just make sure the parent element is not statically positioned (relative should do the trick)

How about:
$(window).onload(function() {
if (document.location.hash)
$(window).scrollTop($(window).scrollTop() - 200);
});

Related

Set margin top for a DIV using JQuery

Here is the situation, i have a fixed header with 120px height, and i forced the page to jump to #testdiv when the query string is #testdiv.
But the issue is when page jumps to beginning of the above DIV, part of the content will be lost,because it's behind the fixed header, is there any jquery to force page to jump to the #testdiv with not actual margin?
I tried the below code but it makes actual margin
if (url.indexOf('#testdiv') >= 0) {
$('#testdiv').css('margin-top',120);
};
I think there would be easiest way to do that, set margin-top for your field, and set the negative margin-top for your parent field.
It should be work for you.
if (url.indexOf('#testdiv') >= 0) {
$('#testdiv').css('margin-top',120);
$('#parent').css('margin-top',"-120px");
};
You can set margin-top via jQuery like this:
$("#mydiv").css("margin-top", "10px");
When you have a fixed header which you don't want to overlap content you need to add padding-top to the containing div (or the body if required) which matches the height of the fixed content to push the underlying elements down.

I need help figuring out how to toggle an element once vertical height of window is scrolled

I'm trying to toggle a div from relative to fixed when I scroll down 200px using javascript. When I reach 200px from the top of the window, my div should toggle to fixed. And when I'm above that 200px from the top it should go back to relative. Does anyone have an idea on how to do this?
Something like:
$(window).on('scroll', function() {
$("#myDivID").css({
position: $(this).scrollTop()<200?'relative':'fixed',
top: $(this).scrollTop()<200?'200px':'0px'
});
});
You'll probably also have to reset the top position of the element.
I know there's at least a couple of plugins that do this. Can't remember the name of the one I saw last, but here's one I've written myself: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/JS/jQuery.fixedIfNeeded.js
You use it like so:
$('#my-element').fixedIfNeeded();
There's one optional argument that specifies if the element should stop being fixed before it reaches another element (like a footer for example):
$('#my-element').fixedIfNeeded('#footer');

How can I auto-scroll as content is added to a div?

I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.

Fixed position element that... moves?

Just found the link with a visible element with position:fixed behaves kinda strange:
http://www.steadyhealth.com/Do_you_need_to_use_a_back_up_method_for_the_first_week_of_every_month_while_on_birth_control__t267326.html
The element is div with id equals to centerMessages. It appears to be green, visible and ... moving. How come that a fixed element is moving as the page is scrolled? Or, in other words, which part of the spec I need to re-read/re-learn please?
The div does not move when you scroll. It contains no content, so you can't see it.
Fixed position just means that the element doesn't move relative to the scroll position of the page; it can still be given a position relative to the browser window. You can change this position using CSS and Javascript.

Resizing a div to fill the browser

I have a page with many divs and style, with my div buried somewhere inside.
I am trying to have a button that automatically makes my div, that includes a video player, resize and capture the whole browser.
In order to do that I am trying to get the current position of the div and then position it relatively so that it'll get to the top-left corner so I could then use document.body.clientHeight/clientWidth.
Can't get this to work.
I tried the approach of moving my div to the first div and then resizing however this messes up the flash player.
Any ideas? any different approaches?
Thanks,
Guy
Use one of the lightbox clones that can handle DIVs. They usually copy the DIV in question into their own view DIV, which helps with positioning issues and you don't have to do anything to the buried div.
I find Multi-Faceted lightbox to be very easy for customizations:
http://www.gregphoto.net/lightbox/
but there are lots of others around as well.
Why relative?
You should rather use fixed instead of relative. Then set positon to 0,0 and width and height to 100%.
Simple js can do this.
On click, just set the div's style to 'fixed', and position 0,0. Like:
var theDiv = document.getElementById('yourDivsId');
theDiv.style.position = 'fixed';
theDiv.style.top = 0;
theDiv.style.left = 0;
This should do the trick:
<div style="position:absolute;top:0;left:0;width:100%;height:100%">
some content here
</div>

Categories