We Keep Coding

Javascript Make Div appear for 2 seconds after mouse press

I've been having problems with creating a colored block which is hidden, and then appears after a mouse press (no where specific, anywhere on the page), then stays there for 2 seconds and then disappears again... until another mouse press happens, and the whole thing happens again. Have been experimenting with '.click(function' and other things but haven't been able to make it work.
At the moment I have a DIV layer like this...
HTML:
<div class="overlay"></div>
CSS:
.overlay {
position: absolute;
z-index: 1000;
right: 240px;
top: 500px;
width: 1000px;
height: 100px;
background: rgba(255, 255, 200, 100);
}
I'm quite new to javascript so any advice will be very helpful.

You can do it using setTimeout in jQuery
$( "#target" ).on( "click", function() {
$("#messageBox").hide().slideDown();
setTimeout(function(){
$("#messageBox").hide();
}, 2000);
});
#messageBox {
display:inline-block;
float:right;
border:1px solid #060;
background:#FFC;
padding:10px 20px;
box-shadow:2px 2px 4px #666;
color:#060;
font-weight:bold;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="messageBox">
Hi there.
</div>
<input type="button" id ="target" value="click"/>

The jQuery(document) does the trick as it will consider click for the whole document and not to a specific place on page.
jQuery(document).click(function(event) {
var $div = $(".overlay");
if ($div.is(":visible")) { return; }
$div.show();
setTimeout(function() {
$div.hide();
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Doing this you do need a target div or element to fire an event on click. This will allow you to fire the event on the whole document.

Sliding div out with css and jquery without triggering scrollbar?

I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})

Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}

Stop jquery animation from executing multiple times when clicking

I am trying to create an element which is able to disappear after clicking on it. The code apparently works but, if you try to click the div multiple times you will see that the animation restarts and executes multiple times.
Is there a way to make it play just once even if multiple clicks are applied on it?
Here's what I've got:
$(document).ready(
function() {
$('#movingDiv').click(function() {
$(this).hide('slide', {
direction: 'right'
}, 1000);
});
});
#movingDiv {
width: 50%;
height: 3em;
border: 3px solid red;
color: #000;
background-color: orange;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<div id="movingDiv">Some content.</div>

You need to clear the animation queue on each click, instead of stacking up the animations. You can use stop() to achieve this:
$(document).ready(function(){
$('#movingDiv').click(function() {
$(this).stop().hide('slide', { direction: 'right' }, 1000);
});
});
Working example
this makes the animation stop momentarily when you click on it
This is true. It's due to the easing effect on the element animation. A possible workaround is to only allow a single click on the element to hide it.
$('#movingDiv').one('click', function() {
$(this).hide('slide', { direction: 'right' }, 1000);
});
Working example

Use 'unbind' to remove the click handler on the first click.
$(document).ready(
function() {
$('#movingDiv').click(function() {
$(this).unbind('click').hide('slide', {
direction: 'right'
}, 1000);
});
});
#movingDiv {
width: 50%;
height: 3em;
border: 3px solid red;
color: #000;
background-color: orange;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<div id="movingDiv">Some content.</div>

ajax show container not animating as expected

I am writing a plugin for showing ajax content.It is wrapped in a ajax-content-wrap.I have applied jquery animate() but not smooth with auto height.And fade() function is also animating.But when i use a specific height animate() works and fadeIn() does not works.
my html codes are below
<div class="ajax-content-wrap">
<div class="ajax-content-show">
//here to show contents from external files
</div>
</div>
My jquery
$('.ajax-content-show').animate({height:'200px'}, function(){
$(this).fadeIn('slow', function(){
$(this).fadeIn('slow').load(url);
})
});
My css
.ajax-content-show{
padding: 20px 20px;
display: block;
border: 1px solid #eee;
margin: 10px 0;
}

If I understand what you are trying to acheive here is a solution:
$('.ajax-content-show').animate({
height: '200'
}, 500, "linear",
function () {
$('.ajax-content-show').hide(0, function () {
$('.ajax-content-show').load(url, function () {
$('.ajax-content-show').fadeIn('slow')
});
});
});
If not, can you explain (in steps) what you require, first make "div" 200px then fade in "loaded page" or do them both simultaneously?
Note: Don't need to include the 'px' when setting the height property, JQuery assumes pixels as a default.

May this you want ?
See snippet.
$(".ajax-content-show").load("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function(){
$(this).slideDown(10000); // change the time, or just remove it if you think too slow.
$(this).addClass("loaded");
});
.ajax-content-show{
padding: 20px 20px;
display: none;
border: 1px solid #eee;
margin: 10px 0;
height: auto;
opacity: 0;
transition: opacity 5s ease;
max-height: 500px; /* This just for show that sliding is working */
}
.ajax-content-show.loaded {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ajax-content-wrap">
<div class="ajax-content-show">
//here to show contents from external files
</div>
</div>

Click to Expand a <div> but hover away to back in Normal size

I have a <div> which expands when clicking on it and again click to it back in normal size which is fine BUT I am wanting to have Something like ...
When click on the <div> (class name .topHead) it should expand and return to normal size if the cursor is moved from the <div> without the need to click to bring it back to the normal size
Is this possible? Any solution will be appreciated.
js Fiddle : http://jsfiddle.net/saifrahu28/u6YWZ/
HTML
<div class="topHead" ></div>
CSS
.topHead {
height: 60px;
width: 100%;
background: #ccc;
overflow: hidden;
border-bottom: 6px solid #fa9a37;
z-index: 999;
transition: all 1.1s ease;
cursor:pointer;
}
.topHead.active {
height: 100px;
z-index: 999;
background: blue;
border-bottom: 6px solid #fa9a37;
transition: all 0.7s ease;
box-shadow: 0 4px 2px -2px gray;
cursor:default;
}
JS
$(".topHead").click(function() {
$(this).toggleClass("active");
$(".TopsliderArrow").toggle();
});

try this
$(".topHead").click(function() {
$(this).toggleClass("active");
}).mouseout(function(){
!$(this).hasClass("active")||($(this).toggleClass("active")/*,...*/);
});
http://jsfiddle.net/u6YWZ/2/

$(".topHead").on("mouseout",function() { // you may use mouseleave as well instead of mouseout
$(this).removeClass("active");
$(".TopsliderArrow").hide(); // Not Sure what this does but I guess you may hide this
});
Add this to your js

I'd be worried about getting the active class and TopsliderArrow visibility out of sync using toggle(). This method doesn't use toggle so may better suit your needs.
$(".topHead")
.on("click",function(){
if($(this).hasClass("active")){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
} else {
$(this).addClass("active");
$(".TopsliderArrow").show();
}
})
.on("mouseout",function(){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
});
Demo Fiddle
UPDATE:
Turns out toggle() works just fine:
$(".topHead")
.on("click",function(){
$(this).toggleClass("active");
$(".TopsliderArrow").toggle();
})
.on("mouseout",function(){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
});
Working Demo Fiddle