Ajax Side Panel script
Description: A
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)
Step 1: Insert the following code in the HEAD section of your page
Download the following external files that make up the script:
- ddajaxsidepanel.js (main script)
- ddajaxsidepanel.css (tablet gestures plugin)
- AND (make sure paths to both images are correct inside ddajaxsidepanel.css and ddajaxsidepanel.js, respectively).
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:
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 |
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. |