Is there any way to merge two javascript together? - javascript

I just can't figure it out how to merge them together, or I always have to write a different one for all my popups? I tried different things but none of them worked.
$(document).ready(function() {
$('#trigger').click(function() {
$('#overlay').fadeIn(300);
});
$('#close').click(function() {
$('#overlay').fadeOut(300);
});
});
$('#overlay').click(function(e) {
if (e.target == this) {
if ($('#overlay').is(':visible')) {
$('#overlay').fadeOut(300);
}
}
});
$(document).ready(function() {
$('#trigger2').click(function() {
$('#overlay2').fadeIn(300);
});
$('#close2').click(function() {
$('#overlay2').fadeOut(300);
});
});
$('#overlay2').click(function(e) {
if (e.target == this) {
if ($('#overlay2').is(':visible')) {
$('#overlay2').fadeOut(300);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->

If you use classnames or data-* attributes it's easy.
<div class="overlay" data-id="1"></div>
<div class="overlay" data-id="2"></div>
Then JS :
$('.trigger').on('click', function() {
var number = $(this).dataset().id;
// also valid:
var number = $(this).attr('data-id');
$('.overlay[data-id="' + number + "').fadeOut();
});
Try something similar.

Related

Combine two JS functions

Im currently trying to combine two if functions but somehow I only get errors. I already tried multiple ways of combining them with no result.
What I wanna do: I need to check if body has a specific class, if yes, a checkbox needs to be be unchecked.
What I tried to combine:
if (document.body.classList.contains('thatClass')) {
// do some stuff
}
$(function() {
$(document).on("click", function(e) {
if ($(e.target).is(".main-nav-slideout") === false) {
$("#main-nav-toggle").prop("checked", false);
}
});
});
My try on combining the snippets:
$(function() {
$(document).on("click", function(e) {
if (document.body.classList.contains('thatClass')) && ($(e.target).is(".main-nav-slideout") === false) {
$("#main-nav-toggle").prop("checked", false);
}
});
});
You could shorten it and just call the function when you need.
$(function() {
checkCheckbox()
$(document).on("click", '.main-nav-slideout', checkCheckbox)
});
function checkCheckbox() {
$("#main-nav-toggle").prop("checked", $('body').hasClass('thatClass'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class='thatClass'>
<input type='checkbox' id='main-nav-toggle' />
<div class='main-nav-slideout'>Click me</div>
</body>
Try this:
$(function() {
$(document).on("click", function(e) {
if (document.body.getAttribute('class').split(' ').indexOf('thatClass')>-1 && ($(e.target).is(".main-nav-slideout") === false) {
$("#main-nav-toggle").prop("checked", false);
}
});
});

How to combine two jQuery functions

Good Morning.
I want to combine my jQuery functions into one.
$('body').on('click', '.toggle2', function() {
console.log(123);
$('body').find('.dateshow').toggleClass('show');
});
$('body').on('click', '.toogle3', function() {
$('body').find('.autorshow').toggleClass('show');
});
$('body').on('click', '.toogle4', function() {
console.log(123);
$('body').find('.starshow').toggleClass('show');
});
Many thanks in advance
If you change all of your toggle links to have the following markup:
click
click
click
Then you can add a more generic handler such as:
$('.toggle').on('click', function() {
var targetSelector = $(this).attr('data-toggle');
$('.' + targetSelector).toggleClass('show');
});
Codepen: http://codepen.io/anon/pen/aBKJEb
When a callback is called jQuery will pass in an event object. You can check the target of the event and process as needed.
$('body').on('click', '.toggle2, .toogle3, .toogle4', function(e) {
var $target = jQuery(e.target),
$targetObject;
if($target.hasClass('toggle2')) {
$targetObject = jQuery('body').find('.dateshow');
}
if($target.hasClass('toogle3') {
$targetObject = jQuery('body').find('.autorshow');
}
if($target.hasClass('toogle4') {
$targetObject = jQuery('body').find('.starshow');
}
$targetObject.toggleClass('show');
});
$('body').on('click', '.toggle2,.toogle3,.toogle4', function() {
var mapper = {
'toggle2': { cls: '.dateshow', console:true },
'toggle3': { cls: '.autorshow', console:false },
'toggle4': { cls: '.starshow', console:true }
};
this.classList.forEach(function(cls) {
var obj = mapper[cls];
if(obj) {
obj.console && console.log(123);
$('body').find(obj.cls).toggleClass('show');
}
});
});

Simplify this jQuery using .hasClass and .bind?

I'm wondering if there's a way to simplify this code.
Basically, #griffyindor has the 'active' class by default when the page loads. When it has the 'active' class, I want all the other houses (slytherin, ravenclaw, and hufflepuff) to show. However, at some point it may lose its 'active' class when I click on something else. But when I click back to it, I want the initial behavior again.
Is there a way to simplify what's below to check when gryffindor has the 'active' class OR when gryffindor is clicked on (so that it gets the 'active' class)?
$(function() {
var gryffindor = $('#gryffindor');
if (gryffindor.hasClass('active')) {
console.log('show all the houses');
$('#slytherin, #ravenclaw, #hufflepuff').show();
}
gryffindor.bind('click', function() {
if (gryffindor.hasClass('active')) {
console.log('all is active');
$('#slytherin, #ravenclaw, #hufflepuff').show();
}
});
});
How about:
$(function() {
$('#gryffindor').on('click', function(e) {
this.toggleClass('active');
if (this.hasClass('active'); {
$('#slytherin, #ravenclaw, #hufflepuff').show();
} /*else {
$('#slytherin, #ravenclaw, #hufflepuff').hide();
}*/ //Not sure if this is part of what you want
}
});
$(function() {
var $gryffindor = $('#gryffindor');
$('#slytherin, #ravenclaw, #hufflepuff').hide();
$gryffindor.on('click', function(e) {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('#slytherin, #ravenclaw, #hufflepuff').show();
} else {
$('#slytherin, #ravenclaw, #hufflepuff').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="gryffindor">Griffindor</button>
<div id="slytherin">slytherin</div>
<div id="ravenclaw">ravenclaw</div>
<div id="hufflepuff">hufflepuff</div>
Try this:
var houses = $("#houses li");
$(document).on('click', '#houses li', function(){
var activate_house = this;
$(houses).each(function (index) {
var house = this
$(house).removeClass('active');
$(house).removeClass('show');
});
$(activate_house).addClass('active');
showHouses();
});
function showHouses(){
$(houses).each(function (index) {
if(!$(this).hasClass('active')){
$(this).addClass('show');
}
});
}
showHouses();
.show{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="houses">
<li class="active" id="gryffindor">gryffindor</li>
<li id="slytherin">slytherin</li>
<li id="ravenclaw">ravenclaw</li>
<li id="hufflepuff">hufflepuff</li>
</ul>
not minify your code but simplify the reading and adds semantic, see JSFIDDLE

what is a better way of switching panels in javascript?

I have some code that swaps panels when a button is pressed, hiding any others that might be on the screen before displaying the next. it is a bit messy because of the way it has to be worked around to prevent both panels from appearing at once.
http://jsfiddle.net/zDeveloper/X4sMF/
$(document).ready(function () {
$("#pref-sliders-swap").appendTo($("#sliderbox"));
$("#sliderbox").hide();
$("#characters").hide();
$("#currentdesires").hide();
$("#important").hide();
$("#sliderbutton").click(function () {
$("#welcome").fadeOut(function () {
$("#characters").fadeOut(function () {
$("#currentdesires").fadeOut(function () {
$("#important").fadeOut(function () {
$("#sliderbox").fadeIn();
});
});
});
});
});
$("#homebutton").click(function () {
$("#sliderbox").fadeOut(function () {
$("#characters").fadeOut(function () {
$("#currentdesires").fadeOut(function () {
$("#important").fadeOut(function () {
$("#welcome").fadeIn();
});
});
});
});
});
$("#charactersbutton").click(function () {
$("#sliderbox").fadeOut(function () {
$("#welcome").fadeOut(function () {
$("#currentdesires").fadeOut(function () {
$("#important").fadeOut(function () {
$("#characters").fadeIn();
});
});
});
});
});
$("#desirebutton").click(function () {
$("#sliderbox").fadeOut(function () {
$("#welcome").fadeOut(function () {
$("#characters").fadeOut(function () {
$("#important").fadeOut(function () {
$("#currentdesires").fadeIn();
});
});
});
});
});
$("#impbutton").click(function () {
$("#sliderbox").fadeOut(function () {
$("#welcome").fadeOut(function () {
$("#characters").fadeOut(function () {
$("#currentdesires").fadeOut(function () {
$("#important").fadeIn();
});
});
});
});
});
});
The code I have placed there does exactly what I want,smoothly fading in and out the panels(at least in firefox) though it is a bit cumbersome. is there a better way to acheive the same effect?
Try
<!--use the class trigger to group the trigger elements, then use data-target to specify the id of the target element to be displayed-->
<div id="sliderbutton" data-target="#sliderbox" class="trigger">sliderbutton</div>
<div id="homebutton" data-target="#welcome" class="trigger">homebutton</div>
<div id="charactersbutton" data-target="#characters" class="trigger">charactersbutton</div>
<div id="desirebutton" data-target="#currentdesires" class="trigger">desirebutton</div>
<div id="impbutton" data-target="#important" class="trigger">impbutton</div>
<!--Use the class content to group all the content elements-->
<div id="sliderbox" class="content">sliderbox</div>
<div id="characters" class="content">characters</div>
<div id="currentdesires" class="content">currentdesires</div>
<div id="important" class="content">important</div>
<div id="welcome" class="content">welcome</div>
then
jQuery(function () {
$("#pref-sliders-swap").appendTo("#sliderbox");
$(".content").not('#welcome').hide();
var $contents = $('.content');
$contents.not('#welcome').hide();
$(".trigger").click(function () {
var $visible = $contents.stop(true, true).filter(':visible'),
$target = $($(this).data('target')).stop(true, true);
if ($visible.length) {
$visible.fadeOut(function () {
$target.fadeIn();
});
} else {
$target.fadeIn();
}
});
})
Demo: Fiddle

Condensing Javascript/jQuery Code

I'd like to start by thanking anyone who can help me condense this piece of Javascript/jQuery code.
jQuery(function() {
jQuery('#pitem-1').click(function(e) {
jQuery("#image-1").lightbox_me({centered: true, onLoad: function() {
jQuery("#image-1").find("input:first").focus();
}});
e.preventDefault();
});
jQuery('#pitem-2').click(function(e) {
jQuery("#image-2").lightbox_me({centered: true, onLoad: function() {
jQuery("#image-2").find("input:first").focus();
}});
e.preventDefault();
});
jQuery('#pitem-3').click(function(e) {
jQuery("#image-3").lightbox_me({centered: true, onLoad: function() {
jQuery("#image-3").find("input:first").focus();
}});
e.preventDefault();
});
jQuery('table tr:nth-child(even)').addClass('stripe');
});
Basically each #pitem-ID opens the same #image-ID in a popup.
Thanks again to anyone who can help.
Jack
Your functions all look pretty much the same, which is a clue that you should probably move that functionality out into something that can be called:
function createHandler(id) {
return function (e) {
$(id).lightbox_me({centered: true, onLoad: function() {
$(id).find("input:first").focus();
}});
e.preventDefault();
}
};
Then you can use:
$('#pitem-2').bind('click', createHandler("#image-2"));
You can:
Combine multiple objects into the selector with a common event handler
Use this to refer to the object that triggered the event
Derive the image ID from the id of the object that generated the event.
That lets you use one piece of code to handle the action for all three objects:
jQuery(function() {
jQuery("#pitem-1, #pitem-2, #pitem-3").click(function() {
var image$ = $("#" + this.id.replace("pitem", "image"));
image$.lighbox_me({centered: true, onLoad: function() {
image$.find("input:first").focus();
}});
e.preventDefault();
});
jQuery('table tr:nth-child(even)').addClass('stripe');
});
$('[id^="pitem-"]').click(function(e) {
var numb = this.id.split('-')[1];
$("#image-"+numb).lightbox_me({centered: true, onLoad: function() {
$(this).find("input:first").focus();
}
});
e.preventDefault();
});
$('table tr:nth-child(even)').addClass('stripe');
Without context it is hard to tell, but is it necessary to have a unique ID for each pitem? Why not use a CSS class instead of a ID like so:
<div class="pitem">
<div id="image1"><img ... /></img>
</div>
...
<div class="pitem">
<div id="image3"><img ... /></img>
</div>
And then use the class selector in jQuery to add the click functionality all of them at once:
$(".pitem").click(function(e) {
var currentItem = e.target;
...
e.preventDefault();
});

Categories

Resources