JavaScript Forum

**gdscei** · 05:30 PM

Hello, i have the following webpage, but on whatever reason, when i click the button, it does not do anything. Code:

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>
    <title>ItsMyWebsite</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
function fader() 
{
 $("#logofade").html('<img src="images/logo.gif" alt="Logo" />');
 $("#logofade").fadeOut("slow", function(){
  window.location = "index2.html";
 });
}
</script>    
</head>
    <body>
    <p><input name="logofader" type="button" value="FadeIt" onclick="fader()" /></p>
    <p><span id="logofade"></span></p>
    </body>
    </html>

**wayfarer07** · 01-14-2010, 03:30 PM

Are you expecting the window.location to change AFTER the fade? If so, you should place it into the callback of the fadeOut, not just after it:

Code:

$("#logofade").fadeOut("slow",function(){window.location = "index2.html";});

**gdscei** · 01:24 PM

Quote:

Originally Posted by wayfarer07

Are you expecting the window.location to change AFTER the fade? If so, you should place it into the callback of the fadeOut, not just after it:

Code:

$("#logofade").fadeOut("slow",function(){window.location = "index2.html";});

That doesn't make it work.
I putted it online, http://testfade.gdscei.com , maybe you can figure it out...

I also putted it on Doctype , but that didn't work really...

**wayfarer07** · 01-15-2010, 04:38 PM

Well, that would be because jQuery is not being defined anywhere. jQuery support is not included with your browser, you need to include it manually from a script tag.

Code:

<script src="/path/to/jquery.js"></script>

At least this is true for the example you're giving. Your original question seems to have a path to jQuery.

**gdscei** · 05:31 PM

Quote:

Originally Posted by wayfarer07

Well, that would be because jQuery is not being defined anywhere. jQuery support is not included with your browser, you need to include it manually from a script tag.

Code:

<script src="/path/to/jquery.js"></script>

At least this is true for the example you're giving. Your original question seems to have a path to jQuery.

Yes, but that doesn't make it work either. (check my edited question)

**wayfarer07** · 01-15-2010, 05:35 PM

I didn't see the problem before, but now I do. You can't have a script that has a src attribute and also inline scripts:

HTML Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
function fader() 
{
 $("#logofade").html('<img src="http://www.webmaster-talk.com/images/logo.gif" alt="Logo" />');
 $("#logofade").fadeOut("slow", function(){
  window.location = "index2.html";
 });
}
</script>

It seems to me this should be allowed, but it is not. You'll need to put them in two separate SCRIPT tags like this:

HTML Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
function fader() 
{
 $("#logofade").html('<img src="http://www.webmaster-talk.com/images/logo.gif" alt="Logo" />');
 $("#logofade").fadeOut("slow", function(){
  window.location = "index2.html";
 });
}
</script>

**gdscei** · 01-16-2010, 06:11 AM

Quote:

Originally Posted by wayfarer07

I didn't see the problem before, but now I do. You can't have a script that has a src attribute and also inline scripts:

HTML Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
function fader() 
{
 $("#logofade").html('<img src="http://www.webmaster-talk.com/images/logo.gif" alt="Logo" />');
 $("#logofade").fadeOut("slow", function(){
  window.location = "index2.html";
 });
}
</script>

It seems to me this should be allowed, but it is not. You'll need to put them in two separate SCRIPT tags like this:

HTML Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
function fader() 
{
 $("#logofade").html('<img src="http://www.webmaster-talk.com/images/logo.gif" alt="Logo" />');
 $("#logofade").fadeOut("slow", function(){
  window.location = "index2.html";
 });
}
</script>

Thank you! Works! Do you know how to get it slower? the fadeOut is still going quite fast.

**gdscei** · 01-16-2010, 06:15 AM

Quote:

Originally Posted by gdscei

Thank you! Works! Do you know how to get it slower? the fadeOut is still going quite fast.

nevermind, got that.