I'm building this site julebord.bedriftsdesign.no and implemented animated scroll on this page: http://julebord.bedriftsdesign.no/julebord.html
Now this is the problem. When I use an internal anchor link like (#myanchor) the animated scroll works fine. But if the link is formatted like this http://julebord.bedriftsdesign.no/julebord.html#myanchor It won't work.
I need both to work but am a bit at a loss on how. I'm guessing something has to be changed in the javascript i use right?
Would appreciate any input on this. Thanks
I think it won't work with your current script because the scroll is triggered by a click not a page load.
You could detect the URL hash on the page load and then manually trigger the click, which would then trigger the scroll.
You could do something like (this isn't tested in your page so it might need some tweaking)
if(window.location.hash) {
$('a[href="#'+window.location.hash.substr(1)+'"]').trigger('click');
}
Related
On medium.com they have a clickable link on an h3 element, however the browser seems to know the URL that it will take you to and shows it in the bottom left side of the screen.
When I inspect element I see that this link is only an h3 element. It has a name attribute, an id and a class on it. There is no element and there is no href.
I assume that they listen to the click event of this element and then redirect the user to the correct page, but what I don't understand is how google chrome knows that this is a link and even shows the url it will take you to.
Is this something the browser now supports? Is there a specific way of forcing the browser to show it?
Yes, there is a <a> element, just further up the line:
This would have been visible in your screenshot too, in the selector bar at the bottom:
(Link to the page, if anyone is interested.)
Yep, it can be done through a simple listener, eg in jQuery:
<h3 id="link1">Link1</h3>
And the codebehind:
$("#link1").click(function () {
window.location.href = "http://www.google.com";
});
Should work in any modern browser, but I'd say they'd all interpret it differently. I'm not sure we really need to know why it works, just that it does - you could get in to asking how anything works in a browser. Presumably they quickly parse all of the code as it is loaded so they know all of the possible events. Something like this might help.
But if not Siguza finde <a href>. I think chrom count dependecis and show redirect page or function. Status bar you can just turn off or on. Or change by "wrong" redirect like can you show "Im the best" take
test
show : localhost34567/Im the Best! ---> ok not perfect :D but you can play with it and have better results.
https://superuser.com/questions/239202/turn-off-the-link-hover-statusbar-in-google-chrome
I'm working on a new header for a website, and my header works perfectly on codepen. You can check it out at:
http://codepen.io/germangallo/pen/eNeKWG
As you may see, if you click on the menu button (categories) it slides a menu that I've done following the steps by callmenick here:
http://callmenick.com/post/slide-and-push-menus-with-css3-transitions
However, when I've tried to make it work at my site, everything is great, but the slider menu doesn't work. I'm new at JavaScript, so I really don't know if the problem is there, and I can't figure out any way to fix the problem.
My site is: http://www.pensarpoker.com/nuevo
It looks like you script is executing before the dom element is accessible on the page, try adding your slider script to the bottom of the page or wrapping it in a $( document ).ready() if your using jQuery.
I am using .scrollTo to achieve the single page navigation effect. Everything with the code seems to be functioning properly until I return back up the page. I see my navigation copied multiple times in each anchors corresponding div.
$(function(){
$("#navigation a").click(function(e){
event.preventDefault();
$('html,body').scrollTo(this.hash,this.hash);
});
});
The issue only seems to happen in chrome.
I have tested in safari and it works perfectly fine.
Firefox does not have the copying issue, but locates to the corresponding div without animation.
Here is the URL : http://cfitzgerald7.mydevryportfolio.com/weresoart/index.html
Any ideas would be very much appreciated! Thank you..
Screen: http://imgur.com/cP8Pn16
This is actually an issue with the number of javascript functions that you are running at once. If you run too many js functions simultaneously with multiple different listener events, it will sometimes skip a function or not complete.
So, you will notice when your image slider changes and you scroll, the "a" tag seems to replicate.
Optimize you javascript.
I'm having an issue with the mobile navigation when using Zurb Foundation framework. In my HTML document the back link is working just fine but when I put the HTML into my CMS (Concrete5) the back link just make the page jump to the top of the page. I'm not getting any JS errors or any leads to fix this issue. Has anyone else ran into this issue? I'm a bit lost at how to fix it.
You can try with a simple HTML button such as:
back
And the appropriate JS:
<script>
$('#history-go-back').click(function(event) {
event.preventDefault();
return history.back();
});
</script>
Should work.
I guess that in your case, the event which is normally attached to your button click is not triggered, so it's acting as a link and going on the top of the page. Maybe you may have missed some JS files in your HTML?
I've been looking at using a script I've found online (here) as a basis for a website I'm looking to create. It has an issue in Chrome in that the page wont scroll once a link is clicked, however if I resize the window just a tiny bit the page "repaints" - I think this is the right term - and all is well again.
Is there anyway to do a repaint like this? I don't mean refresh :)! Sorry if this seems a bit vauge, if you try this link in chrome, press one of the links in the header and you'll see the problem when trying to then scroll.
Initially I'm thinking there might be some javascript I can call at the end of switching pages that repaints the page.
Thanks
You could try doing something like this after the slide has completely transitioned to a new page:
Since you've commented that it didn't work as I originally suggested, here's a way to "encourage" Chrome to do the hide/display trick:
$(".slide.loaded.prev").css("display", "none");
setTimeout(function() {
$(".slide.loaded.prev").css("display","");
});
or you could try this:
var slide=$(".slide.loaded.prev");
slide.css("display", "none").height(); // just get the height to trigger a relayout.
slide.css("display", "");
The above code simply finds the previously visible slide, sets the CSS property display to none (hiding it completely) and then removes it. This trick worked when using the Chrome developer tools.
It appears that the scroll bar is for the previous "slide" in Chrome. By toggling the display of the slide briefly, the scrollbar is hidden under the now current "slide's" content.