Load content over ajax by click and onload?
I have a page where I have a menu that makes an ajax call when clicking
and it loads content in a div with a little animation with the footer. (as
can be seen here: http://perishablepress.com/slide-fade-content/ I'm
wondering if there is a way to have the first menu item to be loaded
already when opening the page. My code:
<ul>
<li><a class="blog" href="#blog">Blog</a></li>
<li><a class="contact" href="#contact">Contact</a></li>
</ul>
and the script:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>jQuery(document).ready(function($) {
$('.blog').on('click', function() {
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
}
$('#ajax').css({ display:'block' }).animate({ height:'200px'
},function() {
$('#loader').css({ border:'none', position:'relative', top:'24px',
left:'48px', boxShadow:'none' });
$('#ajax').load('blog.php ' + href, function() {
$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor':
'#0e0e0e' }); }); }); }); });
jQuery(document).ready(function($) {
$('.contact').on('click', function() {
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
}
$('#ajax').css({ display:'block' }).animate({ height:'600px'
},function() {
$('#loader').css({ border:'none', position:'relative', top:'24px',
left:'48px', boxShadow:'none' });
$('#ajax').load('contact.php ' + href, function() {
$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor':
'#0e0e0e' });
});
});
});
});
So now I have to click "blog" or "contact" to have the content load, but
I'd like to have "blog" loaded as default when opening the page!
And also: Is there a way to have not only the content, but also another
version of jquery loaded, let's say when I click "contact" and my contact
form works with another jquery version.
I hope somebody can help a super-noob like me! Thanks lot in advance!
No comments:
Post a Comment