<ul class="sf-menu"> <li class="menu1"><a href="#!/about">about us</a></li> <li class="menu2"><a href="#!/catalogue">catalogue</a></li> <li class="menu3"><a href="#!/join">join us</a></li> <li class="menu4"><a href="#!/articles">articles</a></li> <li class="menu5"><a href="#!/locations">locations</a></li> </ul>
<li id="about"> <div class="main"> <div class="shadow2"> <h1 class="logo"><a href="#!/about">Hip Hop</a></h1> <div class="content"> <div class="text1"> <p>Fusce feugiat maluadas orb nae feugi luorbilorer keroa as nae dedskertsdefer lerose merro orbraesrto mertasedears selertdaker tsdefer lerose merrose kertase.</p> <div class=""><a href="#!/more">Join Us!</a></div> </div> <div class="wrapper pad"> <div class="col1"> <h2>testimonials</h2> <blockquote class="quote"><a href="#">Karina Smith</a><br> Mery lecenas stricies phaleda tyfenanec sit amm easer erment. Ut ts dolor dapege telementum.</blockquote> <div class="box-button"><a href="#!/more" class="button">Read More</a></div> </div> <div class="col2"> <h2>dance classes</h2> <div class="fleft"><ul class="list1"> <li><a href="#">Andrew Cesan</a></li> <li><a href="#">Richie Cesan</a></li> <li><a href="#">Ginny Crocker</a></li> <li><a href="#">Catherine Hancox</a></li> <li><a href="#">Simon Watts</a></li> </ul></div> <div class="fleft"><ul class="list1"> <li><a href="#">david Jones</a></li> <li><a href="#">Peter Kemble</a></li> <li><a href="#">Sharnika Robson</a></li> <li><a href="#">Melanie Staple</a></li> <li><a href="#">Patrick Svenson</a></li> </ul></div> </div> </div> </div> </div> <span class="shadow"></span> </div> </li>
<a href="#!/[[~2]]">About Us</a>
[[$header]]
<section id="content">
<ul>
[[*content]]
</ul>
</section>
<footer>
<div>Freestyle Education © 2012 • <a href="#!/privacy">Privacy Policy</a> • Development by <a href="http://www.pinpointdesigns.co.uk">Pinpoint Designs</a></div>
<ul class="social">
<li><a href="#"><img src="assets/freestyle/images/icon1.png" alt="Facebook"></a></li>
<li><a href="#"><img src="assets/freestyle/images/icon2.png" alt="Twitter"></a></li>
</ul>
</footer>
</div>
<script type="text/javascript">
var DISModifyPost = $(function() {
DIS.config.attachments_max_per_post = 5;
DIS.DISModifyPost.init({
attachments: 1
});
});</script>
</body>
</html>
<li id="home"> <div class="main"> <div class="shadow2"> <h1 class="logo"><a href="#!/home">Hip Hop</a></h1> <div class="content"> <div class="pad2"> <h2>our catalogue</h2> <ul class="list2"> <li><a href="#"> <img src="assets/freestyle/images/2page_img1.png" alt=""> <span class="color2">15.05.2012</span> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img2.png" alt=""> <span class="color2">18.05.2012</span> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img3.png" alt=""> <span class="color2">20.05.2012</span> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img4.png" alt=""> <span class="color2">23.05.2012</span> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img5.png" alt=""> <span class="color2">25.05.2012</span> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img6.png" alt=""> <span class="color2">30.05.2012</span> Mery lecenas striciesn. </a></li> </ul> </div> </div> </div> <span class="shadow"></span> </div> </li>
<li id="dance"> <div class="main"> <div class="shadow2"> <h1 class="logo"><a href="#!/dance">Hip Hop</a></h1> <div class="content"> <div class="pad2"> <h2>our catalogue</h2> <ul class="list2"> <li><a href="#"> <img src="assets/freestyle/images/2page_img1.png" alt=""> <span class="color2">15.05.2012</span> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img2.png" alt=""> <span class="color2">18.05.2012</span> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img3.png" alt=""> <span class="color2">20.05.2012</span> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img4.png" alt=""> <span class="color2">23.05.2012</span> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img5.png" alt=""> <span class="color2">25.05.2012</span> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img6.png" alt=""> <span class="color2">30.05.2012</span> Mery lecenas striciesn. </a></li> </ul> </div> </div> </div> <span class="shadow"></span> </div> </li>
☆ A M B ☆
MODx doesn't care what javascript or AJAX you use. I would have the resources you want to insert be ordinary resources with empty templates. Then you can use a very simple AJAX library like JQuery's load() function giving the desired resource as the URL for the request.
<li id="home"> <div class="main"> <div class="shadow2"> <h1 class="logo"><a href="#!/home">Hip Hop</a></h1> <div class="content"> <div class="pad2"> <h2>our catalogue</h2> <ul class="list2"> <li><a href="#"> <img src="assets/freestyle/images/2page_img1.png" alt=""><br> <span class="color2">15.05.2012</span><br> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img2.png" alt=""><br> <span class="color2">18.05.2012</span><br> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img3.png" alt=""><br> <span class="color2">20.05.2012</span><br> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img4.png" alt=""><br> <span class="color2">23.05.2012</span><br> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img5.png" alt=""><br> <span class="color2">25.05.2012</span><br> Mery lecenas striciesn. </a></li> <li><a href="#"> <img src="assets/freestyle/images/2page_img6.png" alt=""><br> <span class="color2">30.05.2012</span><br> Mery lecenas striciesn. </a></li> </ul> </div> </div> </div> <span class="shadow"></span> </div> </li>
<div class="main-menu"> <ul class="sf-menu"> <li class="menu1"><a href="[[~1]]">Home</a></li> <li class="menu2"><a href="[[~2]]">Dance</a></li> <li class="menu3"><a href="[[~3]]">Music</a></li> <li class="menu4"><a href="[[~4]]">Drama</a></li> <li class="menu5"><a href="[[~5]]">Media</a></li> <li class="menu6"><a href="[[~6]]">Consultation</a></li> <li class="menu7"><a href="[[~7]]">About Us</a></li> <li class="menu8"><a href="[[~8]]">Contact Us</a></li> </ul> </div>
$('#loading').show();
$(function(){
jQuery('.bg1').parallax({yparallax:false, xparallax: '30px'});
jQuery('.bg2').parallax({yparallax:'10px', xparallax: '20px'});
jQuery('.bg3').parallax({yparallax:'20px', xparallax:false});
jQuery('.bg3-2').parallax({yparallax:'10px', xparallax:false});
$('.social li a img').css({opacity:.3});
$('.social li a').hover(function(){$(this).find('img').stop().animate({opacity:1})},(function(){$(this).find('img').stop().animate({opacity:.3})}));
var content = $('#content');
content.tabs({
show:0,
preFu:function(_){
_.li.css({'display':'none'})
},
actFu:function(_){
if(_.curr){
_.curr
.css({'left':'-2000px'}).stop(true).show().animate({'left':'0'},{duration:600,easing:'easeInOutExpo'});
}
if(_.prev){
_.prev
.show().stop(true).animate({'left':'2000px'},{duration:600,easing:'easeInOutExpo',complete:function(){
if (_.prev){
_.prev.css({'display':'none'});
}
}
});
}
}
});
var nav = $('.main-menu');
nav.navs({
useHash:true,
defHash:'#!/about'
})
.navs(function(n){
$('#content').tabs(n);
});
});
$(window).load(function(){
$('#loading').hide();
});
☆ A M B ☆
$('#maincontent').load('page.html');
Sorry, I'm kind of overloaded with stuff right now, and am not much good for anything except generalities. I don't really understand what is is all the javascript is doing. I was thinking along the lines of something like
$('#maincontent').load('page.html');
This would fetch page.html, which would get processed and served by MODx like any page request, and then get loaded into your "mainconent" div.
var nav = $('.main-menu');
nav.navs({
useHash:true,
defHash:'#!/about'
})
.navs(function(n){
$('#content').tabs(n);
});
☆ A M B ☆
$(containerId).load(tabObj.attr('href'), function(){ ...
I think you have it right. The load() function just needs to be fed the URL to the resource whose content you want loaded. Remember, an AJAX request is really no different than any browser's page request. The server and MODx don't care, they just process the request like they do any other HTTP request. The trick in this case is that the URL being requested will not be a full web page, just the content of the resource being requested, since it has no template. So MODx will simply process the content of the resource and pass it on to the server, who will return it as usual. The Javascript in the browser will simply load what it is given into the div you tell it to. It's really very simple. The trick will be to make the URL variable, dependent on which tab or button or link was clicked to trigger the AJAX request.
http://www.ajaxblender.com/howto-create-custom-jquery-tabs.html
Notice in the loadTab() function
$(containerId).load(tabObj.attr('href'), function(){ ...
This determines the URL from the href attribute of the tab (styled link) that was clicked. All the rest of the javascript is just eye candy; the heart of the thing is in this load() function.