[js] active widgets

Pagina: 1
Acties:

  • Tijgertje84
  • Registratie: Augustus 2005
  • Laatst online: 04-06-2025
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??
Afbeeldingslocatie: http://home.aim.hsbrabant.nl/s136588/widget.jpg
de style voor widget 1
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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 ]

Intel© Conroe E6600 | Asus P5Q PRO Turbo | Sapphire Vapor-X HD5770 1GB | G.E.I.L. 2 GB DDR2-667 Kit CL4 4-4-12 | WD Caviar SE16 2x250GB (S-ATA2) (Raid0) | Sunbeam Trio | Chaintec CFT-500A | Windows XP Pro SP3 | Samsung Syncmaster S23A350H


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:
1
2
#widget1 .active-column-0 { color: blue; }
#widget2 .active-column-0 { color: green; }

  • RM-rf
  • Registratie: September 2000
  • Laatst online: 24-04 17:54

RM-rf

1 2 3 4 5 7 6 8 9

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:
1
2
3
4
5
6
<div id="widget1">
 [ ... widget code ...]
</div>
<div id="widget2">
 [ ... widget code ...]
</div>


kun je met behulp van
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
.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 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen


  • Tijgertje84
  • Registratie: Augustus 2005
  • Laatst online: 04-06-2025
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:
1
2
3
4
5
6
7
8
9
10
11
#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 :P
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:
1
font: menu;  /* foute CSS

dat kan best waar zijn maar dit staat toch echt in de originele documentatie:
Cascading Stylesheet:
1
<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:
1
obj2.setProperty("column/count", 5);

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

Intel© Conroe E6600 | Asus P5Q PRO Turbo | Sapphire Vapor-X HD5770 1GB | G.E.I.L. 2 GB DDR2-667 Kit CL4 4-4-12 | WD Caviar SE16 2x250GB (S-ATA2) (Raid0) | Sunbeam Trio | Chaintec CFT-500A | Windows XP Pro SP3 | Samsung Syncmaster S23A350H