Category: post

I was looking for some code to do slide out panels and found http://www.building58.com/examples/tabSlideOut.html

I created a patch that will allow you load the content through AJAX, instead of statically in the HTML.

In the HTML you need to add another element (DIV) that wraps the content to be loaded. Change the example on the page above with the two lines left aligned below.

     <div class=”slide-out-div”>
          <a class=”handle” href=”http://link-for-non-js-users.html”>Content</a>
          <h3>Contact me</h3>
<div id=”CONTENT_TO_REPLACE”>
          <p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
          <p>This can be a form to submit feedback, or contact info</p>
</div>
     </div>

And then in the initialization step:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>
<script src=”http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js”></script>

     <script type=”text/javascript”>
      $(function(){
           $(‘.slide-out-div’).tabSlideOut({
                tabHandle: ‘.handle’, //class of the element that will become your tab
                pathToTabImage: ‘images/contact_tab.gif’, //path to the image for the tab //Optionally can be set using css
                imageHeight: ‘122px’, //height of tab image //Optionally can be set using css
                imageWidth: ’40px’, //width of tab image //Optionally can be set using css
      tabLocation: ‘left’, //side of screen where tab lives, top, right, bottom, or left
                speed: 300, //speed of animation
                action: ‘click’, //options: ‘click’ or ‘hover’, action to trigger animation
                topPos: ‘200px’, //position from the top/ use if tabLocation is left or right
                leftPos: ’20px’, //position from left/ use if tabLocation is bottom or top
                fixedPosition: false, //options: true makes it stick(fixed position) on scroll
‘contentURL’: ‘http://URL_TO_YOUR_CONTENT’,
‘contentDiv’: ‘CONTENT_TO_REPLACE’ //This is the id of the content box above in the HTML
          });
});

      </script>

Below is the patch to v1.3

— jquery.tabSlideOut.v1.3.js 2009-09-21 00:00:53.000000000 -0400
+++ jquery.tabSlideOut.ajax.js 2011-02-25 08:38:47.000000000 -0500
@@ -35,11 +35,19 @@
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
– onLoadSlideOut: false
+ onLoadSlideOut: false,
+ contentLoaded: false,
+ contentURL: null,
+ contentDiv: ”
}, callerSettings||{});

settings.tabHandle = $(settings.tabHandle);
var obj = this;
+
+ if (settings.contentURL) {
+ settings.contentDiv = $(settings.contentDiv);
+ }
+
if (settings.fixedPosition === true) {
settings.positioning = ‘fixed’;
} else {
@@ -142,6 +150,10 @@
};

var slideOut = function() {
+
+ if (settings.contentURL && (settings.contentLoaded === false)) {
+ settings.contentDiv.load(settings.contentURL, function() { settings.contentLoaded = true; });
+ }

if (settings.tabLocation == ‘top’) {
obj.animate({top:’-3px’}, settings.speed).addClass(‘open’);