Basically I have a fixed header with a navigation in it that is always attached to the top of the window. Then I have another fixed element which is a Pagination but its only attaches its self to the top of window when its is scrolled to!
This pagination has anchor links that link to different sections on the page! However when you click on the links it covered the content which both fixed floating elements.
Here is the example: http://www.chudz.co.uk/test/
If you scroll down you will see the pagination attach itself to the header navigation! Then if you click on "A" in the pagination you will see what happens! The content gets covered! (A is the only link that works atm sorry).
Anyone know of a solution I could use?
Thanks
Here is the JavaScript work around for this problem.
First, change the name attribute to id attribute in the head links like this.
<h2><a id="a">Authors - A</a></h2>
Then add this script into your bottom script.
$(document).ready(function(){
$("#pagination a").click(function(event){
event.preventDefault();
var o = $( $(this).attr("href") ).offset();
var sT = o.top - 151; // 151 is the header height + navigation height
window.scrollTo(0,sT);
});
});
Your fixed pagination is not taking up any space in the dom.
You should use 'id' instead of 'name', then add a class to the anchor, position it absolutely and move it upwards with a negative margin (the same as the height of the pagination). This will ensure that the anchor starts below the pagination.
Related
I am a beginner in javascript and can't quite grasp what I need to change to make this work.
This is the link.
I have a container with a collapsable fixed navigation. You should be able to click on each of the nav items and scroll to the chapter. The thing is: it only works coming from the top or 'Chapter 1'.
When I click on a nav chapter twice it goes up and down and doesn't just simply go to its anchor.
This is the javascript that I found when I had it set up without a fixed navigation — what to change for it to work the way I want?:
function scrollNav() {
$('.nav a').click(function(){
//Toggle Class
$(".active").removeClass("active");
$(this).closest('li').addClass("active");
var theClass = $(this).attr("class");
$('.'+theClass).parent('li').addClass('active');
//Animate
$('#container').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 180
}, 400);
return false;
});
$('.scrollTop a').scrollTop();
}
scrollNav();
Thanks a lot!
See this updated fiddle. I added jquery library, and a console for debugging.
There were two main problems I spotted:
First, use .position() instead of .offset() here. Offset is always relative to the document, while position is relative to the offset parent (which may or may not be the document). See this answer. Since you're interested in the position relative to the parent container, it's .position().top that you should use.
Once that's in place, it's easier to reason about the correct value of scrollTop. When you've scrolled past the target element, its position relative to the #container will be negative. If the chapterPosition is -300 and the current scrollTop is 1000, we want to scroll to 700.
Note, however, that this is because the #container div is fixed-position. In the fiddle above, I put in an alternate way to calculate scroll, if you didn't want sticky headers & so didn't need #container to be fixed.
I have created fiddle regarding the problem issue in link here
Header and footer are absolutely positioned and 100% width. The middle content consists of the dashboard table. Header consists of two images, which on clicked, will toggle the content.
When I click on slide-toggle-1, the content of headerbottombar is revealed.
But the middle content is hidden and overlapped.
How can I properly show content of middle content when the slide-button-1 and slide-button-2 is clicked.
I would like to thank for all suggestions and solutions. Solutions are acceptable either in css, jquery and javascript as long as feasible solutions are presented.
Why dont you try adding a class with margin-top to bring the div down as much as needed. Like this:
.top{
margin-top:100px;
}
Add this to you div with ".content" Like so:
<div class="content top">
Then just toggle it on the 2 clicks like:
$( ".content" ).toggleClass( "top" );
You can give additional styles, but this is the basic run down.
Update :
If you want a variable height header that's sticky to the top, you might have to use some javascript that dynamically adjusts the top margin of the content
var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';
Source
Old Answer :
There are many ways to achieve what you want. One is to change the position of header to relative (and remove the line breaks between header and content). If you use fixed or absolute position, the header will overlap with the body content. Whereas relative will push the content down as the header expands.
See this : https://jsfiddle.net/d0pyxdoj/3/
P.S. Header/Footer have position fixed in your code, not absolute
Please check the below example. Height identification using script we can inject the spacing.
Script:
function heightCalc(){
topHeight = $('.sticky-top').height();
$('.content').css({"margin-top": topHeight+"px"});
}
Example Fiddler : https://jsfiddle.net/scj4u0t5/1/
I'm trying to write a javascript script that dynamically anchors elements to the bottom of the page when necessary. Here's a sample my code:
thebox.style.right = (window.innerWidth - topleft.Left - abs.Left - thebox.offsetWidth)+'px'
thebox.style.left = ''
thebox.style.top = (topleft.Top - abs.Top)+'px'
thebox.style.bottom = ''
This code is called when I want to anchor the element to the top and right of the page. Other code is called for other anchor positions.
The problem is, it will only anchor to the right of the page if the element was originally anchored to the right of the page to begin with. When I dynamically anchor something to the left that was originally anchored to the right, it correctly anchors to the left. And when I anchor it back to the right, it correctly anchors to the right. But if it was never anchored to the right, it never anchors to the right no matter what I do.
What am I doing wrong?
Try using this Im not sure that this is the solution but it might be worth a try.
//anchoring left
thebox.style.left= '0';
thebox.style.right= 'auto';
//anchoring right
thebox.style.left= 'auto';
thebox.style.right= '0';
Hope it works
If I understand correctly, you don't need JavaScript to position the elements. If you add your elements at body level and absolute position them, you can achieve it with just CSS. Then to change the position of any element just assign the appropriate class in JS dynamically.
Demo: http://jsfiddle.net/elclanrs/x8CTY/
Is it possible to change the position of the scroll bar relative to a new hash tag?
Currently, the page scrolls to the top of the element that is targeted using #target, which is normal behaviour. Is there a way to move it so the page scrolls to, for example, 100px further down the page than the anchor tag (adding an extra 100px before the anchor tag)?
Not sure whether cunning placement of the anchor or javascript should be used. Not sure I'm really able to change the position of the anchor so im hoping for a javascript solution.
Thanks
You could combine the answer to this question: On - window.location.hash - Change?
With some extra logic:
$(function(){
var win = $(window); //cache your jq objects!
function fixScrollTop(){
win.scrollTop(win.scrollTop() + 100);
}
if(window.location.hash !== ""){
fixScrollTop();
}
win.bind('hashchange', fixScrollTop);
});
Oh, if you have control over the #anchor in the URL, you can (probably, depending on the browser compatibility you're shooting for) set it to the ID of any element with an ID to make the browser scroll to it.
I have a pagination system like this:
[content]
1 2 3 Next >
when you click on 1/2/3/next the [content] element gets replaced trough ajax.
the problem is that the screen focus moves up if the new height of the [content] is larger than the previous one.
can I force the screen to stay focused where where the pagination links are?
You need to find the position of the element and scroll to that position each time the height changes. Something like:
var p = $(".links").position();
$(window).scrollTop(p.top);
To make the page transparently appear to stay in the same place, you'll need to find out where the links are before you load in the new content.
var before = $(".links").offset().top;
Then after the new content is loaded, get the link's new height.
var after = $(".links").offset().top;
Then do the math to find out how much it's moved.
var difference = after - before
And update your window's scroll location accordingly
$(window).scrollTop( $(window).scrollTop() + difference )
You can probably fix this without jQuery or javascript... Just create a named anchor where you want the top of the page to be after the user clicks the navigation links, put the name of the anchor in the fragment identifier of the nav links, and don't cancel the event so the page navigates to the anchor.
<a name="contentTop"></a>
[content]
Next