CODEWITHSUNDEEP
jqueryhtml
kim
kim

Reputation: 83

Div that contains jQuery won't center behind another div

I'm having trouble with centering of a div that contains Jquery. It supposed to be the header behind all other content, but I can't get it there. I tried z-index and variants of positions, but none of them works.

Can someone tell me what i'm doing wrong?

Here's my code:

Code JSFiddle

HTML:

<div id="container">
<div id="mads"></div>
<div id="slideshow">
    <img src="image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="image2.jpg" alt="Slideshow Image 2" />
    <img src="image3.jpg" alt="Slideshow Image 3" />
    <img src="image4.jpg" alt="Slideshow Image 4" />
</div>

CSS:

#slideshow {
    height:350px;
    width:1100px;
    z-index:9;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

body{
    background-color:#000;
}

#container{
    width:1124px;
    height:768px;
    margin-left:auto;
    margin-right:auto;
}

#mads{
    width:1124px;
    height:768px;
    margin-left:auto;
    margin-right:auto;
    background-image:url(file:///schijfje/Users/502034/Desktop/mappen/Stage/03.%20Mads%20Wittermans/web.png);

    background-repeat:no-repeat;
    z-index:100;
}

.header{
    margin-left:auto;
    margin-right:auto;
    z-index:1;
    position:absolute;
}

JS:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

EDIT:

Issue is solved: I gave the div that contains jQuery and the other div above a absolute position and a z-index. Now the divs are positioned behind each other.

Upvotes: 0

Views: 112

Answers (1)

Marcus
Marcus

Reputation: 5143

Here's a version that works.
http://jsfiddle.net/marqs/cn8UJ/

The code had a couple of problems (or so strange solutions that I'm guessing they're unintentional)

1) header should be a <header>-tag, not a div. You can have the scripts inside a div, but it usually doesn't make much sense. Well except if you can only inject code to specific parts in DOM like through a CMS or something.

2) Your code was just functions defined, the setInterval was never called. What you probably wanted to do was 

$(document).ready(function() {
 // this code gets run when DOM is loaded
 setInterval(slideSwitch, 5000);
});

This binds an event-listener that is triggered when DOM is ready. This is usually the time you want to run your code.

Upvotes: 1

Related Questions