Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    jquery not finding div in SSI file

    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:
    <div id="top">
    <div id="menucontent">
    <!--#include virtual="header.html"-->
    </div>
    </div>
    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:
    $(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?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    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.

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •