Can't Get Slide Out Tab On The Right Hand Side Of My Page

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 t

Solution 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.