How can I Compress My .show and .hide jQuery?

How can I Compress My .show and .hide jQuery? - javascript

I'm very new to jQuery and I know there has to be a faster and smaller amount of code to do this. So, what I have here are two divs. Div one will show a class in a different div. and Div two will hide this element once a user is done and clicks div two. I feel like my jquery code is way too long for this. Here's my JSFIDDLE . https://jsfiddle.net/g812sqry/
<div class="container">
<div>
<p id="one">Div One</p>
</div>
<div>
<p id="two">Div Two</p>
</div>
</div>
#one {
width:60px;
background-color:green;
padding:10px;
cursor:pointer;
}
#two {
width:60px;
background-color:green;
padding:10px;
display:none;
cursor:pointer;
}
$(document).ready(function () {
$('#one').click(function () {
$(this).hide();
});
$('#one').click(function () {
$('#two').show();
});
$('#two').click(function () {
$(this).hide();
});
$('#two').click(function () {
$('#one').show();
});
});

Try using .toggle()
$(document).ready(function () {
var elems = $("#one, #two");
elems.click(function () {
elems.toggle()
});
})
jsfiddle https://jsfiddle.net/g812sqry/4/

You can club the click events for both the selectors.
$(document).ready(function () {
$('#one, #two').click(function () {
$('p').show();
$(this).hide();
});
});
Check Fiddle

This way better.
$(document).ready(function () {
$('#one').click(function () {
$(this).hide();
$('#two').show();
});
$('#two').click(function () {
$(this).hide();
$('#one').show();
});
});

You are already calling the $('#divID').click() function no need to call it a second time for both #one and #two DIV's
$(document).ready(function () {
$('#one').click(function () {
$(this).hide();
$('#two').show();
});
$('#two').click(function () {
$(this).hide();
$('#one').show();
});
});
#one {
width:60px;
background-color:green;
padding:10px;
cursor:pointer;
}
#two {
width:60px;
background-color:green;
padding:10px;
display:none;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div>
<p id="one">Div One</p>
</div>
<div>
<p id="two">Div Two</p>
</div>
</div>

Try this. Eliminates the need on dependency on ids.
$('p').click(function () {
$('p').toggle();
});
https://jsfiddle.net/g812sqry/5/

Related

Open the menu with Hover and close it by clicking outside the cart

My problem is that by moving the shopping cart button, the card menu opens and by clicking except the card menu, the card box should be closed. I wrote some of these, help me get the solution, thank you.
$(document).ready(function() {
$('.shop').hover(function() {
$('.carts').css('visibility', 'visible');
});
});

You could check if the clicked target (e.target) is not the .carts element (negation with !):
if (!$(e.target).is('.carts')) {
$('.carts').css('visibility', 'hidden');
}
Working example:
$(document).ready(function () {
$('.shop').hover(function () {
$('.carts').css('visibility', 'visible');
});
$('body').click(function(e) {
if (!$(e.target).is('.carts')) {
$('.carts').css('visibility', 'hidden');
}
});
});
.shop {
background-color: yellow;
}
.carts {
background-color: red;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="shop">Shop</span>
<div class="carts">Test</div>

$(document).click(function() {
$(".carts").hide();
});
$(".carts").click(function(event) {
event.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carts" style="width: 50px;height: 50px;border: 1px solid;"></div>

onclick toggle class with delay adjustment

I have a button with toggleClass and setTimeout function, currently it is working based on the written script but I do not need delay on first click. Hide div quickly and display with some delay. Now both delay timings are same. Can anyone help !
$(document).ready(function() {
$(".button").click(function() {
window.setTimeout(function() {
$(".search").toggleClass("hide");
}, 250);
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button class="button" type="button">nav</button>
<div class="search"><input type="text" placeholder="Search"></div>
JSFiddle

Never used jquery but this should work, not sure if its the cleanest solution.
$(document).ready(function() {
$(".button").click(function() {
if($(".search").hasClass("hide"))
{
window.setTimeout(function() {
$(".search").toggleClass("hide");
}, 250);
}
else $(".search").toggleClass("hide");
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button class="button" type="button">nav</button>
<div class="search"><input type="text" placeholder="Search"></div>

Check if element is visible or hidden and then decide what to do:
$(document).ready(function() {
$(".button").click(function() {
if ($(".search").is(":visible")){
$(".search").addClass("hide");
}
else{
window.setTimeout(function() {
$(".search").toggleClass("hide");
}, 250);
}
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button class="button" type="button">nav</button>
<div class="search"><input type="text" placeholder="Search"></div>

How about using simple variable firstClick, initially true and then for all clicks false?
$(document).ready(function() {
var firstClick =true;
$(".button").click(function() {
window.setTimeout(function() {
firstClick=false;
$(".search").toggleClass("hide");
}, firstClick?0:250);
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button class="button" type="button">nav</button>
<div class="search"><input type="text" placeholder="Search"></div>

Repeating code execution while mouse button is down

$('.test').click(function(){
$('.act').removeClass('act');
$(this).addClass('act');
});
$('#btn').mousedown(function(){
$('.act').insertBefore($('.act').prev());
});
.test{
cursor:pointer;
}
.act{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test'>323</div>
<div class='test'>525</div>
<div class='test'>727</div>
<div class='test'>929</div>
<div class='test act'>453</div>
<br>
<button id='btn'>CLICK</button>
Keeping the button pressed I need to continue act to be moved to the top, without clicking again, and again.
How to do that?

Use setInterval on mousedown then clearInterval on mouseup:
$('.test').click(function(){
$('.act').removeClass('act');
$(this).addClass('act');
});
var intervalId;
$('#btn').mousedown(function(){
intervalId = setInterval(function() {
$('.act').insertBefore($('.act').prev());
}, 500);
}).mouseup(function() {
clearInterval(intervalId);
});
.test{
cursor:pointer;
}
.act{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test'>323</div>
<div class='test'>525</div>
<div class='test'>727</div>
<div class='test'>929</div>
<div class='test act'>453</div>
<br>
<button id='btn'>CLICK</button>

$('#btn').mousedown(function () {
var currentIdx = $(".act").index();
while (currentIdx != 0) {
$('.act').insertBefore($('.act').prev());
currentIdx = $(".act").index();
}
});

Create Backdrop on Hover

I am currently trying to create functionality exactly as displayed in my JSFIDDLE, Basically to hover over a div and then to have a backdrop beneath that div along with a slide down panel also above the backdrop. the only issue is that the functionality is very buggy and barely works in internet explorer.
Here is the JS:
function darken(panelOpen){
if(panelOpen){
if(jQuery('#menu-backdrop').length){
jQuery("#menu-backdrop").stop().fadeIn(300);
}else{
jQuery(document.body).stop().append(jQuery('<div id="menu-backdrop" class="modal-backdrop"></div>').css('opacity',0.7).hide().fadeIn(300));
}
}else{
jQuery(".modal-backdrop").stop().fadeOut(300);
}
} //Backdrop
jQuery(document).ready(function(e) {
var bioId;
jQuery('.personnel').mouseover(function () {
jQuery(this).css('z-index','1050');
darken(true);
bioId = '#personnel-bio-'+this.id.replace( /[^\d.]/g,'');
var bio = '#personnel-bio-'+this.id.replace( /[^\d.]/g,'');
if(jQuery(bio).is(':visible')){
}else{
jQuery(bio).slideDown(300);
}
}); //dropdown function
jQuery(".wrap").mouseleave(function () {
darken(false);
if(jQuery(bioId).is(':visible')){
jQuery(bioId).slideUp(300);
}else{
}
setTimeout(function() {
jQuery('.personnel').css('z-index','0');
}, 300);
}); // slide up function
});
and the CSS:
.personnel {
position:relative;
}
.personnel-bio {
display:none;
padding:1.2em;
position:relative;
z-index:1050;
margin-bottom:15px;
background:#FFF;
}
And then Finally the HTML:
<div class="wrap">
<div id="personnel-1" class="pull-left personnel">
<div class="personnel-inner">
<div class="thumbnail">
<img src="http://placehold.it/330x290"/>
</div>
<div class="thumbnail-title">
<h4>LAbel</h4>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="personnel-bio-1" class="personnel-bio">
<h5><strong>Pieter Strydom</strong></h5>
<p>loerm ipsum.</p>
</div>
</div>
I am not quiet Sure what I am doing incorrectly. So Any Help at all will be Greatly Appreciated.

I have tidied up the code a bit, removed unnecessary calls to z-index and stop
The modal-backdrop is in the DOM from the beginning now which also helps to speed things up. The initial CSS is set on that with opacity:0.7; and display:none;
Should work a lot more fluid now.
http://jsfiddle.net/hBB97/2/
HTML:
<div id="menu-backdrop" class="modal-backdrop"></div>
<div class="wrap">
<div id="personnel-1" class="pull-left personnel">
<div class="personnel-inner">
<div class="thumbnail">
<img src="http://placehold.it/330x290" />
</div>
<div class="thumbnail-title">
<h4>Label</h4>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="personnel-bio-1" class="personnel-bio">
<h5><strong>Pieter Strydom</strong></h5>
<p>loerm ipsum.</p>
</div>
</div>
Javascript:
function darken(panelOpen, personnelContainer) {
if (panelOpen) {
personnelContainer.css('z-index', '1050');
jQuery(".modal-backdrop").fadeIn(300);
} else {
jQuery(".modal-backdrop").fadeOut(300);
personnelContainer.css('z-index', '0');
}
} //Backdrop
jQuery(document).ready(function (e) {
var bioId;
jQuery('.personnel').mouseover(function () {
darken(true, $(this));
bioId = '#personnel-bio-' + this.id.replace(/[^\d.]/g, '');
var bio = '#personnel-bio-' + this.id.replace(/[^\d.]/g, '');
if (jQuery(bio).is(':visible')) {} else {
jQuery(bio).slideDown(300);
}
}); //dropdown function
jQuery(".personnel").mouseleave(function () {
darken(false, $(this));
if (jQuery(bioId).is(':visible')) {
jQuery(bioId).slideUp(300);
}
}); // slide up function
});
CSS:
.personnel {
position:relative;
}
.personnel-bio {
display:none;
padding:1.2em;
position:relative;
z-index:1050;
margin-bottom:15px;
background:#FFF;
}
.modal-backdrop {
display:none;
opacity:0.7;
}

jQuery add delay

Hi I want to add delay in jquery. I was trying to put $('.fade_test').delay(5000); It is working but div last three is no next to start one.
Link to a jsfiddle
HTML
<div class="fadein">
<div class="fade_test">one <button id="toggler" class="playin">Pause</button></div>
<div class="fade_test">two <button id="toggler" class="playin">Pause</button></div>
<div class="fade_test">three <button id="toggler" class="playin">Pause</button></div>
</div>
CSS
.fadein { position:relative; height:332px; width:500px; }
.fadein .fade_test { position:absolute; left:0; top:0; }
JS
var pauseplay;
function startFader() {
$x = $(".fade_test:visible").fadeOut(1000);
$next = $x.next();
if ($next.length == 0)
$next = $(".fade_test:first-child");
$next.fadeIn(1000);
$('.fade_test').delay(5000);
}
function stopFader(){
window.clearInterval(pauseplay);
console.log("stop");
}
$('.fadein .fade_test:gt(0)').hide();
pauseplay= window.setInterval(startFader, 2000);
var $button = $('.fadein #toggler');
$button.toggle(function() {
stopFader();
$(this).toggleClass('playin pausin');
$(this).text("Play");
}, function() {
$(this).toggleClass('pausin playin');
$(this).text("Pause");
pauseplay= window.setInterval(startFader, 2000);
});
Any help would be most appreciated

Not JQuery but you could use Javascript's very simple setTimeout(fn,milliseconds);
here is another post explaining
function foo(){
alert('foo');
}
setTimeout(foo,1000);

Develop Reference

JavaScript is the programming language of the Web.

How can I Compress My .show and .hide jQuery? - javascript

Try using .toggle() $(document).ready(function () { var elems = $("#one, #two"); elems.click(function () { elems.toggle() }); }) jsfiddle https://jsfiddle.net/g812sqry/4/

You can club the click events for both the selectors. $(document).ready(function () { $('#one, #two').click(function () { $('p').show(); $(this).hide(); }); }); Check Fiddle

This way better. $(document).ready(function () { $('#one').click(function () { $(this).hide(); $('#two').show(); }); $('#two').click(function () { $(this).hide(); $('#one').show(); }); });

Try this. Eliminates the need on dependency on ids. $('p').click(function () { $('p').toggle(); }); https://jsfiddle.net/g812sqry/5/

Related

Open the menu with Hover and close it by clicking outside the cart

onclick toggle class with delay adjustment

Repeating code execution while mouse button is down

Create Backdrop on Hover

jQuery add delay

Categories

Resources