Can't get Slide Out Tab on the right hand side of my page

Question

I have a slide out tab, it works perfectly on the left, but when I change the settings to position it on the right - the tab image disappears and the content is stuck open.

Under the tab slide out DIV I have this js

$('.slide-out-div').tabSlideOut({

    tabHandle: '.handle',                     //class of the element that will be your tab
    pathToTabImage: 'images/getstarted.gif',  //path to the image for the tab *required*
    imageHeight: '139px',                     //height of tab image *required*
    imageWidth: '27px',                       //width of tab image *required*    
    tabLocation: 'right',                     //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: '0px',                            //position from the top
    fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
});

Then there is a js file that has these settings

(function($){

    $.fn.tabSlideOut = function(callerSettings) {
        var settings = $.extend({
            tabHandle: '.handle',
            speed: 300, 
            action: 'click',
            tabLocation: 'left',
            topPos: '200px',
            leftPos: '20px',
            fixedPosition: false,
            positioning: 'absolute',
            pathToTabImage: null,
            imageHeight: null,
            imageWidth: null,
            onLoadSlideOut: false                   
        }, callerSettings||{});

MY CSS

.slide-out-div {

    padding: 12px;
    width: 220px;
    height: 87px;
    border: 2px inset #1e5e70;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #eefbfe;
    background-image: url(../images/stripe.png);
    background-repeat: repeat;  
    z-index:999;
}

My website is http://www.pagetree.co.uk

Thanks!

Answer 1

There's no way to do what you're asking in the 'correct' way. The correct way would be to set the slide-out (on your website the div called float) to right: 0; and tweak the actual javascript function (not the js you listed here, those are the function parameters). In those parameters you may have observed that there is no rightPos:, which means it can only be set from the left.

However, if you can give the float div a width, you could manage to position it to the right edge of the screen, in percents. In that case, you would give the float div these properties width: 20%; left: 80%;. DISADVANTAGE: Your div's width will vary in proportion to the screen size.

That's for the positioning. And still then it will not work because your js calculates the tab to slide out from the left. I'm guessing you got this plugin here: http://www.building58.com/examples/tabSlideOut.html . It's does the job, but it's not very extensible.

CONCLUSION: You need to write your own javascript for a function like this. HOWEVER, why use javascript when you could do it with a CSS:hover selector?

Have a look at this fiddle: http://jsfiddle.net/TvGQ5/, it achieves exactly what you want (if you really want on click and not on hover, toy around with the :target selector.

If you use this solution, don't forget to set the parent element (on your website the div called middle to overflow-x: hidden;. Also, on all your pages it works, but on your homepage you need to move the floated div to the middle div, not the body.