I have a issue here. I'm trying to do the slideUp and slideDown equivalent in CSS3 transitions but also want when document is clicked the div element slides up.
Here is the code
http://jsfiddle.net/RK8FZ/2/
HTML
<div id="main">
<div id="search-content">
<input type="search" placeholder="Search"/>
<input type="submit" />
</div>
<section class="wrapper">
<span id="toggle-search">Search</span>
</section>
</div>
Here is the CSS code
#main #search-content { position: relative; max-height: 0; overflow: hidden; transition: all .3s linear; background: #FFF; opacity: 0;}
#main #search-content.open { max-height: 200px; opacity: 1; }
Here is the jquery code
function toggleSearch() {
$('#toggle-search').on('click', function(event){
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text( $(this).text() === "Search" ? "Close" : "Search" );
})
$('#search-content').on ('click', function(e) {
e.stopPropagation();
});
$(document).on('click', function() {
if( $('#search-content').hasClass('open') ) {
$('#search-content').removeClass('open');
}
});
}
Can anyone figure this thing out? What it is happening is that it triggers the open and the close at the same instante.
Working DEMO
I guess this is what you need
$(function () {
toggleSearch();
})
function toggleSearch() {
$('#toggle-search').on('click', function (event) {
event.stopPropagation();
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text($(this).text() === "Search" ? "Close" : "Search");
})
}
$(document).on('click', function (e) {
$('#toggle-search').text('Close');
$('#search-content').removeClass('open');
});
$('#search-content').on('click', function (e) {
e.stopPropagation();
});
$(document).on('click', function () {
if ($(this).addClass('search-open')) {
$('#search-content').removeClass('open');
}
});
What are you checking in if condition? If you wan to check if search-open class exists then you can use
if ($(.search-open').length > 0)
Related
The below code is working fine, but i want merge checked and click functions in single function. Is it possible?
$(function () {
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
$(function () {
$("#enablepromo0").click(function () {
if ($(this).is(":checked")) {
$("#PromoPanel").show(300);
} else {
$("#PromoPanel").hide(300);
}
});
});
Use the change event and trigger it, it can then detect the current state of the checkbox. I altered the code to toggle a class instead to avoid a "flash" initially.
$(function() {
$("#enablepromo0").on('change', function() {
let isChecked = !this.checked;
$("#PromoPanel").toggleClass("hidden", isChecked, {
duration: 300
});
}).trigger('change');
});
.panel {
border: solid lime 1px;
background: #ddffdd;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
Check to show: <input type="checkbox" id='enablepromo0' />
<div class="container">
<div id="PromoPanel" class="panel hidden">
<h2>Hi There</h2>Get stoked</div>
</div>
both function do the same job so i changed something to show an alert:
$(function () {
$("#enablepromo0").click(function () {
alert("dddddd")
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="checkbox" id='enablepromo0'/>
<div id="PromoPanel" style="border: 1px solid red; width:50px; heigth:50px; display:none;">uuu</div>
Move the code to its own function and call as required:
function showHide() {
if ($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
}
$(function () {
showHide();
$("#enablepromo0").click(function () {
showHide();
});
});
I have some html code with below structure. when I click on tag a with "moreCases" class,div with class "container-cases" is become show and when I click on "lessCases" div with class "container-cases" is become hide but tag a with "moreCases" do n't become show.how I can solve it?
HTML:
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
JavaScript:
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
You have to target the parent() before using prev():
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
.hide{
display: none;
}
.show{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
Remove the last .addClass('hide')
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show');
});
});
Working example
There is no need to iterate over the .moreCases & .lessCases instead you can simply add the click event to it. Beside since the click is on an a tag , prevent the default behavior by adding e.preventDefault
$(document).ready(function() {
$(".moreCases").click(function(e) {
$(this).next().removeClass('hide').addClass('show');
$(this).removeClass('show').addClass('hide');
});
$(".lessCases").click(function(e) {
e.preventDefault();
$(this).parent().removeClass('show').addClass('hide');
$(this).parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
I was creating a dropdown with jquery, HTML and CSS. I want to close the dropdown when the user clicks outside of dropdown. But it's not working fine.
JS
function _drpdntest() {
$(".drpdn-click").click(function(){
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="'+_drpdn_container+'"]');
_drpdn_content.toggleClass("drpdn-show");
_drpdn_content.siblings().removeClass("drpdn-show");
$(document).click(function(event){
_drpdn_content.removeClass("drpdn-show");
});
$(this, _drpdn_content).click(function(event){
event.stopPropagation();
});
});
}
// Run Component Function
$(document).ready(function(){
_drpdntest();
});
HTML
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
CSS
.drpdn-content {
z-index: 1000;
position: absolute;
display:none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
This is because you have not added stopPropagation() for button click. Due to which on button click it is triggering document click.
Also $(this, _drpdn_content) should be $(_drpdn_content, this) or simply remove this while adding stopPropagation.
Here second parameter provides context in which selector search will get performed, in short second parameter is parent and you are saying to search all childs matching with selector provided in first parameter.
function _drpdntest() {
$(".drpdn-click").click(function(e) {
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]');
_drpdn_content.siblings().removeClass("drpdn-show");
_drpdn_content.addClass("drpdn-show");
$(_drpdn_content).click(function(event) {
event.stopPropagation();
});
$(document).click(function() {
_drpdn_content.removeClass("drpdn-show");
});
e.stopPropagation();
});
}
// Run Component Function
$(document).ready(function() {
_drpdntest();
});
.drpdn-content {
z-index: 1000;
position: absolute;
display: none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
This should be what you want, based on what you said in the comment
It now shows on the first click, and it doesn't hide when you click on the option.
function _drpdntest() {
$(".drpdn-click").click(function() {
var $this = $(this)
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]');
_drpdn_content.toggleClass("drpdn-show");
$(document).click(function(event) {
if (event.target != $this[0] && event.target != _drpdn_content[0]) {
_drpdn_content.removeClass("drpdn-show");
}
});
$(this, _drpdn_content).click(function(event) {
event.stopPropagation();
});
});
}
// Run Component Function
$(document).ready(function() {
_drpdntest();
});
.drpdn-content {
z-index: 1000;
position: absolute;
display: none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
I am stuck with the following simple code.
$(function() {
'use strict';
function header() {
var openButton = $('.search_button'),
box = $('.box'),
closeButton = $('.close');
box.hide();
function init() {
initEvents();
}
function initEvents() {
openButton.on('click', openBox);
$(document).on('keyup', function(event) {
if(event.keyCode === 27) {
box.slideUp('normal');
}
});
}
function openBox(event) {
if(event.target === closeButton[0]) {
box.hide();
} else if(event.target === openButton[0] || $(event.target).closest(box).length) {
box.show();
}
else {
box.hide();
}
}
init();
}
header();
});
.box {
width:500px;
height:500px;
background-color:red;
position:relative;
}
.close {
width:80px;
height:80px;
background-color:orange;
position:absolute;
top:0;
right:0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_search">
<form action="search.php" method="post">
<input type="text" placeholder="" id="main_search" class="search_button">
</form>
</div>
<div class='box'>
<div class='close'></div>
</div>
My intension is that, when I click outside the DIV, it closes and the 'close' DIV on click closes the red main div.
The code, slidesDown the box div and escape key slideup as well.
But close and clicking outside to close the red div does not work.
Could someone assist me with the code with some explanation
Thanks and regards
Jeff
You are using the event handler click only in the .search_button, you have to use it in your body.
function initEvents() {
$(body:not('#header_search')).on('click', openBox);
$(document).on('keyup', function(event) {
if(event.keyCode === 27) {
box.slideUp('normal');
}
});
}
I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is
when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.
on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %
I am trying this code .
my html is
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
my js is
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/
JS
var action = 1;
$("#show-tag").click(function () {
if ( action == 1 ) {
$("#tag-div" ).animate({'width':'0%',});
$('#tags-left').animate({'width':'90%'});
action = 2;
} else {
$("#tag-div" ).animate({'width':'45%',});
$('#tags-left').animate({'width':'45%'});
action = 1;
}
});
CSS
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
overflow:hidden; /* This property is added just to hide overflowing content */
}
first of all .. put left and right div in same div and in css
CSS
.col-md-12 {
white-space: nowrap;
overflow: hidden;
height:200px;
}
and you can use animate() method in js
JS
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//$('#tags-left').css('width','0%');
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').animate({'width':'45%'},500);
} else {
$('#tags-left').animate({'width':'100%'},500);
}
});
});
DEMO HERE
you can just play around that to get the exact action you need
Optimized #Nilesh Mahajan's answer.
Found a problem with it when clicking on the button continuously.
// Caching
var $tagsLeft = $('#tags-left'),
$tagDiv = $('#tag-div');
var tagLeftWidth,
tagDivWidth;
$("#show-tag").on('click', function () {
var $this = $(this);
$this.prop('disabled', true).addClass('disabled'); // Disable the button
tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
tagDivWidth = $tagDiv.width() ? '0%' : '45%';
$tagDiv.animate({
'width': tagDivWidth
}, function() {
$this.prop('disabled', false).removeClass('disabled'); // Enabling button
});
$tagsLeft.animate({
'width': tagLeftWidth
});
});
Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/
Try this html:
<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>
and this javascript:
$("#show-tag").click(function (e) {
if($("#tag-right").width() == 0) {
$("#tag-left").animate({
width: '0'
});
$("#tag-right").animate({
width: '90%'
});
} else {
$("#tag-left").animate({
width: '90%'
});
$("#tag-right").animate({
width: '0'
});
}
});
jsfiddle