Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    getting a hyperlink to call JQuery event before going to URL

    Hello everybody,

    I'm not sure if this can be done. I need to have a hyperlink in my html page call a Jquery event to happen when clicked ( slide something) and then when that is complete, go to a url. *The thing is that I need the hyperlink/url to be in the html because of SEO reasons.

    I was thinking maybe something like in the JS file, write a code that looks for a click on a hyperlink with a specific url in it and if so, execute the animation.

    so if a visitor click on the hyperlink in the html page lets say to go to page2.html, the js sees that a link with page2.html was clicked and then executes the animation, then goes to the url.

    now, the hyperlink/url is still in the html button as well as the js file ( better for seo )

    Can this be done? if so, perhaps somebody can show me some code for that.



    Thanks
    Last edited by gribbs100; 01-20-2011 at 01:43 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You could do this by running an animation and then loading the new page as a callback. Something like:

    Code:
    <a href="http://www.google.com" class="link">Link</a>
    
    
    $('.link').click(function(){
        $(this).animate({marginLeft:'+=50'},function(){
    		document.location = $(this).attr('href');
    	});
    	return false;
    })

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thank you very much. I will try this out. I appreciate the help.

  • #4
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    I tried what you said but it did not work. When the link was clicked, it went directly to the url and skipped the animation, which should have happened first.

    This is my code:

    Link:

    Code:
    <span class="about"><a href="about.html">about us</a></span>

    Jquery:

    Code:
    $('.about').click(function(){
        $('#index_main').animate({width:'toggle'},450,function() {
    		document.location = $(this).attr('href');
    	});
    	return false;
    })

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Your code works for me without alteration, with the exception that as amended, $(this).attr('href') is undefined - since as you've changed it $(this) refers to #index_main - so it throws an error page.

    Try making your jQuery:

    Code:
    $('.about a').click(function(){
    	var newLocation = $(this).attr('href');
    	$('#index_main').animate({width:'toggle'},450,function() {
    		document.location = newLocation;
    	});
    	return false;
    })
    If this still just immediately goes to your target page without the animation, that suggests the javascript isn't running at all - do you have jQuery loaded correctly?

    If this still doesn't help, can you give a link to your page?

  • Users who have thanked SB65 for this post:

    gribbs100 (01-21-2011)

  • #6
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    thank you for that help. Actually, it still is not working for me. My jQuery is definitely installed and current build. All of the the other functions work.

    The div #index_main is holding all of the site content ( except footer and background image).

    On page load, a few events happen, then #index_main slides in from the left. the buttons will be contained inside of it. When you click the link, I want #index_main to slide back out to the left...then go to the url.

    Below is my HTML and JQUERY. If you need the CSS too, let me know:


    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>-</title>
    
    <link href="includes/css.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="includes/jquery-1.4.4.js"></script>
    
    <script type="text/javascript" src="includes/myscript.js"></script>
    
    </head>
    
    <body>
    
    <div id="preloader"></div>
    
    <div id="blackfill"></div> 
    
    <div id="wrapper">
    
    <div id="index_main">
    
    <div id="sitename">my website name</div>
    
    <div id="subheading">official launch <span class="green">february 2011</span></div>
    
    <div id="description">DESCRIPTION</div>
    
    <a href="about.html" class="about">ABOUT US</a></div>
    
    <div class="push"></div>
    
    <div id="grid"></div> 
    
    </div>
    
    <div class="footer">COPYRIGHT © 2011 URL - ALL RIGHTS RESERVED | <a href="#">TERMS</a> | <a href="#">PRIVACY</a> </div> 
    
    </body>
    
    </html>
    myscript.js
    Code:
    $(window).load(function() {
    $('#preloader').fadeOut('slow', function() { $(this).remove();});
    $('#wrapper').fadeIn(800,function(){
    $('#blackfill').animate({height:'toggle'},400,function(){
    $('#grid').animate({height:'toggle'},350,function() {
    $('#index_main').delay(200).animate({width:'toggle'},450,function() {
    $('#sitename').delay(200).fadeIn(800)
    $('#subheading').fadeIn(800)
    $('#description').delay(200).fadeIn(800)
    $('.footer').delay(200).fadeIn(800)
    });			   
    });	
    });			   
    });
    });
    $('.about a').click(function(){
    	var newLocation = $(this).attr('href');
    	$('#index_main').animate({width:'toggle'},450,function() {
    		document.location = newLocation;
    	});
    	return false;
    })
    Last edited by gribbs100; 01-20-2011 at 11:02 PM.

  • #7
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    here is the css if it helps

    Code:
    html, body {
    	height: 100%;
    	margin:0;
    	background-image: url(../images/background.jpg);
    	background-repeat: no-repeat;
    	background-position: center center;
    	}
    	
        #preloader {
    	position: fixed;
    	z-index: 999;
    	width: 100%;
    	height: 100%;
    	background-color: #000;
    	background-image: url(../images/cycle.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFF;
    	text-align: center;
            } 
    	
        #grid {
    	background-image: url(../images/squares.png);
    	background-repeat: repeat;
    	height: 100%;
    	width: 100%;
    	display: none;
    	position: fixed;
    	z-index: 1;
    	display: none;
    	}
    	
        #blackfill {
    	background-color: #000;
    	height: 100%;
    	width: 100%;
    	position: fixed;
    	z-index: 3;
    	}
    
        #wrapper {
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin-top: 0;
    	margin-left: auto;
    	margin-right: auto;
    	margin-bottom: -34px;
    	background-repeat: no-repeat;
    	background-position: center center;
    	display: none;
    	}
    
        #index_main {
    	height: 260px;
    	width: 876px;
    	background-repeat: repeat;
    	position: absolute;
    	top: 44%;
    	margin-top: -123px; /*set to a negative number 1/2 of your height*/
    	z-index: 3;
    	display: none;
    	border-width: 6px;
    	border-style: solid;
    	border-color: #000;
    	border-left: none;
    	display: none;
    	background-image: url(../images/black.png);
    	padding-right: 30px;
    	}
    
        .footer, .push {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9px;
    	
    	color: #FFF;
    	text-align: center;
    	height: 32px;
    	position: relative;
    	z-index: 2;
    	display: none;
    	line-height: 32px;
    	
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #111;
    	background-image: url(../images/black.png);
    	background-repeat: repeat;	
    	}
    	
        a:link {
    	color: #FFF;
    	text-decoration: underline
            }
    
        a:visited {
    	color: #FFF;
    	text-decoration: underline
            }
    
        a:active {
    	color: #FFF;
    	text-decoration: underline
            }
    
        a:hover {
    	color: #333;
    	text-decoration: underline
            }
    
       .green {
    	color: #0f0; 
            }
    
    	.centering {
    	text-align: center;
            }
    
        #sitename {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 25px;
    	color: #FFF;
    	height: 25px;
    	width: 100%;
    	padding-top: 15px;
    	letter-spacing: -1px;
    	padding-left: 15px;
    	display: none;
    	}
    
        #subheading {
    	font-size: 15px;
    	color: #FFF;
    	height: 15px;
    	width: 100%;
    	padding-top: 10px;
    	padding-left: 15px;
    	font-family: Arial, Helvetica, sans-serif;
    	display: none;
            }
    
        #description {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFF;
    	text-align: justify;
    	display: none;
    	height: 240px;
    	width: 100%;
    	padding-top: 10px;
    	padding-left: 15px;
    	}
    
        .about {
    	font-family: Arial, Helvetica, sans-serif;
            }

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Right, your click event is not included within your load event. Also, you have changed your html from the last post so the about class is now on the anchor element, so you now need:

    Code:
    $(window).load(function() {
    $('#preloader').fadeOut('slow', function() { $(this).remove();});
    $('#wrapper').fadeIn(800,function(){
    	$('#blackfill').animate({height:'toggle'},400,function(){
    		$('#grid').animate({height:'toggle'},350,function() {
    			$('#index_main').delay(200).animate({width:'toggle'},450,function() {
    				$('#sitename').delay(200).fadeIn(800)
    				$('#subheading').fadeIn(800)
    				$('#description').delay(200).fadeIn(800)
    				$('.footer').delay(200).fadeIn(800)
    			});			   
    		});	
    	});			   
    });//need to move one closing bracket from here...
    
    $('.about').click(function(){//change the selector from .about a to .about to reflect your changed html
    alert('click');
    	var newLocation = $(this).attr('href');
    	$('#index_main').animate({width:'toggle'},450,function() {
    		document.location = newLocation;
    	});
    	return false;
    })
    
    });to here

  • Users who have thanked SB65 for this post:

    gribbs100 (01-21-2011)

  • #9
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thank you very much! It works perfectly now!

    Yeah, Im learning the language so it has been a lot of trial and error for me but I am picking it up, thanks to your help.

    There is 1 think that I cant seem to figure out and it may be easy. I have been trying to figure out a way to make the footer slide up from the bottom of the screen into its position.

    when the page loads, you see all of the effects I have going. the last thing I wanted is to have the footer slide up from bottom 9 instead of fading in, but I cant seem to find the easiest approach.

    other than that issue, everything else is perfect.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I think this is a bit messy because of your sticky footer. Here's an approach - leave the footer as it is now to avoid messing with the sticky footer, but position the footer content within another absolutely positioned div at the bottom of footer, and animate that to slide it up. Done alone this results in a sidebar appearing and disappearing when the slide's completed - so to stop this set the overflow on .footer to hidden.

    Code:
        .footer, .push {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9px;
    	overflow:hidden;
    	color: #FFF;
    	text-align: center;
    	height: 32px;
    	position: relative;
    	z-index: 2;
    	line-height: 32px;
    	}
    	
    	.footer_inner{
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #111;
    	background-image: url(../images/black.png);
    	background-repeat: repeat;
    	background-color:red;
    	position:absolute;
    	top:100%;
    	width:100%
    	}
    with:

    Code:
    $(window).load(function() {
    $('#preloader').fadeOut('slow', function() { $(this).remove();});
    $('#wrapper').fadeIn(800,function(){
    	$('#blackfill').animate({height:'toggle'},400,function(){
    		$('#grid').animate({height:'toggle'},350,function() {
    			$('#index_main').delay(200).animate({width:'toggle'},450,function() {
    				$('#sitename').delay(200).fadeIn(800)
    				$('#subheading').fadeIn(800)
    				$('#description').delay(200).fadeIn(800)
    				$('.footer_inner').delay(200).animate({top:0},800)
    			});			   
    		});	
    	});			   
    });
    Seems to work OK.
    Last edited by SB65; 01-21-2011 at 07:25 PM.

  • Users who have thanked SB65 for this post:

    gribbs100 (01-21-2011)

  • #11
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thanks so much! that is great. I appreciate your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •