[Pro] Responsive Css Menu Breaks

Freeway
1

I have two different Websites I’m working on. Both are using a query slideOut Tab feature. On the “Wren Harrington Site” the tabs works great and as does the responsive CSS Menu. (“Buy Album” tab on right) However, on the Iron Horse Cigar Depot site, using the exact same query, the Responsive Css Menu does not work. (tabs on the left)

Anyone who can help me sleuth this would be saving me from going crazy. Please Help! Is there a Pure CSS way to do this with a click toggle that I could use instead.

Thanks so much.

Billy

http://www.ironhorsecigardepot.com, http://smartytest.com/Wren/

http://www.ironhorsecigardepot.com, http://smartytest.com/Wren/

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

2

Definitely some javascript errors going on - try it without lightbox.js

David

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

3

Hey Dave,
Thanks. Are you seeing the lightbox.js in the Web Yep?

Billy

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

4

So the issue is that I was creating more that one slideOut Tab
on the page. I gave them each a unique div ids but doesn’t seem to matter because it would break my CSS Menu.
Hum.

I’m stumped.

Billy

Now working with only one tab: http://www.ironhorsecigardepot.com

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

5

Are you seeing the lightbox.js in the Web Yep?

Its gone now.

I do see that http://www.ironhorsecigardepot.com/ihcd-humidor.php works fine (menu wise) and you have both jQuery and script/Protaculous on that page.

Baffled!

Is there a Pure CSS way to do this with a click toggle that I could use instead.

Not sure about the click implementation - http://www.deltadesign.co/fw_examples/CSSstuff/facebook-css-slideout.html

I think Tim Plumb has a demo of this somewhere at least for his faceBook slideout action which can use CSS or jQuery http://www.freewayactions.com/test/facebook-slideout-panel/

I am sure that you could use his code output and adapt it for your use case.

D

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

6

I see you have it working now.

Were you originally using a class rather than the IDs?

<script type="text/javascript">
    $(function(){
$('#slide-out-div1').tabSlideOut({
            tabHandle: '.handle1', //class of the element that will be your tab
            pathToTabImage: 'http://ironhorsecigardepot.com/Resources/depot-news-icon.png', //path to the image for the tab (optionaly can be set using css)
            imageHeight: '65px', //height of tab image
            imageWidth: '63px', //width of tab image    
            tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
            speed: 600, //speed of animation
            action: 'click', //options: 'click' or 'hover', action to trigger animation
            topPos: '120px', //position from the top
            leftPos: '20px',  
            fixedPosition: true //options: true makes it stick(fixed position) on scroll
        });

$('#slide-out-div2').tabSlideOut({
            tabHandle: '.handle2', //class of the element that will be your tab
            pathToTabImage: 'http://ironhorsecigardepot.com/Resources/depot-reviews-ico.png', //path to the image for the tab (optionaly can be set using css)
            imageHeight: '65px', //height of tab image
            imageWidth: '63px', //width of tab image    
            tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
            speed: 600, //speed of animation
            action: 'click', //options: 'click' or 'hover', action to trigger animation
            topPos: '185px', //position from the top
            leftPos: '20px',  
            fixedPosition: true //options: true makes it stick(fixed position) on scroll
        });

$('#slide-out-div3').tabSlideOut({
            tabHandle: '.handle3', //class of the element that will be your tab
            pathToTabImage: 'http://ironhorsecigardepot.com/Resources/depot-rules-icon.png', //path to the image for the tab (optionaly can be set using css)
            imageHeight: '65px', //height of tab image
            imageWidth: '63px', //width of tab image    
            tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
            speed: 600, //speed of animation
            action: 'click', //options: 'click' or 'hover', action to trigger animation
            topPos: '250px', //position from the top
            leftPos: '20px',  
            fixedPosition: true //options: true makes it stick(fixed position) on scroll
        });
        
});
     </script>

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

7

And watch the size of your background new-leather-backg.jpg

It is pretty big at nearly 1Mb

D

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

8

Yes, but what I found out was I was missing a second
});
before the end of the script.

Ugh! I don’t understand why there are two?
I’m not a coder so it takes me days sometimes to sleuth it all out.

Billy

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

9

yeah.
Have any pointers for getting an image as small as possible? I have it at 35% in Photoshop and I use a program called image optimum.

Billy

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

10

I have it at 35% in Photoshop and I use a program called image optimum.

Forget PS - open it in Preview. File>Save As (or Export depending which version of Preview) and under the destination pane there are Image Type options and below that a quality slider with a destination File Size. Screw it right down as you do not need good quality for a BG.

Then you can run/use ImageOptim as well.

D

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