[jQuery] Fade-in Page Load

[effone]

Little code, but this will apply a nice fade in effect every time your forum page loads.

Open your 'headerinclude' template:
ACP > Templates & Styles > Templates {your_theme_name} Templates > Ungrouped Templates > headerinclude

Locate the code:

{$stylesheets}

Add before that:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Save the template.

Open your header template:
ACP > Templates & Styles > Templates {your_theme_name} Templates > Header Templates > header

Add at the very beginning:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
	jQuery("#content").fadeIn(2000);
});
</script>

In the same template locate:

<div id="content">

Change it to:

<div id="content" style="display:none;">

Save the template.

Now see what happens ...

Note: In javascript; "2000" is the milisecond value of the fade in effect. Change the number asper your requirement (less value = quick fade-in, greater value = lengthy fade in).

[dhruvseth2002]

This user has been denied support.

any demo ?

[effone]

http://maskmod.in/index.php

[Eric]

Nice tutorial, simple but nice. Though you could also add in a cookie so it only does it on the first load.

[Trickshot]

Could be great for a dark theme.

[effone]

Or, may be light themes with light background ...

Thanx Eric

[Scois0n]

Little code, but this will apply a nice fade in effect every time your forum page loads.

Open your 'headerinclude' template:
ACP > Templates & Styles > Templates {your_theme_name} Templates > Ungrouped Templates > headerinclude

Locate the code:

{$stylesheets}

Add before that:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Save the template.

Open your header template:
ACP > Templates & Styles > Templates {your_theme_name} Templates > Header Templates > header

Add at the very beginning:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
	jQuery("#content").fadeIn(2000);
});
</script>

In the same template locate:

<div id="content">

Change it to:

<div id="content" style="display:none;">

Save the template.

Now see what happens ...

Note: In javascript; "2000" is the milisecond value of the fade in effect. Change the number asper your requirement (less value = quick fade-in, greater value = lengthy fade in).

It's a neat effect, but a bit annoying I can't wait to see more of your tutorials.

[effone]

It's a neat effect, but a bit annoying I can't wait to see more of your tutorials.

Yes, people stated its cool and and also annoying.
On the other hand I've found (in fact, ๖ۜParanormal™ pointed this out, thanks.) a stupid problem encountered applying this effect, I don't know the reason but the text editor messes up like this:



So, keeping these two things in mind I've moved forward with an advanced tutorial, I'm sure you'll like this and that may be, not annoy you, also the editor problem will be fixed as well.

Keep an eye in the tutorial section ...

[xZero]

This user has been denied support.

http://mybbaddict.com/thread-jquery-simp...ith-effect
Solution is here.

[effone]

http://mybbaddict.com/thread-jquery-simp...ith-effect
Solution is here.

And here also.
http://community.mybb.com/thread-126447.html

In fact I've done a tweak with the editor placement code which I didn't post. I have to do all the testings before publishing it.