[js] active widgets

[Tijgertje84]

had al een post hierover gemaakt op andere forum van Programming en Webscripting
maar daar was het niet geplaatst om dit te posten -.-

ik heb een probleem met wat widgets
ik heb er nu namelijk 2 op 1 pagina staan maar op een of andere manier gebruiken ze allebei dezelfde layout wat ik niet wil hebben...
in het onderste plaatje kan je zien wat ik bedoel:
bovenste is de 1ste widget
daaronder de 2de waar dus het probleem zit zoals je kan zien
ze gebruiken beide dezelfde style
hoe kan ik dit zo veranderen dat iedere widget zn eigen style heeft??

de style voor widget 1

HTML:

<style>
    .active-controls-grid {height: 100%; font-family: Tahoma;  background-color: #F4F4F4 font: menu; font-size: 8pt; border-bottom-color:#FFFFCC}
    .active-row-cell {border-right: 1px dotted #666666}
    .active-column-0 {width: 70px;}
    .active-column-1 {width: 100px; }
    .active-column-2 {width: 70px;text-align: left;background-color:#F7F7F7}
    .active-column-3 {width: 200px;text-align: left;}
    .active-column-4 {width: 85px;text-align: right;}
    .active-column-5 {width: 85px;text-align: right;background-color:#F7F7F7}
    
    .active-row-highlight {background-color: threedface}
    .active-row-highlight .active-row-cell {background-color: #DDFFCC}
    
    color: blue;
    background: buttonface;
    font-size: 8pt;
    font-family: monospace;
    border: 3px double black;
}
</style>

ik ben er al 2 dagen mee bezig maar ik krijg het nog niet erg voor elkaar
ben ook al op de site van http://www.activewidgets.com geweest maar ook daar nog geen resultaten gevonden..
ik kijk zelf ook nog wel verder op hun site en andere sites (google etc)

[ Voor 85% gewijzigd door Tijgertje84 op 09-11-2005 11:34 ]

[Verwijderd]

Gooi ze allebei in een eigen container met een ID, bijvoorbeeld:"widget1" en "widget2". Dan kun je ze uniek benaderen in je CSS met:

Cascading Stylesheet:

#widget1 .active-column-0 { color: blue; }
#widget2 .active-column-0 { color: green; }

[RM-rf]

het is een nogal onduidelijke posts (en je url linkt niet goed, moet naar ik aanneem http://www.activewidgets.com/ zijn ... )

je probleem is er echter eentje van CSS:
allereerst, haal de fouten uit de CSS.. die staat vol met grove fouten, semi-kolomns vergeten, een ruleset zonder selector ..., onzin als een ruleset met 'font: menu;'
op die manier is het een wonder dat er nog _iets_ weergegeven wordt, maar het levert je grote problemen op, door pure slordigheid

de activewidgets gebruiken CSS--.classes om die stijl toe te passen, en dat betekent dat ieder element met die class een gelijke uitstraling heeft...

de truc is op te lossen door CSS-selectors slim toe te passen:
als je html output iets is als

HTML:

<div id="widget1">
 [ ... widget code ...]
</div>
<div id="widget2">
 [ ... widget code ...]
</div>

kun je met behulp van

Cascading Stylesheet:

.active-controls-grid {
   height: 100%; font-family: Tahoma;  
   background-color: #F4F4F4 ;
   font: menu;  /* foute CSS, eventjes laten staan zodat de color-syntax het ook oppikt */
   font-size: 8pt; 
   border-bottom-color:#FFFFCC
}
DIV#widget2 .active-controls-grid {
   height: 50%; font-family: "MS Comic Sans";  
   background-color: #FC0;
   font-size: 24px; 
   border-bottom-color:#960
}

[ Voor 5% gewijzigd door RM-rf op 09-11-2005 11:45 ]

[Tijgertje84]

sorry voor het foutje in de link weet niet hoe dat komt waarschijnlijk een typfoutje

ok bedankt maar het werkt nog niet echt bepaald
ik ken dan wel een beetje css dus vandaar dat ik misschien nog steeds iets fout doe..

wat ik heb gedaan is het volgende:

Cascading Stylesheet:

#grid1 .active-column-0 {width: 70px;}
    #grid1 .active-column-1 {width: 100px; }
    #grid1 .active-column-2 {width: 70px;text-align: left;background-color:#F7F7F7}
    #grid1 .active-column-3 {width: 200px;text-align: left;}
    #grid1 .active-column-4 {width: 85px;text-align: right;}
    #grid1 .active-column-5 {width: 85px;text-align: right;background-color:#F7F7F7}
    #grid2 .active-column-0 {   width: 100px;   }
    #grid2 .active-column-1 {   width: 100px;   }
    #grid2 .active-column-2 {   width: 100px;   text-align: left;   background-color:#F7F7F7    }
    #grid2 .active-column-3 {   width: 100px;   text-align: left;   }
    #grid2 .active-column-4 {   width: 100px;   text-align: left;   }

werkt perfect!
terwijl jullie dit hadden gepost vond ik het antwoord ook in de documentatyie van de widget
stond toevallig een heel erg mooit voorbeeld in van: "two grids on one page.htm"
dus tjah misschien iets tevroeg gepost

wat je verteld over die

Cascading Stylesheet:

font: menu;  /* foute CSS

dat kan best waar zijn maar dit staat toch echt in de originele documentatie:

Cascading Stylesheet:

<style> body, html {font: menu; background: threedface;} </style>

maar nu heb ik nog steeds een ander probleem
want in de ene widget zijn er 7 colommen en in de de 2de heb ik er maar 5
is het voorbeeld gebruiken ze evenveel colommen in beide widgets
de style werkt zoals ik had gehoopt maar ik zie nu dus nog steeds 2 colommen met "undifined"...

ok laat maar is ook al opgelost
er bestaat zon mooir regel als dit:

Cascading Stylesheet:

obj2.setProperty("column/count", 5);

anyway iig bedankt voor de moeite!! (ook al heb ik zelf ook de oplossing gevonden)