2 Javascripts not working with each other... (smooth scrolling & fade body) - javascript

Dear stackoverflowers,
I have two javascript snippets that don't appear to be working properly together.
The first one is there to fade out the body on an click event in the navigation, then redirect to a different page. But this appears to be working only after I clicked a link that triggers 'JavaScript-2'.
Here's the code for the first one:
// JavaScript-1
<script type="text/javascript">
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
</script>
'JavaScript-2' is the second one, that works together with 'jquery.easing.1.3.js' and produces nice smooth scrolling to an anchor. The scrolling always works fine and it fires in all situations.
I don't know why, but it looks like, that the smooth scrolling javascript causes the other javascript to fail.
I'm really looking forward to an answer to this little mystery.
Here's the code for the second one:
// JavaScript-2
<script type="text/javascript">
$(function() {
$('ul.navscroll a, #test a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
</script>

Try to update your Javascript-1 code like this:
// JavaScript-1
<script type="text/javascript">
$(function() { // this fires the jQuery after load
var linkLocation = false; // define the linkLocation var
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
There are 2 main things corrected here:
$(function() {...}); will fire the jQuery-Events after the DOM is completely loaded
var linkLocation must be defined before you access on them in the redirectPage()-Method
For removing the error in Javascript-2 (where it breaks the Javascript) update them like this:
// JavaScript-2
<script type="text/javascript">
$(function() {
$('ul.navscroll a, #test a').bind('click',function(event){
target = $(this).attr('href'); // find the top of the target
offset = $(target).offset(); // this returns an object {top: y,left: x}
$('html, body').stop().animate({
scrollTop: offset.top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
</script>
Now if you click on a link with href='#test' you will scroll to the element with the ID test for example your <footer id='test'>.

Related

Smooth scroll to specific Div

I have a link and trying to make it smooth scroll, it works but it makes all links active I just want it for this specific link no others
<div id="shelf">content</div>
$(document).ready(function () {
// Add smooth scrolling to all links
$("a").on('click', function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Then be more specific in your jQuery selectors
Change:
And
$("a").on('click', function (event) {
For:
And
$("a#myspecificlink").on('click', function (event) {
Change
$("a").on("click", function(){ ... });
To
$("a#toshelf").on("click", function(){ ... });
And make this your HTML:
Click me!
Instead of using tag selector, use id selector as below:
<a id="a1" href="#shelf"></a>
<div id="shelf">content</div>
$(document).ready(function ()
{
$("#a1").on('click', function (event)
{
//Your code here
});
});

I need to modify my jquery scroll-to-anchor code so it will scroll to an achnor on a new page as well

I am new to jQuery I have a snippet of code that works great to smooth scroll to a page anchor. But I need to make this work from another page as well. Is there anything I can do to the code below?
Example: From pg 1, click on a link to an anchor half way down page 2. I wanted the browser to jump to the top of page 2 and then scroll down to the anchor. I cant figure out how to do that with this code.
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 2400,'easeInOutExpo');
event.preventDefault();
});
});
$(document).scroll(function(){
t = (100 - $(this).scrollTop())/100;
if(t<0)t=0;
$('.skyB').css({opacity: t})
})
</script>
Revised code does not seem to work either
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
var id = location.hash; // includes the leading #
$('ul.nav a[href$="'+id+'"]').click();
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 2400,'easeInOutExpo');
event.preventDefault();
});
});
$(document).scroll(function(){
t = (100 - $(this).scrollTop())/100;
if(t<0)t=0;
$('.skyB').css({opacity: t})
})
Extract the hash ID with location.hash and re-use your event handler.
$(function() {
var id = location.hash; // includes the leading #
$('ul.nav a[href$="'+id+'"]').click();
// continue as before

Prevent an auto reload caused by jquery scroll function

I'm using a simple piece of code inorder to have internal links scrolls to specific divs. It works they way I intended but it also reloads the page. The scroll works perfect, just that I need it to not reload the page. Also if this matters, Im using this inside a Wordpress theme I created.
HTML:
This may sound crazy, So hire me maybe?
<div id="hiremenow"></div>
SCRIPT:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
void(0);
});
});
});
Return a false value.
$('a[href^="#"]').on('click',function (e) {
//whatever...
return false;
});
This means "the click event has been handled, do not perform the standard action".

jquery scrolling won't scroll from exact location

I'm using the following jquery to make my links scroll to the next div. However, I've run into a problem. From the top of the page the script works fine. As soon as I click a link from another div (another link further down the page) the script only scrolls so far either up or down but not to the next specified div. How can I make the script scroll fully from the current location of where the link is located?
$(function() {
$('#nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
You have a error here:
scrollTop: $($anchor.attr('href')).offset().top
//------^^^^^^^---------------------------------this itself a selector
change to this and try with:
scrollTop: $anchor.attr('href').offset().top
or this one too:
$('#nav a').bind('click',function(event){
var $anchor = $(this).attr('href');
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
CHECKOUT IN FIDDLE
You're not calling the correct spot...
this should do the trick... Set the anchor point first.
$(function() {
$('#nav a').bind('click',function(event){
var $anchor = $(this).attr('href');
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
ok, so I've made you a JSFiddle, the js-code I rewrote to the code below, but you can have a have a look at the full thing here: http://jsfiddle.net/re7Xc/
$(function() {
$('a.scrolltonext').click(function(event){
event.preventDefault();
var parentblock = $(this).parent();
var nextblock = parentblock.next();
//nextblock.css('background-color','#00f');
if(nextblock.size()>0) {
$('html, body').stop().animate({
'scrollTop': nextblock.offset().top
}, 800);
}
});
});
the catch in this script though is that I put the links in the div itself, so it's not in a #nav somewhere. So you'd have to rewrite that part if you put the links in your #nav!
I put an if-statement in there as well, because I thought it'd be better if you check if there is a next-div first, before scrolling there.
Hope it makes some sense, and let me know if it works for you!
cheers

Smooth Scrolling links conflicting w/ fancybox, change href to class or id?

I'm using this for my scroll transition between a top and bottom div:
<script type="text/javascript">
$('a').on('click', function (event) {
event.preventDefault();//stop the browser from jumping to the anchor
var href = $(this).attr('href'),
oset = $(href).offset().top;
$('html, body').stop().animate({
scrollTop : oset
}, 1000, function () {
location.hash = href;
});
});
</script>
But it's conflicting with how I'm using fancybox as it's using 'href', I've tried defining the 'div ids' in place and creating a shared class (eg .smooth and called in both links) but it just broke. How can I use this specifing only two divs for it to apply to?
Question spawning from - https://stackoverflow.com/questions/8547378/fancybox-with-iframe-js-conflictions-with-my-site-wont-implement
Change this:
$('#menu a').on('click', function (event) {
event.preventDefault();//stop the browser from jumping to the anchor
var href = $(this).attr('href'),
oset = $(href).offset().top;
$('html, body').stop().animate({
scrollTop : oset
}, 1000, function () {
location.hash = href;
});
});
There is no point in scrolling when 'Gallery' is clicked and opens fancybox.

Categories

Resources