Fading the body using javascript - javascript

As it is clear from the title of my question that i want to fade body using javascript.
in short what i want to do is i want to display an alert box in the screen and other than alert box whole body background will be fade.Is it possible using javascript?
What i tried so far:
HTML:
<tr><td><table class="popup" style="font-size:12px;border-bottom:1px solid #482C1F !important; text-align: center !important;top:-10000px;position:absolute;" id="nameFieldPopup" border="0" cellpadding="0" cellspacing="0">
<div id="dontfade">
<tr><td align="left" style="padding-left:10px; padding-top:30px; " id="detailstd"></td></tr>
<tr><td align="right"><input type="button" name="ok" value="OK" onClick="closepopup();"></td></tr>
</table></td></tr>
</tr>
</div>
</div>
Javascript:
window.onload=function(){
moduleidvar=<?php echo $moduleid?>;
alert(moduleidvar);
if (moduleidvar==-1) {
var tdControl = document.getElementById("detailstd");
tdControl.innerHTML = "eNPS is een moderne
en efficiënte manier voor het meten van medewerker bevlogenheid.In een ";
document.getElementById('nameFieldPopup').style.top="";
document.getElementById('nameFieldPopup').style.visibility = "visible";
}
};

A common technique to fade the body is to use a div which is on top of everything except your popup. When you fade in/out this div it looks like the body is fading.
In my Fiddle, the popup has a higher z-index than the white mask. When you click on the popup it will fadeout the mask so the body will be visible:
$("#popup").click(function() {
$("#mask").fadeOut();
$(this).hide();
});
The mask is created with:
#mask {
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: white;
position: absolute;
opacity: 0.9;
}
The opacity: 0.9 makes the mask semi-transparent. You can change this to any value between 1 and 0.
See http://jsfiddle.net/WaPXN/1/

Do you mean something like this?
DEMO
I'm slowly reducing the opacity of one div(which can contain all your background stuff) while the other div(which can contain the stuff that isn't supposed to fade) remains unaltered.
document.getElementById('btn').onclick = function () {
fade.style.opacity = 1;
var h = setInterval(function () {
if (fade.style.opacity > 0.3) {
fade.style.opacity -= 0.1;
} else {
clearInterval(h);
alert('some text');
}
}, 100);
}
Edit: Updating the fiddle for the second part of your question.
DEMO2
(this is in jQuery though)

I think maybe you just want a modal dialog. This can be done easily with jQuery UI. It won't be blocking like a regular alert().
<script>
var showAlert = function() {
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
buttons: {
"OK": function() {
// Your code here
$(this).dialog("close");
}
}
});
};
$(function() {
showAlert();
});
<body>
<div>background</div>
<div id="dialog-confirm" title="Alert">Lorem Ipsum</div>
</body>
EXAMPLE

Related

How to show div with slide down effect only with javascript

I Want to show div on click with slideup effect using javascript(not jquery).
Here is my HTML code:-
<div class="title-box">show text</div>
<div class="box"><span class="activity-title">our regions bla bla</span></div>
Kindly advise me asap.
The question states that the solution needs to be done with pure JavaScript as opposed to jQuery, but it does not preclude the use of CSS. I would argue that CSS is the best approach because the slide effect is presentational.
See http://jsfiddle.net/L9s13nhf/
<html><head>
<style type="text/css">
#d {
height: 100px;
width: 100px;
border: 1px solid red;
margin-top: -200px;
transition: margin-top 2s;
}
#d.shown {
margin-top: 100px;
}
</style>
</head>
<body>
<button id="b">Toggle slide</button>
<div id="d">Weeeeeeee</div>
<script type="text/javascript">
var b = document.getElementById('b');
var d = document.getElementById('d');
b.addEventListener('click', function() {
d.classList.toggle('shown');
});
</script>
</body></html>
The basic algorithm is to add a class to the element you want to slide in/out whenever some button or link is clicked (I'd also argue that a button is more semantically appropriate here than an anchor tag which is more for linking web pages).
The CSS kicks in automatically and updates the margin-top of the sliding element to be visible on-screen. The transition property of the element tells the browser to animate the margin-top property for two seconds.
You can try below code:
Working Demo
document.getElementById('bar').onclick = (function()
{
var that, interval, step = 20,
id = document.getElementById('foo'),
handler = function()
{
that = that || this;
that.onclick = null;
id = document.getElementById('foo');
interval =setInterval (function()
{
id.style.top = (parseInt(id.style.top, 10) + step)+ 'px';
if (id.style.top === '0px' || id.style.top === '400px')
{
that.onclick = handler;
clearInterval(interval);
if (id.style.top === '400px')
{
id.style.display = 'none';
}
step *= -1;
}
else
{
id.style.display = 'block';
}
},100);
};
return handler;
}());
You can refer following below:
<div class="title-box">
show text
</div>
<div class="box" id="slidedown_demo" style="width:100px; height:80px; background:#ccc; text-align:center;">
<span class="activity-title">our regions bla bla</span>
</div>

jQuery div animate from left to right and comes back after pause

I'm trying to slide a div from the left to the right side when the 'submit' button is clicked. After a little pause, the div would automatically slides back to it's original position. Currently it goes to the right side but it isn't coming back to the left corner.
CSS
#mainform{
position: absolute;
display: block;
padding-top:20px;
font-family: 'Fauna One', serif;
}
HTML
<div id="mainform">
<!-- Required div starts here -->
<form id="form">
<h3>Contact Form</h3>
<div class="hello"></div>
<input type="button" id="submit" value="Send Message"/>
</form>
</div>
JS
$(document).ready(function() {
$('#submit').click(function(e) {
reslide();
function reslide() {
$('#mainform').delay().animate({width: '510px', left: '1050'}, 600).delay(5000).animate({width: '510px', right: '1000px'}, 200, function() {
setTimeout(reslide, 3000);
});
}
$('.hello').fadeIn(1500);
$("<b>Successfully send</b>").appendTo(".hello");
$('.hello').fadeOut(2500);
});
});
When you give feedback to the user after/before submiting, try to use CSS3 Transform instead of actually moving/resizing the object.
function slide($obj) { // jQuery object of element
$obj.css("transform", "translateX (50px)");
setTimeout(function(){
$obj.css("transform", "none");
}, 5000);
}
To make it smooth (real animation) apply CSS3 Transition property.
<style>
.object {
transition: transform 0.6s;
}
</style>
Or you can shorten, if you're sure everything'd go smoothly.
function slide($obj) { // jQuery object of element
$obj.animate("transform", "translateX (50px)")
.delay(600).
.animate("transform", "translateX (0px)");
}
PS; in my expirience jQuery.delay(); wasn't always working with queueing animations, i'm not entirely sure why. As a matter of fact, this happened only sometimes. Sometimes tought it wasn't working
// not working
$("smth").animate({"rule":"val"}).delay(500).animate("rule":"val");
// working
$("smth").animate({"rule":"val"})
setTimeout(function(){
$("smth").animate({"rule":"val"})
}, 1000);
The reason it's not working is that, while you add right to the element, you also keep left with its original value, thus the element will not "come back". Add left: '', to the 2nd animate function and you should be good to go:
function reslide() {
$('#mainform').delay().animate({
width: '510px',
left: '1050'
}, 600).delay(5000).animate({
width: '510px',
left: '',
right: '1000px'
}, 200, function () {
setTimeout(reslide, 3000);
});
}
Here is a fiddle you can play with: http://jsfiddle.net/bv8dwaq2/

JavaScript - Make an image turn white on click

I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image
Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});
To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)
You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>
With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...

jQuery to stop a function using click, that runs on doc ready - Then start function when clicked again

I have a page that has 2 functions that begin on document ready. One begins a slideshow of images fading in and out and another that slowly fades a background image in and out. I have implemented a switch that when clicked, fades in a new background image and overall background-color. I'm trying to figure out how to have this switch also stop the functions that are running on document ready (or disable them completely so the slides aren't sitting still) but also restart them when clicked again. So basically toggle the functions each time clicked. I mocked up a page that has images cycling and a button to change the image and background color (I left off the other function I mentioned to make it less complicated and more clean). Any assistance would be greatly appreciated.
I've looked into adding a global variable and then an if-statement for the functions and then have the click change that global to an invalid, then I tried looking into toggle-functions but had no luck. I'm fairly new to all of this so I apologize if my code is messy or confusing
http://jsfiddle.net/timtim123/d6xn8/2/
<body>
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png" id="backimg" />
<div id="switch">
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/darkswitch_zpsc7190818.png" width="46" height="275" border="0" />
</div>
<div class="fadein">
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide1_zps169c4a26.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide2_zps72fbcc61.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide3_zpsaf2fb393.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide4_zps9544ea88.png" width="394" height="630" border="0" />
</div>
</body>
body {
background:black;
transition:background 0.2s ease;
}
.clicked {
background:white;
}
#backimg {
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#backimg2 {
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#switch {
top: 0px;
left: 100px;
top: 300px;
height:275px;
position:absolute;
z-index: 7;
}
.fadein {
position:absolute;
width:500px;
height:630px;
top: 0px;
left: 500px;
}
.fadein img {
position:absolute;
top: 0px;
left: 500px;
}
//cycle through slides
$(document).ready(function cycle() {
timer = $('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut(2000)
.next('img').fadeIn(2000)
.end().appendTo('.fadein');
}, 2000);
//switch functionality
$(document).ready(function () {
$("#switch").click(function () {
var src = $("#backimg").attr("src");
$("body").delay(2000).queue(function () {
$("body").toggleClass("clicked");
$("body").dequeue();
});
if (src == "http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png") {
$("#backimg").fadeOut(2000, (function () {
$("#backimg").fadeIn(2000).attr("src", "http://i1331.photobucket.com/albums/w600/timtim123454/background2_zps36c1126d.png");
}));
} else if (src == "http://i1331.photobucket.com/albums/w600/timtim123454/background2_zps36c1126d.png") {
$("#backimg").fadeOut(500, (function () {
$("#backimg").delay(5000).fadeIn(5000).attr("src", "http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png");
}));
}
});
});
});
1) Try doing it using clearInterval as in the example shown at the top of this page http://www.w3schools.com/jsref/met_win_clearinterval.asp. This will stop the setInterval function.
2) To hide your slideshow / image you will need to use jQuery hide. Stopping a function will not change elements in the DOM.
3) Here is an elaboration on the code in the link I sent you, that includes stop and start functionality.
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<button onclick="myStartFunction()">Stop time</button>
<script>
var myVar = setInterval(function(){myTimer()},1000);
function myTimer()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
function myStartFunction()
{
myVar = setInterval(function(){myTimer()},1000);
}
</script>
</body>
</html>
Let me know if you need further information.
FYI - you don't need 2 '$(document).ready' Just put the code of the 2nd one under the code of the 1st one.

Fade a background in when you mouseover a box

I've asked this guestion before. But now I'll try to be a bit more specific.
I've trying to make a background fade in when you mouse over a box. I've tried 2 different options.
Option 1:
Box1 is the box it mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i just go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. Is there a way you can stop it?
Content is a text that changes in a contentbox when I mouseover. This worksfine.
$("#box1").mouseover(function(){
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
});
Option 2:
Here i add the class hover2 and asks it to fadeín and fadeout. But this doesn't work at all. Somtimes it even removes everything on the side when i take the mouseout of the box.
$("#box2").mouseover(function(){
$("#background").addClass("hover2").fadeIn("slow")
$("#content").html(box3);
});
$("#box2").mouseout(function(){
$("#background").removeClass("hover2").fadeOut("slow")
$("#content").html(content);
});
I Use jquery ui.
I really hope someone can help me!
You can also try to make small changes in the markup/CSS.
HTML:
<div id="box">
<div id="background"></div>
<div id="content"></div>
</div>
CSS:
#box {
position: relative;
/* ... */
}
#background {
position: absolute;
display: none;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-image: url(...);
z-index: -1;
}​
JavaScript:
$("#box").hover(function() {
$("#background").fadeIn();
}, function() {
$("#background").stop().fadeOut();
});​
DEMO: http://jsfiddle.net/bRfMy/
Try add a variable to control the execution of the effect only when that variable has a certain value. And modify its value when the effect was executwed.
Something like this:
var goeft = 0;
$("#box1").mouseover(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
// sets its value back to 0 if you want the next mouseover execute the effect again
goeft = 0;
});

Categories

Resources