.. You may want to use the usual include line. Uncomment and adjust the path. 
.. include:: ../Includes.txt


=========================
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:

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:

Table of Contents
-----------------

`EXT: Get contents by Ajax 1
<#1.EXT:%20Get%20contents%20by%20Ajax|outline>`_

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

`What does it do? 3 <#1.1.1.What%20does%20it%20do_|outline>`_

`Screenshots 3 <#1.1.2.Screenshots|outline>`_

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

`Activate clicked menu item 4
<#1.2.1.Activate%20clicked%20menu%20item|outline>`_

`Google Analytics 4 <#1.2.2.Google%20Analytics|outline>`_

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

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


.. _Introduction:

Introduction
------------


.. _What-does-it-do:

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 <http://www.sbtheke.de/>`_ ,
`www.reinstil.de <http://www.reinstil.de/>`_

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


.. _Screenshots:

Screenshots
^^^^^^^^^^^

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

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


.. _Administration:

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
<http://www.reinstil.de/>`_ does it).


.. _Activate-clicked-menu-item:

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 <http://www.sbtheke.de/>`_ , there is a
working solution for the menu.


.. _Google-Analytics:

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:

To-Do list
----------

Nothing yet.


.. _ChangeLog:

ChangeLog
---------

See file “ChangeLog” in extension directory

6


.. ######CUTTER_MARK_IMAGES######

.. |img-1| image:: img-1.png
.. :align: left

.. |img-2| image:: img-2.png
.. :border: 0
.. :height: 21
.. :hspace: 9
.. :id: Grafik2
.. :name: Grafik2
.. :width: 87