javascript - windows.location not working on click event

I am having a bit of an issue with a click event not firing properly. The click event I am refering to is the one at the bottom of the page attached to #sales. I used microsoft just to be sure that it wasn't the page I was trying to navigate to.Any help would be appreciated and the code is bellow.

// JavaScript Document

$(document).ready(function() {

$(".intro-no-js").css("visibility","hidden");
$(".intro-javascript").css("visibility","visible");

//defines how max should be animated
jQuery.fn.maxanimate = function () { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 

    var l = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        top: t,
        left: l-79.5
    }, 500);

    return this; 
} 


//defines how xim should be animated
jQuery.fn.ximanimate = function () { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 

    var r = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        top: t,
        left: r+78.5
    }, 500);

    return this; 
} 

//defines how top arrows should be animated
jQuery.fn.arrowsanimate = function () { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 
    var l = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        top: t-25,
        left: l
    }, 500);

    return this; 
} 

//defines how bottom section should be animated
jQuery.fn.animatebottom = function () { 
this.css("position","absolute"); 

    var b = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 
    var l = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        bottom: b-22,
        left: l
    }, 500);

    return this; 
}

//max starting co-ordinates
var maxl = $(window).width() - 157; 
var maxt =  ($(window).height() - $("#intro-max").outerHeight()) / 2; 

//xim starting co-ordinates
var ximr = $(window).width() - 159; 
var ximt = ($(window).height() - $("#intro-xim").outerHeight()) / 2; 

//arrows starting co-ordinates
var al = (($(window).width() -  $("#intro-xim").outerWidth()) / 2) + $(window).scrollLeft()+ 35; 
var at = 0; 

//bottom of logo starting co-ordinates
var bl = (($(window).width() -  $("#intro-xim").outerWidth()) / 2) + $(window).scrollLeft()-50;
var bt = 0;

//set initial co-ordinates for all divs
$("#intro-arrows").css({position: "absolute",top: at,left: al});    
$("#intro-max").css({position: "absolute",top: maxt,right: maxl});
$("#intro-xim").css({position: "absolute",top: ximt,left: ximr});
$(".intro-bottom").css({position: "absolute", bottom: bt, left: bl});

//lets bring it all to life!
$("#intro-max").maxanimate();
$("#intro-xim").ximanimate();
$("#intro-arrows").arrowsanimate();
$(".intro-bottom").animatebottom();



$("#sales").click(function() {
    window.location = ""; 
});

});

My Markup is as follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Maxxim - Wele</title>
</head>
<script type="text/javascript" language="javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/intro.js"></script>
<link rel="stylesheet" type="text/css" href="css/intro.css">
<body>
<div class="intro-no-js">
<img src="imgs/intro/Intro-logo.gif" alt="Maxxim Logo">
<a href="sales-and-marketing.html" title="Sales & Marketing"><img src="imgs/intro/Intro-sales-butt.gif" alt="Sales & Marketing" id="sales"></a>
<a href="design.html" title="Design"><img src="imgs/intro/Intro-design-butt.gif" alt="Design" id="design"></a>
</div>

<div class="intro-javascript">
<div id="intro-arrows"></div>
<div id="intro-max"></div>
<div id="intro-xim"></div>

<div class="intro-bottom">
    <div id="pants"></div>
    <div id="sales"></div>
    <div id="design"></div>
</div>
</div>

</body>
</html>

And here is the CSS:

@charset "utf-8";
/* CSS Document */
body
{
background-color: #000;
margin: 0 0;
}

/* Styling for if javascript is disabled */
.intro-no-js
{
width: 317px;
margin: 0 auto;
position: relative; 
top: 275px;
}

.intro-no-js sales
{
float: left;
}

.intro-no-js design
{
float: left;
}

.intro-no-js img
{
border: none;
}

/* Styling for animation if javascript is enabled */
.intro-javascript
{
visibility: visible;
}

#intro-arrows
{
background-image:url(../imgs/intro/Intro-logo_top.png);
width: 53px;
height: 13px;
}

#intro-max
{
background-image:url(../imgs/intro/Intro-logo_left.png);
width: 159px;
height: 72px;
}

#intro-xim
{
background-image:url(../imgs/intro/Intro-logo_right.png);
width: 157px;
height: 72px;
}


.intro-bottom
{
width: 317px;
}
#pants
{
margin: 0 auto;
background-image: url(../imgs/intro/Intro-logo_bottom.png);
width: 80px;
height: 37px;

}

#sales
{
background-image: url(../imgs/intro/Intro-sales-butt.gif);
width: 218px;
height: 8px;
float: left;
}

#sales:hover
{
background-image: url(../imgs/intro/Intro-sales-butt-o.gif);
}

#design
{
background-image:url(../imgs/intro/Intro-design-butt.gif);
width: 99px;
height: 8px;
float: left;
}

#design:hover
{
background-image:url(../imgs/intro/Intro-design-butt-o.gif);
}

I am having a bit of an issue with a click event not firing properly. The click event I am refering to is the one at the bottom of the page attached to #sales. I used microsoft. just to be sure that it wasn't the page I was trying to navigate to.Any help would be appreciated and the code is bellow.

// JavaScript Document

$(document).ready(function() {

$(".intro-no-js").css("visibility","hidden");
$(".intro-javascript").css("visibility","visible");

//defines how max should be animated
jQuery.fn.maxanimate = function () { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 

    var l = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        top: t,
        left: l-79.5
    }, 500);

    return this; 
} 


//defines how xim should be animated
jQuery.fn.ximanimate = function () { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 

    var r = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        top: t,
        left: r+78.5
    }, 500);

    return this; 
} 

//defines how top arrows should be animated
jQuery.fn.arrowsanimate = function () { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 
    var l = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        top: t-25,
        left: l
    }, 500);

    return this; 
} 

//defines how bottom section should be animated
jQuery.fn.animatebottom = function () { 
this.css("position","absolute"); 

    var b = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 
    var l = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        bottom: b-22,
        left: l
    }, 500);

    return this; 
}

//max starting co-ordinates
var maxl = $(window).width() - 157; 
var maxt =  ($(window).height() - $("#intro-max").outerHeight()) / 2; 

//xim starting co-ordinates
var ximr = $(window).width() - 159; 
var ximt = ($(window).height() - $("#intro-xim").outerHeight()) / 2; 

//arrows starting co-ordinates
var al = (($(window).width() -  $("#intro-xim").outerWidth()) / 2) + $(window).scrollLeft()+ 35; 
var at = 0; 

//bottom of logo starting co-ordinates
var bl = (($(window).width() -  $("#intro-xim").outerWidth()) / 2) + $(window).scrollLeft()-50;
var bt = 0;

//set initial co-ordinates for all divs
$("#intro-arrows").css({position: "absolute",top: at,left: al});    
$("#intro-max").css({position: "absolute",top: maxt,right: maxl});
$("#intro-xim").css({position: "absolute",top: ximt,left: ximr});
$(".intro-bottom").css({position: "absolute", bottom: bt, left: bl});

//lets bring it all to life!
$("#intro-max").maxanimate();
$("#intro-xim").ximanimate();
$("#intro-arrows").arrowsanimate();
$(".intro-bottom").animatebottom();



$("#sales").click(function() {
    window.location = "http://www.microsoft."; 
});

});

My Markup is as follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Maxxim - Wele</title>
</head>
<script type="text/javascript" language="javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/intro.js"></script>
<link rel="stylesheet" type="text/css" href="css/intro.css">
<body>
<div class="intro-no-js">
<img src="imgs/intro/Intro-logo.gif" alt="Maxxim Logo">
<a href="sales-and-marketing.html" title="Sales & Marketing"><img src="imgs/intro/Intro-sales-butt.gif" alt="Sales & Marketing" id="sales"></a>
<a href="design.html" title="Design"><img src="imgs/intro/Intro-design-butt.gif" alt="Design" id="design"></a>
</div>

<div class="intro-javascript">
<div id="intro-arrows"></div>
<div id="intro-max"></div>
<div id="intro-xim"></div>

<div class="intro-bottom">
    <div id="pants"></div>
    <div id="sales"></div>
    <div id="design"></div>
</div>
</div>

</body>
</html>

And here is the CSS:

@charset "utf-8";
/* CSS Document */
body
{
background-color: #000;
margin: 0 0;
}

/* Styling for if javascript is disabled */
.intro-no-js
{
width: 317px;
margin: 0 auto;
position: relative; 
top: 275px;
}

.intro-no-js sales
{
float: left;
}

.intro-no-js design
{
float: left;
}

.intro-no-js img
{
border: none;
}

/* Styling for animation if javascript is enabled */
.intro-javascript
{
visibility: visible;
}

#intro-arrows
{
background-image:url(../imgs/intro/Intro-logo_top.png);
width: 53px;
height: 13px;
}

#intro-max
{
background-image:url(../imgs/intro/Intro-logo_left.png);
width: 159px;
height: 72px;
}

#intro-xim
{
background-image:url(../imgs/intro/Intro-logo_right.png);
width: 157px;
height: 72px;
}


.intro-bottom
{
width: 317px;
}
#pants
{
margin: 0 auto;
background-image: url(../imgs/intro/Intro-logo_bottom.png);
width: 80px;
height: 37px;

}

#sales
{
background-image: url(../imgs/intro/Intro-sales-butt.gif);
width: 218px;
height: 8px;
float: left;
}

#sales:hover
{
background-image: url(../imgs/intro/Intro-sales-butt-o.gif);
}

#design
{
background-image:url(../imgs/intro/Intro-design-butt.gif);
width: 99px;
height: 8px;
float: left;
}

#design:hover
{
background-image:url(../imgs/intro/Intro-design-butt-o.gif);
}

Share Improve this question edited Jan 30, 2012 at 19:20 asked Jan 30, 2012 at 19:07 Camrin Parnell 4492 gold badges9 silver badges21 bronze badges

Does the onclick function trigger. Also see docs.jquery./Plugins/Authoring regarding sensible use of the $.fn namespace. – CBusBus Commented Jan 30, 2012 at 19:11
Can you show us some HTML code at all? This could be happening for a number of reasons...what happens when you just put an alert("foo"); in the click function? – Steve O Commented Jan 30, 2012 at 19:12
What's the URL of the page this is on? – James Commented Jan 30, 2012 at 19:15

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

Try this.

$("#sales").click(function() {
    window.location.href = "http://www.microsoft."; 
    return false;//Just in case if it is a link prevent default behavior
});

Looking at the link you provided I found the issue. You have same ids to multiple element on the page. So when you try to fetch element by id and if there are multiple elements on the page jQuery returns the first element with that id.

You have <img src="imgs/intro/Intro-sales-butt.gif" alt="Sales & Marketing" id="sales"> as well on the page which has the same id sales. Change the id it should work fine.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - windows.location not working on click event - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)