...

View Full Version : getting a hyperlink to call JQuery event before going to URL



gribbs100
01-20-2011, 01:36 AM
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

SB65
01-20-2011, 07:35 AM
You could do this by running an animation and then loading the new page as a callback. Something like:



<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;
})

gribbs100
01-20-2011, 12:44 PM
Thank you very much. I will try this out. I appreciate the help.

gribbs100
01-20-2011, 01:05 PM
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:



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



Jquery:



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

SB65
01-20-2011, 06:14 PM
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:


$('.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?

gribbs100
01-20-2011, 09:43 PM
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



<!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


$(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;
})

gribbs100
01-20-2011, 10:06 PM
here is the css if it helps



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;
}

SB65
01-21-2011, 07:46 AM
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:


$(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

gribbs100
01-21-2011, 05:31 PM
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.

SB65
01-21-2011, 07:22 PM
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.


.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:


$(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.

gribbs100
01-21-2011, 11:28 PM
Thanks so much! that is great. I appreciate your help.:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum