jquery not finding div in SSI file

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:

Code:

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

Quote:

3 - The header.html looks like this:

Code:

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

Quote:

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

VIPStephan · 07-12-2010, 07:33 PM

It’s definitely not related to SSI because these are processed on the server and putting the page together as if you had one static HTML file (you see that you see nothing that indicates that you’re using SSI if you view the source code in the browser) and then, as soon as the page is output to the browser JS processing begins. That means it’s a pure JS error and you can find it out by looking into the browser’s JS console (Firefox has a built-in console, for example) or through developer tools that Safari, Chrome, and Opera have by default, or Firebug which you can download for Firefox.

maryb86 · 07-12-2010, 07:40 PM

Thanks! I did so and found that I had an extra comma in a couple of place... drives me crazy when it's something so simple. See "borderTopColor: 'rgb(112, 112, 184)'," and
"easing: 'easeOutCirc',". Removed the commas and it works!