maryb86
07-12-2010, 07:26 PM
I am working on test website here: http://www.heresmary.com/Penelope/index.html
The nav works perfect in ie8, chrome, firefox. ie6 not so good but i'm more worried about ie7. in ie7 it's not expanding the height of the li as it does in the others. My code is as follows:
1 - The main index file has a link to the nav.js like so:
<script type="text/javascript" src="scripts/nav.js">
</script> it's placed at the bottom of the page incase there was any issue with it needing the SSI to load before it would work. Didn't seem to make a difference.
2 - I have the SSI for the header like this, placed right after the <body> tag:
<div id="top">
<div id="menucontent">
<!--#include virtual="header.html"-->
</div>
</div>
3 - The header.html looks like this:
<div id="nav">
<ul id="nav_list">
<li id="home">
<a href="index.html">Home</a>
</li>
<li id="portfolio">
<a href="portfolio.html">Portfolio</a>
</li>
<li id="feedback">
<a href="feedback.html">Feedback</a>
</li>
<li id="about">
<a href="about.html">About</a>
</li>
<li id="contact">
<a href="contact.html">Contact</a>
</li>
</ul>
<div id="navblurb">
The portfolio and store of Penelope Billington
</div>
</div>
4 - nav.js looks like this:$(document).ready(function(){
$('#navblurb').click(function(){
alert('test');
})
$('#nav_list li').hover(function(){
$(this).stop(true).animate({
height: '90px',
top: '-30',
backgroundColor: 'rgb(234, 234, 244)',
borderBottomColor: 'rgb(112, 112, 184)',
borderLeftColor: 'rgb(112, 112, 184)',
borderRightColor: 'rgb(112, 112, 184)',
borderTopColor: 'rgb(112, 112, 184)',
}, {
duration: 500,
easing: 'easeOutCirc',
})
}, function(){
$(this).stop(true).animate({
height: '26px',
top: '-1',
backgroundColor: 'rgb(66, 66, 132)',
borderBottomColor: 'rgb(112, 112, 184)',
borderLeftColor: 'rgb(112, 112, 184)',
borderRightColor: 'rgb(112, 112, 184)',
borderTopColor: 'rgb(112, 112, 184)'
}, {
duration: 500,
easing: 'easeOutCirc'
})
})
})
The navblurb alert is just a test. Wierd thing is, if I comment out the rest underneath for the menu, the alert works. However, if I leave it as is, the alert doesn't even work. So something in this code for the nav is making all other jquery in the file useless (and it's self) and I have no idea what. It seems pretty simple script to me. Any suggestions?
The nav works perfect in ie8, chrome, firefox. ie6 not so good but i'm more worried about ie7. in ie7 it's not expanding the height of the li as it does in the others. My code is as follows:
1 - The main index file has a link to the nav.js like so:
<script type="text/javascript" src="scripts/nav.js">
</script> it's placed at the bottom of the page incase there was any issue with it needing the SSI to load before it would work. Didn't seem to make a difference.
2 - I have the SSI for the header like this, placed right after the <body> tag:
<div id="top">
<div id="menucontent">
<!--#include virtual="header.html"-->
</div>
</div>
3 - The header.html looks like this:
<div id="nav">
<ul id="nav_list">
<li id="home">
<a href="index.html">Home</a>
</li>
<li id="portfolio">
<a href="portfolio.html">Portfolio</a>
</li>
<li id="feedback">
<a href="feedback.html">Feedback</a>
</li>
<li id="about">
<a href="about.html">About</a>
</li>
<li id="contact">
<a href="contact.html">Contact</a>
</li>
</ul>
<div id="navblurb">
The portfolio and store of Penelope Billington
</div>
</div>
4 - nav.js looks like this:$(document).ready(function(){
$('#navblurb').click(function(){
alert('test');
})
$('#nav_list li').hover(function(){
$(this).stop(true).animate({
height: '90px',
top: '-30',
backgroundColor: 'rgb(234, 234, 244)',
borderBottomColor: 'rgb(112, 112, 184)',
borderLeftColor: 'rgb(112, 112, 184)',
borderRightColor: 'rgb(112, 112, 184)',
borderTopColor: 'rgb(112, 112, 184)',
}, {
duration: 500,
easing: 'easeOutCirc',
})
}, function(){
$(this).stop(true).animate({
height: '26px',
top: '-1',
backgroundColor: 'rgb(66, 66, 132)',
borderBottomColor: 'rgb(112, 112, 184)',
borderLeftColor: 'rgb(112, 112, 184)',
borderRightColor: 'rgb(112, 112, 184)',
borderTopColor: 'rgb(112, 112, 184)'
}, {
duration: 500,
easing: 'easeOutCirc'
})
})
})
The navblurb alert is just a test. Wierd thing is, if I comment out the rest underneath for the menu, the alert works. However, if I leave it as is, the alert doesn't even work. So something in this code for the nav is making all other jquery in the file useless (and it's self) and I have no idea what. It seems pretty simple script to me. Any suggestions?