Change TAB = Page jump as TAB 2 is placed below TAB 1 when use P-TAB with Menus

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Göran's picture

Jag har lagt ut denna förfrågan som en "issue" på Panel Tabs (därav engelskan), men eftersom vi på svenska forumet är så himla smarta och skärpta så får jag kanske ett bättre svar här...;)

This is what i've done:

  1. First i do two minipanels = Business / Private - including MENUS: Business / Private - respectively.
    NOT: all menu-children are graphich .gif-picture with text changing color on default, hover and active...

  2. Then one Minipanel (also with other category-name) including the two holding each menu ( Business / Private ) in the content - HERE I set the Panel Tabs (ON)! I've also set "#tabs-menyer_med_flikar-main-2" in all child menus URL who is placed in TAB-2 = higher than TAB-1 -> TAB-1 will else will be the default on each NEW page loading from TAB-2 child's.

  3. One Panel Node Template Variants - viewing actual pages, where the Minipanel in point 2. is mounted together with more stuff. ( By that, all the other stuff will NOT be included as a TAB )

PROBLEM:
When going to panel-TAB no 2, and then klick on a sub-menu (child) the page is jumping down as TAB-2 block was placed below the TAB-1 block in firefox. In Safari the jump is stop near at the upper side of TAB-1 (Different reaction)

I've tried to set the css with an extra tag - meaning that all the child tags block will be put away and not taking any vertical space:

.ui-tabs-panel.ui-widget-content.ui-corner-bottom.ui-tabs-hide li {
display: none !important; }

NOT: by temporarily setting display:block on TAB-hide block (viewed) , i have checked that this tag is working.

BUT - each time clicking on a child-menu in TAB-2 the site will jump down as TAB-2 block was place below the TAB-1 block

My theori is - when loading a new page: - somewhere in the chain of data there is a css setting: "display: block;" for TAB-1 who will be loaded before the next css-tag setting ".ui-tabs .ui-tabs-hide, .ui-tabs .ui-tabs-hide li { display: none !important;}" and the browser do the "jump down" just o,5 sek before css-tags no 2 (with display; none) is rendered and the page is coming up/be viewed.

ANY suggestion to a solution or a workaround?

Comments

Öka width på ul?

miccelito's picture

Använder inte själv den modulen så det är klurigt att ge några exakta svar.
Det jag tänker är att kanske dina tab flikar ligger som <ul><li>tab1</li><li>tab2</li></ul> och när du klickar på en tab så laddar "throbber" under några sekunder inom samma <ul> och påverkar dess bredd som därför tvingar ner tab2 under tab1. Och att du kanske kan lösa problemet genom att öka width på ul taggen. Kolla även width på divs som wrappar tab flikarna.

Göran's picture

Det kanske går om man placerar en extra omslutande div med fast höjd=1 px? och sen sätter den som auto; senare i koden... - ska testa båda varianter... tack för tipset...
Men kanske har du har rätt, men det är de grafiska menyerna som ligger som <ul><li>menu-child1..</li></ul> <ul><li>menu-child2..</li></ul>...osv. (3 olika bilder visas i varje menu-child för resp. css-tagg; default, hover och active)

Tekniskt sett tror jag menyerna i TAB-1 först "laddas" som synliga - och skapar en höjd i sitt omslutande block och därför skjuter ner det efterföljande TAB-2 blocket - innan de sen blir osynliga via css-taggen för blocket som omsluter TAB-1, när TAB-2 är aktiv. TAB-1 ligger före TAB-2 i koden.

Dessvärre skickat modulen Panel Tab ut allt innehåll för att därefter gömma de TAB-taggar som inte ska visas, via en css-tagg "ui-tabs-hide".
Hade varit bättre om en if-sats gjort valet i php-koden och bara skickat de som ska visas..

Jag har testat olika taggar för varje menu-child där ".ui-tabs-hide" ingår i tagg-namnet.
Min tanke var att gömma varje child-tagg på samma sätt som blocket.
Men det funkade inte heller och jag tror det beror på att css laddas innifrån och ut, dvs värdet för <li> därefter för <ul> och därefter ".ui-tabs-hide" som ex. Har för mig att jag läst detta någonstans...hmm

Jag tror samma problem uppstår för textmenyer som placeras i TAB-1 där child-taggen bygger "display:block;", vilket är standard?
Eller "vilket-innehåll-som-helst" som har en "display:block;"-tagg placerad i en TAB

Finns det något sätt att via css styra fönstervisning till visning = "top", dvs få en browser att hoppa till överkant?

// Göran

"fast bredd på 225 px" ?

miccelito's picture

Vad menar du med att "det blir klurit - har en fast bredd på 225 px" ?

Är det <ul> bredden du menar?
Du kan väl pröva att i din css öka bredden med 25px bara för att kolla om problemet ligger där.

... ul {
width:250px !important;
}

Gäller ditt problem i alla webbläsare och OS?

Vad jag menar är att den div

Göran's picture

Vad jag menar är att den div som omsluter DIV-TAB-innehållets-block (och även omsluter själva TAB-flikarna - paralell hierarkin mellan innehåll/flikar) som i sin tur omsluter <ul> har en fast bredd på 225 px. Jag har testat att sätta <ul>-taggens bredd till: a) 250px, b)1000px, c)auto och det gjorde ingen skillnad.

JA - det är skillnad mellan olika webbläsare - firefox hoppar ner mest, chrome och safari stannar så att TAB-flikarnas nederkant linjerar med överdelen av web-läsar-fönstret, dvs TAB-rubrikerna precis inte syns.

PANEL TAB har ett omslutande block som i sin tur innehåller; TAB-flikarna, i samma nivå som TAB-innehållet. Detta betyder att tolkningen hos Firefox av dolda block inte fungerar på rätt sätt..? Första gången man laddar sidan i firefox, syns båda blocken en kort stund, ovanför varandra, när sen blocket för TAB-1 släcks så åker TAB-2 upp - det upptäckte jag efter ha gjort en omstart.

Jag har även testat att sätta mini-panel-blocket, som aktiverar "Panel Tabs" enligt följande, se även förklaring i koden.

.minipanel-med-tab-flikarna   /*  monterad minipanel i nod-panel som har"TAB" /
{ display: none !important;   } /
detta är första css-taggen av alla  och när denna är påslagen och nedan tagg avslagen, står webbläsarna stilla och hoppar inte - men inget av innehållet i TAB syns /

.minipanel-med-tab-flikarna    /
  Sista taggen av alla css-taggar /
{   display: block !important;  } /
sätter på visningen av den avslagna minipanelen som i sin tur innehåller/omsluter TAB*/

Provkör man med iphone, hoppar det på samma sätt som firefox.

Provkör man med ipad, står det helt still. Ipad är den enda läsare som inte "gör fel" och hoppar ner alls vid menu-val i TAB-2 (klick på child-menu).

Slutsats: Firefox och iPhone läser av css-taggar i en egen hierakisk ordning = innifrån och ut, och sorterar om dessa så att de tekniskt sett döljs i sista momentet, efter att de först ha läst in som "synliga" och därefter stängts av.

Chrome och Safari läser av css-taggarna och utför någon slags "halv" slutsats av css-taggarna innan de uppdaterar fönstret.

iPad - (med safari) uppdaterar fönstret först efter att all css-kod analyserats och presenterar den därför på rätt sätt. Den enda webläsare som fungerar...lol

Hur som helst - enda rätta är om man kan uppdatera webbläsaren en gång till, eller på något sätt sätta css så att avslutningsvis web-läsar-fönstret hoppar till läget "högst upp" - GÅR DET ?

// Göran

Ok, som jag sa tidigare har

miccelito's picture

Ok, som jag sa tidigare har jag aldrig testat modulen så det är svårt att veta något om aktuella html koden.. Har modulen någon demosida där man kan se exempel?
Men iaf som du nämner den div som omsluter DIV-TAB-innehållets-block (och även omsluter själva TAB-flikarna).. om du i css ändrar width då på denna div, pröva även lägga till overflow:hidden; på denna div.

De första blocken i hierarkin

Göran's picture

De första blocken i hierarkin som har ui-hide-tagg är underblocket i TAB = |TAB-view|, TAB-flikarna ovanför döljer bara "border" =sitt understa streck. Alla ändringar "utanför"/innan hierarkiskt, dessa block påverkar också den aktiva visningen, dvs TAB-2.

// Göran

Kanske det är en bugg, se

Göran's picture

Kanske det är en bugg, se tagg 2 i bilden, Only local images are allowed.
Taggarna gäller för det dolda blocket TAB-1 - tagg2 ska inte kunna vara aktiv med "display: block;" - om man kommenterar bort "display:block;-raden i taggen så minskar felet radikalt.

Men varför är den aktiv och inte struken, när det finns taggar som ligger som !important, och som dessutom har högre prio i tagg-namnet???
Utdrag av firebugg: Här har övre taggen utökats ytterligare - Ändå är "display: block;" aktiv i Tagg nr 2?????

.ui-tabs .ui-tabs-panel.ui-widget-content.ui-corner-bottom.ui-tabs-hide {
    display: none !important;
}
.ui-tabs .ui-tabs-panel {
    background: none repeat scroll 0 0 transparent;
    border-width: 0;
    display: block;
    padding: 0;
}
.ui-tabs .ui-tabs-hide {
    display: none !important;

// Göran

LÖSNING - Byte till modulen Ajax Tabs

Göran's picture

Lyckades inte komma runt sidhoppet Panel Tabs, så jag bytte till modulen "Panel Ajax Tabs" och den fungerar utan hopp. Man får skriva om lite kod i URL:en samt all css. Men det verkar fungera, so fare...

/ Tack för alla förslag

// Göran

Hade tänkt föreslå dig att

miccelito's picture

Hade tänkt föreslå dig att byta till den modulen men avstod eftersom den är rätt nysläppt och inte så beprövad ännu. Men vad bra att den funkar bra för dig!