what is a better way of switching panels in javascript? - 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

Related

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');
}
});
});

Close div onclick <a> jquery

I use this code to display a div onclick:
;(function($) {
$(function () {
$('.m-help .m-text').hide();
$('.m-help')
.live('click', function () {
$(this).find('.m-text').show();
})
.live('click', function () {
$(this).find('.m-link-close-button').hide();
});
});
$(document).bind('m-ajax-after', function (e, selectors) {
$('.m-help .m-text').hide();
});
})(jQuery);
And with this HTML:
<div class="m-help">
<div class="m-text" style="width: 40px;">
<?php echo $_helpHtml ?>
<span>x</span>
</div>
</div>
This does work onclick to display the div, but I want to use the X mark inside the div to close the div again.
Closing the div does not work.
What am I doing wrong and how can I fix this problem?
Event delegation
$('.m-help').on('click', function (event) {
var close = $(event.target).closest('.m-link-close-button').length;
$(this).find('.m-text')[close ? 'hide' : 'show']();
});
http://jsfiddle.net/moogs/9e47j19L/1/
you can get the parent of your close button with parent() so you can do it this way :
(function($){
$('.m-help .m-text').hide();
$('.m-help').live('click', function(ev) {
$(this).find('.m-text').show();
});
$(".m-link-close-button").live('click', function (ev) {
$(this).parent().hide();
});
})(jQuery)
try this:
HTML
<div class="m-help">
<div class="m-text" style="width: 40px;">
<?php echo $_helpHtml ?>
<span>x</span>
</div>
Click
</div>
JS:
$(".m-text").hide();
$(".m-link").click(function () {
$(".m-text").show();
});
$(".m-link-close-button span").click(function () {
$(".m-text").hide();
});
Working fiddle:http://jsfiddle.net/cncf5Lz9/
Use click event on a tag to close the div:
function($) {
$(function () {
$('.m-help .m-text').hide();
$('.m-help')
.live('click', function () {
$(this).find('.m-text').show();
});
$(".m-link-close-button").live('click', function () {
$(this).closest('.m-text').hide();
});
});
$(document).bind('m-ajax-after', function (e, selectors) {
$('.m-help .m-text').hide();
});
})(jQuery);

I'm using this code for toggle. How to create multiple toggle using this code

$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function () {
$(".slidingDiv").slideDown(
function () {
$("#plus").text("Hide responses")
}
);
}, function () {
$(".slidingDiv").slideUp(
function () {
$("#plus").text("Show responses")
}
);
});
});
Write a responses
Show responses
<div class="slidingDiv">Test Here </div>
Write a responses
Show responses
<div class="slidingDiv">Test Here </div>
Since id must be unique, you need to use class instead:
Write a responses
Show responses
<div class="slidingDiv">Test Here</div>
Write a responses
Show responses
<div class="slidingDiv">Test Here</div>
then you can do:
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function () {
$(this).next().slideDown(
function () {
$(this).prev().text("Hide responses")
});
}, function () {
$(this).next().slideUp(
function () {
$(this).prev().text("Show responses")
});
});
});
Fiddle Demo

How do I make a div hide onclick and make it show when it's clicked again?

I have this code:
<script>
(function ($) {
$(document).ready(function () {
$("#thisclick, #thisclick2").click(function () {
if ($('.example').is(":hidden")) {
$(this).html($(this).html().replace(/Hide/, 'Show'));
} else {
$(this).html($(this).html().replace(/Show/, 'Hide'));
}
// Do it afterwards as the operation is async
$(".example").hide();
});
});
})(jQuery);
</script>
The way the current code works is that if #thisclick is clicked it hides #example. Which is what I require but when #thisclick is clicked again i want it to show #example. Using the above code, it won't work. What must I do to achieve this?
You should be able to change your code to as follows to get it to work:
(function ($) {
$(document).ready(function() {
$("#thisclick").click(function () {
$("#example").slideToggle("slow");
});
});
})(jQuery);
Here is a link to a quick sample:
http://jsfiddle.net/andyjmeyers/szmXp/
Are you expecting like
<button>This click</button>
<p style="display: none">Example</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
Please check it on http://jsfiddle.net/X5r8r/1107/
<script>
(function ($) {
$(document).ready(function() {
$("#thisclick").click(function () {
if ($('#example').is(":hidden")) {
$(this).html($(this).html().replace(/Hide/, 'Show'));
} else {
$(this).html($(this).html().replace(/Show/, 'Hide'));
}
// Do it afterwards as the operation is async
$("#thisclick").slideToggle("slow");
if($("#example").attr("isHidden") == "1")
$("#example").slideToggle("slow");
$("#example").attr("isHidden","1");
});
});
})(jQuery);
</script>
You can do this:
$("#thisclick").click(function () {
if ($('#example').hasClass("hidden"))
{
$('#example').removeClass("hidden");
$('#example').show();
}
else
{
$('#example').addClass("hidden");
}
}
or more easily:
$("#thisclick").click(function () {
$('#example').toggleClass("hidden");
}
define style":
.hidden
{ display:none;}

Jquery multiple selectors with this

I've searched but can't find how to do this. I'm trying to make the elements with comment-modbox inside this hide and show:
$('.comment-wrapper').each(function (index) {
$(this, '.comment-modbox').mouseover(function () {
$('.comment-modbox').show();
});
$(this, '.comment-modbox').mouseout(function () {
$('.comment-modbox').hide();
});
});
This code just hides and shows all comment-modbox regardless as to if they are contained within this.
Thanks for any help!
Answer:
$('.comment-wrapper').each(function (index) {
$(this).mouseover(function () {
$('.comment-modbox', this).show();
});
$(this).mouseout(function () {
$('.comment-modbox', this).hide();
});
});
try this (jQuery("selector", context)...)
$('.comment-wrapper').each(function (index) {
$('.comment-modbox', this).mouseover(function () {
$(this).show();
});
$('.comment-modbox', this).mouseout(function () {
$(this).hide();
});
});
Second choice:
$('.comment-wrapper').each(function (index) {
var wrapper = this;
$('.comment-modbox', wrapper)
.mouseover(function () {
$(this).show();
})
.mouseout(function () {
$(this).hide();
});
});

Categories

Resources