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.
Related
I'm currently doing responsive design for the website using media queries with (max-width: 480px). Now, I have an issue of making slideToggle on jQuery from left to right. Basically, I'm adding class to element by using jQuery and styling this in CSS. However, I might assume there are other ways to make it...
But this is my approach. Please guys help me out, maybe you have some other recommendations how to solve this.
So, here is my html:
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03<br />
+7(985)427-48-55<br />
</p>
<a id="js-close" class="js-close"></a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'></a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><a href="/" ><span></span></a></li>
<li><a href="/menu/16" ><span></span></a></li>
<li><a href="/menu/3" ><span></span></a></li>
<li><a href="/menu/5" ><span></span></a></li>
<li><a href="/articles" ><span></span></a></li>
<li><a href="/menu/21" ><span></span></a></li>
<li><a href="/menu/22" ><span></span></a></li> </ul>
</div>
</div>
this is CSS
#js-close {display:block;display:none;width:35px;height:35px;margin:17px 10px; position: absolute;
right: 0;}
.js-close{background:url(images/close-icon.png) center center no-repeat; opacity: 0.75; }
and this is media
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
And my jQuery:
$(document).ready(function(){
$("#js-phone").click(function(){
$('p.phone').addClass("_opened");
});
$("js-close").click(function(){
$('p_phone').removeClass("_opened");
});
});
you have some problems with your code .
in JQ you are not writing the selectors correctly ( js-close needs to have # before it , and p_phone needs to be p.phone instead )
in CSS you need to hide your p.phone with transform:translateX(-100%) and then show it when has class opened with transform:translateX(0%) . Also add transition to the p.phone so when you close it , it will have transition
check snippet below ( Open = open button , Close = close button )
i changed the JQ a bit so it's more readable and easier to change, using selector caching ( the variables ) and event targeting. hope you don't mind
P.S i removed the media query so it will work in the snippet .
check fiddle with media query > jsFiddle
var open = $("#js-phone"),
close = $("#js-close"),
phone = $('p.phone')
$("body").on("click", function(e) {
var target = $(e.target)
if (target.is(open)) {
$(phone).addClass("opened")
}
if (target.is(close)) {
$(phone).removeClass("opened")
}
})
p.phone {
transform: translateX(-120%);
position: fixed;
top: 0;
transition: 0.3s;
-webkit-transition: all 0.3s ease-out;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
background-color: #fff;
display: block;
}
.contacts {
margin-top: 100px;
}
/*#media screen and (max-width: 480px) {*/
p.phone.opened {
transform: translateX(0);
}
/*}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03
<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Open</a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
</div>
Use style='display:none' for first load. And After Link click show your div and add class using addClass.
$("#js-phone").click(function() {
$('.contacts').show();
$('p.phone').addClass("_opened");
});
$(".js-close").click(function() {
$('.contacts').hide();
$('p_phone').removeClass("_opened");
});
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header" >
<div class="logo" >Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts" style='display:none'>
<p class="phone">+7(499)394-46-03<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Phone</a>
<a id="js-cart" class="js-cart" href="/basket">2</a>
<a id='js-mnu' class='js-mnu'>3</a>
<a id="js-cat" class="js-cat">4</a>
</div>
currently I'm trying to create a dock (similar to the iOS dock) for my website, my full code is
function addPrevClass(e) {
var target = e.target;
if (target.getAttribute('src')) { // check if it is img
var li = target.parentNode.parentNode;
var prevLi = li.previousElementSibling;
if (prevLi) {
prevLi.className = 'prev';
}
target.addEventListener('mouseout', function() {
prevLi.removeAttribute('class');
}, false);
}
}
if (window.addEventListener) {
document.getElementById("dock").addEventListener('mouseover', addPrevClass, false);
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.05);
}
#dock li img {
width: 64px;
height: 64px;
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, .5)));
/* reflection is supported by webkit only */
-webkit-transition: all 0.3s;
-webkit-transform-origin: 50% 100%;
}
#dock li:hover img {
-webkit-transform: scale(2);
margin: 0 2em;
}
#dock li:hover + li img,
#dock li.prev img {
-webkit-transform: scale(1.5);
margin: 0 1.5em;
}
#dock-container ul {
text-align: center;
}
<div id="dock-container">
<div id="dock">
<ul>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
</ul>
<div class="base"></div>
</div>
</div>
But my problem here is that my dock is not centered on the website, and when i try to take the float: left; off, my dock becomes vertical, how would i center the dock and still keep it horizontal? any ideas?
Change float:left to display: inline; or display: inline-block for li, depending on your needs:
li {
display: inline-block;
}
You may use the display:table; property and set margin:auto; if i understood your trouble. This way , ul can shrink on its content and still behave as a block element.
function addPrevClass(e) {
var target = e.target;
if (target.getAttribute('src')) { // check if it is img
var li = target.parentNode.parentNode;
var prevLi = li.previousElementSibling;
if (prevLi) {
prevLi.className = 'prev';
}
target.addEventListener('mouseout', function() {
prevLi.removeAttribute('class');
}, false);
}
}
if (window.addEventListener) {
document.getElementById("dock").addEventListener('mouseover', addPrevClass, false);
}
li {
float: left;
}
ul {
display: table;
margin: auto;
list-style-type: none;
/*margin: 0;*/
padding: 0;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.05);
}
#dock li img {
width: 64px;
height: 64px;
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, .5)));
/* reflection is supported by webkit only */
-webkit-transition: all 0.3s;
-webkit-transform-origin: 50% 100%;
}
#dock li:hover img {
-webkit-transform: scale(2);
margin: 0 2em;
}
#dock li:hover + li img,
#dock li.prev img {
-webkit-transform: scale(1.5);
margin: 0 1.5em;
}
#dock-container ul {
text-align: center;
}
<div id="dock-container">
<div id="dock">
<ul>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
</ul>
<div class="base"></div>
</div>
</div>
If you want to keep the float: left to avoid the space between each list item you can use:
#dock {
text-align: center;
}
ul {
display: inline-block;
}
css3 can save you. Add the following and try
#dock{
display: flex;
align-items: center;
justify-content: center;
}
I am struggling a bit with this, I can hide/show/fadin/fadout all day long but I am trying to get my head round the logic of targetting an element in my and pulling its specific description on mouseover, I have come close to getting this but feel like im missing something, below is my HTML:
<ul id="menu" class="menu">
<li>Home</li>
<li id="menu1" class="menu-link">LINK1</li>
<li id="menu2" class="menu-link">LINK2</li>
<li id="menu3" class="menu-link">LINK3</li>
<li id="menu4" class="menu-link">LINK4</li>
</ul>
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
and here is my CSS, the idea is to position the description just above its corresponding element btw:
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
display:inline;
clear:both;
position:relative;
overflow:hidden;
}
.menu li a{
float:left;
width:6em;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
position: absolute;
right: 407px;
margin-left: 5px;
top: 15px;
}
and finally here is the jquery:
$(document).ready(function() {
$('div.menuDescription').hide();
$('li.menu-link').bind('mouseover', function() {
$('#' + $(this).attr('id') + 'content').prependTo("li.menu-link").fadeIn();
})
.mouseout(function() {
$('#' + $(this).attr('id') + 'content').fadeOut();
});
});
WHen you have a one-to-one relationship between 2 sets of elements and their order in each set matches, is generally easier to use indexing rather than parsing ID
var $content= $('div.menuDescription');
var $links=$('.menu-link').hover(function(){
/* "this" is element being hovered*/
var index= $links.index(this);
$content.stop().hide().eq(index).fadeIn();
},function(){
/* not sure if you want to leave current content visible if user leaves menu, if so do nothing here*/
})
DEMO
I have updated and simplified your fiddle to make it work: Working Fiddle. Here is the simplified code without any JS:
HTML:
<ul id="menu" class="menu">
<li>
Home
</li>
<li id="menu1" class="menu-link">
LINK1
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
</li>
<li id="menu2" class="menu-link">
LINK2
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
</li>
<li id="menu3" class="menu-link">
LINK3
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
</li>
<li id="menu4" class="menu-link">
LINK4
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
</li>
</ul>
CSS:
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
float:left;
margin: 0 5px;
position:relative;
overflow:hidden;
width: 120px;
height: 30px;
}
.menu li a{
position: absolute;
bottom: 0;
}
.menu li .menuDescription {
display: none;
}
.menu li:hover .menuDescription {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
}
Let me know if you need any explanations and I'll edit my answer.
I'm trying to get list items to scroll up and down when I click on a link. I just can't get it to work.
UPDATE: Added a JSFiddle
jQuery:
$(document).ready(function() {
//console.log($('.nav-up'));
$('.nav-controls').on('click', '.nav-up', function(e) {
e.preventDefault();
//alert('clicked');
var navHeight = $(e.currentTarget).closest('.horz-scroll').find('.block-nav').height();
var el = $(e.currentTarget).closest('.horz-scroll').find('.block-nav > ul');
if((el.height() - navHeight) < el.position().top) {
el.animate({ top: '+=19' }, 'fast');
console.log(el.css('top'));
}
});});
HTML:
<div class="horz-scroll">
<div class="block-nav-wrapper">
<div class="block-nav">
<ul>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
</ul>
</div>
</div>
<div class="nav-controls">
<ul>
<li><a class="nav-up" href="#"><img src="../../../upload/1/img/prev.jpg" /></a></li>
<li><input class="nav_down" name="submit" src="../../../upload/1/img/next.jpg" type="image" /></li>
</ul>
</div>
</div>
CSS:
.nav-controls {
right: 10px;
top: 25px;
margin-left: 37%;
}
.nav-controls ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-controls ul li{
display: inline;
padding-right: 16px;
}
.block-nav-wrapper {
position: relative;
margin-bottom: 10px;
padding: 10px;
}
.block-nav {
position: relative;
height: 130px;
margin: 10px;
overflow: hidden;
}
.block-nav ul{
}
.block-nav ul li{
list-style:none;
line-height:35px;
}
console.log(el.height()); = 175
console.log(navHeight); = 130
console.log(el.position().top); = 0
A couple things before you get the answer.
You have to include jQuery in your fiddle if you're using it.
like Chris Rockwell said, use a placeholder site (I swapped everything to use http://placehold.it/)
Now, here's the fiddle: http://jsfiddle.net/QmxWc/1/. Main thing that was missing was position:relative on the <ul> you were trying to move. But you also had some logic problems with your javascript.
CSS:
.block-nav ul {
position: relative;
}
JS:
$('.nav-controls').on('click', '.nav-up', function (e) {
e.preventDefault();
//alert('clicked');
var navHeight = $(e.currentTarget).closest('.horz-scroll').find('.block-nav').height();
var el = $(e.currentTarget).closest('.horz-scroll').find('.block-nav > ul');
if ((el.height() - navHeight) > Math.abs(el.position().top)) {
el.animate({
top: '-=19'
}, 'fast');
console.log(el.css('top'));
}
});
I have a drop down menu on a page and want the menu to drop down from the main item to the left. It presently drops down to the right.
I have a jsfiddle for it here.
As you can see it presently drops down to the right and resizes the page to fit. I want the menu to drop to the left and keep all the dimensions in tact. Is there an easy way. I know the jQuery menu widget can do it, but I had other issues with that.
The button is somewhere in the middle of the page, so ideally I want the drop down to be to drop down relative to the parent, not just as the jsfiddle shows which is fixed against the right hand side. Hope this clarifies.
CODE:
IN DOC READY
$(document).ready(function () {
// Menus
$('ul.menu').hide();
$('ul#viewMenu li').hover(function () {
$(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
$(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});
});
CSS
ul#viewMenu { overflow: hidden; }
ul#viewMenu li { float:left; display: block; text-align: left; line-height: 40px; }
ul#viewMenu li a { line-height: 40px; }
ul#viewMenu ul.menu { position: absolute; }
ul#viewMenu ul.menu li { float: none; }
HTML
<div style="display: inline-block; float: right;">
<ul id="viewMenu" style="list-style: none; margin: 0; padding: 0;">
<li style="display: block; float: left;"> <a class="nav-button view-type-button" style="text-align: center;" href="#"
title="Change the things.">
<span>
<img src="~/Content/themes/base/images/empty.png" style="height: 48px; width: 49px;" alt="Things" />
</span>
</a>
<ul class="view-menu-item view-menu-bottom-right menu"
style="width: 170px !important">
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing1-calendar-button"></span>
<span>This 1</span>
</a>
</li>
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing2-calendar-button"></span>
<span>This 2</span>
</a>
</li>
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing3-calendar-button"></span>
<span>This 3</span>
</a>
</li>
</ul>
</li>
</ul>
Turns out all I needed to do was get hold of the current drawn position from the jQuery offset value. Then set the CSS position for the absolute element. Simples... when you know how!
var position = $('ul#viewMenu ul.menu').offset();
$('ul#viewMenu ul.menu').css({ top: (position.top) + 'px', left: (position.left - 160) + 'px' });
$('ul.menu').hide();
$('ul#viewMenu li').hover(function () {
$(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
$(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});
Simple. Just give this:
ul#viewMenu ul.menu {
position: absolute;
right: 0;
}
Fiddle: http://jsfiddle.net/praveenscience/T8hFW/1/