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.
Related
I want to make the div container can automatically resize its div-size (height) along side with the content, instead of going out of the area when the text is more than container area. Can anyone help me out to fix this instead of editing up the css for div-container? When I tried to change the div-size even it fits up the content, but while it is more than the div-area, I have to edit it manually again through CSS code.
Is it possibly to make it automatically? or maybe using JavaScript function?
CSS
div#div_id{
height : auto;
min-height: 100% !important;
}
Set your div height to auto. It will take height automatically as per your contents.
The behaviour you want is just what a div - or other so-called block-level-element - naturally does unless you give it a defined height. So just remove any fixed heights you apply to the container and you're done.
In case you want your div to be of a certain minimum/maximum height, use min-height/max-height instead of height for that.
I'm making a layout using fixed header, with a main nav and another nav called #sub_nav. The thing is the #sub_nav got many items to choose, so when I reduce the width of the browser, the last item breaks the line, and a portion of the content hides behind the flexible header.
Here's an illustration:
And here the jsfiddle
I wonder if there's a CSS / JS solution for that. I also accept jquery solutions.
Apologise if the image is annoying but I hope you understand what do I want to solve.
[UPDATED]
Because the header is fixed, it overlaps on top of the main contents. You need to use jquery to increase the top padding of your #mid when #sub_nav height gets greater than it's actual height. Try something like this:
$(document).ready(function(){
var subNav = $("#sub_nav");
var main = $("#mid");
if(subNav.height() > 25){
main.css({"padding-top": "220px"});
}
else{
main.css({"padding-top": "190px"});
}
$(window).resize(function(){
if(subNav.height() > 25){
main.css({"padding-top": "220px"});
}
else{
main.css({"padding-top": "190px"});
}
});
});
You can't have header be fixed (or absolutely) positioned AND have the div#mid element be positioned relative to it with the wrapping content from the header pushing it down.
I would suggest reducing the words in the subnav links if possible. From a design stand-point, it looks bad and it's bad UX to be as hard to read as it is. You can also try a responsive layout where if the browser width gets too narrow, you change the design of the menu.
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');
I am using the JavaScript/jQuery script available here to have the table headers floating while scrolling down/up. My table is center aligned. When I scroll down, the headers float but they get left aligned, rest of the table is center aligned though. Here is the snapshot of the output that I am getting right now:
What exactly do I need to edit in this JavaScript/jQuery code or my PHP/HTML code to have them center aligned?
Update
Example of problem
It's not the most elegant of scripts you've found, so I think yaponyal's advice is sound.
There were a few reasons why your fiddle didn't work: jsfiddle doesn't like the script's direct onload event attachment, so you can change it to:
window.addEvent("domready", function() {
this.build_header();
});
Additionally, the setheader function that runs every time you scroll, has to also set a horizontal position for the header.
this.header.style.left = this.table_obj.offsetLeft + "px";
See here for the reason why it can't be automatically centered. You could instead modify the script to put the cloned table header in a div with centered text alignment if you wanted to.
Also, the script sets a top value for the header without appending "px". That didn't work in my browser, I had to change it into:
this.header.style.top=Math.round(screenpos) + "px";
http://jsfiddle.net/VHaaw/3/
On page load, does the header appear right at the top? If so, I would suggest detaching the header into a separate div, styling it according to your needs and then setting a position fixed to the div. You can use the css property margin: 0 auto; to center data according to the width of the page.
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);
});