0

first off this is a question where jQuery is used heavly, there are no catagories to put that under on <DaniWeb> so i've put this post under what i believe is the most appropriate one.

Ok! now thats done and over with, im requiring some assistance on how to write some jquery to preform a vertical slide.
I've got a photo to accomany this post so you can follow along on.
Here's that photo.
what i am hoping ya'll can assist me with is how to get it to slide the div i click on, to the container(the faded banner accross the image), while keeping everything else in place.
for example: Clicking on "Div1" would cause it to slide down(because the container is below it), and the current div in the container("Div2") to move down one.
Here's the HTML im using for this:

            <div id="Nav-Long">
                <div class="Nav-Container">
                    <ul>
                        <li class="SelectMe">Experiments</li>
                        <li class="SelectMe">Blog</li>
                        <li class="SelectMe">Me</li>
                    </ul>
                </div>
            </div>

And my CSS to Accompany this:

//I've got some jQuery magic making this perfectly centered, no need to show that however.
#Nav-Long{
        margin:0 auto;
        display:block;
        position:relative;
        height:70px;
        width:600px;
    }
    .Nav-Container{display:block;height:100%;width:100%;float:left;}
    .Nav-Container ul{height:100%;width:100%;display:inline-block;position:relative;list-style:none;font-size:60px;font-family:montserratregular;}
    #Nav-Long li{height:100%;width:100%;float:left;color:rgba(20,20,20,0.6);}

Annnd now the jQuery.

$(document).ready(function() {
    $('.Nav-Container ul li').click(function(){
        var $Container      = $(".Nav-Container"),
        $Items                  = $(".Nav-Container ul li"),
        $Handle                 = $(".Nav-Container ul"),
        ContainerHeight     = $Container.height();

        Clicked                 = $(this).attr('class');
        Clicked                 = Clicked.replace('SelectMe','');
        Clicked                 = Clicked.replace('li-','');
        Clicked                 = Clicked.replace(' ','');
        console.log("ATTR:"+Clicked);
        $(this).addClass(".li-selected");

        $Handle.animate({"top":"-"+ContainerHeight * Clicked +"px"},300);
        $('.Nav-Container ul li').css("color","rgba(20,20,20,0.6)");
        /*$(this).css("color","#000");*/
    });
    NavLong();
});
    function NavLong(){
        var $Container      = $(".Nav-Container"),
        $Items                  = $(".Nav-Container ul li"),
        $Handle                 = $(".Nav-Container ul"),
        ContainerHeight     = $Container.height();
        itemcount               = 0;
        Select                  = 0;//0=1,1=2; Array Controller 
        Items                   = []
        $(".SelectMe").each(function(i){
            var i = i + 1;
            $(this).addClass('li-'+i);
            Items.push('li-'+i);
            console.log(Items);
            itemcount =i;
        });
        var itemheight = $Items.height();
        $Handle.height(itemheight * itemcount);
        $Handle.css("top","-"+ContainerHeight * Select +"px");
        $Handle.css("top","-"+ContainerHeight * Select +"px");

    }

Wow! thats alot to take in, let me break it down, right now what this code does slide(so im half way there), but it does not position properly. How im attempting to position this is by changing the "top" of the ".Nav-Container ul"(called the Handle in my code) to height of ".Nav-Container" Times by the number of which the div is(or item, however you preffer it). I would love any Help, Tips, or Recomendations. This one has totally baffled me.

Edited by pritaeas: Moved.

2
Contributors
4
Replies
33
Views
3 Years
Discussion Span
Last Post by pritaeas
0

first off this is a question where jQuery is used heavly, there are no catagories to put that under on <DaniWeb>

jQuery IS Javascript.

0

I relize this, however i've seen on many sites where jQuery has its own catagory, thanks for the help though :)

0

Thanks to my own understanding on js i got this to work perfectly. I'f anyone see's this post in the future and whats to learn how to have such a slider work. Just say so here :)

0

Glad you fixed it. Why not share it now? Or repost it as a snippet or tutorial, will get you some kudos.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.