[Pro] JQuery Slide out tab

Freeway
1

Is there someone who could help me with a Freeway example of this code for a Slide out tab. Seems fairly simple but I think I’m placing the code in the wrong place or naming the divs incorrectly.

http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/

Thanks,

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

If you post a link to the page where you have tried this we can help you fix it.

Bear in mind if you try and use this on a page where you are using any native FW actions as well you are likely to get conflicts.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Great. here is the page. http://smartytest.com/Wren/

You will see three small tabs on the right which I did.
The feature I am after is having the tab stick when clicked once and then link on the second click. The jquery allows for this. This is helpful on touch devices.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I just need an example how to set up the query tab slide-out plugin in Freeway and if I need to upload anything to my server.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

I just need an example how to set up the query tab slide-out plugin in Freeway and if I need to upload anything to my server.

What I was suggesting you show us is a page where you have tried to implement the jquery slide out plug in and it didnt work.

Preferably on an otherwise blank page - otherwise I am wading through a pile of irrelevant stuff that may be causing conflicts.

Baby steps!

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Did I mention that I hate pages/sites that do not have an obvious Mute button!

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

ok. I do a blank page

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Not my choice. I hate it too. She wants auto play

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Here you go.

http://smartytest.com/Wren/slide-test.html

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

It would appear that the link to the slide-out js is not valid - it gives a 404. That may be why your example doesn’t work.

http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js

Upload that JS file to your own server and link to it there.

The code also references an older version of jQuery (1.3) so if you are using jQuery elsewhere on the same page you could try leaving the reference to the older version out - or try with a newer version ie

https://code.jquery.com/jquery-1.11.2.min.js

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

or try with a newer version

The risk is that the plug in doesn’t work with a recent version of jQuery - but it is worth trying.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

do I have the items named in the class correctly?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Would you be able to create a Freeway document example of this so I can compare where the code goes and the class names. I think that may be where the problem is.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

On their demo it is working so the link must be right.

http://www.building58.com/examples/tabSlideOut.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

I uploaded the script to my server and linked to it and it is sort of working. Pops out and back in?

http://smartytest.com/Wren/slide-test.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

On their demo it is working so the link must be right.

The demo doesn’t use the same link it actually links to the js file on their server ie a local link

I cant tell from your page if you created the handle Div yourself (drawn in FW) or let the script do it for you?

No time to make an example in FW tonight - it will have to wait until tomorrow.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Ok. Let’s talk tomorrow and I will work on this a little more tonight.

Thank you so much for your help.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

So What I have so far is this: http://smartytest.com/Wren/slide-test.html
The only thing that doesn’t work is the sticking after click part.

I found another SlideOut Tab, but this one doesn’t reference the scr code.

Ugh!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

This is exactly what I’m trying to on my site. Right now I have a simple a:hover tag set up so that on mouseover the tab expands to 145px. I need it to stick on hover. See below link.

For touch devices this is what i need it to do:

Can I add to my tag for a:hover ?

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

What I have so far is this: http://smartytest.com/Wren/slide-test.html

Tell me exactly how you are constructing this - or better yet provide a download link to your FW file.

Do not try and create the Div that the contact tab appears in. I believe that the script does that for you from the parameters you set in the plug in options

$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                              //class of the element that will be your tab
    pathToTabImage: 'images/contact_tab.gif',          //path to the image for the tab *required*
    imageHeight: '122px',                               //height of tab image *required*
    imageWidth: '40px',                               //width of tab image *required*    
    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
    fixedPosition: false                               //options: true makes it stick(fixed position) on scroll
});

I should get a chance to build a page using this later this evening.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options