AJAXify your Website: Difference between revisions
m (Text replace - "Web-Builder" to "website builder") |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
You can AJAXify your website builder site, or make all of your pages load via [http://www.w3schools.com/Ajax/Default.Asp AJAX] by adding some simple JavaScript code utilizing the built in [http://jquery.com/ jQuery]. | You can AJAXify your website builder site, or make all of your pages load via [http://www.w3schools.com/Ajax/Default.Asp AJAX] by adding some simple JavaScript code utilizing the built in [http://jquery.com/ jQuery]. | ||
Since the main content area of website builder is inside a '''div#location_0''', all you have to do is hook into the [[Primary Navigation]] links and use the [http://docs.jquery.com/Ajax/load jQuery load function] to replace the contents of '''#location_0''' on the current page with the contents of '''#location_0''' on the target page. Adding a [http://docs.jquery.com/Effects/slideUp slideUp]/[http://docs.jquery.com/Effects/slideDown slideDown] with some callbacks makes it have a nice transition as well. | Since the main content area of website builder is inside a '''div#location_0''', all you have to do is hook into the [[Primary Navigation]] links and use the [http://docs.jquery.com/Ajax/load jQuery load function] to replace the contents of '''#location_0''' on the current page with the contents of '''#location_0''' on the target page. Adding a [http://docs.jquery.com/Effects/slideUp slideUp]/[http://docs.jquery.com/Effects/slideDown slideDown] with some callbacks makes it have a nice transition as well. | ||
====Adding to your Site==== | |||
====Adding to your Site | |||
| Line 27: | Line 27: | ||
</source> | </source> | ||
====Example Sites==== | |||
====Example | |||
http://showcase.imyuao.com/ | http://showcase.imyuao.com/ | ||
Latest revision as of 10:34, 16 November 2010
You can AJAXify your website builder site, or make all of your pages load via AJAX by adding some simple JavaScript code utilizing the built in jQuery.
Since the main content area of website builder is inside a div#location_0, all you have to do is hook into the Primary Navigation links and use the jQuery load function to replace the contents of #location_0 on the current page with the contents of #location_0 on the target page. Adding a slideUp/slideDown with some callbacks makes it have a nice transition as well.
Adding to your Site
In order to add this code to your website's source code, you'll need to follow the directions below:
1. Go to the My Website toolbar menu, and click on Edit Theme Source Code.
2. Click on the default.html in the table that lists your theme files.
3. Add the following code below code inside of the <head> element:
<script type="text/javascript">
$j('#primary_navigation li a').click(function() { loadPage( $j(this).attr('href')); return false; });
function loadPage( page ) {
$j('#location_0').slideUp(300, function() {
$j('#location_0').load( page + ' #location_0 > *', function() { $j('#location_0').slideDown(300);});
});
}
</script>