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.
