We Keep Coding

Is there a way to add transition effect (smooth/ease) in js without adding a class?

Si I have a simple few lines of code, basically what it does is when you click on the div that has the id, it disappear (display :none). Normally I would do an addClass / removeClass but I was wondering if just with this code I could add an effect that doesn't make the div brutally disappear but maybe with a transition to the left or the top with 0.8 seconds. How would you proceed?
window.onload = function(){
var divToHide = document.getElementById('divToHide');
document.onclick = function(e){
divToHide.style.display = 'none';
}
};

If you want to use jquery, you can use slide methods of the same. Constraint is that you will have to use jquery.
$("#divToHide").slideDown(2000); //2000 is the ms for the effect
However you can also apply transition-timing-function in css. If you keep the transition-timing-function: linear and go from width 100% to zero width, it will have the effect of sliding and from to to bottom, transition on height..
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

Disable page scroll until page loads - JQuery

I have built a parallax scrolling intro for a clients website - the site contains many high res images - so I have created a quick loader which blanks out the screen with a full screen high z-index div and then uses the setTimeout method to fade in the page 4 seconds after document ready (not sure if this is the best way to do this but it works in every test I've tried).
I would like to disable the scroll to prevent users scrolling through the animation before it appears -can anyone recommend a good cross-browser method to do this?

If you want to fade in when all images are loaded, you can try this
var images = $('img');
var images_nbr = images.length;
images.load(function() {
images_nbr--;
if (images_nbr == 0) {
$('body').css('overflow','auto');
$('...').fadeIn();
}
});

Set
#mydiv {
overflow:hidden
}
in your parent div in CSS. Then, in your document, add this...
$('#mydiv').css('overflow', 'auto');
...in the function that fades in your content.
Thus, on load the page will be unscrollable, but when you fade in, the overflow property will be overwritten and allow the content to scroll.

.scrolldiv{
overflow:hidden;
}
$(window).load(function(){
$(".scrolldiv").css("overflow","auto");
});

You can try like,
initially add the below css on body
body {overflow:hidden;}
and after your setInterval function complete execution (whatever your loading function) just remove the style from body, like
$('body').css('overflow','auto');

jQuery - delete element if exists body area

I am using jQuery animate to change the position of multiple elements on the page (decorative elements). I want the element to be deleted if it exits body area. (if left is larger than body width or top is larger than body height).
The following can not be used in my case:
overflow hidden for the body
manually animating the element. I want to use jQuery animate to keep it simple (I dinamically create elements, animate them then I don't care about them, don't keep track of them, they have a .remove() methode when the animation is complete)
http://jsfiddle.net/a7Nck/
So in this JSfiddle I want the red div to dissappear when it reaches right edge of the body so that no scrollbars will appear.
Isn't there any CSS3 media query for example so that if a div is not in the viewport it will be hidden?
EDIT:
I just thought of a solution: get the width of the body prior to triggering the animation and then animate the top and left by using the minimum between the body size and what the animation should do. The problem is that this will affect animation speed.

You can use animate's step function.
The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.
var w = $(window).width()
$('div').animate({
left: '20px'
}, 500).delay(1000).animate({
left: '2000px'
}, {
step: function(now, fx) {
if (now > w) {
$(fx.elem).remove()
}
}
}, 1000);
Fiddle

One possible workaround (assuming your first restriction is about globally adding overflow: hidden on your CSS): add overflow: hidden with js when the animation starts, and remove it when it ends:
$('body').css('overflow', 'hidden');
$('div').animate({left: '20px'},400).delay(1000).animate(
{left: '2000px'},1000, false, function(){
$(this).hide();
$('body').css('overflow', 'auto');
});​
http://jsfiddle.net/a7Nck/3/

Just hide the div when the last animation get completed i.e.
$('div').animate({left: '20px'},400).delay(1000).animate({left: '2000px'},1000, function(){ $(this).hide(); });
See DEMO

As soon as the div leaves the visible area, the scrollbar will appear. If you want to prevent the scrollbar from appearing, you can't allow the div to leave the screen. Here's my solution:
$('div')
.animate({left: '20px'},400)
.delay(1000)
.animate(
{left: ($(window).width()-$('div').width()) + "px"},
1000,
null, // default easing
function() { $('div').hide() }
);
Jsfiddle: http://jsfiddle.net/j4rdA/1/
​

add slideUp and slideDown to hidden divs

I'm using the below to create a fade-in and fade-out effect on a hidden div on a FAQ page. Problem is, it makes the hidden div snap open and closed which is quite irritating. I'm not too hot on javascript and can't figure out how to get slideUp and slideDown into this, as I'd like it to also slide up and slide down. Is there any way to get a sliding function into this script? Thanks.
$(document).ready(function() {
$("a[name^='faq-']").each(function() {
$(this).click(function() {
if( $("#" + this.name).is(':hidden') ) {
$("#" + this.name).fadeIn('slow');
} else {
$("#" + this.name).fadeOut('slow');
}
return false;
});
});
});

You can fix this with a small CSS tweak by using visibility: hidden to hide the divs instead of display:none. This will reserve the space for the DIVs you are fading in & out.
You want to slide & fade at the same time? Try using .animate() to set opacity to 0/1 and use height to max/0.

If you want to use fading rather than slideUp/slideDown, you can use fadeTo(duration, opacity) which will not make stuff jump as the space for the element is maintained.
If you want a plugin to combine slide and fade, maybe check out this: http://css-tricks.com/snippets/jquery/combine-slide-and-fade-functions/

Page scrolls up using JQuery fadeIn - fadeOut

Hi I use the following code to create a slideshow with multiple DIV elements:
var $ = jQuery.noConflict();
function fadeContent() {
$(".slideshow .asset-abstract:first").fadeIn(500).delay(2000).fadeOut(500, function() {
$(this).appendTo($(this).parent());
fadeContent();
});
}
fadeContent();
The slideshow works properly but there's a problem. When the delay(2000) trigger a fadeIn-fadeOut, the page scrolls up!
What can I do to prevent this?

I think when the element fades out it does not take a real estate on the page. The element beneath it will take its place and you feel like the page scrolled. You can have a wrapper to the element you are trying to fadeIn/fadeOut and provide an appropriate height to this wrapper element. But this is not a good UX because when the element will fadeOut there will be empty section on the page.

Its because the fadeOut method ends op settings display:none; on the element.
If you force display block in css this will not happen:
Css:
.slideshow .asset-abstract:first-child {
display:block;
}