We Keep Coding

Hide div after being shown

I have some code that shows a div with a message in it when button is clicked. I want the div to disappear after a few seconds.
I have tried to achieve this adding $(this).delay().hide(500); in the .notify function but it doesn't work.
$.fn.notify = function(settings_overwrite) {
settings = {
placement: "top",
default_class: ".message",
delay: 0
};
$.extend(settings, settings_overwrite);
$(settings.default_class).each(function() { $(this).hide(); });
$(this).show().css(settings.placement, -$(this).outerHeight());
obj = $(this);
if (settings.placement == "bottom") {
setTimeout(function() { obj.animate({ bottom: "0" }, 500) }, settings.delay);
}
else {
setTimeout(function() { obj.animate({ top: "0" }, 500) }, settings.delay);
}
}
/** begin notification alerts
-------------------------------------**/
$(document).ready(function($) {
$('.message').on('click', (function() {
$(this).fadeTo('slow', 0, function() {
$(this).slideUp("slow", function() {
$(this).remove();
});
});
}));
});
$(document).ready(function() {
if (document.location.href.indexOf('#notify_success') > -1) {
$("#notify_autopop").notify({
delay: 500
});
}
});

You can use setTimeout function
You have to store the divobj in a variable and then use it inside the setTimeout function
$('div').click(function(){
//show the message
var divObj = $(this);
setTimeout(function(){
divObj.hide();
},3000);
});
check the fiddle link
https://jsfiddle.net/uujf8hmq/

You can write your code to hide the div in the 2nd argument of show() methos which is a complete callback. You need to hide() the element in this callback. You can put necessary timeout before hide().

You can use CSS3 animation/transition instead of jquery's animation. and you can use setTimeout to fade message after sometime.
See the below code
JS
$.fn.notify = function(message, settings_overwrite){
var settings = {
placement:"top-left",
delay: 2000
};
$.extend(settings, settings_overwrite);
var $this = $(this);
$this.removeClass('bottom-left top-left');
$this.text(message);
$this.addClass(settings.placement + ' display');
$this.on('click', function(){
$this.removeClass('display');
});
setTimeout(function(){
$this.removeClass('display');
}, settings.delay);
}
$(document).ready(function ($) {
$('body').on('click', '.create-message', function(){
$('.message').notify($('#msg').val(), {
placement: $('#pos').val()
});
});
});
HTML
Position :
<select id="pos">
<option value="top-left" selected>Top Left</option>
<option value="bottom-left">Bottom Left</option>
</select>
<br/>
<textarea id="msg"></textarea>
<br/>
<button class="create-message">show message</button>
<div class="message"></div>
CSS
.message{
position: fixed;
width: 100px;
height: 50px;
background: green;
color: white;
padding: 3px;
border-radius: 3px;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.message.display {
opacity: 1;
}
.message.top-left {
top: 10px;
right: 10px;
}
.message.bottom-left {
bottom: 10px;
right: 10px;
}
jsfiddle link - http://jsfiddle.net/jigardafda/ac5wyfo9/3/

Usually we do not use $(document).ready(function() {....}(); twice on a single page.
Try writing code to hide the div inside the same $(document).ready(function() {.....}() after the .show() function.
You can use either .hide() or setTimeout() functions to hide the div.

I have the JS script that makes one div disappear when showing another one. How to add fadein effect?

Here's my jsfiddle. The script itself is here:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
How can I add smooth fadein effect when one div disappears and the other one shows up? Thanks!

$(".div1").fadeIn();
$(".div2").fadeOut();
Running example:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
var e = $(this);
$(".div1, .div2").fadeOut().promise().done(function() {
if (e.attr("class") == "link1"){
$(".div1").fadeIn();
} else {
$(".div2").fadeIn();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Link 1
Link 2
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
The promise() is used to avoid the collision between fadeOut and fadeIn transitions

It looks like you need the fadeIn() method from jQuery, as explained in the docs:
The .fadeIn() method animates the opacity of the matched elements. It is similar to the .fadeTo() method but that method does not unhide the element and can specify the final opacity level.
if ($(this).attr("class") == "link1") {
$( "#div1" ).fadeIn( "slow", function() {
// Animation complete
});
} else {
$( "#div2" ).fadeIn( "slow", function() {
// Animation complete
});
}
Instead of slow you can also use a number for indicating the fade-in time, in milliseconds.

updated your fiddle.
simply replace show() with fadeIn()
http://jsfiddle.net/cEJtA/572/

jQuery slide back when clicked anywhere on the page

$(".links").click(function(){
$('.slider').stop(true,false).animate({ right: "0" }, 800, 'easeOutQuint');
}, function() {
$(".slider").stop(true,false).animate({ right: "-200" }, 800, 'easeInQuint');
}, 1000);
I am building a little slider on my website. The slider position is right: -200. It slides to position right: 0 I want to animate it back to position right: -200 after clicking anywhere else on the page.
I tried all the ways which failed. toggle(slide) works good but doesn't looks good.
http://jsfiddle.net/aofg5v78/

Putting your code through the JavaScript beautifier (it's always good to do it to your code that you post to make it easier to understand) gives this:
$(function () {
$(".links")
.click(function () {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
},
function () {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}, 1000);
});
You're trying to pass two handlers to .click() and something that looks like a timeout or duration (1000). Try something like this:
$(function () {
var toggle;
$(".links")
.click(function () {
toggle = !toggle;
if (toggle) {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
}
else {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
});
Update: To make it slide when you click anywhere on the page it's slightly more complicated:
$(function () {
var toggle;
$(document).click(function () {
if (toggle) {
toggle = !toggle;
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
$(".links")
.click(function (e) {
e.stopPropagation();
toggle = !toggle;
if (toggle) {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
}
else {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
$(".slider")
.click(function (e) {
e.stopPropagation();
});
});
This part:
$(".slider")
.click(function (e) {
e.stopPropagation();
});
is there to not hide the slider when you click on the slider (and not somewhere else on the page, outside of the slider) but if that's not what you want then you can remove it.
(The code could be refactored to remove duplication and to avoid running the selectors multiple times but it serves the purpose of this example. Also, you can't have more than one such slider on a page right now because all will slide at the same time but I guess that's ok.)
See DEMO.
It would be simpler for older jQuery versions with the toggle method but unfortunately it was deprecated in version 1.8 and removed in version 1.9.
(By the way, the easing functions that you are using are not available in plain jQuery by default. They are available if you're using jQuery UI but if you're not then you have to add them before you can use them. Just something to keep in mind to avoid the unhelpful "undefined is not a function" exception.)

Heres a different take:
DEMO
css
.slider {
position: absolute;
top: 200px;
height: 200px;
width: 200px;
background: #000;
/* relevant */
transform: translateX(-200px);
transition: transform 400ms ease-in-out;
}
.slider.shown {
transform: translateX(0);
}
jquery js
$(document).ready(function(){
var $slider = $('.slider').addClass('shown');
$(document).on('click', '*:not(.slider)', function(e) {
//// as described in question in on load, out on click
// $slider.removeClass('shown');
// to slide in/out on click:
$slider.toggleClass('shown');
})
// seperate button, dedicated to fn
$('.toggleSlider').on('click', function() {
$slider.toggleClass('shown');
});
});
demo HTML
<body>
<div class='slider'>such div</div>
<button class='toggleSlider'>such div</button>
</body>

You can do it from two event attachment... and check closest() element have .spider or not and make toggle from animation() function, see below code
$(function() {
$(".slider").click(function() {
$('.slider').stop(true, false).animate({
right: "0"
}, 800, 'easeOutQuint');
});
$(document).on('click', function(e) {
if (!$(e.target).closest('.slider').length) {
$(".slider").stop(true, false).animate({
right: "-370"
}, 800, 'easeInQuint');
}
});
});
.slider {
position: fixed;
right: -370px;
top: 120px;
z-index: 99997;
width: 400px;
height: 300px;
background: red;
}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="slider"></div>

Animating the Opacity doesn't work properly in jquery

I'm trying to change the Opacity of an element when I scroll down. and change the opacity back to its normal state when I scroll back to the top. But I'm having problems doing this.
#menu
{
opacity:0.6
}
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$( "#menu" ).fadeTo("fast", 1);
} else {
$( "#menu" ).fadeTo("fast", 0.6);
}
});
The above code doesn't work or in some cases it works after a bit and stops again! I'm really confused cause I tried the code below to simply fade it and it works without a hitch.
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$( "#menu" ).fadeOut();
} else {
$( "#menu" ).fadeIn();
}
});

I would do this:
$(window).scroll(function ()
{
if (window.pageYOffset > 100)
{
$('#menu').addClass('no-opacity');
}
else
{
$('#menu').removeClass('no-opacity');
}
});
in css:
.no-opacity { opacity:0; }
in css again: make the change happen gradually:
#menu { transition: all 0.5s linear 0s; }

First of all, I recommend to use .stop() before fadeTo method, as you are executing it on every scroll event!
After that, your two code blocks are not the same, in the first one, you are showing element (opacity 1) if scroll is greater than 100, the second code is vice versa, try this:
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$( "#menu" ).stop().fadeTo("fast", 0.6);
} else {
$( "#menu" ).stop().fadeTo("fast", 1);
}
});
jsFiddle Demo.

To make it short, you could do it like this:
js
var _st;
$(window).scroll(function ()
{
_st = $(this).scrollTop();
$('#menu').css({opacity:(_st > 100) ? 0 : 1 });
})
css
#menu { transition: opacity 0.5s linear 0s; }

firefox screen issue with click() method

The question has to do with Firefox refreshing the browser window to 100% when a function is called.
If the browser view is at say, 75%, and I use .click method on a link - the page refreshes at 100% THEN the function executes. Safari executes the function without refreshing the window.
The code now looks like:
function hideFlag(){
$("#ftm").click(function () {
var stageWidth = $("#window_div").width();
if (stageWidth <= 1200){
$( "#window_div" ).animate({
width: 1250,
opacity: ".8",
}, 1000 );
$( "#flagDiv" ).animate({
opacity: "0",
}, 1000 );
}
else{
$( "#window_div" ).animate({
width: 500,
opacity: ".6",
}, 1000 );
$( "#flagDiv" ).animate({
opacity: "1",
}, 1000 );
}
});
}
In Firefox, if my browser view is zoomed out to 75% and I replace the .click() method with .mouseenter, the divs animate without the screen redrawing or resizing on mouseenter. I don't understand the difference between the click() and mouseenter() implementations.
Solved it.
It was far simpler than I thought. Proper use of the "return false;" argument on the click method
solved my problem. Revised code is as follows:
function hideFlag(){
$("#ftm").click(function () {
var stageWidth = $("#window_div").width();
if (stageWidth <= 1200){
$( "#window_div" ).animate({
width: 1250,
opacity: ".8",
}, 1000 ); return false;
$( "#flagDiv" ).animate({
opacity: "0",
}, 1000 ); return false;
}
else{
$( "#window_div" ).animate({
width: 500,
opacity: ".6",
}, 1000 );return false;
$( "#flagDiv" ).animate({
opacity: "1",
}, 1000 );return false;
}
});
}
Thanks all for the help.

Not that this a direct answer to your question, but it's rather long for a comment.
You're using jQuery. I think you're missing the point of the whole cross-browser-library thing. Change
stageWidth = document.getElementById("window_div").clientWidth
to
stageWidth = $("#window_div").width()
no browser-specific code needed. There also no need for that addEventHandler function when using jQuery. It takes care of the differences between browsers so that you don't have to. That means you can change the setUpClickHandler function to this:
function setUpClickHandler() {
$('#ftm').click(hideFlag);
$('#ath').click(showFlag);
}
and change showFlag to this:
function showFlag(e){
$('#flagDiv').show();
}
and change
addEventHandler(window, "load", setUpClickHandler, false);
to
$(window).load(setUpClickHandler);