Have some jquery script that must hide some text, objects, photos, etc.. The script hiding everything, but i need to show only 200px, then after clicking "more" - show 100%. (jquery lib i include) What i'm doing wrong? Thankx to all.
Here is a script:
<span id="hello-bigtext">Some big text, objects, photos, etc</span>
<div id="hello-more">more</div>
<div id="hello-less" >less</div>
<script>
$("#hello-bigtext").hide("slow");
$("#hello-less").hide("slow");
$("#hello-more").click( function() {
$("#hello-bigtext").show("slow");
$("#hello-less").show("slow");
$("#hello-more").hide("slow");
});
$("#hello-less").click( function() {
$("#hello-bigtext").hide("slow");
$("#hello-less").hide("slow");
$("#hello-more").show("slow");
});
</script>
$( document ).ready(function(){
$("#hello_bigtext").slideUp(600);
$("#hello_less").slideUp(600);
$("#hello_more").click( function() {
$("#hello_bigtext").slideDown(600);
$("#hello_less").slideDown(600);
$("#hello_more").slideUp(600);
});
$("#hello_less").click( function() {
$("#hello_bigtext").slideUp(600);
$("#hello_less").slideUp(600);
$("#hello_more").slideDown(600);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hello_bigtext" style="border-style:solid; height:200px; background-color:red; cursor:pointer;">Some big text, objects, photos, etc</div>
<div id="hello_more" style="border-style:solid; height:200px; background-color:Yellow; cursor:pointer;">more</div>
<div id="hello_less" style="border-style:solid; height:200px; background-color:green; cursor:pointer;">less</div>
maybe so?
$( document ).ready(function(){
$("#hello_bigtext").animate({height:0 , opacity:0},600);
$("#hello_more").animate({height:200, opacity:1},600);
$("#hello_less").animate({height:0 , opacity:0},600);
$("#hello_more").click( function() {
$("#hello_more").animate({height:0, opacity:0},600,function(){
$("#hello_bigtext").animate({height:200, opacity:1},600,function(){
$("#hello_less").animate({height:200, opacity:1},600);
});
});
});
$("#hello_less").click( function() {
$("#hello_bigtext").animate({height:0, opacity:0},600,function(){
$("#hello_less").animate({height:0, opacity:0},600,function(){
$("#hello_more").animate({height:200, opacity:1},600);
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hello_bigtext" style="border-style:solid; height:400px; background-color:red; cursor:pointer;">Some big text, objects, photos, etc</div>
<div id="hello_more" style="border-style:solid; height:400px; background-color:Yellow; cursor:pointer;">more</div>
<div id="hello_less" style="border-style:solid; height:400px; background-color:green; cursor:pointer;">less</div>
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 !
How can I prevent toggle from sliding twice on double click?
I have a button that triggers a slide toggle. It toggles fine if the button is clicked once but if the button is clicked twice the slide toggle slides out then immediately slides back in.
How can I get the slide toggle to stay out even on double click?
Code here: https://codepen.io/anon/pen/Ljgqjo
JS:
$('button').on('click', function(){
$('#one').fadeOut('slow', function(){
$('#two').toggle('slide', {direction: 'right'}, 800, function(){
});
});
});
.container{
width:300px;
height:200px;
overflow:hidden;
}
#one{
background:blue;
width:300px;
height:200px;
}
#two{
background:purple;
width:300px;
display:none;
height:200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
<div id="one">
</div>
<div id="two">
</div>
</div>
Set a flag for tracking whether your animation is running. Check if it is set before allowing the click action to have any effect. Unset it once your animation is done:
var animating = false;
$('button').on('click', function(){
if(!animating){
animating = true;
$('#one').fadeOut('slow', function(){
$('#two').toggle('slide', {direction: 'right'}, 800, function(){
animating = false;
});
});
}
});
This has the additional benefit of protecting against triple clicks (and quadruple clicks, etc...)
Here you go with a solution http://jsfiddle.net/nya99njz/2/
var sliding = false;
$('button').on('click dblclick', function(){
if(!sliding){
sliding = true;
$('#one').fadeOut('slow', function(){
$('#two').toggle('slide', {direction: 'right'}, 800, function(){
sliding = false;
});
});
}
});
.container{
width:300px;
height:200px;
overflow:hidden;
}
#one{
background:blue;
width:300px;
height:200px;
}
#two{
background:purple;
width:300px;
display:none;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
<div id="one">
</div>
<div id="two">
</div>
</div>
Instead of click use dblclick.
Hope this will help you.
You can change this line
$('button').on('click', function(){
To
$('button').on('click dblclick', function(){
Then it will do the same thing for click and double click.
hi i encounter the issue in firefox here is the snippet:
$(function() {
$( "#draggable" ).draggable();
});
#draggable{
width:200px;
height:200px;
}
.test1{
border:1px solid red;
width:150px;
height:120px;
word-break:break-all;
overflow-x:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
<div class="test1">
asdasdasdasdasdddasdasdasdasdasd
dddddddddddddddddddddddddddd asdasdasdddddddddddddddddddasdasdsdsdssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdsddddddddddddddddddddddd
</div>
</div>
1 open it in firefox(my version is 33.1.1)
2 click the scrollbar of ".test1" div,then scroll
3 the issue is when you click the scrollbar and slide,the whole content will move.
it works well in IE/chrome.
what is the reason cause the problem?
Well you could try this workaround:
if(navigator.userAgent.search('Firefox') !== -1) {
$('#draggable').draggable({
handle: ':not(.test1)'
});
} else {
$('#draggable').draggable();
}
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>
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