jquery скользящий контент - PullRequest
Новая
       33

jquery скользящий контент

0 голосов
/ 04 сентября 2011

У меня проблемы со скольжением делителей: у меня 3 деления, и самый левый - скольжение по событию щелчка.Когда он скользит влево, под двумя другими, я не могу сделать его невидимым: он скользит выше.

Как это работает: когда я нажимаю на ссылку, div левой стороны должен выдвигаться, изменять содержимое, а затем скользить в.

Ниже мои css, html и javascript, которые загружают контент ...

CSS: 

body, html {margin: 0; padding: 0; height: 100%; }
body {  
    background-size: 100%;
    background: #000 url(../imgs/bg-img.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
a{outline:0;}
#page-h {   
    width: 810px; 
    float: right; 
    background: url(../imgs/bck_main.png) repeat-y right;
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    color: #fff;    
}
.leftside {  
    background: url(../imgs/bck_dark.png); 
    width: 280px; padding: 270px 40px 0 40px;
    float: left; 
    color: #fff; 
    overflow: hidden; 
    position: relative;
    z-index:-1; //to slide under content, but is still visible on the right side
}
.slider {
    width: 280px; 
    font-size: 12px;
    color:#d5d0b5;  
    position:relative;/*if I put absolute, the div slides left*/
}
.content{   
    width:450px;
    float:right;
    position:relative;
}
.rightside{
    width:210px; 
    display:inline;
    float:left;
    padding-top: 239px;
    font-family: Georgia;
    font-size: 12px;
    color:#ffffdc;
    text-align:center;
}

HTML: 

<div id="page-h">   
    <div class="leftside slider" id="resize-me"></div>      
    <div class="content">
        <div class="navigation">
            <nav class="main-nav">

                <h3 class="main"><a href="main.html"></a></h3>
                    <h3 class="house"><a href="house.html"></a></h3>
                    <ul>
                        <li><a href="about-us.html">About</a></li>
                        <li><a href="about-us.html">About</a></li>
                        <li><a href="about-us.html">About</a></li>
                    </ul>
            </nav>
        </div>
        <aside class="rightside">
            <div class="sth"><p>test</p>
            <div class="more-info"><a href="info.html">More information</a></div>
            </div>
        </aside>
    </div>
</div>

JavaScript / jQuery: 

// Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('.main-nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html .slider';
            $('.slider').load(toLoad)
        }
    });

    $('.main-nav li a').click(function(){
        var toLoad = $(this).attr('href')+' .slider';
        $('.slider').animate({left:"360px"},1000, loadContent);
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('.slider').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('.slider').animate({left:"0px"},1000);
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }   
    return false;
    });

1 Ответ

0 голосов
/ 06 сентября 2011

Если я правильно понимаю ваш вопрос, вам просто нужно установить z-index, цвет фона и / или изображение на вашем .content div 

.content{ 
    width:450px;
    float:right;
    position:relative;
    z-index:2;
    background:#000
}
...