Click to reveal and hide menu - javascript

I asked a question yesterday about a click to reveal menu which got answered perfectly. However, I was wondering how I can make the div fade in when the text "project info" is clicked and then fade out again when "project info is clicked again". I know this is probably a very basic thing but i'm extremely new to javascript and jquery and would appreciate some help greatly. The html code is as follows:
<div class="descinner">
Project info
</div>
and the Javascript:
$('.showDesc').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
$('body').click(function() { $('.showDesc').next().hide(); });

Have you tried the fadeToggle() method?
Like this:
$('.showDesc').click(function() {
$('.info').fadeToggle();
});
This will show the .info div on the first click of .showDesc, and hide it on the second (and so on)..

write a custom function and call it onClick...inside that function you can put your fadeIn and fadeOut...and you especially can't do it with .toggle().

Check out the FadeIn() function. Use it on the element you want to fade in.

you have jQuery animation functions: fadeIn and fadeOut. you can also use show and hide functions. just set the desired speed parameter
$('your_div').fadeIn(100);
$('your_div').fadeOut(100);

Related

How to initialize jQuery slide out with href link?

I have zero experience in jQuery or js but I am trying to learn, so any help is much appreciated. I have a jQuery slide out (for live chat) that I would like to have slide out once a link is clicked. Ideally
Click Here
And this will make the chat slide out. The only code that is in the HTML is the onload
<body onload="initializeLiveHelp();">
You can see how it works here Link Fixed
If you need the jQuery I can get that as well but I was not sure if that was needed or not. Thank You
Try it by toggling the width. So write CSS for the closed state and use this jquery snippet to open it
Toggle width with jQuery
Add an ID to your link so
Click Here
becomes
Click Here
And the jquery something like this (but not exactly). Reference the SO thread for more info and check out the fiddle. Or post more HTML here and I can help further.
$(document).ready( function(){
$('#mylink').click( function() {
var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
$('#toggle').animate({ width: toggleWidth });
});
});
Trigger a click when someone clicks a link:
$("li a").on("click", function(event) {
event.preventDefault();
$(".livehelpslideout a").trigger("click");
}
Preventdefault() disables default behaviour when clicking on a link, otherwise browser will load another page. Your desired behaviour for that is unclear, so you'll need to think about your logic.

Fading a content when hover a menu <li> issues

I'm with a problem, and I need your help.
So, I'm trying to make a menu that show the content when you do a mouse hover in a li tag. And the first content need to be always showing when you do a mouse over on the first li option, or when no one li is hovered.
I tried to make this, and you can see a demo here: https://jsfiddle.net/sqftzuja/
As you can see, it's isn't work so fine and some times it show more than one content.
My script
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').click(function() {
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').hide();
$(section4).fadeIn(800);
});
});
If anyone can help me improve it it will help me a lot!
Thanks in advance!
jquery hover takes two arguments, one is for the pointer entering the element and the other is for when it leaves the element.
e.g.
$('selector').hover(one_function, two_function)
you can either use hover and call the second function or use the onmouseover event.
here's the fiddle for onmouseover https://jsfiddle.net/sqftzuja/1/
You code is correct. You just need to stop the running animation.
$(section4).stop( true, true ).fadeIn(800);
This will solve you problem in the old code.
you must stop fade in animation.when you fade in it effects after given interval.i updated fiddle as well
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').hover(function() {
//console.info( $(this).attr('href') );
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').stop().hide();
$(section4).fadeIn(800);
});
});

Toggle click, add an remove classes with Js

I created this slide menu, activated by a button. I'm using toggle(); to do that. But, I need two CSS effects: fadeIn and fadeOut.
So, I put addClass(); to solve the problem. Sucess! But I can't do the same to fall the menu back. For example: Click on the button and add FadeIn class. The menu appears. Then, you have to click on the same button again, To remove fadeIn class and add the fadeOut class.
This is my actual code:
$(function(){
$('.menu-btn').click(function(){
$('.leftmenu').toggle();
$('.leftmenu').addClass('fadeInLeft animated');
});
});
And here my working example http://jsfiddle.net/N8S9y/
Any help will be much appreciated. thanks in advance!
This will work for you
$(function(){
$('.menu-btn').click(function(){
$('.leftmenu').toggle();
if($('.leftmenu').hasClass('fadeInLeft'))
{
$('.leftmenu').removeClass('fadeInLeft').addClass('fadeOut');
}
else
{
$('.leftmenu').removeClass('fadeOut').addClass('fadeInLeft');
}
});
});`
I think you're looking for .toggleClass():
$('.leftmenu').toggleClass('FadeIn fadeOut');

Javascript function help needed

I'm trying to hide one div and show another, when a button is clicked. The button needs to change class after click.
I tried to change these this with toggleClass and toggleSlide, but it didn't work. Now I just try to show and hide divs onclick. It seems to work somehow, but removeClass won't work.
Can somebody understand what's wrong? Or is there better way to do it?
Maybe I can make it with toggle array or something, that simplifies the code or click counts (if count c++%2!=2), don't even know if that's possible.
$('div.more-lang').hide();
$('div.lang-arrow').click(function () {
$('div.lang-arrow').addClass('more');
$('#lang').hide('');
$('div.more-lang').show('');
});
$('div.lang-arrow.more').click(function () {
$('div.lang-arrow').removeClass('more');
$('div.more-lang').hide('');
$('#lang').show('');
});
This should work:
$("div.lang-arrow").on('click', function() {
$(this).toggleClass("more");
$("#lang").toggle();
});
http://jsfiddle.net/zmvQp/

jquery modal getting it to close when I click elsewhere

at the moment Im only learning javascript and could do with some help here as Im a little confused as to where to go from here.
I have a site with a modal using jquery, I can get it to show when I click on the image, but when I click elsewhere it doesnt turn it off.
Ive tried toggle, but that makes it turn on and off no matter where I click.
Ive tried hide but that stops it working at all (assuming its applying the hide function even when I click on the link)
Heres what I have so far, any help would be great...
jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});
make an function that checks for youtubemodal that is shown and then hide.
$("document").click(function() {
if( $('#youtubemodal').is(':visible') ) {
$('#youtubemodal').hide();
}
});
Here's what you need to do:
$('#youtube').click(function(){
$('#youtubemodal')
.show()
.on("click", function(e){
e.stopPropagation();
});
$(document).on("click.youtubemodal", function(){
$(this).off(".youtubemodal");
$('#youtubemodal').hide();
});
});​
This is how it will behave:
When you click on the image, the modal appears
When the modal appears, we add a listener to document so that when you click anywhere, the modal is hidden (and the listener is removed as well)
When the modal appears, we also add a listener to it, so that if you click on the modal if doesn't hide it: the modal is only hidden if you click outside of it
Note: if you're not using jQuery 1.7 or above, replace .on() with .bind(), and .off() with .unbind()
I came up with my own workaround for this, where I set up a div with a dark background with an opacity of 40%,that appears throughout the page when the modal is loaded.
#modalbackground {
width:100%;
height:100%;
background-image: url('images/modalbackground.png');
background-repeat: repeat;
position:fixed;
z-index:600;
display:none;
}
I then put this div outside of everything to insure it covers the entire page
<div id="modalbackground"> </div>
I then applied this code to make sure the div and the modal closes when I click on the new dark "background".
jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});
jQuery('#youtube').click(function(){
jQuery('#modalbackground').show();
});
jQuery('#modalbackground').click(function(){
jQuery('#modalbackground').hide();
});
jQuery('#modalbackground').click(function(){
jQuery('#youtubemodal').hide();
});

Categories