I have a case :
HTML :
<div class="a b">
<span class="one">Success ONE</span>
<span class="two">ONE</span>
</div>
<div class="a b">
<span class="one">Success TWO</span>
<span class="two">TWO</span>
</div>
I want to show .two which the default is hidden. If I use CSS, I can use :
.two {visibility:hidden;}
.a:hover .two {visibility:visible;}
It works well when using CSS, but in my case, I have to comment tag this css .a:hover .two {visibility:visible;}.
I want to show .two with JavaScript. Could you help me to show .two when hovering .a class? (I want the same result with JavaScript like using .a:hover .two {visibility:visible;})
I'm not sure why you want to do this with JS when it can be done with CSS but here you go:
CSS
.two {display:none;}
JS
$(".a").hover(function(){
$(this).find(".two").toggle();
});
FIDDLE
// EDIT
This was my original answer. I changed it to shorten the code but I will repost it:
$(".a").hover(function(){
$(this).find(".two").css({"visibility":"visible"});
}, function(){
$(this).find(".two").css({"visibility":"hidden"});
});
First you have to declare in the css.
.two {display:none;}
after that do something like this.
<script>
$(document).ready(function(){
$(".a").hover(function(){
$(this).find('> .two').css("display","block");
},function(){
$(this).find('> .two').css("display","none");
});
});
</script>
Problem is solved. I'm using Javascript :
$(".a").hover(function(){
$(this).find(".two").css({"visibility":"visible"});
}, function(){
$(this).find(".two").css({"visibility":"hidden"});
});
This is the previous answer from #jmore009 before he was editing his last answer.
Related
how can I add a class to my html element as a string
like this:
'.step1{transform : translate(10px,10px); transition-duration: 1s;}'
I've tried jquery addClass but it takes only the class name not a string as the whole class.
the problem is i want to generate a class dynamically then remove it using removeClass, if i add it as css it's not possible to remove it easly
This should do the trick. If you hover the second box, the first one moves.
$('.two').mouseenter(function(){
$('.one').addClass('move');
});
$('.two').mouseleave(function(){
$('.one').removeClass('move');
});
.one, .two {
background-color:green;
width:100px;
height:100px;
transition-duration: 1s;
}
.two {
background-color:red;
}
.move {
transform: translate(100px, 100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='one'>
</div>
<div class='two'>
</div>
If you are already using Jquery then use css() function Know more here
i hope it helps.
$(".step1").css({"transform": "translate(10px,10px)", "transition-duration": "1s"});
This might help you, This will not add any class, it will directly add the styling to the div. addClass()/removeClass() will only use for adding/removing the class. The parameter passing inside this will be a class name.
$('.targetDiv').CSS({"transform" : "translate(10px,10px)", "transition-duration": "1s"});
I've added two examples.
One with adding a class to the div and placing the style in it.
or I've added a Jquery function that applies the css to the div without adding a class.
jsfiddle here
$('#add_class').on('click', function(){
$("#my_first_div").addClass("step1");
});
$("#add_css").on('click', function(){
$("#my_first_div").css("transform", "translate(10px,10px)");
$("#my_first_div").css("transition-duration", "1s");
});
$("#reset").on('click', function(){
$("#my_first_div").removeClass("step1");
$("#my_first_div").css("transform", "translate(0px,0px)");
$("#my_first_div").css("transition-duration", "1s");
});
#my_first_div {
color:red;
}
.step1{transform : translate(10px,10px); transition-duration: 1s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="my_first_div">
my div
</div>
<br /><br /><button id="add_class">
add class
</button>
<button id="add_css">
add css
</button>
<button id="reset">
reset
</button>
explanation: with the addClass event a class will be added to the div and applies the style that is in the css documentation addclass
and how to remove the class
With the css event a css style will be applied to the div without setting it in the css you can see an example and documentation here
A previous developer built a webpage with a woman and numbers on it to click for to show services related to a bodypart. You can see the current page here...
http://dermanaissance.com/nos-solutions/
My issue here is that he built the solution with CSS VS using JS or Jquery. I'm trying to hide the other blocks when a specific block has been clicked using what he's already done but am afraid isn't possible only using CSS.
I'm not quite sure how to tackle this one without using Jquery as this is usually how I would approach this, any ideas?
This is the code right now...
<div id="anchor-1" class="nos-anchor">1
<span class="nos-block">
<span class="nos-line"> </span>
<ul>
<li>Lift Sans Chirurgie</li>
<li>Atténuation des Rides</li>
<li>Contour des Yeux</li>
<li>Double-menton</li>
<li>Bajoues</li>
<li>Relâchement du Cou</li>
<li>Ouverture du Regard</li>
<li>Augmentation du Volume</li>
<li>Amélioration du Teint de la Peau</li>
<li>Acné Active</li>
<li>Cicatrices d’Acné</li>
<li>Décolleté</li>
<li>Atténuation des Cicatrices</li>
<li>Photorajeunissement</li>
<li><a href="/taches-pigmentaires-et-melasma/">
Taches pigmentaires et Mélasma</a></li>
<li>Couperose et Rosacée</li>
<li>Varicosités</li>
</ul>
</span>
</div>
and the CSS that makes this solution work...
.page-id-9 #main-content .nos-anchor {
position: absolute;
display: block;
z-index: 9;}
.page-id-9 #main-content .nos-anchor .nos-block {
position: absolute;
display: none;}
.page-id-9 #main-content .nos-anchor .nos-block a {
display: block;}
.page-id-9 #main-content .nos-anchor .nos-line {
display: block;
position: absolute;
top: 20px;}
If you want a pure CSS solution I suggest looking into the Target psuedo element, otherwise -
Here is a pure javascript solution. Just give the divs you are hiding and showing an ID, and call them with the clickable object using onclick="hideShow(sectionID);"
<div style="height:40px; width:40px; background:red;" onclick="hideShow('div1')">
<div id="div1" style="display:none; background:orange; width:15px; height:15px;"></div>
</div>
<div style="width:40px; height:40px; background:yellow;" onclick="hideShow('div2')">
<div id="div2" style="display:none; background:green; width:15px; height:15px;"></div>
<div></div>
</div>
<div style="width:40px; height:40px; background:blue;" onclick="hideShow('div3')">
<div id="div3" style="display:none; background:purple; width:15px; height:15px;"></div>
<div></div>
</div>
var currrentElementShowing;
function hideShow(sectionID) {
if (document.getElementById(sectionID) != currrentElementShowing) {
document.getElementById(sectionID).style.display = "block";
if (currrentElementShowing != undefined) {
currrentElementShowing.style.display = "none";
}
currrentElementShowing = document.getElementById(sectionID);
} else {
}
}
https://jsfiddle.net/cxjndqzu/
Wow "page-id-9" is pretty terrible naming convention (I know you didn't do it, but MAN!).
So, what I would do is create two CSS classes:
"ToggleClass"
"Active"
You would assign "ToggleClass" to all of your list items. Using CSS, you make "ToggleClass" items that ALSO have the "Active" class display how you would like. "ToggleClass" items WITHOUT the "Active" class would be hidden as you would like.
Then, using jQuery (sorry, but I think it has to be done), make the following function:
$(document).ready(function(){
$(".ToggleClass").on("click", function(){
$(".ToggleClass").removeClass("Active");
$(this).addClass("Active");
});
});
This event will fire anytime someone clicks a "ToggleClass" element. First, it removes the "Active" class from ALL elements that have "ToggleClass" (this ensures that you won't simultaneously have two elements with the "Active" class). Next, it adds the "Active" class to the element that was clicked.
Leave a comment and let me know how this works for you - Good luck!
Having looked at your page, you could apply something like this. You'll have to use pure Javascript or Jquery. Since you mentioned JQuery as your preference:
html
<div>
<div class="pill">1</div>
</div>
<div>
<div class="pill">2</div>
</div>
js
$('.pill').click(function(){
$(this).toggleClass('active')
if ($(this).hasClass('active')){
$('.pill').not(this).fadeOut(200)
}else{
$('.pill').not(this).fadeIn(200)
}
});
The idea here is to use Jquery's toggleClass method and to check whether the click element has the active class, and if it does hide the other elements. This should steer you in the right direction
Fiddle
js/jquery newbie here.
I'm trying to create in interactive map where some markers are absolutely positioned on a page and when hovered over, their related info pane should appear on the top left part of the screen. Preferably, fade in and fade out on mouse out. I've tried various things but nothing seems to work. here is a simplified markup that should hopefully show what I'm trying to do:
<div class="body">
<div class="links">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
</div>
<div class="panel">
<span class="one"> 1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
</div>
</div>
css:
.body .panel span{
display:block;
width:100px;
height:100px;
background:red;
margin:10px;
text-align:center;
display: none;
color:white;
}
.links span{
display: block;
}
.body .panel span.visible{
display: block;
}
some jquery I've been trying to understand. got it from somewhere around here
$(document).ready(function(){
$(".links span").hover(function() {
var index = $(this).index();
$(".panel span").each(function() {
$(this).eq(index).toggleClass("visible");
});
});
});
Just made a Fiddle
$(".links span").hover(function() {
var index = $(".links span").index($(this));
$(".panel span").eq(index).toggleClass("visible");
});
As you only want to display the related span, it's not necessary to use each().
And just some further information as you mentioned you're new to js/jquery - it's (in this case, not in general) also possible to use this instead of $(this) - var index = $(".links span").index(this); - as both will return the same result. this is the DOM object in the context of the hover() callback function, $(this) a jquery object. To illustrate the difference and the same result, I've just added a console message for both in an adjusted Fiddle.
As reference a nice article about "this" - http://remysharp.com/2007/04/12/jquerys-this-demystified
How could I make it so that given two elements let's say these boxes:
If I clicked over one, it would grow, and the other would shrink like and vice versa:
How can I do this?
I have seen this sort of done with CSS, using the focus tag and adjusting the width. But I have two problems there, first how could I affect the other element, and second as far as I can tell adjusting width will only stretch them right. I have seen people change the way they float the elements to deal with that, but I don't want to move them around the page to do this.
Here are 2 examples without Javascript/jQuery:
Pure CSS - Trigger on click: (example)
Using the checkbox hack in CSS you can effectively toggle the widths of the elements when the checkbox is :checked. Here is what part of the CSS looks like:
input[type=checkbox]:checked ~ .red {
width:70%;
}
input[type=checkbox]:checked ~ .green {
width:20%;
}
Go to the example for the full CSS.
HTML
<input type="checkbox" id="toggle" />
<div class="red">
<label for="toggle"></label>
</div>
<div class="green">
<label for="toggle"></label>
</div>
You might also be interested in the original example I made. It takes a different approach, though it doesn't fully work.
Pure CSS - Trigger on hover: (example)
Unfortunately, neither the adjacent selector, nor the general sibling selector can select previous elements, therefore it makes this a little difficult. I placed 2 general elements before the main elements in order to somewhat solve this issue.
.greenS:hover, .greenS:hover ~ .green,
.redS:hover, .redS:hover ~ .red {
width:72%;
}
.greenS:hover ~ .redS, .greenS:hover ~ .red,
.redS:hover ~ .greenS, .redS:hover ~ .green {
width:22%;
}
HTML
<div class="redS"></div><div class="greenS"></div>
<div class="red"></div>
<div class="green"></div>
Since this was tagged as JS/jQuery, here are 2 alternative solutions.
JS/jQuery - Trigger on click: (example)
$('.red, .green').click(function(){
$('.red').toggleClass('expanded')
.next('.green').toggleClass('contracted');
});
JS/jQuery - Trigger on hover: (example)
$('.red').hover(function(){
$(this).toggleClass('expanded')
.next('.green').toggleClass('contracted');
});
$('.green').hover(function(){
$(this).toggleClass('expanded')
.prev('.red').toggleClass('contracted');
});
See jQuery .animate() method documentation.
Example on jsfiddle:
.box {
width: 100px;
height: 100px;
display: inline-block;
}
#box1 {
background: red;
}
#box2 {
background: blue;
}
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
$('.box').click(function() {
var currentWidth = $(this).outerWidth(),
siblingCurrentWidth = $(this).siblings('.box').outerWidth();
$(this).animate({'width' : currentWidth/2})
.siblings('.box').animate({'width' : siblingCurrentWidth*2});
});
This is a very simple example with several flaws, but it demonstrates a possibility for what your purpose is.
Simple example http://jsfiddle.net/PeLub/ ( modify how you need) .
<div class="box" id="first"></div>
<div class="box" id="second"></div>
$("#first").click(function(){
$(this).animate({width:'50px'}, 500);
$("#second").animate({width:'150px'}, 500);
});
$("#second").click(function(){
$(this).animate({width:'50px'}, 500);
$("#first").animate({width:'150px'}, 500);
});
I'm wondering how to appropriately write css to do the following, I have the following html code:
<div class="class1">
Hello
<div style="opacity:0" class="class2">
World
</div>
</div>
When I hover over class 1, I want to change class2's opacity to 1. How would I do that? Thanks!
First remove the inline style and create a css rule for class2. Then change the opacity when hovering over class1.
.class2 {
opacity: 0;
}
.class1:hover .class2 {
opacity: 1
}
http://jsfiddle.net/zC8Wc/
edit
The inline style has been removed because you can't override them in your CSS without using the !important rule which you should absolutely try to avoid. Also all your styling should be in stylesheets not in your HTML.
in css:
.class1:hover .class2{
opacity:1;
}
jsfiddle: http://jsfiddle.net/markasoftware/BD66q/
use visibility instead
<div class="class1" onmouseover="show_div()">Hello
<div style="visibility:hidden;" class="class2">
World
</div>
</div>
<script>
function show_div()
{
document.getElementsByClassName("class2")[0].style.visibility="visible"
}
</script>