I am trying to show/hide div on click with slidetoggle, its working properly but when I click on input, its still showing/hiding, how do I make it working only on LI not on inner elements.
Here is the working JSfiddle Demo
Limitation I have is I can't bring that div out of LI as currently its within LI tag
Here is the function I have created for that:
$('#location').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});
If you will trigger function while clicking parent div, it also will trigger when child is clicked, you can use immediate child selector,
$('#location > a').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});
Are you looking for this?
I have added a class toggleable in <a> because there may be use
many <a> and in script i have selected 2 selector one toggleable
class and another one list item.
$('#location .toggleable, #location ul li').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});
/*Location Popup*/
.location_contents {background: #fff; max-width: 450px; min-width: 450px; position: absolute; left: 0; top: 68px; width: 100%; z-index: 2; border-radius:4px; box-shadow:0 6px 8px -1px rgba(0, 0, 0, 0.5); display:none;}
.location_contents:after {bottom: 100%; left: 85%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(232, 248, 255, 0); border-bottom-color: #e8f8ff; border-width: 15px; margin-left: -15px;}
.location_contents_head {background: #e8f8ff; float: left; padding: 15px; width: 100%; box-sizing:border-box; color:#404040;}
.location_contents_head > input{width:100%; display:block; padding:8px; border:1px solid #d7d7d7; font-size:14px; color:#404040; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset; height:45px;}
.location_contents_body{float:left; width:100%; background:#fff; padding:15px; box-sizing:border-box; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;}
.location_contents_body > ul{list-style:none; margin:0; padding:0;}
.location_contents_body > ul > li{display:block; float:left; font-size:14px; color:#404040; display:block; float:left; min-width:140px; text-align:left; padding:3px 0;}
.location_contents_body > ul > li > span {padding: 4px 10px; display:inline-block; transition: all 0.3s ease 0s; border-radius: 2px;}
.location_contents_body > ul > li:hover > span {background: #0076AA; color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_right">
<ul>
<li id="location" class="actbtn">
<i class="ico ico_location"></i> Delhi/NCR
<div class="location_contents" style="display: block;">
<div class="location_contents_head"><input placeholder="Enter Your City" type="text"></div>
<div class="location_contents_body">
<ul>
<li><span>Agra</span></li>
<li><span>Aligarh</span></li>
<li><span>Allahabad</span></li>
<li><span>Ambala</span></li>
<li><span>Amritsar</span></li>
<li><span>Bhopal</span></li>
<li><span>Chandigarh</span></li>
<li><span>Dehradoon</span></li>
<li><span>Delhi/NCR</span></li>
<li><span>Indore</span></li>
<li><span>Lucknow</span></li>
<li><span>Ludhiana</span></li>
<li><span>Mathura</span></li>
<li><span>Meerut</span></li>
<li><span>Patiala</span></li>
</ul>
</div>
</div>
</li>
<li id="login"><i class="ico ico_user"></i> Login</li>
</ul>
</div>
Related
I have a question for you, i try to make a new project with fullpage.js.
But, my question is, how to make a menu, i try with :
Problem is, when i click for example on porfolio, it's ok, i'm on the second slide, but.. isn't possible for me to click on another tab
(HTML Part)
<nav>
<ul>
<li data-menuanchor="Accueil">Accueil</li>
<li data-menuanchor="PortFolio">PortFolio</li>
<li data-menuanchor="Contact">Contact</li>
</ul>
</nav>
and for JS part :
<script type="text/javascript">
$(document).ready(function () {
$('#fullpage').fullpage({
sectionsColor: ['', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
anchors: ['Accueil', 'PortFolio', 'Contact'],
});
$.fn.fullpage.setScrollingSpeed(1500);
});
</script>
Thank for helping :)
Ouuups ! I'm sorry to create this post for nothing.. I find the solution.
The solution was to, change in my CSS file.
with, this configuration :
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 4px;
border-radius: 4px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
What I'm trying to accomplish is when I hover over a link, it will make the other links opacity: .1 while keeping that link color the same.
What I tried doing is a:hover ~ a, but it isn't working. I created a new jsfiddle with a basic <a href=""> and it works fine but I'm not understanding why this isn't.
http://codepen.io/jzhang172/pen/OMRqpK
#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;
}
a.tumblr:hover ~ a.social{
opacity:.1;
}
<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>
As mentioned in other answers, you can't achieve the effect you want with the general sibling combinator (~).
However, I think the effect can still be achieved with pure CSS. Try this:
ul:hover li:not(:hover) { opacity: .1; }
Revised Demo
Explanation
li:not(:hover) will match all list items that are not hovered. But we can't use this alone, because then all list items will have opacity: .1 by default.
So we begin the selector with ul:hover, which creates a descendant selector saying: don't apply li:not(:hover) unless the ul is hovered first.
The general sibling combinator (~) matches siblings, your links are not siblings.
The list items containing them are siblings, which makes the links themselves cousins.
There is no way to describe a relationship between the links using CSS (there is no parent combinator).
The closest you can come would be to use li:hover ~ li > a.
What I tried doing is a:hover ~ a, but it isn't working. I created a
new jsfiddle with a basic and it works fine but I'm not
understanding why this isn't.
General sibling combinator selector ~ selects elements that have same parent element.
8.3.2. General sibling combinator
The general sibling combinator is made of the "tilde" (U+007E, ~)
character that separates two sequences of simple selectors. The
elements represented by the two sequences share the same parent in the
document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.
At
a.tumblr:hover ~ a.social {
opacity:.1;
}
a.social elements do not have same li parent as a.tumbler element
So, you're trying to do something similar to this :
a:hover, li>a.social{
opacity: .1;
}
With all the "a elements" already visible and then the "hovered" element triggering the others to "disappear"
I wrote this menu that elements dynamically adds, but after adding elements the parent the div does not grow.
CSS:
#frstMenu
{
position:absolute;
top:1.5%;
right:1%;
width:23%;
height:70%;
background:rgba(0,0,0,0.6);
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
padding-top:1%;
overflow:hidden;
z-index:2;
}
.menulist1{
position:absolute;
width:100%;
height:15$;
top:0%;
right:0%;
dispaly:none;
text-decoration: none;
color: #333;
clear:both;
border-bottom: 1px solid #e6e8ea;
z-index:2;
}
#menulist
{
position:absolute;
top: 100%;
right: 1%;
width:23%;
height:500%;
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0,0,0,0.2);
border-top: none;
border-bottom: none;
list-style: none;
z-index:1;
}
HTML:
> <div id="firstMenuList">
> <div id="frstMenu">choose</div>
> <div id="menulist" class="menuList"></div>
> <div id="frstList1" class="menuList"></div> <- The child divs are similar this </div>
Javascript:
function ccc( prnt , id , cls, r ) {
var ar=new Array("hi","there","hello","world","adsad","asdsad","dsfsdfs","fdsfsdf","sfdsfsdf","soiqeqjek");
var parent=document.getElementById(prnt);
for (var i=0;i<ar.length;i++)
{
var node=document.createElement("div");
node.setAttribute("id",id+""+i);
node.setAttribute("class",cls);
node.setAttribute("onclick","select('"+id+""+i+"')");
node.style.top=(((i)*15)+2)+"%";
node.style.right=r+"%";
node.innerHTML=ar[i];
parent.appendChild(node);
}
parent.style.display="none";
}
And how do I call that function:
ccc("menulist","frstMenu","menulist1","0");
Image:
With position: absolute you must grow your menu inside loop (for) - just add height while you are adding each element.
Code for adding height without using jQuery should in your case look like this:
parent.style.width = parent.clientHeight + 20;
But its of course example and you must change "20" value to your own (calculated).
I added a swipeJS photo slideshow to my jquery mobile application. I have one problem.
I want such points for the count of the pictures like on the page: http://swipejs.com/
I added the following html and css to my project but it only displays the points vertical and without any formatting like bigger/smaller.
CSS:
#position {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
#position li {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #141414;
box-shadow: inset 0 1px 3px black,0 0 1px 1px #202020;
margin: 0 2px;
cursor: pointer;
}
#position li.on {
box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);
background-color: #1293dc;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));
background-image: -webkit-linear-gradient(top,#1293dc,#0f6297);
background-image: -moz-linear-gradient(top,#1293dc,#0f6297);
background-image: -ms-linear-gradient(top,#1293dc,#0f6297);
background-image: -o-linear-gradient(top,#1293dc,#0f6297);
background-image: linear-gradient(top,#1293dc,#0f6297);
}
HTML:
<div data-role="content" id="contentPics">
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap' id="picSwipe">
<div><b>Pic</b></div>
<div><b>Pic2</b></div>
</div>
</div>
<nav>
<ul id='position'>
<li class='on'></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
Example-fiddle without the points: http://jsfiddle.net/Spokey/unTHs/3/
Working example: http://jsfiddle.net/Gajotres/d9Qnu/
Javascript :
var elem = document.getElementById('mySwipe');
var bullets = document.getElementById('position').getElementsByTagName('li');
window.mySwipe = Swipe(elem, {
continuous: true,
callback: function(pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
});
HTML :
<div id="slider" data-role="page">
<div data-role="content" id="contentSlider">
<div id='mySwipe' style='min-width:500px; margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><b>1</b>
</div>
<div><b>2</b>
</div>
<div><b>3</b>
</div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
</div>
<nav data-theme="a" data-role="footer" data-position="fixed" id="footer">
<ul id='position'>
<li class='on'></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
CSS :
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
-webkit-text-size-adjust:none;
font-family:sans-serif;
min-height:416px;
}
h1 {
font-size:33px;
margin:50px 0 15px;
text-align:center;
color:#212121;
}
h2 {
font-size:14px;
font-weight:bold;
color:#3c3c3c;
margin:20px 10px 10px;
}
small {
margin:0 10px 30px;
display:block;
font-size:12px;
}
a {
margin:0 0 0 10px;
font-size:12px;
color:#3c3c3c;
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
width:80%;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
html, body {
background: #f3f3f3;
}
#console {
font-size: 12px;
font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
color: #999;
line-height: 18px;
margin-top: 20px;
max-height: 150px;
overflow: auto;
}
#mySwipe div b {
display:block;
font-weight:bold;
color:#14ADE5;
font-size:20px;
text-align:center;
margin:10px;
padding:100px 10px;
box-shadow: 0 1px #EBEBEB;
background: #fff;
border-radius: 3px;
border: 1px solid;
border-color: #E5E5E5 #D3D3D3 #B9C1C6;
}
#footer {
height: 50px;
}
#position {
margin-left: auto;
margin-right: auto;
width: 60px;
}
#position li {
display:inline-block;
width:10px;
height:10px;
border-radius:10px;
background:#141414;
box-shadow:inset 0 1px 3px black,0 0 1px 1px #202020;
margin:0 2px;
cursor:pointer;
}
#position li.on{
box-shadow:inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);
background-color:#1293dc;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));
background-image:-webkit-linear-gradient(top,#1293dc,#0f6297);
background-image:-moz-linear-gradient(top,#1293dc,#0f6297);
background-image:-ms-linear-gradient(top,#1293dc,#0f6297);
background-image:-o-linear-gradient(top,#1293dc,#0f6297);
background-image:linear-gradient(top,#1293dc,#0f6297);
}
Try the following code
var bullets = document.getElementById('position').getElementsByTagName('li');
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
callback: function (pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
});
This will change the .on class depending on the slide number.
See it in action here
I am trying to change my menu icons and color of text on click.
in my menu Each
<li> element has a hyperlink tag there are 2 child below it <span class="icon"> and <div class="icon"> what i am trying to achieve is on click the class has to be changed to
<span class="icon active"> <div class="icon active"> and when the next menu item is clicked this active class has to be removed
JS Fiddel
HTML CODE
<div id="grid">
<div id="menuBase">
<div id="menu">
<ul>
<li></span><div class="icon" id="mtext">Menu1 </div></li>
<li><span class="icon" id="about"></span><div class="icon" id="mtext">Menu2</div></li>
<li><span class="icon" id="soln"></span><div class="icon" id="mtext">Menu 3</div></li>
<li><span class="icon" id="lab"></span><div class="icon" id="mtext">Menu4</div></li>
<li><span class="icon" id="port"></span><div class="icon" id="mtext">Menu5</div></li>
<li><span class="icon" id="contact"></span><div class="icon" id="mtext">Menu6</div ></li>
</ul>
</div>
</div>
</div>
CSS CODE
#grid{
width: 750px;
margin:0 auto;
}
#menuBase{
background: #fff;
width:100%;
height:44px;
-webkit-border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
border-radius: 90px 90px 0 0;
border-right:2px solid #fff;
}
#menu{
background: #E1E1E3;
width:100%;
height:100%;
-webkit-border-radius: 99px 99px 0 0;
-moz-border-radius: 99px 99px 0 0;
border-radius: 99px 99px 0 0;
border-right: 1px #fff solid;
border: 2px #ccc solid;
border-right: none;
border-bottom: none;
}
#hrhead{
background: #cccccc;
height: 3px;
-webkit-margin-before:0;
-webkit-margin-after:0;
border-bottom: 1px #ffffff solid;
}
#hrfoot{
background: #cccccc;
height: 3px;
-webkit-margin-before:0;
-webkit-margin-after:0;
border-top: 1px #ffffff solid;
}
#menu ul{
float:left;
width:100%;
padding-left:43px;
margin:0;
list-style-type:none;
}
#menu li{
display: block;
float: left;
width:40px;
height: 25px;
margin-right: 68px;
margin-top: 11px;
}
#menu li:last-child{
margin-right: 0px;
}
.icon{
height:25px;
width: 40px;
display: block;
color:#777777;
}
#mtext{
height:27px;
width: 80px;
display: block;
margin: 11px 0 0 -20px;
text-align: center;
}
#menu li a{
text-decoration:none;
}
#menu li a:hover #mtext{
color:#DC0000;
}
#menu li a:hover .icon{
background-position-y:24px;
}
#home{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
#about{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
#soln{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
#lab{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
#port{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
#contact{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
.active{
background-position-y:24px !important;
color:#DC0000 !important;
}
Jquery [Damm i am lost]:
$("#menu > ul > li > a").click(function(e){
e.preventDefault();
});
DEMO : http://jsfiddle.net/VLXxR/8/
$("#menu > ul > li > a").click(function(e){
e.preventDefault();
$("#menu .icon").removeClass("active");
$(this).children(".icon").addClass("active")
});
DEMO : http://jsfiddle.net/VLXxR/7/
$("#menu > ul > li > a").click(function(e){
e.preventDefault();
$("#menu .icon").removeClass("active");
$(this).find(".icon").addClass("active")
});
Check out the documentation for removeClass - http://api.jquery.com/removeClass/
Your js should be like this ,FIDDLE
$("#menu > ul > li > a").click(function(e){
e.preventDefault();
$("#menu > ul > li > a > div,#menu > ul > li > a > span").removeClass('active');
$('div',this).addClass('active');
$('span',this).addClass('active');
});