[JS] Layout ActiveWidgets - Softwareontwikkeling

woensdag 26 juli 2006 11:01

Acties:

Topicstarter

Ik ben nu bezig met een oude stage opdracht van mij die ik toendertijd helaas niet heb kunnen afmaken. Nu ben ik bezig de applicatie van toen om te zetten in iets beters. Alleen implementeer ik wel vele onderdelen die toen al goed werkten.

Nu heb ik een klein probleempje met de activewidgets.
zo zou het moeten zijn:
Afbeeldingslocatie: http://home.aim.avans.nl/aaloon/files/activewidget1.JPG

Afbeeldingslocatie: http://home.aim.avans.nl/aaloon/files/activewidget1.JPG

en zo ziet het er nu uit:
Afbeeldingslocatie: http://home.aim.avans.nl/aaloon/files/activewidget2.JPG

de script van deze widgets zijn exact hetzelfde (ook de styles)
het enigste wat er dus niet goed doorkomt zijn de benamingen van de kolommen en de uitlijning van de resultaten onder deze kolommen.... (zie stippellijntjes)
er worden 2 externe files aangeroepen (grid.js en grid.css) maar hier moet niks mis mee zijn.

hieronder de stijl die de layout van de grid zou moeten bepalen zoals in het eerste plaatje
(deze code is precies hetzelfde als bij het 2de plaatje, alleen werkt het daar niet

)

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: 200px; background-color:#F7F7F7}
    .active-column-2 {width: 100px;text-align: left;}
    .active-column-3 {width: 50px;text-align: right;}
    .active-column-4 {width: 80px;text-align: right;}
    .active-column-5 {width: 100px; background-color:#F7F7F7}
    .active-column-6 {width: 80px;text-align: right;}
    .active-column-7 {width: 80px;text-align: right;}
    
    .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>

Hieronder de script voor de grid zelf

JavaScript:

<script>                
//////////////////////////////////////////////////////////////////////////
// Grid Script
//////////////////////////////////////////////////////////////////////////
function selectDeb(){
    var index = obj.getProperty("selection/index");
    var debnr = obj.getProperty("data/text", index, 0);
    var debnaam = obj.getDataProperty("text", index, 1);
    //window.location = ""; niet relevant
}
var alternate = function(){
return this.getProperty("row/order") % 2 ? "#F7F7F7" : "white";
}

var row = new Active.Templates.Row;
row.setStyle("background", alternate);
row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");
row.setEvent("ondblclick", selectDeb);

var table = new Active.XML.Table;
table.setURL("xml/abonnement_debiteuren_zoek.xml");
table.request();

var obj = new Active.Controls.Grid;
obj.setProperty("column/count", 8);
obj.setModel("data", table);
obj.setTemplate("row", row);

var myColumns = ["Debiteurnr.", "Debiteurnaam", "Straat", "Nummer", "Postcode", "Woonplaats", "Telefoon", "Fax"];
obj.setColumnText(function(i){return myColumns[i]});

document.write(obj);
</script>

De vraag is dus wat de oorzaak kan zijn dat hij de styl niet goed opneemt?

woensdag 26 juli 2006 11:07

Acties:

Tijgertje84

Topicstarter

ok ik ben er al achter dat het niet deze code is die niet goed is maar het nieuwe geheel waar ik dit in probeer te bouwen
sorry voor het ongemak

anyway heb het probleem nog steeds niet opgelost...

en weet totaal niet hoe of waar het fout zou kunnen gaan.

Edit:
Ter verduidelijking:
heb een index.php die het een en ander include (classes, functies etc), en uiteindelijk de main waarin de layout van de site in staat (divs) en menu
in de content div worden de links geladen die in het menu gekozen worden.

ik heb continu vanalles en nog wat geprobeerd en ik ben erachter gekomen dat deze zin de boosdoener is:

code:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

maargoed als ik deze verwijder is de meeste layout wel meteen naar de klote maar de activewidget werken dan weer wel perfect

Wat er zoal veranderd zijn de font grootte (deze worden dan ineens groter)
Iemand die mij kan vertellen hoe ik dit op kan lossen. (of is het gewoon simpel de css aanpassen?)

[ Voor 103% gewijzigd door Tijgertje84 op 28-07-2006 11:18 ]

vrijdag 28 juli 2006 10:59

Acties:

Tijgertje84

Topicstarter

schopje -> help