On new page, scrolling down to a specific div automatically - javascript

Quite simple,
I would like on click, to arrive to a specific section on a new page.
Usually www.mydomain.com/page1/#section should work, #section being the ID of the section.
However, the menu I'm using is breaking this. Si I'm trying to see if it's possible to do this by Jquery, using Hash. ( When url have this hash example www.myd0main.com/page/#contact - do this)
SO far I tried the following:
<script>
jQuery(document).ready(function() {
if (window.location.hash.split('-')[0] == '#contact') {
$('#contact').addClass('hashed');
}
});
</script>
Withotu any sucess.
Do you guys have any turnaround / idea to make this work ?
It will be lovely !
Thank you !

Perhaps
if (window.location.hash == '#contact') {
// Scroll to #contact
$(document).scrollTop($("#contact").offset().top);
}

Related

Javascript Changing Css Elements

I was following this tutorial, trying to get my sites navigation bar to stick to the top of the page when it reaches the top of the page. I couldn't get it to work with the way they had it set up, so I tried to set it up in a different way and still can't get it to work. I put this code at the end of my body tag to try and make this work (the navigation bar has a css id of "navbar"):
jQuery
if ($document).scrolltop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("navbar").css("position","static");
}
Is there something I am missing?
Thanks in advance,
Bradon
Edit:
I want to thank everyone for the quick replies, and apologize as I am both new to javascript and stackoverflow. I have tried to implement some of the solutions suggested and here is what I have now:
<script type="text/javascript">
var navbar = $("#navbar");
navbar.on("scroll", function(e){
if (navbar.scrollTop() <= 0){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
}
});
</script>
I still can't get it to work properly.
Edit 2:
I would like to thank everybody for their help, I couldn't have figured it out without you guys. Here is the code I used if anybody should ever need it:
<script type="text/javascript">
var navbar = jQuery("#navbar");
jQuery(document).on("scroll", function(e){
if (jQuery(document).scrollTop() > 280){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
navbar.css("top", "auto");
}
});
</script>
this script assumes the thing you want stuck to the top has a class of "navbar". My problem was that wordpress wasn't accepting $ in jquery so I replaced it with jQuery. Thank-you once again everybody!
There is a bigger issue in that your scrolltop check is happening only once, while the page is loading. In the original tutorial, the code that checks the scrolltop is set to execute everytime a scroll event occurs:
wrap = $('#wrap');
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});
The "wrap.on('scroll')" part is very critical because this will cause the "scrolltop" value check to be triggered whenever the div is scrolled.
I believe the syntax is wrong. Missing parenthesis on document.scrollTop and also missing the # sign on navbar.
<script type="text/javascript">
if ( $(document).scrollTop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("#navbar").css("position","static");
}
</script>

Check for empty href atribute in JQuery

I have an idea I'd like to implement to a site I'm working on. I've got an idea of how it would work but I'm not entirely sure how to piece the bits together.
So!! I'd like to check the domain and generate an alert box if it's necessary to do so.
Say we have 2 domains:
test.domain.com & domain.com
IF we're on test.domain.com and there's no content inside the href (Missing Link), I'd like an alert box to pop up saying "MISSING LINK". And if there is content inside the href, just ignore it (Not Missing Link).
Missing Link
Not Missing Link
Then, if we were on domain.com I'd like the jQuery to still be present in the code, but it to do nothing if a Missing Link was clicked. As it will just redirect to the home page - Not the best journey, but much better than an intrusive popup box.
This way I could use a tiny bit of code to check missing links at the test stage, but not have to remove it every time it gets sent to the actual domain.
If any of this doesn't make sense, please ask!
Thanks a million, really appreciate the help!
$(document).on("click", 'a[href=""]', function(evt) {
if(window.location.hostname.indexOf("test")!==-1) {
alert("broken");
} else {
window.location.href = "foo.html";
}
evt.preventDefault();
});
Personally if I were making a page on test to determine if a link is broken, I would do something so they would stand out when the page is open. Instead of clicking to find out.
if(window.location.hostname.indexOf("test")!==-1) {
$('a[href=""]').css("background-color", "red");
}
Here is some code to get you started. It feels to me as though whatever it is you’re trying, we’re taking completely the wrong approach.
if (location.host === 'test.domain.com' && !$('a[href=""]').length) {
alert('MISSING LINK');
}
Hows this?
$(document).ready(function() {
$('a').click(function(e) {
var a = $(this);
e.preventDefault();
if($.trim(a.prop('href')) == "")
{
alert("No link")
}
else
{
window.location = $.trim(a.prop('href'));
}
});
});

Going to a page anchor after load adding transition

I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()

Showing/hiding list items works in isolation, but not in site code

I have a list of messages (a ul with a few li's) for which I'd like to show/hide as a fade-in/out marquee.
Easy enough:
function InOut(elem) {
elem.delay(100).fadeIn(1200).delay(10000).fadeOut(1200,
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function() {
$('#myul li').hide();
InOut($('#myul li:first'));
});
This works in isolation the way I'd like (I've tweaked it in JSFiddle, and there was CSS, etc., involved).
However, when I put the code in my live site, it fails. I placed the code just before the closing HEAD tag in case there was an "order" issue.
My suspicion is that the $(function()... is not taking effect.
The implementation is an IP Board site and the code is placed in one of the template files for the site. Those template files are loaded with PHP calls, custom CSS for things, etc. So, debugging is a bit of a nightmare.
I do not see any exceptions being thrown.
As I'm not familiar enough with javascript in this instance, I'm not sure what needs to be done here. And I realize this might be tough without being able to share the page code (then again, could be really simple).
Any help is appreciated.
Thanks!
/s/ Jon C. Munson II
OK, I got this to work by these changes (some perhaps unnecessary):
(function($){
var InOut = function (elem) {
elem.delay(100).fadeIn(1200).delay(10000).fadeOut(1200,
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function(){
$('#ayeups li').hide();
InOut($('#ayeups li:first'));
});
})(jQuery);
Thanks for everyone's looking, etc. And thanks to #ianpgall for attempting to help. :D

Prevent/stop auto anchor link from occurring

I need to prevent the automatic scroll-to behavior in the browser when using link.html#idX and <div id="idX"/>.
The problem I am trying to solve is where I'm trying to do a custom scroll-to functionality on page load by detecting the anchor in the url, but so far have not been able to prevent the automatic scrolling functionality (specifically in Firefox).
Any ideas? I have tried preventDefault() on the $(window).load() handler, which did not seem to work.
Let me reiterate this is for links that are not clicked within the page that scrolls; it is for links that scroll on page load. Think of clicking on a link from another website with an #anchor in the link. What prevents that autoscroll to the id?
Everyone understand I'm not looking for a workaround; I need to know if (and how) it's possible to prevent autoscrolling to #anchors on page load.
NOTE
This isn't really an answer to the question, just a simple race-condition-style kluge.
Use jQuery's scrollTo plugin to scroll back to the top of the page, then reanimate the scroll using something custom. If the browser/computer is quick enough, there's no "flash" on the page.
I feel dirty just suggesting this...
$(document).ready(function(){
// fix the url#id scrollto "effect" (that can't be
// aborted apparently in FF), by scrolling back
// to the top of the page.
$.scrollTo('body',0);
otherAnimateStuffHappensNow();
});
Credit goes to wombleton for pointing it out. Thanks!
This seems the only option I can see with ids:
$(document).ready(function() {
$.scrollTo('0px');
});
It doesn't automatically scroll to classes.
So if you identify your divs with unique classes you will lose a bit of speed with looking up elements but gain the behaviour you're after.
(Thanks, by the way, for pointing out the scroll-to-id feature! Never knew it existed.)
EDIT:
I know this is an old thread but i found something without the need to scroll. Run this first before any other scripts. It puts an anchor before the first element on the page that prevents the scroll because it is on top of the page.
function getAnchor(sUrl)
{
if( typeof sUrl == 'string' )
{
var i = sUrl.indexOf( '#' );
if( i >= 0 )
{ return sUrl.substr( i+1 ).replace(/ /g, ''); }
}
return '';
};
var s = getAnchor(window.location.href);
if( s.length > 0 )
{ $('<a name="'+s+'"/>').insertBefore($('body').first()); }
Cheers!
Erwin Haantjes
Scroll first to top (fast, no effects pls), and then call your scroll function. (I know its not so pretty)
or just use a prefix
This worked well for me:
1- put this on your css file
a[name] { position: absolute; top: 0px }
2- put this on your document.ready bind right before you start animating (if you're animating at all)
$("a[name]").css("position","relative");
Might need tweaking depending on your stylesheet/code but you get the idea.
Credit to: http://cssbeauty.com/skillshare/discussion/1882/disable-anchor-jump/

Categories

Resources