When using name="object" and then having the page scroll to that object using a href="#object" id it possible to adjust where the page lands. Rather than the top of the window, a few pixels down. I have a fixed navigation bar that when scrolling, the content goes behind so the nav bar is always visible. So when I use a href="#object" part of it is cut off because it is behind the nav bar.
Any fixes? Thank you.
Change the top padding and margin styling on the element with the named anchor. For example, if your header is 100 pixels tall, give your named anchor a margin-top of -100px and a padding-top of 100px.
See this jsFiddle example.
In this example, the link will bring the bolded text ('Vestibulum ante ipsum') 100px from the top of the page.
And if you want to set these properties (like mentioned from j08691) via a css selector, put this JS into your html, then you're able to give every anchor a class for it, if attribute-selectors don't work (older browsers):
function findAnchors(){
anker = document.anchors;
for(i=0; i<anker.length; i++ ){
anker[i].className = "anchor";
}
}
window.onload = findAnchors();
You can do this with jQuery.localScroll by setting an offset in the plugin configuration.
Here, have a fiddle.
Related
so i have bootstrap based site with fixed navigation bar (that follow you around the page at the top) and when i want to show modal popup, it appear behind those navigation bar, how to fix?
and i using margo template from graygrids
it also appear in summernote modals for uploading picture, so it looks like all modal will appear behind those navigation bar.
To solve the problem I included in the CSS a super high z-index value (1000000) for the modal-backdrop (the shadow behind the modal), and a little bit higher one (1000001) for the modal:
.modal-backdrop {
z-index: 100000 !important;
}
.modal {
z-index: 100001 !important;
}
Hope it helps!
The navbar is fixed, meaning z-index is only relative to it's children. The simple fix is to simply increase the top margin on the outer modal container to push it down the page slightly and out from behind the navbar.
Otherwise, your modal markup has to sit in your header and you need to give it a higher z-index than the z-index of the parent navbar.
This is too late to post the answer, however I've had a similar problem today with Modal popup and a navbar.
Used javascript to set z-index of the navbar to zero when the popup is displayed and vice versa.
Note: use whateverElement.style.zIndex = 0 instead of whateverElement.style.z-index = 0 as javascript handles - as subtraction operator.
I ran into this today and came up with an alternate solution that doesn't involve modifying the CSS. If you are using MVC, you can use a section tag and render the modal in the layout (anywhere in the body). This causes the default modal behavior to work and no longer hides it behind the nav bar.
On _layout.cshtml (inside the body tag):
<body>
<!--... OTHER Layout/header code...-->
#RenderSection("modals", required: false)
</body>
and in your view:
#section modals{
#Html.Partial("_MyModal")
}
Something similar would work in other languages and most importantly doesn't require modifying the CSS.
You need to adjust the z-index in your CSS. The z-index for your navigation is higher number than everything else. So to adjust it you need to add a z-index that is higher for your modal popup. the code would look like
For example z-index: 3;
To be able to do this you have to set a position to your popup.
For example position: absolute;
After setting the position you can also adjust the position even more with putting this code in to your CSS
top: 500px; left:500px;
This means that the container you put a absolute position on is moved 500 pixels from the top and 500 pixels from the left.
If you cannot understand what z-index is. I will provide a picture for you.
z-index axis example
I have a solution where I have to pop up a custom modal message box for my site. When the modal popup is shown, I have to set color and opacity to the complete page so that the modal popup sticks out.
I inject the below css class to the body tag to do this.
.fade_background
{
background-color: black;
opacity: 0.65;
}
It works for all elements in the page except for the elements which has a fixed position/absolute. I know that the fixed position element has the viewport as parent.
Any idea how can I target fixed position elements too.
Without viewing all elements, it is kind of hard to solve. But in basic lines, I would try to make certain that the elements are as absolute position with z-index below the overlay to highlight the modal window. It would be interesting that you publish the html and css, so I easily solve the issue.
Check to make sure that the fixed and absolute positions have the same class as the rest of them. Also try and check to see if there are any other css styles that are overwriting .fade_background
I have a set of bootstrap nav-tabs and inside these tabs are nice long information sections. Problem is that our team does not want to have all this information on such a long tab so we have made the tabs container element have an overflow: scroll property. This works great but now we are stuck with an impossibly long inline scroll section and it would take a good 30-40 mouse scrolls to get to the bottom. This will lose us site traffic.
I know that the definition of being a fixed position is being fixed relative to the browser window but I am in need of a way to use bootstrap scrollspy nav-list menu inside of the parent div and not have it able to transverse outside of that div. So we need it the same way that the class="fixed-to-top" attribute works so that is a functionable nav menu but no matter what we try it seems that the fixed positioning always reverts back to being relative to the broswer.
Is it possible to do what we are trying to do?
The code below is not a complete implementation, but I hope it gives you an idea of how it could be done. I.e. change the position property if the fixed div goes outside of its parent/container.
var $nlm = $('#navListMenu');
$(window).bind('scroll', function(){
if($nlm.offset().top < $nlm.parent().offset().top)
$nlm.css({ position:'absolute', top:0 });
else
$nlm.css({ position:'fixed'});
}
Here is my html work. http://jsfiddle.net/awaises/remqf/4/
I want to push the fixed div box to bottom of the screen. But it is overlapping on the left navigation and last items of the navigation getting hide behind the green box. Can we fix the green box as per following design? But we have to make sure that green box must be at the bottom of the screen even window’s resolution is small or large.
Design layout URL
http://www.thewebmakerz.com/screen.jpg
Does this .left-col{ height:500px;} fix your problem?
See this fiddle.
Three key tips:
Put "left-footer" in a different parent then your menu content (called "left-col-top").
"left-col-top" should be transparent, "position:fixed", with "z-index:1" and a min-height that is taller than your menu.
"left-footer" should be "position:absolute."
Looking at screen 1.1, if there is 11th list in yellow box, it will definitely go behind green box. (Also consider toolbars / menu bars in browsers). You may have to use something like "More Links >" in case height of screen is less.
Screen 1.2 and onwards:
If jQuery is an option, you can use scrollTop function.
Initially, let the green-box be fixed with position:fixed and some margin negative from bottom.
Then, when user scrolls to a particular amount (as seen in screen 1.2) try following jQuery code:
var yellowBoxHeight = $("div.yellow-box").height();
$document.scroll(function() {
if ($document.scrollTop() >= yellowBoxHeight - 100) {
// If user has scrolled some amount, eg. 100 pixels of yellow box is still visible
// make the green box animate & let it come upwards
} else {
// put the green-box back with some negative margin into the bottom
}
});
I'm trying to add a sidebar to my page. The main body container on the page has a box-shadow, so I want the sidebar to appear as though it's coming out from underneath the container so the shadow will be on top of it. I made my sidebar div a direct child of the body container (which has position: relative), and set it's position to absolute, then positioned it using the top and right position values. I got it in the right place, then applied a negative z-index so that it would be under the body. The problem is, this is making any links that I put in the sidebar unclickable in all but IE9. I don't know how else I can accomplish this without knocking out the links. Any ideas?
I would post a link to a page showing an example, but I'm actively making changes to it, so by the time you clicked it you probably wouldn't see what I'm going for. I'll try to explain better.
The body container is 720px wide and has an auto margin so that it appears centered in the page. It is positioned relative.
The sidebar is a direct child (the first child) of the body container. It has a fixed width, position absolute, padding, etc. and has a top and right position applied, along with a z-index of -100.
Here's a link:
http://reachchallenges.infectionist.com
You can remove the negative z-index and give an inner shadow to the sidebar that is the same as the outer shadow of the .body element.
You´d have to try it to see how it affects the border of the sidebar.
I don't fully understand what effect is desired but maybe this barebones fiddle can give some hints as for how to approach problems of such kind.
jsfiddle
The way to get links to work is to toggle z-index back to a positive number. Your CSS will look like:
.z-index1{
z-index: 1 !important;
}
and your JS should be:
$("#div-on-top").click(function(){
$("#div-on-bottom").toggleClass("margin");
$("#div-on-bottom").toggleClass("z-index1");
});
Clicking on #div-on-top will move it out of the way revealing #div-on-bottom and it will also bring #div-on-bottom to the top, making links clickable.
I also applied shadow to the #div-on-top and it looked ok (to me; see jsfiddle).