We Keep Coding

Hide menu, when clicking anywhere else than the menu

I have a menu that appears when I click an icon. Currently I can close it by clicking the 'close' icon, but I would like to be able to close it by clicking anywhere outside of the menu, when the menu is visible.
Here is a jsFiddle: http://jsfiddle.net/budapesti/3v5ym2bp/3/
For example the following doesn't work:
$(document).click(function() {
if($('.menu').is(":visible")) {
$('.menu').hide()
}
});
I found similar questions, such as jQuery: Hide element on click anywhere else apart of the element and How do I detect a click outside an element?, but couldn't get the solutions to work for me.
EDIT: I wonder if is(":visible") works with jQuery "animate"?

call close function on anywhere click on window. And use event bubbling.
i had update it its jsfiddle link is
> http://jsfiddle.net/rahulrchaurasia/3v5ym2bp/19/

Try this : http://jsfiddle.net/3v5ym2bp/13/
html
<div class="inv"></div><!-- Added an invisible block -->
<div class="menu"> <span class="glyphicon glyphicon-remove closed pull-right"></span>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div class="icon-menu"> <span class="glyphicon glyphicon-menu-hamburger"></span>MENU</div>
css
.menu {
position: fixed;
width: 285px;
height: 100%;
left: -285px;
background: #202024;
z-index: 1;
}
.glyphicon-remove, ul {
color: #fff;
padding: 10px;
}
/* Added an invisible block */
.inv {
display:none;
width:100%;
height:100%;
position:fixed;
margin:0;
}
jQuery
"use strict";
var main = function () {
$('.icon-menu').click(function () {
$('.icon-menu').hide();
$('.inv').show(); //added
$('.menu').animate({
left: "0px"
}, 200);
});
//Added
$('.inv').click(function () {
$('.inv').hide();
$('.menu').animate({
left: "-285px"
}, 200);
$('.icon-menu').show();
});
$('.closed').click(function () {
$('.inv').hide();//added
$('.menu').animate({
left: "-285px"
}, 200);
$('.icon-menu').show();
});
};
$(document).ready(main);
Another simple example : http://jsfiddle.net/3v5ym2bp/17/

I suggest you bind an event on document click after menu has been shown, the event that will ensure that every click anywhere outside menu will close it.
$(document).on("click.menu",function(event) {
var target = $(event.target);
if (!target.closest(".menu").length || target.closest(".closed").length) {
closeMenu(function() {
$(document).off("click.menu");
});
}
});
here you'll have to evaluate event object, and what trigger it - which element if it's inside menu (apart from the close button) then don't do nuffing, if outside - then close the menu. All the closing stuff is put to the separate function. also don't forget to unbind this handler from document after closing
http://jsfiddle.net/3v5ym2bp/15/
working demo

Use css attribute left to detect if the menu is visible instead of :visibe because it's bot work with chrome, see jquery .is(“:visible”) not working in Chrome.
You have just to detect if the menu is visible (use the css attribute left) because if the menu css left=0px that mean it's visible, and after that if the click is outside of menu or not and so if outside close it.
Take a look at Your updating fiddle work fine just by adding the following handle that detect outside click :
JS :
$(document).click(function(e) {
//if the menu is visible
if($(".menu").css('left') =="0px"){
//if the click is outside of menu
if($(e.target).closest('.menu').length == 0){
$('.closed').click();
}
}
});

var main = function() {
$('.icon-menu').click(function() {
$('.icon-menu').hide();
$('.menu').animate({
left: "0px"}, 200);
});
$('.closed').click(function() {
$('.menu').animate({
left: "-285px"}, 200);
$('.icon-menu').show();
});
};
$(document).ready(main);
var rahul=0;
$(window).click(function(e) {
$('.menu').animate({
left: "-285px"}, 200);
$('.icon-menu').show();
});
.menu {
position: fixed;
width: 285px;
height: 100%;
left: -285px;
background: #808080;
z-index: 1;
}
.glyphicon-remove, ul {
color: #fff;
padding: 10px;
}
<div class="menu" onclick="event.cancelBubble=true;">
<span class="glyphicon glyphicon-remove closed pull-right"></span>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
<div class="icon-menu" onclick="event.cancelBubble=true;">
<span class="glyphicon glyphicon-menu-hamburger"></span>*MENUS*
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

move background while mousemove

I have a problem, when i reload my page, page starting at left, but I need this at center. How should i do this?
Next, when it will be in center, it should scroll to left until it 20px and so at right. Top and bottom doesnt matter.
2.JPG resolution is 2743 width, 768 height.
here is my code:
css:
* {
margin-left:-90px;
margin-top:-10px;
padding:-60px;
}
body {
background:white;
}
.bg {
background:url("2.JPG");
background-repeat:no-repeat;
height:768px;
width:2743px;
display:block;
}
connected^jquery 1-7 min js
javascript
$(document).ready(function(){
$(this).bind('mousemove',function(e){
$("#bg").css({ "margin-top":e.pageY/100, "margin-left":e.pageX/6 });
});
setTimeout(function() {
$('#top').cycle({
delay: -1500
});
$('.pics img').css({
opacity: 0.5
});
}, 0);
setTimeout(function(){
$('#bottom').cycle({
delay: -3000
});
$('.pics img').css({
opacity: 0.5
});
}, 0);
});
this is my html:
<div class="bg" id="bg"> </div>
Thank you very much and sorry for my English and my design knowledge :)

You can easily do it by onmousemove event of javascript
or you can try this for your problem i hope it will work
http://css-tricks.com/auto-moving-parallax-background/

How to Add Effect to text when over it by mouse

i need to add effect to text when mouse is hover is.
my js code :-
var j = jQuery.noConflict();
j(document).ready(function() {
j('.related_box ul li').hover(function(event) {
j(this).stop().animate({ right: "-5px" }, {duration: 'slow',easing: 'easeOutElastic'});
}
,
function(){
j(this).stop().animate({ right: "-75px" }, {duration: 'slow',easing: 'easeOutElastic'});
});
});
Html code :-
<div class="related_box">
<ul class="related_list_ul">
<li class="related_list"><h3><span>«</span> About us</h3></li>
<li class="related_list"><h3><span>«</span> Call us</h3></li>
<li class="related_list"><h3><span>«</span> Contact us</h3></li>
</ul>
</div>
How to Add Effect to text when over it by mouse.

You need to make sure the element you want to animate is position: relative; or position: absolute;, otherwise changing right won't have any effect.

try this one
j('.related_box > ul > li > a').hover(function(event) {

li.related_list a:hover{ color: #xyz; }
you can do it using CSS

Use mouseover() http://api.jquery.com/mouseover/
Example: (test here http://jsfiddle.net/y8GYq/)
var j = jQuery.noConflict();
j(document).ready(function() {
j("li").mouseover(function(){
j(this).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
}); // animate
});
});

Hidden div is moving when it's shown

+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?

Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.

In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.

use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?

ScrollTop Jquery not working properly

I have been using the ScrollTop JQuery so that when buttons are clicked in the right hand column, they scroll to the specific id in the left. It goes to the specific id when I first load the page, but after that it doesn't go to the other three, but glitches out going up or down slightly when buttons are clicked. I found that when I scroll to the top of the page and click the link it goes to the correct place, so it seems it it trying to find the top position of the left column and trying to go from there. No ideas as to how to fix this so would appreciate any thoughts.
CSS:
html,
body {
height: 100%;
margin: 0px auto;
}
#main,
#col_l,
#col_r
{
height: 100%;
}
div[id*="col"]{
float: left;
width: 50%;
overflow: auto;
}
#col_r{
overflow:hidden;
position:relative;
}
JS:
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.4.3.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#stsp").click(function() {
$('#col_l').animate({
scrollTop: $("#lgg").offset().top}, 2000);
});
$("#fg").click(function() {
$('#col_l').animate({
scrollTop: $("#funny").offset().top}, 2000);
});
$("#covers").click(function() {
$('#col_l').animate({
scrollTop: $("#coverso").offset().top}, 2000);
});
$("#demo").click(function() {
$('#col_l').animate({
scrollTop: $("#mp3").offset().top}, 2000);
});
});
HTML:
<div id="col_r">
<div id="hb"><button id="demo">One × Fifteen (64mb) </button></div>
<div id="lg"><button id="stsp">Same Time Same Place</button></div>
<div id="fg"><button id="funny">Funny Games Funny Games</button></div>
<div id="c"><button id="covers">Covers Over Covers</button></div>
</div>

This was fixed this using the ScrollTo Jquery:http://flesler.com/jquery/scrollTo/
I'm not sure why I was having problems with the ScrollTop Jquery.