Question

I can’t get jQuery working at all with IE7. I’m using the jQuery Cycle plugin, but I believe this problem is with jQuery (and the fact that I’m am a newbie). I’m trying to use an banner rotator, which works on Firefox, Safari and IE8. On IE7, it is not even activating… it just shows each div one after another.

Thank you in advance!

Example
http://testing.observerpapers.com/lv

JS

$(document).ready(function() {
    $('#myslides')
    .before('<div id="nav">')
    .cycle({
        fx: 'fade', // choose your transition type
        speedIn:  600, 
        speedOut: 600,
        timeout: 8000,
        pause: 0, // so that pauses when user hovers over a slide
        pager:  '#nav', // instructs the plugin to create navigation elements
    }); // every child element of the container becomes a slide     

    /*ddsmoothmenu.init({
        mainmenuid: "smoothmenu1", //menu DIV id
        orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
        classname: 'ddsmoothmenu', //class added to menu's outer DIV
        //customtheme: ["#1c5a80", "#18374a"],
        contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    });*/
});

CSS

#myslides {
    width: 980px;
    height: 360px;
    /*overflow: hidden;*/
    z-index: 500;
    background:none !important;
}
#myslides div {
    /*background:none !important;*/
}
#myslides .textBlock {
    background: url(../images/home/bg-bb-textblocks.png) top left repeat;
    width: 360px;
    padding: 4px;
    margin-top: 42px;
    margin-left: 33px;
}
#myslides .textBlock div {
    padding: 17px 8px 10px 18px;
    border: 1px solid #756e67;
}
#myslides h1 {
    font: normal 24px/1.2 Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 5px;
}
#myslides p {
    font: normal 14px/1.3 Helvetica, Arial, sans-serif;
    color: #fff;
}
#myslides cite {
    display: block;
    width: 500px;
    font-style: normal;
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    position: absolute;
    bottom: 6px;
    left: 20px;
    z-index: 5000;
}
#myslides > div {
    width: 980px;
    height: 386px;
}
#myslides .billBoard1 {
    background: url(../images/home/bb-kingston.jpg) top left repeat;
}
#myslides .billBoard2 {
    background: url(../images/home/bb-harbor-breeze.jpg) top left repeat;
}
#myslides .billBoard3 {
    background: url(../images/home/bb-mondrian.jpg) top left repeat;
}
.slides {
    margin-left: 385px;
    width: 539px;
}
.navBG {
    position: absolute;
    display: block;
    z-index: 500;
    bottom: 0;
    width: 980px;
    height: 30px;
    background: url(../images/home/bg-bb-textblocks.png) top left repeat;
}
#nav {
    position: absolute;
    z-index: 501;
    top: 356px;
    right: 10px;
    height: 30px;
    text-align: right;
}
#nav a:hover, #nav a.activeSlide {
    background:none repeat scroll 0 0;
    font-weight: bold;
    color: #fff;
}
#nav a {
    background:url("") repeat-x scroll 0 0;
    color: #d6d2cf;
    display: inline-block;
    font: 12px/18px Helvetica, Arial, san-serif;
    height: 18px;
    margin: 4px 0 0 5px;
    padding: 2px 8px;
    text-align: center;
    text-decoration: none;
}
#nav {
    font-size: 23px;
}

Answer 1

Remove the last comma in the cycle attributes. IE doesn’t eat that:

$(document).ready(function() {
    $('#myslides')
    .before('<div id="nav">')
    .cycle({
        fx: 'fade', // choose your transition type
        speedIn:  600, 
        speedOut: 600,
        timeout: 8000,
        pause: 0, // so that pauses when user hovers over a slide
        pager:  '#nav' //HERE I REMOVED THE COMMA
    });