here's what I have so far.
http://jsfiddle.net/nSfWs/
Right now when a user clicks on a product div, the green box appears by adding the class "selected" to the product div. What I'd like to also happen is for the class "unselected" to be added remaining two unselected product divs. Therefore, one div would have the green box/border and the other two would be faded with the opacity filter.
Can someone help me make this work? It seems simple enough, but it's driving me crazy. Thanks!
And for those who don't want to click on the jsfiddle link, here's the code.
<style type='text/css'>
div.product {
display:inline-block;
vertical-align:top;
text-align:center;
width:auto;
margin:0 47px 0 0;
padding:24px 22px 20px 27px;
border:1px solid transparent;
}
div.product:last-child {
margin:0px;
}
div.product:hover {
border:1px solid #878787;
-moz-border-radius:3px;
border-radius:3px;
}
div.product.unselected {
opacity:0.6;
filter:alpha(opacity=60);
}
div.product.selected {
border:1px solid #32a24e;
-moz-border-radius:3px;
border-radius:3px;
}
</style>
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(".product").click(function () {
$(this).toggleClass("selected");
});
});//]]>
//]]>
</script>
<div class="product">
<div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="Model 11710" width="85" height="146" /></div>
<div class="description">1</div>
</div>
<div class="product">
<div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" alt="Model 11710" width="85" height="146" /></div>
<div class="description">2</div>
</div>
<div class="product">
<div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/0f/Plectrophenax_nivalis1.jpg/320px-Plectrophenax_nivalis1.jpg" alt="Model 11710" width="85" height="146" /></div>
<div class="description">3</div>
</div>
Simply remove the class from the siblings:
$(".product").click(function () {
$(this).toggleClass('selected').siblings().removeClass("selected");
});
just remove the class from other divs on click event,
$(window).load(function(){
$(".product").click(function () {
$(".product").removeClass("selected")
$(this).toggleClass("selected");
});
});
and you can toggle the other class as well,
$(".product").click(function () {
$(".product").not(this).removeClass("selected").addClass('unselected')
$(this).toggleClass("unselected").toggleClass("selected");
});
See I have edited
Try using siblings() to change the class of the remaining divs.
$(this).siblings("product").addClass("unselected");
Try this:
$(".product").click(function () {
$(".product").removeClass("unselected");
$(".product").removeClass("selected");
$(this).addClass("selected").siblings().addClass("unselected");
});
Fiddle
Try this
$(window).load(function(){
$(".product").click(function () {
$(".product").removeClass("selected").addClass("unselected");
$(this).removeClass("unselected").addClass("selected");
});
});
Fiddle
Related
I want that when the click activate the element2 div, the element should disappear. And the element2 div should not appear at the beginning.
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
</div>
Add display none to hide an element from the start:
<div class="element2" style="display:none">
The rest of your code appears to be doing what it's supposed to, unless I am misunderstanding "I want that when the click activate the element2 div, the element should disappear"... which is entirely possible.
In order to have element2 hidden at the beginning you need to either add a style tag or even better add a CSS file where you will keep all of your stylings in one place.
For style tag:
<div class="element2" style="display:none">
For CSS:
.element2 {
display: none;
}
Then for your code you are close. In order to make element hide, you need to change it to:
$(".toggle").click(function() {
$(".element2").show();
$(".element").hide();
});
$(".close").click(function() {
$(".element2").hide();
$(".element").show();
});
The HTML will need some changes to, this will make what I wrote work the way I believe you want it to:
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
You should probably do something like this:
$(".toggle").click(function() {
$(this).parent().find(".element2").toggle();
});
$(".close").click(function() {
$(this).parent().hide(); // close the correct .element2
});
In CSS you need to:
.element2 {
display: none;
}
just $(".element2").hide(); hide it at start
$(function() {
$(".element2").hide();
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1
<div class="toggle">Toggle </div>
<div class="element2"> Element 2
<div class="close"> close</div>
</div>
</div>
HTML
<div class="element">
<div class="toggle"></div>
<div class="element2" style="display:none">
<div class="close"></div>
</div>
</div>
EXAMPLE CSS
.toggle
{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:left;
background:green;
}
.element2{
display:block;
width:40px;
height:40px;
margin-left:10px;
float:left;
background:yellow;
}
.close{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:right;
border:1px solid #000;
}
JQUERY
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").css({"display":"none"});
});
fiddle to check
I hope it is helpfull answer. Good Luck !
Does anybody knows how can I add some bootstrap icons to my textarea. Icons should show on focus and hide on focus out. This textarea is similary, if not the same as Facebook Add new status textarea.
All I was able to do is to expand and shrink textarea onfocus/focusout events, using JavaScript.
This is the code I have:
HTML:
<div class="jumbotron" style="height:150px">
<div class="col-lg-12">
<textarea class="expand" rows="3" cols="20"></textarea>
</div>
</div>
JS:
<script type="text/javascript">
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
$('textarea.expand').focusout(function () {
$(this).animate({ height: "2em" }, 500);
});
</script>
CSS:
.expand
{
height: 2em;
width: 50%;
}
I've also try using .css in JS and trying to add icon, but I suppose I don't do this right way, cause nothing gets shown.
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
$(this).css('glyphicon glyphicon-camera');
});
Textarea should behave like this:
OnFocusOut:
OnFocus:
Can someone help me, and give me an idea on how to do this...Because I'm pretty bad in JS.
One Simple answer can be creating a sibling div element to the textarea which will contain all the icons, show the div of focusing the textarea and hide it on focusout of the textarea
This example is using the selector
.parent:hover .links{}
but could be edited to
.parent:focus .links{}
if desired. However, to show you this in action, i've designed a simple demo below:
.parent{
height:100px;
width:70%;
background:red;
position:relative;
}
.parent:hover .links{
display:block;
}
.links{
display:none;
position:absolute;
bottom:0;
}
<div class="parent">
<div class="child">
<div class="links">
facebook twitter etc
<img src="http://placekitten.com/g/20/20" alt="" />
</div>
</div>
</div>
An example using Sibling selectors
Here is a working example of using the sibling selector
input:focus + .items
which selects the class .items of which has a sibling of 'input' which has a focus (i.e. what you're looking for)
#parent{
height:100px;
width:80%;
background:red;
position:relative;
}
.items{
bottom:0;
padding:5px;
display:none;
}
input:focus + .items{
display:block;
}
<div id="parent">
<input type="text" placeholder="enter text"/>
<div class="items">
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
</div>
</div>
I'm trying to make two buttons that slide when clicked and push the other button out of the viewport. For example:
Before clicked - [ blue | grey ]
Click blue - [ all blue ]
Get it? I have the html and css set up perfectly (I think), but I just can't get this jQuery code to animate and change the positioning of the element that contains the two buttons. It's driving me nuts. What I have so far is:
<div id='container'>
<div id='wrapper'>
<a id='wrapper_photo' href=""></a>
<a id='wrapper_video' href=""></a>
</div>
</div>
<style>
#container{
width:760px;
height:25px;
background:#000000;
overflow:hidden;
}
#wrapper {
width:1520px;
height:25px;
background-color:#0F0;
position:relative;
left:-380px;
}
#wrapper_photo{
width:760px;
height:25px;
background-color:#666666;
float:left;
}
#wrapper_video {
width:760px;
height:25px;
background-color:#0000CC;
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper_photo').click(function() {
$('#wrapper').animate({
left:"-=380"},
5000);
});
});
</script>
I stopped when I couldn't get the left side to work.
here you go: DEMO
$(function(){
$('#wrapper_photo, #wrapper_video').click(function() {
$(this).animate({
width:"100%"},
5000);
$(this).siblings('a').animate({
width:'0px'
},5000);
});
});
I'm not sure if this new value for left will be set, so you can use position() function to get value of left of #wrapper container and then calculate new value.
$(document).ready(function() {
$('#wrapper_photo').click(function() {
var leftVal = $('#wrapper').position().left - 380;
$('#wrapper').animate({
left:leftVal},
5000);
});
});
I want to point out which div I clicked on to prevent confusing as the pop up menu that comes out of it on my site will be both the same just different links but same buttons. Now my problem is that i cant figure out how i can manage to do it been stuck on it for quite some time now. My site is in Wordpress for the info. The color of the text doesnt really matter atm.
The code does work but i want that when i hit "juicyplants" the color changes and when i hit "leafyplant" that color changes and "juicyplants" go back to normal. with the changing colors i mean the already presenting ones.
My code:
HTML:
<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>
CSS:
#leafyPlants{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
#juicyPlants{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
h2 {
float:left;
display:block;
height:40px;
width:150px;
cursor:pointer;
}
jQuery:
$("#clickOne").on('click', function() {
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
})
Best to change classes and use styling:
jsfiddle: http://jsfiddle.net/TrueBlueAussie/Pcn5a/2/#update
$(function () {
$("#clickOne").on('click', function () {
$('.clickDesign').removeClass("active");
$(this).addClass("active");
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function () {
$('.clickDesign').removeClass("active");
$(this).addClass("active");
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
})
});
in style add:
.active{
color: green;
}
It is better to data-drive any menu system and reduce the code:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/Pcn5a/3/
JQuery:
$(function () {
$('.clickDesign').on('click', function () {
var $this = $(this);
$('.clickDesign').removeClass("active");
$this.addClass("active");
// Use the id in the data-target attribute
$target = $($this.data('target'));
$(".target").not($target).fadeOut();
$target.fadeIn();
});
});
Html (has data-target attributes)
<div>
<div id="clickOne" class="clickDesign" data-target="#leafyPlants">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign" data-target="#juicyPlants">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants" class="target">Leafy Test</div>
<div id="juicyPlants" class="target">Juicy Test</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am facing a Problem in making Some Toggle Effect with JQuery between Two divs . I am at very poor level on jQuery. and with that knowledge I failed to make to toggle between two divs .
Current code in JS fiddle : http://jsfiddle.net/WSCBu/
I have Three Divs Class name Blue , Gray and orange . What I am trying to make is : when page loads Only two div Blue and Gray will Show and when I click the Text "Show" on Gray div The gray div will Hide and Orange Div will show . and When I click "Hide" text in Orange div this Orange div will Hide and again will show Gray div . May be it can be done with toggle function ? I am really not sure how . Hope for the Experts it may easy one ! I will very thankful if anyone Show me the process .
here is HTML
<div class="blue"></div>
<div class="gray">
<p> Show --> </p>
</div>
<div class="orange">
<p> -- Hide </p>
</div>
Css
.blue{
height:100px;
width:250px;
background:#1ecae3;
float:left;
}
.gray{
height:100px;
width:100px;
background:#eee;
float:left;
}
.orange{
height:100px;
width:150px;
background:#fdcb05;
float:left;
}
As you guessed, toggle() will do the job. When either .gray or .orange is clicked, we toggle the visibility of both:
$('.orange').hide();
$('.gray, .orange').on(
'click',
function()
{
$('.gray, .orange').toggle()
}
);
$('.orange').hide();
$('.gray, .orange').on('click',
function() {
$('.gray, .orange').toggle()
}
);
.blue {
height: 100px;
width: 250px;
background: #1ecae3;
float: left;
}
.gray {
height: 100px;
width: 100px;
background: #eee;
float: left;
}
.orange {
height: 100px;
width: 150px;
background: #fdcb05;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
<div class="gray">
<p>Show --></p>
</div>
<div class="orange">
<p>-- Hide</p>
</div>
DEMO
$('.orange').hide();
$('.gray p').click(function(){
$('.gray').hide();
$('.orange').show();
});
$('.orange p').click(function(){
$('.gray').show();
$('.orange').hide();
});
Shorter code with .toggle()
DEMO
$('.orange').hide();
$('.gray p,.orange p').click(function(){
$('.gray,.orange').toggle();
});
Use following js :
jQuery('.gray').click(function(){
jQuery(this).hide();
jQuery('.orange').show();
});
jQuery('.orange').click(function(){
jQuery(this).hide();
jQuery('.gray').show();
});
Here is the working fiddle : http://jsfiddle.net/WSCBu/6/
Similar to above answer:
$('.gray').click(function () {
$(this).toggle();
$('.orange').toggle();
});
$('.orange').click(function () {
$(this).toggle();
$('.gray').toggle();
});
Demo.
$(".gray").click(function(){
$(".gray").toggle();
$(".orange").show();
});
$(".blue").click(function(){
$(".blue").toggle();
$(".orange").show();
});
$(".orange").click(function(){
$(".blue").toggle();
$(".gray").toggle();
$(".orange").toggle();
});
DEMO
$('.orange').hide();
$(".gray p").click(function(){
$(".gray").hide();
$(".orange").show();
})
$(".orange p").click(function(){
$(".orange").hide();
$(".gray").show();
})
Add a class show to the two div and then you can use a toggle method. example http://jsfiddle.net/WSCBu/21/
shown here.
<div class="blue"></div>
<div class="gray show" style="display:none";>
<p> Show --> </p>
</div>
<div class="orange show">
<p> -- Hide </p>
</div>
$(document).on('click','.show',function(){
$('.show').toggle();
});
I guess it should as simple as the following code. Please forgive the code alignment. Answering it via my cell phone :)
<style>
.blue{
height:100px; width:250px; background:#1ecae3; float:left; }
.gray{
height:100px; width:100px; background:#eee; float:left; }
.orange{ height:100px; width:150px; background:#fdcb05; float:left; display:none;}
</style>
<div class="blue"></div>
<div class="gray"> <p> Show --> </p> </div>
<div class="orange"> <p> -- Hide </p> </div>
<script>
$(".gray p").click(function() {
$(".gray").hide();
$(".orange").show();
});
$(".orange p").click(function() {
$(".gray").show()
$(".orange").hide();
} );
</script>