I'm having an issue where when I scroll through my homepage with the anchor tag sections it does not line up properly. For instance, if I click "showcase" it will go to the section but not highlight the navigation hover like it should. However, if I scroll slightly down it will then hover.
I read online in the past this was resolved by adding padding into the css for the section tag. I couldn't seem to get it to work.
Any help is appreciated, thank you.
BQ: How do I change the active section the page opens to? I tried changing the "active" tag, but it still uses the same section.
I'm using this template: http://www.blacktie.co/demo/pratt/#home
you have two identical ID's on your page , eg #showcase. Other then that you probably need to set an offset in the jquery scrollto function.
Related
The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
I've already modified the overflow: hidden, to be set to overflow: auto, and this works quite well in the .header-container, although it seems that although this fixes the problem, there is still the issue when this is set that the images (such as the iPad at the top of the page, then overlaps the next section below it).
Thoughts on how to make sure either the image extends the container so it doesn't run into the next one, or how to fix this once and for all?
Just a thought, could this possibly be the Javascript, as I noticed that the menu bar when scrolled down doesn't dissapear until hovering over an active/Javascript link in the nav bar.
Your support is greatly appreciated :)
If you put a console.log in your call:
if ($(window).scrollTop() > 500 && getScreenWidth > 767) console.log("true")
else console.log("false")
Do you see in your console log the value changing when you scroll down at your homepage? And is this the same output as on your bookkeeping-plans page?
and does it also appear if you remove the slideup and slidetoggle functions?
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
This is what I can think of that is conflicting your code based on what I see on your website
I set up a single page layout so I'm using anchor tags as part of my site navigation. All of them are working except the portfolio tag. When I select portfolio from my menu, the screen jumps down to the proper section and then immediately moves to the section above.
I'm not sure if there is some interference from any of my other code, or if the animation of the "solutions" pictures/text is creating the issue but I can't seem to solve it on my own.
Something to note is that the link does work, but only when you already have portfolio selected (ex. /#portfolio)
My site is http://muvltd.com
Any idea?
There is no problem with your anchors. The problem is that the orange circles in the solutions section are not displayed until you scroll down, so they are not yet rendered into the page. This gives the portfolio section a higher absolute position in your page. Chrome jumps to your section which first works fine. But when the solutions section is loaded it pushes down the portfolio.
If you know the exact height of the solutions section or the images contained in the section, I suggest you assign this height to the respective elements. This way, all dimensions are set correctly before the content is actually loaded / initialized.
I found a solution, in my original code, the anchor tag was outside of the paragraph tags:
<p style="text-align: center;padding-top: 55px;">[maxbutton id="5"]</p><a id="portfolio"></a>
Putting them inside the tags solved the problem:
<p style="text-align: center;padding-top: 55px;">[maxbutton id="5"]<br><a id="portfolio"></a></p>
I can't tell you why it would make a difference but it did, thanks for the help!
I have a fixed menu bar at the top of my site. I have a page that has inline linking by adding a hash tag to the URL making it jump to that particular element. The problem is the element it jumps to is hidden being this fixed menu bar. Is there a way to move the jump down a bit? Here is an example:
Example
Sadly you cannot do that via html, you'd need some JS, or even CSS, depending on your code.
Can you post a sample on jsfiddle.net ?
As a workaround, add another (hidden) element below it and simply link to that one instead:
click me
<!-- further down the page is the content -->
<div id="#element1">Here is what users will be reading!</div>
<div id="#element1-target"
style="visibility:hidden;{make this lower down below the actual text}"></div>
My only question though, is if your header bar is blocking your text that the page 'jumps' to, wouldn't you want the page to link to higher than the target?
Given your question is vague and I don't think your example shows what your problem is, this should do what (i think) you're trying to do.
:)
Two pages, one with <a href='some_url#some_name'>, and second, on some_url, with <a name='some_name'>.
So after clicking on URL1, page 2 loads, and URL2 is on the top of the the page.
Now about the problem: this URL2 hidden under twitter-bootstrap's top menu, which have fixed position.
However, when I'm checking named links on Twitter Bootstrap's site, no such problem appears.
I'm tried both Firefox and Opera, it seems no browser dependency.
However, when I'm checking named links on Twitter Bootstrap's site, no such problem appears.
I guess you are referring to the link in the navigation span on the left of each page. If you look at the css, specifically the docs.css file, which contains the style rules for the documentation website, you'll find out that every section has a padding and that's why they don't appear below the navbar.
As you can see the section does start hidden by the navbar, but the padding moves the content down so it became visible.
Hope this helps.
I am working on a webpage with navigation at the top. I was wondering how to make an area of an html page clickable. That way one could click not just on the text in the navigation bar but a general area around the text in order to navigate from page to page. When I keep trying to do it, it generally messes up the divs I already have on the page.
Any help would be appreciated!
Thanks!
If I understood your problem propertly:
Try setup display: block; for your menu text links, + add them padding. Also possible to use width and height
So active link will be not only the text, but also the area around it.
There are only a small set of HTML elements that you can place inside an <a>, and I am guessing none of them is doing the job for you. For example, a div cannot be placed inside an <a>.
In that case, you can use javascript or jQuery to listen for a click on a certain defined area, say a div, on the page and respond to it by changing the address (say by changing window.location.href). This will have the same effect that you are looking for.
Please note though that usability and design ethics demand that a user of your website knows that a certain area is a link and will take you somewhere else before they click it.
I'm assuming by area you mean an entire div? We can use javascript (jQuery) to do this:
$("#mydiv").click(function() {
window.location = 'http://www.google.com'; // redirect here on click
});
<div id="mydiv">
<!-- this area we can click -->
</div>