New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF2+ IE7+ Opera 9+

Ajax Side Panel script

Author: Dynamic Drive

Description: Ajax Side Panel script fetches a page on your site using Ajax and displays it as part of the current page, using a slide out panel as its medium. It is ideal for showing short pages such as your "Contact Us" or "Terms of Service" page where whisking users to the new page only causes unnecessary delay and disorientation for the user. With Ajax Side Panel, the user remains on the current page while the requested one is loaded inline and asynchronously. The script supports loading a page either via Ajax or IFRAME. The later can be used to load more complex web pages on your site or from outside domains (Ajax is limited in this respect by the same domain origin policy).

Demos:

  • Bing (external link, auto loads in IFRAME)
  • CSS Drive (external link, auto loads in IFRAME)
  • Birds and Stuff (internal link, auto loads using Ajax)
  • Dogs and Stuff (internal link, auto loads using Ajax)
  • The Sun Flower (internal link, but explicitly load in iframe due to data attribute)

Directions: Developer's View

Step 1: Insert the following code in the HEAD section of your page

Select All

Download the following external files that make up the script:

Step 2: With the above code installed, the panel is now loaded on the page (hidden initially of course), ready to show the contents of any link inside it! To see it in action, insert the below sample links in the BODY of your page that when clicked on loads the link inside the panel:

Select All

To get a link to load inside the Ajax Panel, simply give it a rel="ajaxpanel" attribute. When you do that, 3 possible scenarios can occur:

  • If the link is an external link (starts with "http" and the domain portion does NOT match the current page's), the link is loaded inside an IFRAME in the panel.
  • If the link is an internal link, that is, it doesn't start with "http" or does *but* the domain portion of the link matches the current page's (ie: dynamicdrive.com), the link's contents is fetched via Ajax and inserted into the panel.
  • If the link is an internal link but you wish for it to load inside an IFRAME anyway, add the attribute data-loadtype="iframe" inside the anchor link to force it to load inside an IFRAME. *

So the following link for example, while points to a local page on the site, will still load in an IFRAME due to the presence of the data-loadtype="iframe" attribute:

<a href="../tos.htm" rel="ajaxpanel" data-loadtype="iframe">Terms of Service</a>

* Displaying a site inside an IFRAME does NOT always work. Some sites such as Google use the X-Frame-Options supported in major browsers to block 3rd party sites from loading it inside IFRAMEs. If you try to load such a site using Ajax Side Panel script, all you will get is a blank page unfortunately. Click here to see an example.

Other configuration options

There are a few useful global settings you can make to the script inside ddajaxsidepanel.js, specifically, at the end where ddajaxsidepanel.init() is invoked. This function accepts the following configurable options:hy

Available Options for ddajaxsidepanel.init()

Attribute Description
targetselector jQuery selector to target the links on the page whose content should be loaded inside the Ajax Panel. The default unedited value is:

targetselector: 'a[rel="ajaxpanel"]'

which tells the script to look for links with the attribute rel="ajaxpanel".
ajaxloadgif

Defaults to 2

 The path (relative to your page) or full URL to the loading gif on your server.
fx

Defaults to {dur:'normal', easing:'swing'}

 Sets the duration of the slide in/out effect (in milliseconds) plus the easing style to use. For the later, only "linear", "swing" and "easeOutBack" are available unless you define additional easing functions yourself. For example:

fx: {dur:400, easing: 'linear'}
openamount

Defaults to "80%"

 Sets the width of the panel when fully open. Enter a percentage or pixel string (ie: "80%" or "700px"). A percentage value is relative to the width of the browser window, and is usually the preferred way to set the panel's width.
openamount_minthreshold

Defaults to "400px"

 Determines how wide the panel must be after taking into account the window's width and the openamount value above before opening a link inside the Ajax panel. If the calculated width of the panel does not meet this threshold (pixel string value), the link is opened as a regular link would, inside the entire browser window. This setting is useful for preventing the panel from showing when the user is using a small device such as a smartphone, or if the browser window is resized too small to adequately show the panel in.