Develop Reference

Mousewheel Scroll not working inside Div

I am using a jQuery plugin that enables a smoothscroll effect. However, the problem now is that the mousewheel doesn't move the scroll in the div. On my actual page, it does move but it moves the main page scroll along with it. What could be the causes of this? I'm not well versed with javascript, mainly html and css which is why this is such a pain for me and I end up using jquery stuff.
http://codepen.io/jzhang172/pen/dGpmoj
$(function(){
var $window = $(window);
var scrollTime = .5;
var scrollDistance = 170;
$window.on("mousewheel DOMMouseScroll", function(event){
event.preventDefault();
var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);
TweenMax.to($window, scrollTime, {
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut,
overwrite: 5
});
});
/*Stop mousewheel */
});
#import url("http://fonts.googleapis.com/css?family=Ubuntu+Condensed");
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html{
background: url('img/congruent_pentagon.png');
}
body{
margin:0px;
}
#wrapper{
height: auto;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
margin-top: 2em;
margin-bottom: 2em;
height: 700px;
background: transparent;
font: 25px/24px normal 'Ubuntu Condensed', sans-serif;
}
a{
text-decoration: none;
}
.social{
display: inline-block;
position: relative;
width: 100%;
padding: 16px;
margin-bottom: 16px;
margin-right: 16px;
background-color: rgba(231, 231, 231, 0.6);
box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.25);
}
nav{
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
}
nav ul li a:hover{
opacity: 0.7;
}
nav ul li a.email{
border-left: 50px solid #c9182c;
color: #c9182c;
}
nav ul li a.twitter{
border-left: 50px solid #00a0d1;
color: #00a0d1;
}
nav ul li a.facebook{
border-left: 50px solid #365998;
color: #365998;
}
nav ul li a.github{
border-left: 50px solid #4183c4;
color: #4183c4;
}
nav ul li a.google{
border-left: 50px solid #db4a39;
color: #db4a39;
}
nav ul li a.instagram{
border-left: 50px solid #634d40;
color: #634d40;
}
nav ul li a.tumblr{
border-left: 50px solid #34526f;
color: #34526f;
}
nav ul li a.scriptogram{
border-left: 50px solid #0088cc;
color: #0088cc;
}
nav ul li a.linkedin{
border-left: 50px solid #0e76a8;
color: #0e76a8;
}
.container{
width:100%;
text-align:center;
padding-top:20px;
padding-bottom: 20px;
}
.container h1{
font-family: 'EB Garamond', serif;
font-size:55px;
width:500px;
margin:0 auto;
border-top:1px solid black;
border-bottom:1px solid black;
font-weight:0px;
}
.container span{
width:100px;
height:300px;;
}
h2{
font-family: 'Lora', serif;
text-align:center;
font-size:25px;f
font-weight:normal;
color:#0B437D;
}
#headline{
font-size:10px;
}
span img{
height: 70px;
position: relative;
top: 10px;
}
.announcements{
width:500px;
height:500px;
min-height:500px;
background:rgba(152, 170, 179, 0.44);
border:1px solid #B1F6CB;
border-radius:20px;
padding-top:10px;
margin:0 auto;
}
.announcements h2{
font-size:20px;
font-family: 'Josefin Slab', serif;
font-weight:800;
background:#0B437D;
width:100%;
color:#F9F9F9;;
}
span.date{
font-family: 'Slabo 27px', serif;
}
span.important{
font-size:20px;
font-weight:800px;
color:red;
}
.sectionwrapper{
width:100%;
padding:50px;
margin:0 auto;
height:390px;
overflow:auto;
padding-top:0px;
position:relative;
}
span.new-policy{
background:#2184BF;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.news{
background:#168C4B;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.advisory{
background:#AD2626;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.patches{
background:#6126AD;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.description{
font-family: 'Lato', sans-serif;
font-size:14px;
}
.section a{
color:black;
}
.section a:hover{
color:#23A6D0;
transition:.1s ease;
}
a img{
height:40px;
width:40px;
margin-left:-60px;
margin-right:20px;
}
/*----------------------------------FOOTER ------------------ */
.bodywrapper{
margin:0 auto;
width:100%;
/*height:100vh; Removed for sticky footer*/
min-height:100%;
margin-bottom:-500px;
}
.bodywrapper:after{
content:"";
display:block;
height:500px;
}
#footer{
width:900px;
margin-top:20px;
height:470px;
background:rgb(230, 255, 237);
margin:0 auto;
padding:20px;
max-height:500px;
}
/*----------------------------------FOOTER ------------------ */
.location{
float:left;
height:180px;
max-width:180px;
}
#footer h1{
font-size:13px;
padding-top:5px;
width:100%;
height: 20px;
text-align:left;
font-family: 'EB Garamond', serif;
position:relative;
margin:0 auto;
text-decoration:italics;
font-weight:800px;
color:#06255F;
font:23px normal 'Ubuntu Condensed', sans-serif;
}
#first h1{
margin-left:100px;
}
#third h1{
margin-left:100px;
}
#footer .location ul{
width:100px;
}
#footer ul{
list-style:none;
padding-top:-20px;
font-size:14px;
width:200px;
margin:0 auto;
}
.location ul li{
margin-left:-35px;
}
#footer ul li a{
color:#737373;
font-family: 'Slabo 27px', serif;
font: 14px normal 'Ubuntu Condensed';
}
#footer ul li a:hover{
color:#067DFF;
}
#footer hr{
width:200px;
border-color:#194E54;
}
.footersection{
float:left;
width:100px;
}
.location#veryfirst{
width:150px;
max-width:150px;
height:100%;
}
.footersection#first{
width:400px;
max-width:500px;
}
.footersection#second{
width:200px;
min-width:200px;
}
.footersection#third{
width:400px;
}
.footersection#fourth{
width:160px;
height:220px;;
}
.footersection#fifth{
width: 660px;
font-family: 'Slabo 27px', serif;
padding-left: 100px;
/* font-family: 'EB Garamond', serif; */
font-size: 13px;
border-top: 1px solid black;
margin-top: 10px;
padding-top: 5px;
}
.footersection#sixth{
width:160px;
}
.footersection#second ul{
}
ul.cities{
padding-left: 20px;;
}
li b{
font-family: 'EB Garamond', serif;
font: 15px normal 'Ubuntu Condensed', sans-serif;
}
span.privacy{
color: #005AA9;
font-size: 14px;
margin-left: 10px;;;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bodywrapper">
<div class="container">
<h1><span><img src="img/logo.png"></span>!</h1>
</div>
<h2>!</h2>
<!--<div id="headline">
<p>I'm a message that is flown from left to right by a christmas helicopter</p>
</div>
-->
<div class="announcements">
<h2>!</h2>
<div class="sectionwrapper" id="container">
<div class="section">
<span class="date">12/20/15</span><br><span class="important">!</span>
<span class="new-policy"> New Policy </span>
<span class="description"> <b>Paid Week Time Off each Month</b> <br>Every month, choose any week for paid time off for that entire week. Spend time with your loved ones. Go travel som...</span>
</div>
<hr>
<div class="section">
<span class="date">12/05/15</span><br>
<span class="news"> News </span>
<span class="description"> <b>Merry Christmas and Happy New Year!</b> Daily current events posting will resume on January 11th. Read here about Christmas...</span>
</div>
<hr>
<div class="section">
<span class="date">12/05/15</span><br>
<span class="news"> News </span>
<span class="description"> It's been in the works for a while. We all know about it and it's finally about to happen. <b>We are opening up expansions in Toronto, Tokyo and Hirako.</b></span>
</div>
<hr>
<div class="section">
<span class="date">11/30/15</span><br><span class="important">!</span>
<span class="advisory"> Advisory </span>
<span class="description"> Winter Storm Golaith is making it's way across the East Coast. Please stay home if you feel you cannot make it or you don't want to chance it. <b>Stay safe.</b></span>
</div>
<hr>
<div class="section">
<span class="date">11/20/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/19/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/18/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/17/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/16/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/15/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
</div>
</div>
</div>
<div id="wrapper">
<nav>
<ul>
<li><a class="social tumblr" href="#" target="_blank"><img src="img/svg/home.svg">Home</a></li>
<li><a class="social google" href="#" target="_blank"><img src="img/svg/prod.svg">Products</a></li>
<li><a class="social google" href="#" target="_blank"><img src="img/svg/about.svg">About</a></li>
<li><a class="social facebook" href="#" target="_blank"><img src="img/svg/fb.svg">Facebook</a></li>
<li><a class="social twitter" href="#" target="_blank"><img src="img/svg/twitter1.svg">Twitter</a></li>
<li><a class="social instagram" href="#" target="_blank"><img src="img/svg/insta.svg">Instagram</a></li>
</ul>
</nav>
</div>
</div>
<footer id="footer">
<div class="location" id="veryfirst">
<h1>LOCATION</h1>
<hr>
<ul>
<li><b>North America</b></li>
<ul class="cities">
<li>California</li>
<li>New York</li>
<li>Vienna</li>
<li>Wyoming</li>
</ul>
<li><b>Canada</b></li>
<ul class="cities">
<li>Montreal</li>
</ul>
<li><b>Asia</b></li>
<ul class="cities">
<li>Bali</li>
<li>Beijing</li>
<li>GuangZhou</li>
<li>Henan</li>
<li>South Korea</li>
<li>Tokyo</li>
</ul>
<li><b>Europe</b></li>
<ul class="cities">
<li>Italy</li>
<li>London</li>
<li>Paris</li>
<li>South Wales</li>
</ul>
<li><b>South America</b></li>
<ul class="cities">
<li>Argentina</li>
<li>Brazil</li>
<li>Peru</li>
</ul>
</div>
<div class="footersection" id="first">
<h1>PRODUCTS</h1>
<hr>
<ul>
<li>A-Class</li>
<li>P-Class</li>
<li>S-Class</li>
<li>Featured</li>
<li>Gear</li>
<li>Hiraku Edition</li>
<li>Limited</li>
<li>Miscellaneous</li>
<li>Network Protection</li>
</div>
<div class="footersection" id="second">
<h1>CONNECT</h1>
<hr>
<ul>
<li>Comments | Concerns</li>
<li>E-mail</li>
<li>Help|Support Articles</li>
<li>Help Desk</li>
<li>Phone (703) 473 4198</li>
</div>
<div class="footersection" id="third">
<h1>DOWNLOADS</h1>
<hr>
<ul>
<li>Wallpaper</li>
<li>Images</li>
<li>Videos</li>
</div>
<div class="footersection" id="fourth">
<h1>About Apple</h1>
<hr>
<ul>
<li>Terms of Use</li>
<li>Policies</li>
<li>Events</li>
<li>Press Info</li>
<li>Investors</li>
</div>
<div class="footersection" id="fifth">
Copyright © 2015 Traceon Inc. All rights reserved. <span class="privacy">Privacy Policy | Terms of Use | Site Map</span>
</div>

Don't process wheel scroll if it's over that div. Replace this:
event.preventDefault();
... with this:
var target = event.originalEvent.target;
target = target && $(target).parents('.announcements')[0];
if (target)
return true;
event.preventDefault();
Sample here.

You need to handle the scrolling separately for that div. At the minute the issue is that you're calling event.preventDefault(); when you scroll on the window, and it's stopping the scroll event of the div from firing.

The target used on TweenMax.to() was always $window, however when scrolling on #container, the target should be #container itself.
So, determine which element should be used into TweenMax.to() is the key point.
Here is the code:
$(function(){
var $window = $(window);
var scrollTime = .5;
var scrollDistance = 170;
$window.on("mousewheel DOMMouseScroll", function(event){
var target = $(event.originalEvent.target).parents('#container')[0];
if(!target) {
target = $window; // not scroll in #container
} else {
target = $(target); // create a jQuery object of #container
}
event.preventDefault();
var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = target.scrollTop(); // Replace $window with target
var finalScroll = scrollTop - parseInt(delta*scrollDistance);
TweenMax.to(target, scrollTime, { // Replace $window with target
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut,
overwrite: 5
});
});
/*Stop mousewheel */
});
Here is the Demo.

Learning jQuery's tabs + CSS Flexbox. Can anyone help get this working?

I'm fairly new to jQuery and advanced CSS. I was wondering if anyone could take a look at my code and help me get this working. Basically, the gray box on the left is supposed to be fixed and follow you as the page scrolls(that works). Essentially, I want to have the tabs in that gray scroll bar, and have the content of the tabs be displayed in the orange-ish flexbox on the right. I understand that my issue stems from the separation of the <ul> and content divs in HTML, because that's how jQuery reads the tabs. That being said, can anyone help me achieve what I'm looking for. The code is fairly convoluted, so any advice is welcome. I want to learn, so don't hold back!
$(document).ready(function () {
$('#menu').tabs();
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
});
body {
margin:0;
margin-top:10px;
padding:0px;
}
#wrapper {
border:1px solid black;
display:flex;
margin-left:300px;
margin-right:10px;
}
#scrollBar {
background-color:gray;
height:300px;
width:280px;
position:fixed;
margin:10px;
margin-top:0px;
}
#box1 {
background-color:#ffcc66;
height:1000px;
flex:1;
}
.tabs {
list-style-type: none;
margin:0;
padding:0;
z-index:10;
width:100%;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
.tabs a {
color:black;
position:relative;
text-decoration:none;
}
.tabs li:focus {
outline:none;
color:orange;
}
.tabs a:hover, .tabs a:focus {
color:blue;
}
.tabs a:focus, .tabs a:active {
outline: none;
cursor:pointer;
color:orange;
}
.ui-tabs-active a {
color:orange;
overflow:visible;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="scrollBar">
<div id="menu">
<ul class="tabs">
<li>Coding
</li>
<li>Photography
</li>
<li>About Me
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="box1">
<div id="coding" class="contentDiv">
<div class="fillerText">
<p>this is my code</p>
</div>
</div>
<div id="photography" class="contentDiv">
<div class="fillerText">
<p>these are my pictures</p>
</div>
</div>
<div id="info" class="contentDiv">
<div class="fillerText">
<p>this is my info</p>
</div>
</div>
</div>
</div>
</body>
Code: http://jsfiddle.net/yk55vufk/

I don't know why you have added this line :
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
In your code you don't have classes "ui-tabs-active", "ui-tabs-active", "ui-state-active"
some classes and jquery needs be fixed in your code :
Here is fiddle

fullpage.js sticky header won't stick

I've got a problem with my sticky header not sticky in the fullpage.js environment.
I've got a site where I did get it to work but the way it worked can't be correct because it's full of errors and bad coded pieces.
Now Question is do I look at the css part for the fixed position or does my problem finds itself in the javascript.
Code:
<script type="text/javascript">
var $window = $(window);
var nav = $('#main-navigation');
$window.scroll(function(){
if ($window.scrollTop() >= 300) {
nav.addClass('fixed-header');
}
else {
nav.removeClass('fixed-header');
}
});</script>
<script type="text/javascript">
$(function(){
$('#topnav ul li a').on('click', function(e){
e.preventDefault();
var scrolldiv = $(this).attr('href');
$(scrolldiv).animatescroll({padding:50});
});
});
</script>
#CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: fixed;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.section{
text-align:center;
}
/*StickyHeaderNavigationMenu*/
header{position:fixed;bottom:0;z-index:99900; width:100%;
}
.fixed{
position: fixed;
bottom:0; left:0;
width: 100%;
z-index:10000; }
.fixed-header {
position:fixed;
top:0px; left:0;
width: 100%;
}
nav {
width:100%;
height:60px;
background:#36A8B5;
postion:fixed;
z-index:10000;
bottom:0px;
left:0;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left:0;
text-align:center;
width:100%;
}
nav ul li {
display: inline-block;
line-height: 60px;
margin-left: 35px;
}
nav ul li a {
text-decoration: none;
color: #FFFFFF;
}
<header>
<div class="header">
<nav id="main-navigation">
<ul>
<li>Schools</li>
<li>Gallery</li>
<li>About Us</li>
<li>About Us</li>
<li>Snorkeling</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div id="fullpage">
<div class="section " id="section0">
<div class="layer2"></div>
<div class="layer">
<h1>Fixed elements</h1>
<p>Create your own headers and footers</p>
</div>
<video autoplay loop muted controls id="myVideo">
<source src="imgs/flowers.mp4" type="video/mp4">
<source src="imgs/flowers.webm" type="video/webm">
</video>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1"> <h1>We provide the best high level snorkel gear for great value!</h1></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"><h1>Make your own great experience and enjoy New Zealand’s unique underwater Sea Life!</h1></div>
<div class="slide" id="slide4"><h1>After a day on the beach, relax in our Garden Café and Restaurant and recharge your batteries with some awesome food to your liking.
Your adventure starts here!</h1></div>
<div class="slide" id="slide5"></div>
<div class="slide" id="slide6"><h1>
Not a strong swimmer? – No worries, we offer:<br/>
<ul style:"list-style-type:none">
<li> 5 mm wetsuits – fitted to your needed size</li>
<li> masks, snorkels, weight belts, fins</li>
<li> optical masks available</li>
</div>
<div class="slide" id="slide7"></div>
<div class="slide" id="slide8"></div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Enjoy it</h1>
</div>
</div>
</div>
I've added other pieces of the side to show the hierarchy in the section and to make it scrollable.

Another jQuery Quicksand jumpy transition

When I hit filter the li get a left overlapping position before to get in transition to filter. I tested the previous questions and answers but isn't solved the problem. The ul doesn't use an absolute position, the li class have left float.
here is the html
<div class="filters">
<ul id="filters" class="clearfix">
<li><a title="all" href="#" class="active"> all </a></li>
<li><a title="web" href="#"> web </a></li>
<li><a title="app" href="#"> app </a></li>
<li><a title="logo" href="#"> logo </a></li>
<li><a title="card" href="#"> card </a></li>
<li><a title="icon" href="#"> icon </a></li>
</ul>
</div>
<div id="portfolio">
<ul id="portfolio_list">
<li class="portfolio" data-id="id-1" data-type="logo">
<div class="portfolio-wrapper">
<img src="images/portfolios/logo/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Bird Document</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</li>
<li class="portfolio" data-id="id-2" data-type="app">
<div class="portfolio-wrapper">
<img src="images/portfolios/app/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Visual Infography</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</li>
</ul></div>
And this is the jQuery call
$(document).ready(function () {
var $filter = $('#filters a');
var $portfolio = $('#portfolio_list');
var $data = $portfolio.clone();
$filter.click(function(e) {
if ($($(this)).attr("title") == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[data-type=' + $($(this)).attr("title") + ']');
}
$portfolio.quicksand($filteredData, {
adjustHeight: 'dynamic',
duration: 800,
easing: 'easeInOutQuad'
});
$('#filters a').removeClass('active');
$(this).addClass('active');
});
});
forgot to post the css
#portfolio_list li { overflow:hidden; float: left; }
#portfolio_list .portfolio { width:19%; margin:2% 1% 0% 1%; border: 1px solid #c8c8a9; background: #fff; padding: 20px; }
#portfolio_list .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; }
#portfolio_list .portfolio img { max-width:100%; position: relative; }
#portfolio_list .portfolio .label { position: absolute; width: 100%; height:50px; bottom:-50px; }
#portfolio_list .portfolio .label-bg { background: #fff; width: 100%; height:100%; position: absolute; top:0; left:0; }
#portfolio_list .portfolio .label-text { color:#000; position: relative; z-index:500; padding:12px 8px 0; }
#portfolio_list .portfolio .text-category { display:block; }
Any help is appreciated. Thanks.

The problem was cause by same ID used to style the ul and li and in same time to call it with jQuery. Is needed to use an ID without css styles to not create glitches in quicksand.

different height to li tag

i want to Design Menu bar as shown below, i have created whole list in ul but how to set different height ,width for center .Please help i tried code below but middle part is not increasing,
<nav id="Edit_panel">
<ul>
<li class="menubar" title="redo">
<div id="link">redo</div>
</li>
<li class="menubar" title="undo">
<div id="link">undo</div>
</li>
<li class="menubar" title="cut">
<div id="link">Cut</div>
</li>
<li class="menubar" title="copy">
<div id="link">Copy</div>
</li>
<li class="menubar" title="paste">
<div id="link">paste</div>
</li>
<li class="menubar" title="select">
<div id="link">select</div>
</li>
<li class="menubar" title="hand">
<div id="link">hand</div>
</li>
<li class="menubar" title="zoomin">
<div id="link">zoomin</div>
</li>
<li class="menubar" title="zoomout">
<div id="link">zoomout</div>
</li>
<li class="menubar" title="addimage">
<div id="link">Add img</div>
</li>
</ul>
</nav>
css:
#Edit_panel {
background-color: gray;
height:25px;
display: inline;
}
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}

Just add another class to elements You want to increase and set diferent height.
And remove duplicated ids.

First of all, you cannot have multiple elements with the same id, so you should change all
id = "link"
to
class = "link"
or delete those id's
Another mistake is putting height to the ul in css. The 30px height of ul means, that you want the whole list to be 30px high. You want to define the height for li elements, not the whole ul.
Instead of:
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Should be:
ul
{
background-color: #D8D8D8;
}
li {
height:30px;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
If you want some elements to have different height or width, you can add some class to them, and define height for the class, for example:
<li class="menubar higher" title="paste">
<div id="link">paste</div>
</li>
And then in CSS you add:
.higher {
height: 50px;
}
Then your elements will be 30px high, and elements witch also have "higher" class, will he higher than others;]

you can give different heights to your elements by jquery. Use this demo for it.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.test
{
height:25px;
}
</style>
<script>
$(document).ready(function(e) {
$("li").eq(5).addClass("test"); // In 'eq' 5 is a index of li element and it starts from 0 to n-1
});
</script>