JQuery Content Load

[RipzCurlz]

Hey i wrote this code to load content without page loads.

I'm using the JQuery framework and im still quite new to it.

is it possible to fade the content in an out somehow.

	<script type="text/javascript" >
		$(document).ready(function(){
			$('#mainDiv').load("Home.html");
			$('li.home').click(function() {
				$('#mainDiv').load("Home.html");
		});
			$('li.about').click(function() {
				$('#mainDiv').load("About.html");
		});
			$('li.products').click(function() {
				$('#mainDiv').load("Products.html");
		});
			$('li.tech').click(function() {
				$('#mainDiv').load("Technical.html");
		});
			$('li.palette').click(function() {
				$('#mainDiv').load("Palette.html");
		});
			$('li.contact').click(function() {
				$('#mainDiv').load("Contact.html");
		});	
	});	
	
	</script>

The two things i tried were this:

	                 $('li.home').click(function() {
				$('#mainDiv').load("Home.html").fadeIn("slow");
		});

And

	                 $('li.home').click(function() {
				$('#mainDiv').load("Home.html");
                                fadeIn("slow")
		});

Im still learning the syntax properly
hopefully someone can help

Thanks in advance

[vinnie]

Hi mate ill leave a simple code

In your Body:

<ul id="nav">
<li><a href="home.php">Go to home</a></li>
<li><a href="hello.php">Contact Me</a></li>
<li><a href="portafolio.php">My Work</a></li>
</ul>

After your JQuery file:

<script type="text/javascript">
$(document).ready(function(){
$("#nav a").each(function(){ // Where the function must work on
var href = $(this).attr("href");
$(this).click(function(){
$("#show").hide().load(href).fadeIn("slow"); //A Nice Fadein Effect
$(this).attr({ href: "#"}); //#show is the Div who loads the content
});
});
});
</script>

I hope it helps.
Cheers.

[buhajbej]

Hi,
i've found Your code through google search and i find very easy and well working
I'm a noob in jquerry stuff, and i'm using ready to go scripts.
I'have a question, is there a way to combine Yours script with another?

I'd like to add this script: http://jscrollpane.kelvinluck.com/ which changes the look of scrollbars to Yours, wchich loads pages nicely

I think that Your script shuold call the other script at some moment, but i don't know when I tried to put

$('.tresc').jScrollPane();

in Your script, but it doesn't work

'.tresc' is my class for div that shows content.

Is there any way to combine them?

Thanks.