Actually I have different form elements in each div. I am using the
tabs to seperate/clean up the page because it contained various multi-
select, dropdowns groupings etc, they are used for filtering data on a
dynamic grid/chart. I actually don't know which ones will be on the
page until runtime so I need it a little more dynamic than $('#tabs-1,
#tabs-2, #tabs-3').mouseout because I would rather not build a list on
the server, but just loop over the divs in the inner wrapper, which I
think jquery can do. Wouldn't it be easier to get the index of the
currently selected div and just hide it so there is no flicker. Sorta
override the collapsible functionality, I guess I don't know how to do
that either.
Thanks for your assistance so far.
On Mar 26, 11:02 pm, acamar <websi...@bcs.ru> wrote:
> I suppose you'd like to have tabs to work as dropdown menu. In this
> case I can suggest two ways:
>
> 1. Using tabs plugin... You're right, it needs to attach mouseout
> event on div panel like this
>
> $('#tabs-1, #tabs-2, #tabs-3').mouseout(function () {
> $("#tabs").tabs('option', 'selected', -1);
>
> });
>
> but there is flicker effect when you move cursor from div to tabs.
>
> 2. you can make it without JavaScript at all. You can find examples on
> Stu Nicholls' site:http://www.cssplay.co.uk/menu/
>
> On 26 мар, 22:08, jq noob <sammil...@alliancecom.net> wrote:
>
>
>
> > If I implement your code, then I can never actually move my mouse down
> > into the content div. When I mouseover the tab, the div is shown, but
> > when I move the mouse cursor off the tab and try to move it into the
> > div, the div disappears because the mouseout event gets fired.
>
> > Since there are really two mouseout events fired, one when you move
> > the cursor from the tab down into the div and another when you move
> > the cursor out of the div
>
> > Now you have to remember that this only happens if you have option
> > collapsible: true. When I remove this from the options, then the code
> > that was suggested does nothing visually speaking. I suspect that the
> > variable holding the selection is set -1 but that doesn't hide the
> > currently open div.
>
> > When I use collapsible: true in conjunction with event: 'mouseover'
> > the div panel will disappear if I move my mouse back up on the
> > selected tab first otherwise it never dissapears until another tab is
> > selected. I suspect that some sort of mouseout event would need to be
> > attached to the currently showing div or all the divs. I am new to
> > this so any help would be appreciated.
>
> > On Mar 25, 11:13 pm, acamar <websi...@bcs.ru> wrote:
>
> > > In context of mouseout event handler the $tabs variable is not
> > > visible. So try
>
> > > $('#tabs').mouseout(function () {
> > > $("#tabs").tabs('option', 'selected', -1);
>
> > > });
>
> > > that should help.
>
> > > On 25 мар, 13:44, jq noob <sammil...@alliancecom.net> wrote:
>
> > > > I am currently using
>
> > > > $(document).ready(function()
> > > > {
> > > > var $tabs = $("#tabs").tabs({
> > > > selected: -1,
> > > > event: 'mouseover',
> > > > collapsible: true
>
> > > > });
>
> > > > I have tried including a .mouseout(function(){
> > > > //$tabs.tabs('option', 'selected', -1);
> > > > $tabs.tabs('select',-1);
> > > > }); // Used various combos of these
>
> > > > I can see that a mouseout event is fired, when you leave the tab and
> > > > move your mouse into the now showing div and another mouseout event is
> > > > fired when you leave that div.
>
> > > > What is the correct way to hide that div on mouseout and basically set
> > > > the tab group back to nothing selected once your focus is no longer on
> > > > that tab group?
>
> > > > I found some posts from February 08 and September 08 but none of those
> > > > solutions worked.
>
> > > > I was thinking that I could bind something to the "wrapper" but not
> > > > sure how or if that would even be the correct way.
>
> > > > <div class="wrapper">
>
> > > > <div id="tabs">
> > > > <ul>
> > > > <li><a href="#tabs-1">Filter 1</a></li>
> > > > <li><a href="#tabs-2">Filter 2</a></li>
> > > > <li><a href="#tabs-3">Filter 3</a></li>
> > > > </ul>
> > > > <div id="tabs-1">html</div>
> > > > <div id="tabs-2">html</div>
> > > > <div id="tabs-3">html</div>
> > > > </div>
> > > > </div>- Hide quoted text -
>
> > > - Show quoted text -- Скрыть цитируемый текст -
>
> > - Показать цитируемый текст -- Hide quoted text -
>
> - Show quoted text -
