Develop Reference

How to add a fade effect to html transition with javascript

I have this code (see jsfiddle below)
<script type='text/javascript'>
https://jsfiddle.net/mA8hj/ and would like to know how to edit the javascript in a way that by clicking the links in the fiddle, the text displayed fades slowly to another text when clicking another link. (Something like you'd use in CSS by adding -ms-transition: .2s;).
Thanks!

Try to pass "slow"/"fast"/"medium"/any delay in milliseconds as a parameter to show,
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).stop().show("slow");
});
DEMO
Or by using .fadeIn()
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).css("opacity",0).stop().fadeIn("slow");
});

Use a CSS class and CSS transitions instead, and use jQuery only to add/remove this class .show:
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').removeClass("show");
$('#answer' + numb).addClass("show");
});
#answer,
#answer1,
#answer2,
#answer3,
#answer4 {
position: absolute;
opacity: 0;
transition-duration: 0.4s;
}
#answer.show,
#answer1.show,
#answer2.show,
#answer3.show,
#answer4.show {
position: absolute;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
<div class="clear" class="question"></div>
<div id="answer1">1</div>
<div id="answer2">2</div>
<div id="answer3">3</div>
<div id="answer4">4</div>
<div class="new_member_box_display show" id="answer">Text will appear here when one of the tabs above is clicked</div>
https://jsfiddle.net/mA8hj/94/

Onclick, only parent div not subdiv

I'm playing around with building a basic modal window and i want it do dissapear when i click the edges. So my problem in it's most basic form:
<div style="width:100%;height:100%;" onclick="hideAll()">
Hide all onclick.
<div style="width:100px;height:100px;">
does not hide all onclick
</div>
</div>
What is the best way to achieve this? To use unnested divs? html/css magic?

HTML:
<div style="width:100%;height:100%;" class="outerModal">
Hide all onclick.
<div style="width:100px;height:100px;">
does not hide all onclick
</div>
</div>
JavaScript:
$(document).on("click", ".outerModal", function(evt) { //listen for clicks
var target = $(evt.target ||evt.srcElement); //get the element that was clicked on
if (target.is(".outerModal")) { //make sure it was not a child that was clicked.
//hide dialog
}
});
Example:
JSFiddle

When you hide the parent tag, it automatically hides the childen tag as well, You should first contain the child div into variable and after that hide the parent div and append that stored child div into parent tag something like this.
HTML
<div id="result">
<div style="width:100%;height:100%;" id="parentDiv" onclick="hideAll()">
Hide all onclick.
<div style="width:100px;height:100px;" id="childDiv">
does not hide all onclick
</div>
</div>
</div>
javaScript
function hideAll(){
var childDiv = document.getElementById('childDiv'); //contain child div
var parDiv = document.getElementById('parentDiv');
parDiv.style.display = 'none'; //hide parent div
parDiv.parentNode.appendChild(childDiv); //append child div
}
DEMO

Assuming that "parentDiv" is to be the background and "childDiv" is to be the actual modal content, the best way I have found is to separate the divs entirely.
HTML
<div id="parentDiv" onclick="hideAll()"> </div>
<div id="childDiv" >
does not hide all onclick
</div>
Javascript using jQuery
function hideAll(){
/* The Parent Div will hide everything when clicked, but the child won't */
$('#childDiv').fadeOut(1000, function(){
$('#parentDiv').fadeOut(1000);
});
}
CSS
#parentDiv {
background: black;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
height: 100%;
width: 100%;
}
#childDiv {
display: block;
position: relative;
background: white;
height: 200px;
width: 200px;
z-index: 101
}
Here is a working example.
Hope this helps at all.

See this fiddle:
http://jsfiddle.net/eZp9D/
$(document).ready(function () {
$('#parentDiv').click(function (e) {
if ($(e.target).prop('id') == "parentDiv") {
$(this).hide();
}
});
});

You can use basic jQuery and style it accordingly with CSS.
Check this example.
If you want to have it disappear by clicking outside of the dialog window, make sure that onClick you perform this action:
$( "#dialog_id" ).dialog( "close" );

Fading the body using 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

Jquery/CSS sequential element animation with callback

I am writing a script that will animate a set of jQuery Elements, but I'm running into some issues. Here are my requirements:
Sequential animations
Callback functionality after all animations are complete. Callback can be defined globally
Animation works on floated elements with
Entire solution can be js/jquery/css or a combination
Here's what I've gotten so far: http://jsfiddle.net/fmpeyton/cqAws/
HTML
<div class="block">Im a box</div>
<div class="block">me too</div>
<div class="block">and me!</div>
<div class="block">am I?</div>
<div class="block">yes.</div>
<div class="block">Im a box</div>
<div class="block">me too</div>
<div class="block">and me!</div>
<div class="block">am I?</div>
<div class="block">yes.</div>
<div class="block">Im a box</div>
<div class="block">me too</div>
<div class="block">and me!</div>
<div class="block">am I?</div>
<div class="block">yes.</div>
CSS
.block{
float:left;
width:100px;
background: red;
margin: 0 10px;
padding: 10px;
}
.hiddenForAnimation{ opacity:0; margin-top:-20px; }
JS
$(function(){
$('.block').addClass('hiddenForAnimation').each(function(i){
var delay = i * 200,
animationSpeed = 800;
$(this).delay(delay).animate({opacity: '1', marginTop: '0px'
}, animationSpeed, function(){ if(typeof afterPageAnimation === 'function' && i === $(this).length){ setTimeout(afterPageAnimation, delay + animationSpeed);} $(this).removeClass('hiddenForAnimation').attr('style',''); });
});
});
function afterPageAnimation(){ alert('animation is done!'); }
My issues:
Is there a better way to refactor this JS script to be sequential? Using delay() is effective, but not elegant.
The callback is not being executed directly after the animations
When the last element in a row finishes animating, the first element in the next row starts at the far right, then jumps to the left (I suspect margin-top has something to do with this.)
Thanks!

This works
http://jsfiddle.net/cqAws/12/
Remember: In positioning animations, use position:relative or position:absolute and play with top, left, right, bottom instead of margins.
It's better
EDIT: made it a little better.

new
$(function(){
j=0;
$('.block').each(function(i){
var interv = +(i*800);
var animationSpeed = 800;
$(this).toggleClass('hiddenForAnimation')
.delay(interv)
.animate({opacity: '1', marginTop: '0'},animationSpeed,function(){
j++;
$(this).delay(+(interv+animationSpeed))
.toggleClass('hiddenForAnimation')
.attr('style','');
if(j>=+($('.block').length)) afterPageAnimation();
});
});
});
function afterPageAnimation(){ alert('cool'); }
FIDDLE

For future viewers:
I've solved this by creating a small Jquery plugin found here: https://github.com/fillswitch/Jquery-Sequential-Animations
Hope this helps some other users in the future!

Jquery UL Scroll

I'm trying to use Jquery to have scroll on a UL list, with two span to move up and down.
it works for one li child, but how for an ul filled dynamically ?
thank you, i'm totally lost
$('span.scrollDown').click(function () {
$('.liste-grostitres li:first-child').css('margin-top', 0 - $('.liste-grostitres li').outerHeight());
$('.liste-grostitres').css('overflow', 'hidden');
});
$('span.scrollUp').click(function () {
$('.liste-grostitres li:first-child').css('margin-top', 0);
$('.liste-grostitres').css('overflow', 'visible');
});
<div id="grostitres">
<div class="gInner">
<span class="scrollUp"></span>
<span class="scrollDown"></span>
<div class="scrollable" id="divlist" runat="server">
<ul>
<li></li>
<li></li>
...
</ul>
</div>
</div>

heres a fiddle with slidetoggle:
http://jsfiddle.net/RMQLM/
also the working code example:
HTML:
<div id="up">up</div>
<div id="list">
<ul>
<li>foo1</li>
<li>bar1</li>
<li>foo2</li>
<li>bar2</li>
<li>foo3</li>
<li>bar3</li>
<li>foo4</li>
<li>bar4</li>
<li>foo5</li>
</ul>
</div>
<div id="down">down</div>
CSS:
div#list {
height: 93px;
overflow: hidden;
border: 1px solid red;
}
jQuery:
var listcount = $('li').size();
var cli = 1;
$('#down').click(function() {
if (cli < listcount) {
$('li:nth-child(' + cli + ')').slideToggle();
cli++;
}
});
$('#up').click(function() {
if (cli > 1) {
cli--;
$('li:nth-child(' + cli + ')').slideToggle();
}
});

Set your UL to be position: relative; and have top: 0;.
Add a function to handle the animation:
var scroll_ul = function(offset) {
// Target the UL to scroll
var to_scroll = $('#divlist').find('ul');
// Store the distance to scroll (assumes LIs are all equal height)
var scroll_distance = $('#divlist').find('li').outerHeight(true);
// Animate
to_scroll.stop().animate({ top: '-=' + (offset * scroll_distance) });
};
Then change your click handlers to be something like this:
$('span.scrollDown').click(function() {
scroll_ul(1);
});
$('span.scrollUp').click(function() {
scroll_ul(-1);
});
You may experience strange scroll distances if you hammer the scrollDown/scrollUp buttons. That's when you should look into jQuery's .one() function.

I think it would be more efficient to animate the whole UL instead of individual LIs. You already wrap the UL in a DIV, so why not animate the UL relative to the wrapper? That would work the same way as animating a single LI inside UL, so you don't need to reinvent the wheel.