How to make one item selected at a time?

How to make one item selected at a time? - javascript

At the default state I want 'ALL' to be selected. Click on another item will change all other classes so that 'this' has the class and the others don't. My problem is why can't 'ALL' be re-selected?
jsFiddle: http://jsfiddle.net/u5g9vLkx/
HTML:
<ul class="nav2">
<li>ALL</li>
<li>PERSONAL</li>
<li>PHOTOGRAPHY</li>
<li>WORK</li>
</ul>
CSS:
body{
background: #000000;
}
.nav2{
float: none;
list-style-type:none;
overflow: hidden;
clear: both;
text-align: left;
display: inline-flex;
}
.nav2 li{
clear: both;
overflow: hidden;
margin-left: 10px;
}
.orange{
opacity: .5;
color: #FF9000;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
border: 1px solid #000;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.orange:hover{
opacity: 1;
color:#000000;
background: #FF9000;
}
.orange2{
color: #FF9000;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
border: 1px solid #FF9000;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.orange2:hover{
color:#000000;
background: #FF9000;
}
Javascript:
$('a.orange').click(function(){
$('a.orange2').addClass('orange');
$('a.orange').removeClass('orange2');
$(this).removeClass('orange');
$(this).addClass('orange2');
});

In your Javascript code you are applying the onClick listener only to a.orange (a elements with the class orange)
$('a.orange').click(function(){ ... });
Since the "ALL" menu entry does not have orange, but orange2 as its class, it is not affected by that.
You can fix this by including a.orange2 in the selector:
$('a.orange, a.orange2').click(function(){ ... });

Maybe something like that :
<ul class="nav2">
<li>ALL</li>
<li>PERSONAL</li>
<li>PHOTOGRAPHY</li>
<li>WORK</li>
</ul>
$('a.orange2').click(function(){
$('a.orange2').removeClass('orange2').addClass('orange');
$(this).addClass('orange2').removeClass('orange');
});
http://jsfiddle.net/khzehpfx/

Related

How to write a javascript code for a specific audio player

I wrote this code below as an audio player, i want to make it work by javascript but i don't know where to start? i want to have a play and pause option and nothing more! since i'm new to javascripts i dont know how can i make it work on this!
How can i write a javascript for this audioplayer?
#musicplayer {
position: fixed;
z-index: 999999;
bottom: 25px;
margin-left: 20px;
display: flex;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#musicplayer>*,
.play>* {
align-self: center;
-webkit-align-self: center
}
.roundthing img {
margin: 8px;
width: 15px;
margin-bottom: 200px;
}
.midline {
width: 0px;
height: 3px;
background: #fff;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
}
#musicplayer:hover .midline {
width: 20px;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.play {
display: flex;
min-width: 124px;
height: 31px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 0;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
margin-top: -200px;
}
.music-controls,
.music-controls>* {
user-select: none;
-webkit-user-select: none;
width: 11px;
font-size: 11px;
cursor: pointer;
}
.pausee {
display: none;
}
.playtext {
margin-left: 8px;
font-family: courier new;
font-size: 9px;
}
#musicplayer:hover .play {
opacity: 1;
transition-delay: .0s;
-webkit-transition-delay: .0s;
}
<div id="musicplayer" class="box fade-in one">
<div class="roundthing">
<img src="https://www.clipartmax.com/png/middle/22-223778_notenschl%C3%BCssel-clipart-animated-gif-music-notes.png"></div>
<div class="midline"></div>
<div class="play">
<div class="music-controls">
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="playtext">Fairytail</div>
</div>
<!--play-->
<audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpeg"></audio>
</div>

You mean something like this?
window.addEventListener("load",function() {
document.querySelector(".playy").addEventListener("click",function() {
document.getElementById("tune").play();
this.style.display="none";
document.querySelector(".pausee").style.display="block";
})
document.querySelector(".pausee").addEventListener("click",function() {
document.getElementById("tune").pause()
this.style.display="none";
document.querySelector(".playy").style.display="block";
})
})
#musicplayer {
position: fixed;
z-index: 999999;
bottom: 25px;
margin-left: 20px;
display: flex;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#musicplayer>*,
.play>* {
align-self: center;
-webkit-align-self: center
}
.roundthing img {
margin: 8px;
width: 15px;
margin-bottom: 200px;
}
.midline {
width: 0px;
height: 3px;
background: #fff;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
}
#musicplayer:hover .midline {
width: 20px;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.play {
display: flex;
min-width: 124px;
height: 31px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 0;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
margin-top: -200px;
}
.music-controls,
.music-controls>* {
user-select: none;
-webkit-user-select: none;
width: 11px;
font-size: 11px;
cursor: pointer;
}
.pausee {
display: none;
}
.playtext {
margin-left: 8px;
font-family: courier new;
font-size: 9px;
}
#musicplayer:hover .play {
opacity: 1;
transition-delay: .0s;
-webkit-transition-delay: .0s;
}
<div id="musicplayer" class="box fade-in one">
<div class="roundthing">
<img src="https://www.clipartmax.com/png/middle/22-223778_notenschl%C3%BCssel-clipart-animated-gif-music-notes.png"></div>
<div class="midline"></div>
<div class="play">
<div class="music-controls">
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="playtext">Fairytail</div>
</div>
<!--play-->
<audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpeg"></audio>
</div>

Show div when hover over another separate div

I have searched the web and found similar questions to my own, but I have not been able to achieve the results that I am looking for. I am not the most well versed with html/css/and javascript/jquery so I am wondering if it is an error on my part with how I am formatting everything, or the path to which I am trying to write these results.
I have three circles, spaced equally in the center of the page. Each circle links out to a different page. On hovering over a circle, a span is revealed (by changing the opacity property in css) that provides a title for where that link goes.
What I am having trouble doing is: When you hover over each circle, in addition to a span being revealed that provides a title, I want to have a short descriptive text appear below the circles. When you mouse out of that said circle, the descriptive text will disappear. Each circle must have its own descriptor text.
From what I have gathered, the jquery hover on event is likely the best way to do this, however I cannot seem to get the syntax correct to make it work.
<script>
jQuery(document).ready(function() {
jQuery('#text1').hide();
});
jQuery(document).ready(function() {
jQuery('.grid_1').hover(function() {
jQuery(this).find('#text1').show();
},
function() {
jQuery('#text1').hide();
});
});
</script>
Any and all help would be greatly appreciated. Please let me know if I should clarify anything.
Link to jsfiddle

Your jquery references #text1 and it should be .text1 since that element is a class. Also $(this).find('.text').show(); won't work because .text is not a child of the thing you're hovering over ($(this)). Just use $('.text1')
$(document).ready(function() {
$('.text1').hide();
});
$(document).ready(function() {
$('.grid_1').hover(function() {
$('.text1').show();
},
function() {
$('.text1').hide();
});
});
.gridcontainer {
width: 720px;
margin: 30px auto;
}
.grid_1 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_2 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_3 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.fmcircle_out {
width: 200px;
height: 200px;
text-align: center;
display: block;
margin-left: 10px;
opacity: 0.75;
border-radius: 100px;
border: solid 2.5px #8D8B8B;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 30px 25px 25px 25px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
position: absolute;
opacity: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:focus {
opacity: 1;
}
.fmcircle_blue {
background-color: #35C317;
}
.fmcircle_red {
background-color: #BA282B;
}
.fmcircle_green {
background-color: #2E70DC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="gridcontainer clearfix">
<div class="grid_1">
<div class="fmcircle_out">
<a href="link1.html">
<div class="fmcircle_in fmcircle_blue">
<span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
</div>
</a>
</div>
</div>
<div class="grid_2">
<div class="fmcircle_out">
<a href="link2.html">
<div class="fmcircle_in fmcircle_green">
<span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="link3.html">
<div class="fmcircle_in fmcircle_red">
<span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
</div>
</a>
</div>
</div>
</div>
<div class="text_container">
<p class="text1">Text box1</p>
<p class="text2">Text box2</p>
<p class="text3">text box3</p>
</div>
Though I would re-write it to be a little more flexible and with less code like this, utilizing a data attribute in the .grid circles to define the text block class to show, then adding/removing a class that shows the text instead of using jquery's $.hide() and $.show()
$(document).ready(function() {
$('.grid').hover(function() {
$($(this).attr('data-text')).addClass('show');
},
function() {
$($(this).attr('data-text')).removeClass('show');
});
});
.gridcontainer {
width: 720px;
margin: 30px auto;
}
.grid_1 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_2 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_3 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.fmcircle_out {
width: 200px;
height: 200px;
text-align: center;
display: block;
margin-left: 10px;
opacity: 0.75;
border-radius: 100px;
border: solid 2.5px #8D8B8B;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 30px 25px 25px 25px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
position: absolute;
opacity: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:focus {
opacity: 1;
}
.fmcircle_blue {
background-color: #35C317;
}
.fmcircle_red {
background-color: #BA282B;
}
.fmcircle_green {
background-color: #2E70DC;
}
.text {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="gridcontainer clearfix">
<div class="grid_1 grid" data-text=".text1">
<div class="fmcircle_out">
<a href="link1.html">
<div class="fmcircle_in fmcircle_blue">
<span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
</div>
</a>
</div>
</div>
<div class="grid_2 grid" data-text=".text2">
<div class="fmcircle_out">
<a href="link2.html">
<div class="fmcircle_in fmcircle_green">
<span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
</div>
</a>
</div>
</div>
<div class="grid_3 grid" data-text=".text3">
<div class="fmcircle_out">
<a href="link3.html">
<div class="fmcircle_in fmcircle_red">
<span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
</div>
</a>
</div>
</div>
</div>
<div class="text_container">
<p class="text1 text">Text box1</p>
<p class="text2 text">Text box2</p>
<p class="text3 text">text box3</p>
</div>

I'll provide a css solution since there exist a jquery answer
Add the following to your css
.fmcircle_out:hover .description{
opacity:1;
}
.description{
opacity:0;
transition:opacity 1s;
}
.fmcircle_out a{
text-decoration:none;
}
.fmcircle_out:focus {
opacity: 1;
}
See snippet (Note you can add these rules to existing rules declared if you'd like)
.gridcontainer {
width: 720px;
margin: 30px auto;
}
.grid_1 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_2 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_3 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.fmcircle_out {
width: 200px;
height: 200px;
text-align: center;
display: block;
margin-left: 10px;
opacity: 0.75;
border-radius: 100px;
border: solid 2.5px #8D8B8B;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 30px 25px 25px 25px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
position: absolute;
opacity: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .description {
opacity: 1;
}
.description {
opacity: 0;
transition: opacity 1s;
}
.fmcircle_out a {
text-decoration: none;
}
.fmcircle_out:focus {
opacity: 1;
}
.fmcircle_blue {
background-color: #35C317;
}
.fmcircle_red {
background-color: #BA282B;
}
.fmcircle_green {
background-color: #2E70DC;
}
<div class="gridcontainer clearfix">
<div class="grid_1">
<div class="fmcircle_out">
<a href="link1.html">
<div class="fmcircle_in fmcircle_blue">
<span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
</div>
<div class="description">This link describes option 1</div>
</a>
</div>
</div>
<div class="grid_2">
<div class="fmcircle_out">
<a href="link2.html">
<div class="fmcircle_in fmcircle_green">
<span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
</div>
<div class="description">This link describes option 2</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="link3.html">
<div class="fmcircle_in fmcircle_red">
<span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
</div>
<div class="description">This link describes option 3</div>
</a>
</div>
</div>
</div>
<div class="text_container">
<p class="text1">Text box1</p>
<p class="text2">Text box2</p>
<p class="text3">text box3</p>
</div>

Jquery code Which hide another div on hover and make it visible when mouse move out.
<script>
$(document).ready(function(){
$('.grid_1').hover(
function () {
$('#text1').hide();
},
function () {
$('#text1').show();
}
);
});

Expand/collapse div on hover - not collapsing when not active

I have some divs set up so they expand when you hover on them, but at the moment they aren't closing when you don't hover on them, it just stays on the last one you hovered on. How can I get it so they are all closed if you aren't hovering on one?
JS
function hoverTiles(){
var tiles = $('.button');
tiles.removeClass('active');
tiles.hover(function(){
tiles.removeClass('active');
$(this).addClass('active');
})
}
$(document).ready(function() {
hoverTiles();
})
CSS
.buttons .button h4 {
z-index:3;
position: absolute;
bottom: 5%;
left: 5%;
width: 82%;
}
.buttons {
margin-top: 50px;
text-align: center;
}
.buttons .button {
display: inline-block;
position:relative;
overflow: hidden;
width: 32%;
height: 300px;
background: #fff;
border: 1px solid #efefef;
border-radius: 1px;
margin: 5px;
vertical-align: top;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button span {
display: block;
font-size: 54px;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button h4 {
margin-top: 0;
font-weight: 600;
color: grey;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button p {
font-size: 14px;
opacity: 0;
padding: 15px;
color: grey;
}
.buttons .button p a {
color: #1489ff;
text-decoration: none;
}
.buttons .active {
width: 32%;
height: 100%;
}
.buttons .active span {
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
font-size: 81px;
}
.buttons .active p {
opacity: 1;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.buttons .active h4 {
margin-top: 15px;
display:none;
}
HTML
<div class="buttons">
<div class="button active">
<span><i></i></span>
<div class="header">
<img src="/pageassets/test.jpg" alt="" />
<h4 style="color:black;">Documents</h4>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

hover can take a second function as a parameter which adds a handler for when the mouse leaves the element. You could remove the class again in there:
tiles.hover(function(){
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
})

$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);
Its example from https://api.jquery.com/hover/
You can also use mouseover() and mouseout() if you want to do that differently.

Highlighting Menu Item when clicked and active

I have a simple menu for my site with the normal paging links, home, About Us,...
I have been trying to find a way to highlight the menu item that is clicked, but all solutions are not working, although it is working on the solution fiddles, so its probably a mistake from my side as I have very little javascript knowledge
So..
The Menu is:
<div class="circle">
<ul id="nav" class="cirular-list" >
<li>Home</li>
<li>About Us</li>
<li>Our Work</li>
<li>Contact Us</li>
<li>Services</li>
</ul>
</div>
The CSS:
circle a {
font-family:'Roboto Condensed', sans-serif;
font-weight: 100;
display: block;
width: 20%;
height: 20%;
color:#000000;
text-align:center;
line-height:400%;
margin-left: -11%;
margin-top: -9%;
position: absolute;
text-align: center;
border:1px solid #ffffff;
border-radius: 50%;
-webkit-transition: border-color 1s ease;
-moz-transition: border-color 1s ease;
-o-transition: border-color 1s ease;
-ms-transition: border-color 1s ease;
transition: border-color 1s ease;
}
.circle a:hover {
color:#000000;
border-color: #000000;
}
#nav a:active, #nav a.active {
border-color:#000000 !important;
}
I tried many jQuery solutions
for example:
document.querySelector('.menu-button').onclick = function (e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
$(document).ready(function() {
$("#nav li").click(function (e) {
e.preventDefault();
$("#nav li a.active").removeClass("active"); //Remove any "active" class
$("a", this).addClass("active"); //Add "active" class to selected tab
// $(activeTab).show(); //Fade in the active content
});
});
I imagine its a simple thing, but I am stuck...

Try something like this
$(".menu-button").on("click", function(){
$("#nav li a.active").removeClass("active");
$(this).addClass("active");
})

In your CSS replace :active with :focus.
Demo on Fiddle
CSS:
.circle a {
font-family:'Roboto Condensed', sans-serif;
display: block;
color:#000000;
text-align:center;
position: absolute;
text-align: center;
border:1px solid #ffffff;
border-radius: 50%;
-webkit-transition: border-color 1s ease;
-moz-transition: border-color 1s ease;
-o-transition: border-color 1s ease;
-ms-transition: border-color 1s ease;
transition: border-color 1s ease;
}
.circle a:hover {
color:#000000;
border-color: #000000;
}
#nav a:focus, #nav a.active {
border-color:#00ff00;
}

You don't require any javascript code for this. Add this to your CSS:
#nav a:active, #nav a.active {
border: 1px solid #000;
background-color: yellow;
}
Since you were only assigning the border-color and no border-style (i.e. solid, dashed, etc.), you were not able to see the border.

How to make textbox border color fade in on focus using JavaScript or jQuery

How can I make the color of the textbox border fade into another color when it is focused? For example if the border color was #ddd then the user focused on the textbox it would fade into #0266C8 and when they unfocus it fades into #ddd again. Here is my code:
<!doctype html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function passwordCheck(y){
var x = y.value;
if(x.length>5) {
document.getElementById("error").innerHTML="Limit is 5 characters";
} else {
if(x.length<6) {
document.getElementById("error").innerHTML="";
}
}
}
</script>
<style type="text/css">
body {
margin:auto;
font-family:arial, sans-serif;
padding-top:100px;
}
.container {
width:920px;
margin:auto;
text-align:center;
}
.main_text {
font-family:"Bebas Neue";
font-size:76px;
color:green;
margin-bottom:10px;
}
.textbox1 {
border: 4px solid #ddd;
width: 888px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 16px;
font-size: 2em;
outline: none;
font-family: sans-serif;
border-radius:100px;
height:48px;
}
.textbox1:focus {
border: 4px solid #0266C8;
}
#error {
font-size:24px;
color:red;
font-family:"Bebas Neue";
}
</style>
</head>
<body>
<div class="container">
<span class="main_text">Password Strength Checker</span><br>
<input name="textbox1" onkeyup="passwordCheck(this);" onKeyPress="passwordCheck(this);" onChange="passwordCheck(this);" onKeyDown="passwordCheck(this);" type="password" class="textbox1" placeholder="Enter Password" style="margin-top:10px;" autofocus><br><br>
<div id="error"></div>
</div>
</body>
</html>
Any help will be greatly appreciated. Thanks, Omar.

Use CSS3 transitions.
.textbox1 {
border: 4px solid #ddd;
width: 888px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 16px;
font-size: 2em;
outline: none;
font-family: sans-serif;
border-radius:100px;
height:48px;
transition: background .5s ease-out; // global
-moz-transition: all .5s ease-out; // for mozilla
-o-transition: all .5s ease-out; // for opera
-webkit-transition: all .5s ease-out; //for webkit, chrome or safari
}
.textbox1:focus {
border: 4px solid #0266C8;
transition: background .5s ease-in; // global
-moz-transition: all .5s ease-in; // for mozilla
-o-transition: all .5s ease-in; // for opera
-webkit-transition: all .5s ease-in; //for webkit, chrome or safari
}
You can set the fade delay on .5s ease-in

You can try to use CSS transition here:
transition: border-color 1s linear;
-moz-transition: border-color 1s linear;
-o-transition: border-color 1s linear;
-webkit-transition: border-color 1s linear;
Fiddle Demo

you can use:
.container input{
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.container input:focus {
border: 1px solid #4F94CD;
}

Develop Reference

JavaScript is the programming language of the Web.

How to make one item selected at a time? - javascript

Maybe something like that : <ul class="nav2"> <li>ALL</li> <li>PERSONAL</li> <li>PHOTOGRAPHY</li> <li>WORK</li> </ul> $('a.orange2').click(function(){ $('a.orange2').removeClass('orange2').addClass('orange'); $(this).addClass('orange2').removeClass('orange'); }); http://jsfiddle.net/khzehpfx/

Related

How to write a javascript code for a specific audio player

Show div when hover over another separate div

Expand/collapse div on hover - not collapsing when not active

Highlighting Menu Item when clicked and active

How to make textbox border color fade in on focus using JavaScript or jQuery

Categories

Resources