Execute Fade-In as Page initially loads? - javascript

I am working on some jQuery code to apply page transitions. What i want the jQuery code to do is basically apply a fade in effect of the page as follows:
$("body").css("display", "none");
$("body")().fadeIn(400);
Once the page loads the page reloads and then does the instructed fade in effect, but what I want to happen is a fade in effect for the whole webpage right from the start and tried:
$(document).load(function() {
However, this does not work. I also tried this code to no avail:
$("body").load().css("display", "none");
$("body").load().fadeIn(400);
Are there any visible error in my code blocks that can be rectified to apply the desired behavior or can the community please direct me to a guide that demonstrates the correct implementation of what I am aiming to do?

You could place this in a .css file -
body { display:none; }
Or even place it inline like so -
<body style="display:none;" >
And then in a $(document).ready() callback fade it in using this -
$(document).ready(function(){
$("body").fadeIn(400);
});
The browser will render the HTML according to your css file first. So when the browser comes to render the <body> tag, it'll see a css rule saying that its display property must be set to none. Only after all the HMTL is loaded and jQuery is ready ($(document).ready()) then you can call your fadeIn();

You could use CSS to set the whole page to invisible or hidden:
body {
display: none;
}
Or:
body {
visibility: hidden;
}
You can set this as inline CSS inside the <head>. Then inside jQuery you can make it fade in once loaded.

// $("body")().fadeIn(400); // this is incorrect, try with:
$('body').fadeIn(400);
That means:
$("body").css("display", "none");
$(window).load(function(){ // use "window"
$('body').fadeIn(400);
});
Or you may try to set display:none; directly from your CSS (depends on your needs)
body{
display:none;
}

You should use the load on window and not on DOM.
Try :
$(window).load(function(){
$("body").css("display", "none");
$("body").fadeIn(400);
})
And for further explination try Here

Related

Trying to add a class if another already exists

This is a multi layered issue, not sure if it'll fly if I ask it all, but the issue I'm having is Lightbox related.
I am trying to get it working, when I click on an image, the img lightboxes open, but even with 'disableScrolling': true, it doesn't work. body does get overflow: hidden; from that lightbox option, but the page still scrolls.
So, I've got to figure out a hacky fix. I tried this js but it's not working:
$( ".smile-thumb-container" ).click(function() {
if($('body').hasClass('lb-disable-scrolling')) {
$('html').addClass('lb-overflow-fix');
} else {
$('html').removeClass('lb-overflow-fix');
}
});
I'm basically trying to say when I click on an img, body gets .lb-disable-scrolling. This is from Lightbox itself, now, I want to say when I click on the div that holds the img to check if <body> has .lb-disable-scrolling, which it'll have because lightbox does this. If body has that class, add a class to <html> called .lb-overflow-fix. When I close the img, <body> loses .lb-disable-scrolling so html should remove .lb-overflow-fix too.
.lb-overflow-fix in my css is overflow: hidden; I'm not sure why it works on <html> and not <body>.
I know actual sites aren't ideal, but I can't even get it working in a fiddle properly, so I have to assume my js is incorrect. This is the site the issue is on.
Because you set this CSS:
html {
overflow-x: hidden;
}
This changes how vertical scrolling is handled by default, and the result is that it's your <html> node that handles it, rather than the <body> node.
Remove that overflow-x: hidden; from the <html>, and suddenly your site works as intended.
It is a bad idea to hide horizontal overflow anyway, so I'd recommend not trying to.

JavaScript Trouble with div resize

I am relatively new to js and for the life of me can not figure out the issue with this function. I am just trying to resize the div's width on a page resize. The css is also included in case that has anything to do with it.
<div id="lowerPattern"></div>
<script>
$( window ).bind("resize", function() {
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
</script>
/*CSS*/
#lowerPattern {
height: 99px;
width: 10px;
background-color: green;
/*Keeps div centered on resize*/
position: absolute;
left: 50%;
margin-left: -300px;
}
It's working fine for me: http://jsfiddle.net/kuaYV/
Have you made sure JQuery is loading properly? Also, try putting the function in $(document).ready() like so:
$(document).ready(function() {
$( window ).bind("resize", function(){
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
});
Edit: If it's still not working, it could be something to do with the parent element's CSS. Also make sure you don't have any other elements with the same id attribute on the page.
enclose your code inside $(document).ready(function(){}); like this:
$(document).ready(function()
{
$( window ).bind("resize", function(){
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
});
DO you know that you must load Jquery?
You must either put the jquery source code into a file and save it or download it everytime you run the website with a CDN(Contact Delivery network.)
Also you must load Jquery. Go to their site and download the source. Save to a textfile with the .js extension.
After that write
<script type="text/Javascript" src="MyJquery.js"></script>
in the head area of the HTML
The other option is to use a CDN and write:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
This will load the jquery to your website
you must put the code into
$(document).ready(function(){
//put all your code here
});
If you are using a CDN check your net connection. If the internet connection is lost it will not load the Jquery while you are trying to run

Hide class before document

I have about 20 tabs which are placed underneath the content (not on-top as usual) with large content (forms,inputs) on each tabs.
Problem is that when the users visit the site, they see all the content before the tabs hide. Is there a way to prevent this? I am using jQuery tabs as simple as:
$(window).load(function() {
$(".tab_content").hide();$(".tab_content:first").show();
});
I was thinking if there is a way to hide .tab_content without jQuery? So I can load jquery at the end asynchronously. I would imagine, loading jquery and then hiding tabs takes time. But yet again I was thinking that, in order to hide .tab_content you need the content so, maybe there is no way around it?
Thanks alot
the hide comes into play after the DOM is ready or the element you are applying hide is inside the DOM so a better way is to add a class that hides the element
.tab_content
{
display: none
}
and
$(function(){
$(".tab_content:first").show();
});
If you simply want to hide then you can use pure CSS:
.tab_content{
display:none;
/* or */
visibility:hidden;
}
Once your page has loaded and jQuery is ready you can then show it as required.
Use CSS to hide the tabs by default:
.tab_content { display: none; }
Show them when ready.
You can prevent showing them by default using css.
.tab_content { display: none; }
the best way is to do it in css, that way it will never show up when the page loads
.tab_content { display: none }

html page loading message

My html page loads a bit slowly because of the jquery that's in it. I want an image that tells the user that it's loading, until the entire page get loaded. How should I go about doing this?
Many thanks in advance.
<script type="text/javascript">
$(document).ready(function(){
//my jquery here....
});
</script>
Design the page with the loading message already included so that when the page loads from the server, the message is already showing.
Then, using jQuery, you can hide the message as soon as the page is ready:
$(document).ready(function(){
$('#loadingMessage').hide();
});
http://www.jsfiddle.net/dactivo/m4Bxe/
window.onload = function () {
$("#loading").hide();
};
window.onload will wait the whole loading of the page. ready() waits the DOM to be ready which is practically inmediate.
You can read this in these jquery docs
"While JavaScript provides the load
event for executing code when a page
is rendered, this event does not get
triggered until all assets such as
images have been completely received.
In most cases, the script can be run
as soon as the DOM hierarchy has been
fully constructed. The handler passed
to .ready() is guaranteed to be
executed after the DOM is ready,"
Justin's method will do the trick.
make sure you are optimizing the way resources are loaded, for example putting your scripts at the bottom of the page so they don't block HTML rendering
http://developer.yahoo.com/performance/rules.html
Hm, you can load an image that says "loading", then load the rest of the document's scripts by either doing something like:
var TM_script = document.createElement('script');TM_script.src = 'http://www.yoursite.com/script.js';document.getElementsByTagName('body')[0].appendChild(TM_script); someFunctionInScript();
Alternatively, you can just load the image, and then submit Ajax requests to load the rest of the page. You can also try even doing an animated gif or another image at the top of the page, and once the document has loaded (and your script activates), remove that image.
have a background-image set through css to the body, and remove the element in document.ready
I know this a fairly old thread, but the below solution worked for me although jQuery is needed:
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)

How to disable scrolling the document body?

I have a HTML which has lot of content and a vertical scrollbar appears as soon as the HTML is loaded. Now from this HTML a full screen IFRAME is loaded. The problem is when the IFRAME is loaded, the parent scrollbar still persists, I want to disable the scrollbar when the Iframe is loaded.
I tried:
document.body.scroll = "no", it did not work with FF and chrome.
document.style.overflow = "hidden"; after this I was still able to scroll, and the whole iframe would scroll up revealing the parent HTML.
My requirement is, when the IFRAME is loaded, we should never be able to scroll the entire IFRAME if the parent HTML has a scrollbar.
Any ideas?
If you want to use the iframe's scrollbar and not the parent's use this:
document.body.style.overflow = 'hidden';
If you want to use the parent's scrollbar and not the iframe's then you need to use:
document.getElementById('your_iframes_id').scrolling = 'no';
or set the scrolling="no" attribute in your iframe's tag: <iframe src="some_url" scrolling="no">.
with css
body, html {
overflow: hidden
}
The following JavaScript could work:
var page = $doc.getElementsByTagName('body')[0];
To disable Scroll use:
page.classList.add('noscroll');
To enable Scroll use:
page.classList.remove('noscroll');
In the CSS file, add:
.noscroll {
position: fixed!important
}
add this css
body.disable-scroll {
overflow: hidden;
}
and when to disable run this code
$("body").addClass("disable-scroll");
and when to enabled run this code
$("body").removeClass("disable-scroll")
I know this is an ancient question, but I just thought that I'd weigh in.
I'm using disableScroll. Simple and it works like in a dream.
I have had some trouble disabling scroll on body, but allowing it on child elements (like a modal or a sidebar). It looks like that something can be done using disableScroll.on([element], [options]);, but I haven't gotten that to work just yet.
The reason that this is prefered compared to overflow: hidden; on body is that the overflow-hidden can get nasty, since some things might add overflow: hidden; like this:
... This is good for preloaders and such, since that is rendered before the CSS is finished loading.
But it gives problems, when an open navigation should add a class to the body-tag (like <body class="body__nav-open">). And then it turns into one big tug-of-war with overflow: hidden; !important and all kinds of crap.
Answer :
document.body.scroll = 'no';

Categories