**SOLVED *
PROBLEM HAD TO DUE WITH FILE ACCESS CONTROL ON MY COMPUTER ONCE I UPLOADED IT TO DEV SERVER ONLINE IT WORKED!
I have a website that uses ajax to load the pages dynamically. At first I thought the issue was because I was using .load and then I tried using $.ajax instead and still had the same issue. Using both methods works in IE and Firefox but not in Google Chrome. The code for the javascript file is as follows:
// JavaScript Document
$(document).ready(function() {
/* THIS SECTION OF CODE WAS TAKEN FROM http://forum.jquery.com/topic/getting-value-from-a-querystring */
// ***this goes on the global scope
// get querystring as an array split on "&"
var querystring = location.search.replace( '?', '' ).split( '&' );
// declare object
var queryObj = {};
// loop through each name-value pair and populate object
for ( var i=0; i<querystring.length; i++ ) {
// get name and value
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
// populate object
queryObj[name] = value;
}
/* END SECTION */
jQuery.fn.stretchheight = function() {
if ($(window).height() > $('body').innerHeight())
{
$(this).height($(window).height() - ($('body').innerHeight() - $(this).outerHeight(true)));
}
return this;
}
//if GET VARIABLE page is == 1 then hide all the green stuff and start animating for red section
if (queryObj["page"] == 1)
{
$("#sales-bottom").hide();
$(".logo").css("float","left");
$(".logo").hide();
$(".content-area").css("float","left");
$(".content-area").hide();
$(".green-side").css("display","none");
$(".red-side").css("display","visible");
$(".red-side").stretchheight();
$(".red-side").css("position","absolute");
$(".red-side").css("left","-300px");
$(".logo").css("position","absolute");
$(".logo").css("left","400px");
$(".content-area").css("position","absolute");
$(".content-area").css({"left":"400px","top":"230px"});
$(".red-side").animate({left: 0},1000,function() {
$(".inner-red-side").fadeIn(1000,function() {
$(".logo").fadeIn(1000,function() {
$(".content-area").fadeIn(1000);
});
});
});
}
//if GET VARIABLE page is == 2 then hide all the red stuff and start animating for green section
if (queryObj["page"] == 2)
{
$("#port-sub").hide();
$("#design-bottom").hide();
$(".logo").css("float","right");
$(".logo").hide();
$(".content-area").css("float","right");
$(".content-area").hide();
$(".red-side").remove();
$(".green-side").stretchheight();
$(".green-side").css("position","absolute");
$(".green-side").css("right","-300px");
$(".logo").css("position","absolute");
$(".logo").css("right","400px");
$(".content-area").css("position","absolute");
$(".content-area").css({"right":"400px","top":"230px"});
$(".green-side").animate({right: 0},1000,function() {
$(".inner-green-side").fadeIn(1000,function() {
$(".logo").fadeIn(1000,function() {
$(".content-area").fadeIn(1000)
});
});
}
);
}
/****** ALL CONTENT SECTIONS FOR RED ********/
//CONTENT FOR WHAT WE OFFER (RED)
if((queryObj['page'] == 1) && (queryObj["sel"] == 1))
{
$.ajax({
url: "pages/sales/what_we_offer.html",
success: function(data){
$(".content-area").html(data);
}
});
/*
$(".content-area").load("pages/sales/what_we_offer.html");
document.title = 'Maxxim - What We Offer';
*/
}
//CONTENT FOR OUR BRANDS
if((queryObj['page'] == 1) && (queryObj["sel"] == 2))
{
$(".content-area").load("pages/sales/our_brands.html");
document.title = 'Maxxim - Our Brands';
}
//CONTENT FOR CONTACT US
if((queryObj['page'] == 1) && (queryObj["sel"] == 3))
{
$(".content-area").load("pages/sales/contact_us.html");
document.title = 'Maxxim - Contact Us';
}
/************ END OF CONTENT RED ***********/
/****** ALL CONTENT SECTIONS FOR GREEN ********/
//CONTENT FOR WHAT WE OFFER (GREEN)
if((queryObj['page'] == 2) && (queryObj["sel"] == 1))
{
$(".content-area").load("pages/design/what_we_offer.html");
document.title = 'Maxxim - What We Offer';
}
if((queryObj['page'] == 2) && (queryObj["sel"] == 2))
{
$(".content-area").load("pages/design/packaging.html");
document.title = 'Maxxim - Packaging';
}
if((queryObj['page'] == 2) && (queryObj["sel"] == 3))
{
$(".content-area").load("pages/design/brandmarks.html");
document.title = 'Maxxim - Brandmarks';
}
if((queryObj['page'] == 2) && (queryObj["sel"] == 4))
{
$(".content-area").load("pages/design/print_material.html");
document.title = 'Maxxim - Print Material';
}
/************ END OF CONTENT GREEN ***********/
//if GET VARIABLE page is == 2 then hide all the red stuff
if (queryObj["page"] == 2) {
$(".red-side").css("display","none");
$(".green-side").css("display","visible");
}
/* MOUSE EVENTS */
/* RED LAYOUT */
//mouseover for sales & marketing
$("#s").hover(
function()
{
this.src = "imgs/main/sales-m-butt-o.gif";
},
function()
{
this.src = "imgs/main/sales-m-butt.gif";
}
);
//mouseover for design
$("#d").hover(
function()
{
this.src = "imgs/main/design-butt-o.gif";
},
function()
{
this.src = "imgs/main/design-butt.gif";
}
);
//mouseover for what we offer (red)
$("#offer-red").hover(
function()
{
this.src = "imgs/main/what-we-offer-butt-o.gif";
},
function()
{
this.src = "imgs/main/what-we-offer-butt.gif";
}
);
//mouseover for our brands (red)
$("#brands-red").hover(
function()
{
this.src = "imgs/main/our-brands-butt-o.gif";
},
function()
{
this.src = "imgs/main/our-brands-butt.gif";
}
);
//mouseover for our brands (red)
$("#contact-red").hover(
function()
{
this.src = "imgs/main/contact-us-butt-o.gif";
},
function()
{
this.src = "imgs/main/contact-us-butt.gif";
}
);
//changes page to show design information
$("#design-bottom").click(function() {
window.location.href = "main.html?page=2&sel=1";
});
/* GREEN LAYOUT MOUSE EVENTS*/
//mouseover for what we offer
$("#offer-green").hover(
function()
{
this.src = "imgs/main/des-what-we-offer-butt-o.gif";
},
function()
{
this.src = "imgs/main/des-what-we-offer-butt.gif";
}
);
//mouseover for packaging
$("#portfolio-green").hover(
function()
{
this.src = "imgs/main/des-portfolio-butt-o.gif";
},
function()
{
this.src = "imgs/main/des-portfolio-butt.gif";
}
);
//mouseover for packaging
$("#packaging-green").hover(
function()
{
this.src = "imgs/main/packaging-butt-o.gif";
},
function()
{
this.src = "imgs/main/packaging-butt.gif";
}
);
//mouseover for brandmarks
$("#brandmarks-green").hover(
function()
{
this.src = "imgs/main/brandmarks-butt-o.gif";
},
function()
{
this.src = "imgs/main/brandmarks-butt.gif";
}
);
//mouseover for materials
$("#materials-green").hover(
function()
{
this.src = "imgs/main/print-material-butt-o.gif";
},
function()
{
this.src = "imgs/main/print-material-butt.gif";
}
);
//changes page to show sales and marketing information
$("#sales-bottom").click(function() {
window.location.href = "main.html?page=1&sel=1";
});
//click event for portfolio brings down sub menu (GREEN)
$("#port-menu").click(function() {
$("#port-sub").show();
});
});
The code for the HTML file is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Maxxim - Sales & Marketing</title>
<script type="text/javascript" language="JavaScript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/animated.js"></script>
<link rel="stylesheet" type="text/css" href="css/animated.css">
</head>
<body>
<div class="red-side">
<div class="inner-red-side">
<img src="imgs/main/sales-and-marketing.gif" alt="Sales & Marketing" id="sales-and-marketing">
<ul>
<li><a href="main.html?page=1&sel=1"><img src="imgs/main/what-we-offer-butt.gif" alt="What We Offer" id="offer-red"></a></li>
<li><a href="main.html?page=1&sel=2"><img src="imgs/main/our-brands-butt.gif" alt="Our Brands" id="brands-red"></a></li>
<li><a href="main.html?page=1&sel=3"><img src="imgs/main/contact-us-butt.gif" alt="Contact Us" id="contact-red"></a></li>
</ul>
</div>
</div>
<div class="logo">
<img src="imgs/main/main-logo.gif" alt="Maxxim Logo">
<a href="main.html?page=1&sel=1" title="Sales & Marketing"><img src="imgs/main/sales-m-butt.gif" alt="Sales & Marketing" id="s"></a>
<a href="main.html?page=2&sel=1" title="Design"><img src="imgs/main/design-butt.gif" alt="Design" id="d"></a>
<div class="clear"></div>
</div>
<div class="content-area">
</div>
<div class="green-side">
<div class="inner-green-side">
<img src="imgs/main/design.gif" alt="Design" id="design">
<ul>
<li><a href="main.html?page=2&sel=1"><img src="imgs/main/des-what-we-offer-butt.gif" alt="What We Offer" id="offer-green"></a></li>
<li id="port-menu">
<img src="imgs/main/des-portfolio-butt.gif" alt="Portfolio" id="portfolio-green">
<ul id="port-sub">
<li><a href="main.html?page=2&sel=2"><img src="imgs/main/packaging-butt.gif" alt="Packaging" id="packaging-green"></a></li>
<li><a href="main.html?page=2&sel=3"><img src="imgs/main/brandmarks-butt.gif" alt="Brandmarks" id="brandmarks-green"></a></li>
<li><a href="main.html?page=2&sel=4"><img src="imgs/main/print-material-butt.gif" alt="Print Materials" id="materials-green"></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="design-bottom"></div>
<div id="sales-bottom"></div>
</body>
</html>
And finally the code for the CSS file is as follows:
@charset "utf-8";
/* CSS Document */
/* GENEREAL */
body
{
margin: 0 0;
background-color: #000;
}
a img
{
border: none;
}
.clear
{
clear: both;
}
/* LOGO */
.logo
{
width: 254px;
margin-top: 80px;
}
#s
{
float: left;
}
#d
{
float: left;
}
/* RED SIDE */
.red-side
{
padding-top: 150px;
background-color: #6b0006;
width: 280px;
float: left;
}
.inner-red-side
{
display: none;
}
#sales-and-marketing
{
margin-left: 30px;
margin-bottom: 40px;
}
.red-side ul
{
}
.red-side li
{
list-style-type: none;
margin-top: 50px;
margin-left: 45px;
}
#design-bottom
{
background-image:url(../imgs/main/design-lrg-butt.gif);
width: 102px;
height: 31px;
position: fixed;
bottom: 25px;
right: 30px;
}
#design-bottom:hover
{
background-image:url(../imgs/main/design-lrg-butt-o.gif);
}
/* CONTENT AREA */
.content-area
{
width: 550px;
font: Verdana, Geneva, sans-serif;
font-size:16px;
color: #fff;
}
/* GREEN SIDE */
.green-side
{
padding-top: 150px;
background-color: #73a534;
width: 280px;
float: right;
}
#design
{
margin-left: 30px;
margin-bottom: 40px;
}
.green-side ul
{
}
.green-side li
{
list-style-type: none;
margin-top: 50px;
margin-left: 45px;
}
#sales-bottom
{
background-image: url(../imgs/main/sales-m-butt-lrg.gif);
width: 213px;
height: 31px;
position: fixed;
bottom: 25px;
left: 30px;
}
#sales-bottom:hover
{
background-image:url(../imgs/main/sales-m-butt-lrg-o.gif);
}
#port-sub
{
margin-left: -35px;
margin-top: -20px;
}
#port-sub li
{
margin-bottom: -20px;
}
The web page can be viewed at http://camrin.cspsolutions.ca/Maxxim
Thanks for your help!
I solved it. The problem was due to file access control on my computer. Once I uploaded it to the online dev server, it worked.