Wordpress Themes - WP Forum at BFA - [SOLVED] Javascript not working in widget sidebar

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - [SOLVED] Javascript not working in widget sidebar (http://forum.bytesforall.com/showthread.php?t=6910)

[SOLVED] Javascript not working in widget sidebar

Hi -

I'm trying to set up a tabbed menu on the sidebar. Tried a few others, including Tabbed Widgets and Section Widget, and came across the same stone wall: javascript doesn't appear to work in the sidebars.

I've deactivated all my other plugins in case one of them may be causing the problem, but no....

Currently, I'm playing with NetTut's jQuery Tabbed Interface example.

My test page shows the tabbed menu working in the main content section of the post. However, the same code in the text widget on the same page doesn't work (although the CSS works fine!).

I've got this test page going on 2 separate websites, both using Wordpress 2.9.2 and Atahualpa 3.4.6.

Apart from the plugins that I've tried, this is my second attempt at doing a tabbed menu the hard way. I've run out of ideas of why they don't work. Please help!

Thank you for your help in advance!

try this, use this in the CSS Inserts

HTML Code:

    div#tabvanilla {

    width: 300px !important;

    margin: 0px !important;

    padding: 10px !important;

    background: #f3f1eb !important;

    border: 1px solid #dedbd1 !important;

    margin-bottom: 15px !important;

    }



    div#tabvanilla a {

    color: #222 !important;

    text-decoration: none !important;

    }



    div#tabvanilla a:hover {

    color: #009 !important;

    text-decoration: underline !important;

    }



    .tabnav li {

    display: inline !important;

    list-style: none !important;

    padding-right: 5px !important;

    }



    .tabnav li a {

    text-decoration: none !important;

    text-transform: uppercase !important;

    color: #222 !important;

    font-weight: bold !important;

    padding: 4px 6px !important;

    outline: none !important;

    }



    .tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {

    background: #dedbd1 !important;

    color: #222 !important;

    text-decoration: none !important;

    }



    .tabdiv {

    margin-top: 2px !important;

    background: #fff !important;

    border: 1px solid #dedbd1 !important;

    padding: 5px !important;

    }



    .tabdiv li {

    list-style-image: url("star.png") !important;

    margin-left: 20px !important;

    }



    .ui-tabs-hide {

    display: none !important;

    }

Hi Jugglehead -

Thanks for your quick reply.

It fixed the problem about the tab titles themselves - so that they now display on one line.

For the tab content.... no joy.

I'm using the Chrome Developer Tools (right-click on the element within Chrome, and select Inspect Element). For the tab menu on the post content, I notice that the javascript adds various classes to the elements, including 'ui-tabs-selected', 'ui-tabs-nave', ui-tabs-hide'.

However, the tab menu on the sidebar doesn't get the same treatment.

Have you been making changes to the css.php?

Please set your CSS to Internal and CSS: Compress to NO at ATO->Configure CSS & JS

This is my D-O-H-! moment.:o

Everything works fine now. Nothing was wrong with the Javascript or CSS or widget sidebar.

I'm learning to write plugins using wp_enqueue_script and wp_enqueue_style, and I was trying to be clever and restrict the code to a particular page ie if (is_single('47')). For some reason, the widget sidebar didn't consider itself to be part of that particular page.

I think that's what happened because all worked fine after I changed it to if (!is_admin()).

Thanks very much for your help and quick response, Jugglehead!

Much appreciated.