DEPRECATION WARNING

This documentation is not using the current rendering mechanism and will be deleted by December 31st, 2020. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: Get contents by Ajax

Author:Kasper Skårhøj
Created:2002-11-01T00:32:00
Changed:2014-11-04T13:38:10.558000000
Classification:getcontentbyajax
Description:The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ----
Keywords:forAdmins, forAdvanced
Author:Sven Burkert
Email:bedienung@sbtheke.de
Info 4:
Language:en

img-1 img-2 EXT: Get contents by Ajax - getcontentbyajax

EXT: Get contents by Ajax

Extension Key: getcontentbyajax

Language: en

Keywords: forAdmins, forAdvanced

Copyright 2000-2014, Sven Burkert, <bedienung@sbtheke.de>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents

EXT: Get contents by Ajax 1

`Introduction 3 <#1.1.Introduction|outline>`_

What does it do? 3

Screenshots 3

`Administration 4 <#1.2.Administration|outline>`_

Activate clicked menu item 4

Google Analytics 4

`To-Do list 5 <#1.3.To-Do%20list|outline>`_

`ChangeLog 6 <#1.4.ChangeLog|outline>`_

Introduction

What does it do?

All pages are loaded with Ajax: If you click an internal link on your page, the contents of that target page are loaded with Ajax in the background and then the current contents are replaced with the new contents of the target page.

Still works if JavaScript is disabled because the URLs of the links aren't touched. Requires the JavaScript library “jQuery” (not provided by this extension).

Even browser history is supported: After loading pages with Ajax you can navigate backward and forward.

Attention : This is not a one-click-solution, you surely have to customize many things, e.g. the provided JavaScript file, to fit it to your wishes.

Example web pages: www.sbtheke.de , www.reinstil.de

Article in my blog about this extension (in german language): blog.sbtheke.de/web-development/vorstellung-extension- getcontentbyajax

Screenshots

Cannot be shown by screenshots, just have a look at the demo: www.sbtheke.de/demo/getcontentbyajax/

Please send me the URL to your webpage, if you use this extension.

Administration

After installing this extension you have to add the template “Get contents by Ajax” in field “Include static (from extensions)” in your ROOT page.

The PAGE object is wrapped with

<div id="getcontentbyajax_body"><!--ajaxreplace-->|<!-- ajaxreplace--></div>

If you do not want to load the whole page contents with Ajax, but only a small area (e.g. the main content), you have to place this DIV around this area. Do not forget to remove TypoScript setting page.stdWrap.innerWrap2then.

By copying and editing file EXT:getcontentbyajax/res/javascript.js, you have many possibilities to determine the behavior, e.g. to slide in the contents from right to left (like www.reinstil.de does it).

Activate clicked menu item

It is really difficult, to activate the clicked menu item (or even expand the active submenu), if this menu is outside the contents which are replaced by Ajax. I hope the provided solution fits your needs, but then you have to use this HTML for the menu:

<ul><li>Menu item 1</li><li class=”act”>Menu item 2 (use class “act” for active menu items!)<ul><li class=”act”>Submenu item 1 (again class “act”)</li><li>Submenu item 2</li></ul></li></ul>

Have a look on www.sbtheke.de , there is a working solution for the menu.

Google Analytics

If you want to track the pages with Google Analytics, add this code into the JavaScript file:

pageTracker._trackPageview("'/" + url + "'");

This line is already present but commented out.

To-Do list

Nothing yet.

ChangeLog

See file “ChangeLog” in extension directory

6