We Keep Coding

Vertical Navbar should collapse when clicked anywhere other than the bar-icon

I have a verticalNavbar(having a bar-icon) which is based on toggle so when one clicks it toggles out(opens up) and clicks again it togglesin(closes). but however I want the navbar to toggle in(close) when user clicks anywhere on the web page other than the bar-icon(on verticalNavbar) - given that it was opened else the page click should not do nothing. I am finding it difficult to manage with jquery toggle, here's my code
$('.bar-icon').on("click", function(){
$( ".left-side" ).toggleClass('wdt80');
$( ".left-side" ).toggleClass('wdt210');
$('.left-side-inner').toggle('fast');
$( ".left-side" ).toggleClass("shadow");
$('.overlay').toggle();
});
<div class="bar-icon">
<a ><img src="///_baricon_img.jpg"></a>
</div>
My Solution -
// closing vertical navbar - while opened
$('.page').on("click",function(){
if ($('.left-side-inner').is(':visible')) {
$( ".left-side" ).toggleClass('wdt210');
$( ".left-side" ).toggleClass('wdt80');
$('.left-side-inner').toggle('fast');
$( ".left-side" ).toggleClass("shadow");
$('ul.sub-menu').hide();
// $('.overlay').toggle();
}
});

Michael, you could addClass instead of using toggleClass, also comparing if something has a class to prevent adding repeated classes, so you could do something like this:
$('.bar-icon').on("click", function(){
if($( ".left-side" ).hasClass('wdt210'){
$( ".left-side" ).addClass('wdt210');
$('.left-side-inner').show('fast');
$( ".left-side" ).addClass("shadow");
$('.overlay').show();
}
});

You can use document.click or window.click to achieve this.
$(window).click(function(){
//Close menu
});
$(document).on('click', function(){
//Close menu
});

Try to add class to navbar when it open and remove same when it is close. Use same class.
$(document).click(function() {
if($('.bar-icon').hasClass('active')) {
$('.bar-icon').trigger('click');
}
});

Stopping propagation on multiple hover event

My home page contains multiple boxes.
On each boxes, when mouseover in or out , the title disappears and the content appears.
It works fine.
The problem is that when mouseovering more than one box on a short period of time, it is a mess.
$( ".views-field-wrapper" ).each(function(){
$( this ).hover(function() {
$( "#front_panel",this ).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
});
How can I stop the previous mouseover reaction when mouseovering another box?
EDIT :
My intial code: http://jsfiddle.net/tz3d6ct6/
Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/

Try to use stop() and no need to use loop to bind hover event,
$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
$( "#front_panel",this ).stop(true).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).stop(true).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
Try it without using using delay() like,
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
<div id='front_panel'>title</div>
<div style='display:none' id='back_panel'>teaser</div>
</div>

Jquery toggle makes the container move

I created a jquery code which lets you click on a button to show or hide a div. However, when I toggle the div the container shifts a bit while it opens. I googled, and everywhere it says the expanding div is losing it's height. How do I fix it? I can't set a height to that div because inside the div I have more expanding content, like little paragraphs where you click "read more" and then more text appears, so the height of the expanding div is always changing.
This is my code:
<script type="text/javascript">
$(window).load(
function ()
{
$(".expandbutton").click(
function ()
{
$("#mainexpand").toggle("fast");
}
);
}
);
</script>
So how do I prevent the content from moving around when you click the .expandbutton div to toggle the #mainexpand div?

$(document).ready(function(){
$("#mainexpand").hide();
$( ".expandbutton" ).click(function() {
if($("#mainexpand").is(":visible")){
$("#mainexpand").hide();
}
else {
$("#mainexpand").show();
}
});
});

You need to set visibility instead of displaying or hinding it with display:
$(window).load(function(){
$( ".expandbutton" ).click(function() {
if($("#mainexpand").css("visibility") == "visible"){
$("#mainexpand").css("visibility","hidden");
} else {
$("#mainexpand").css("visibility","visible");
}
});
});

JQuery button each click, show/hide forms

Guess I'm just starting out here, so might as well look for any kind of help since I'm quite frustrated with this novice question...
I have a button that shows a form I created, with 1 click, but the problem comes when I want to show another form that comes with another button.
What I want, basically is that buttonA shows formA, but when I click buttonB, I want to hide formA and show formB. Now what's happening is that it's overlaying formA and formB.
Here's my current code..
function runEffect() {
$( "#effect" ).show( "drop");
};
function runEffect2() {
$( "#effect2" ).show( "drop");
};
//callback function to bring a hidden box back
function hideEffect() {
$( "#effect:visible" ).hide( "drop");
};
// set effect from select menu value
$( "#button" ).each(function(index) {
$(this).click(function(){
runEffect();
});
});
$( "#button2" ).each(function(index) {
$(this).click(function(){
runEffect2();
});
});
$( "#effect" ).hide();
$( "#effect2" ).hide();
I know this is easy, but I can't seem to find the answer to it.
Thanks!

try this
function runEffect() {
$( "#effect" ).show( "drop");
$( "#effect2" ).hide( "drop");
};
function runEffect2() {
$( "#effect2" ).show( "drop");
$( "#effect" ).hide( "drop");
};

$('#buttonB').click(funciton()(
$('#formA').hide();
$('#formB').show();
});
something like this?

I haven't tested it, but maybe you want to a more dynamic function.
Button class must be something like "formButton" and the id like "form1Button", the form id then should be "form1" and so on..
(Form 2 would have a button with class "formButton", id like "form2Button" and form 2 needs id "form2"
$(".formButton").click(function(e) {
e.preventDefault(); //prevent default action
var id = $(this).attr('id');
var formId = id.replace('Button', '');
$('#' + formId).show();
$('form').not(document.getElementById(formId)).hide();
});
When a formButton is clicked, the form will be shown. All other forms, wich do not have the requested ID, will be hidden.

How do I fire click event if element in array is clicked?

I have an array of DOM elements. If the fourth one is clicked I want to hide the search box. If any of the other ones are clicked I want to show it. How would I do this? I currently have:
var app = {
config: {
tabs: [$("#tab1"), $("#tab2"), $("#tab3"), $("#tab4")],
search: $("#search")
},
showHideSearch: function () {
// Here I need to test if the fourth tab was clicked on then hide();
// else if tabs one through three were clicked show
}
}
app.showHideSearch();
Any help is appreciated. Thank you.

You don't need an array to do this.
$( "#tab4" ).click( function() {
app.config.search.hide();
// $( "#search" ).hide();
});
$( "#tab1, #tab2, #tab3" ).click( function() {
app.config.search.show();
// $( "#search" ).show();
});

$.each(app.config.tabs, function(i, v) {
v.bind('click', function(){
$('#searchbox').show();
if(i==3)
$('#searchbox').hide();
});
});