[Html/Css] cell type veranderen?

[Verwijderd]

Ik heb bezig met een Kalender, niet dat dat zo moeilijk is want dat is al af maar nu zit ik met een probleem ik wil graag wanneer ik over een cell ga deze highlighten d.m.v een andere kleur (werkt al) en door een dotted line er om heen, maar als ik er af ga moet deze natuurlijk weer gerestored worden... hoe krijg ik dat voor elkaar

zie source : http://members.home.nl/txeg/cal.html

[coelho]

gelukkig schrijf je overzichtelijke code.... Was aan het kijken, maar heb geen tijd om die brij nu uit te zoeken. Sorry

[KnoppenSpook]

td class=normal onmouseover="style.class='active'" onmouseout="style.class='normal'"

Zo ongeveer, (is uit m'n hoofd) maar dit is het idee

ff op msdn.microsoft.com zoeken naar de DHTML reference

en maak een CSS file en gebruik dan classes!!

[ Voor 0% gewijzigd door KnoppenSpook op 07-11-2002 13:16 . Reden: ff wat toegevoegd ]

[Verwijderd]

HTML:

onMouseOver="this.style.borderStyle='dotted'" onMouseOut="this.style.borderStyle='solid'"

een van de mogelijkheden, je kan het ook doen via CSS rulez of via een class change zoals hierboven al geopperd.

[Verwijderd]

coelho, was door php gegenereerd, heb er nu enters in gezet en idd is veel overzichtelijker

KnoppenSpook, ik ga denk ik ff over naar CSS.

Shadow3333, tnx... maar ga toch ff met CSS bezig denk ik

[Bosmonster]

Lijkt me sowieso een goed idee om CSS te gaan gebruiken.. je code zit nu ook nog doorspekt van de font-tags...

Verder kun je alle styles van een object veranderen op ieder event, dus de mogelijkheden zijn behoorlijk als je de styles kent

[Verwijderd]

hoe moet dit b.t.w? class veranderen met de 'onmouseover' want --> dat onmouseover="this.class=overdate" werkt niet, echter heb ik als referentie http://www.w3schools.com/css/ bij de hand

[Bosmonster]

class is ook geen property die ik ken.. misschien bedoel je className?

[Verwijderd]

Bosmonster schreef op 07 November 2002 @ 13:39:
class is ook geen property die ik ken.. misschien bedoel je className?

Logisch gezien zou dat wel 'class' moeten zijn, echter is dat in het Document Object Model terecht overgenomen als 'className'. Het woord 'class' is namelijk in sommige talen een reserved word.

[Verwijderd]

Bosmonster schreef op 07 november 2002 @ 13:39:
class is ook geen property die ik ken.. misschien bedoel je className?

correct! dit had ik b.t.w ook al snel gevonden op

http://www.faqts.com/knowledge_base/view.phtml/aid/5167

[Verwijderd]

ik weet het niet zeker, maar volgens mij moet dat in css kunnen:

HTML:

td {
  background-color: #ffffff;
  borderstyle: solid;
}
td.hover {
  background-color: #0000ff;
  border-style: dots;
}

dacht ik..

[Verwijderd]

Verwijderd schreef op 07 november 2002 @ 13:44:
ik weet het niet zeker, maar volgens mij moet dat in css kunnen:

HTML:

td {
  background-color: #ffffff;
  borderstyle: solid;
}
td.hover {
  background-color: #0000ff;
  border-style: dots;
}

dacht ik..

Klopt maar der was ook 1 cell bij die altijd geselecteerd moest zijn

[Verwijderd]

Kijk hier eens: http://www.webreference.com/js/tips/000221.html

Toegepast zou dat worden:

HTML:

<style type="text/css">
.tdnormal {
  background-color: #ffffff;
  border-style: solid;
}
.tdhover {
  background-color: #0000ff;
  border-style: dotted;
}
</style>

JavaScript:

<script language="JavaScript"><!--
function rollon() {
  if (window.event.srcElement.className == "tdnormal") {
    window.event.srcElement.className = "tdhover"; // change class
  }
}
function rolloff() {
  if (window.event.srcElement.className == "tdhover") {
    window.event.srcElement.className = "tdnormal"; // change class
  }
}
document.onmouseover = rollon;
document.onmouseout = rolloff;
//--></script>

HTML:

<table border=0>
  <tr>
    <td class="tdnormal">Hover me</td>
  </tr>
</table>

Hiermee kun je in het hele document elk object met de class 'tdnormal' van class laten veranderen zodra de muis erover gaat.
Met een if then else if structuur kun je meerdere classes laten veranderen.

[Verwijderd]

Als we het W3C volgen zou dit 'probleem' overigens heel gemakkelijk op te lossen moeten zijn, ware het niet dat Microsoft met Internet Explorer en een marktaandeel van plusminus 97 procent CSS2 nog niet volledig heeft geïmplementeerd in versie 6 van haar browser. Ook Opera vindt het op het moment kennelijk interessanter om bijvoorbeeld het gebruik van document.all te implementeren in plaats van document wide support van pseudo classes (whehe, FoOL op dreef )

Met pseudoclasses zou dit namelijk zeer gemakkelijk op te lossen moeten zijn, en wel op de volgende manier:

PHP:

td.calendar {
  background: #eef;
  border: 1px solid #666;
}
td.calendar:hover {
  background: #ccf;
  border-style: dotted;
}

Helaas is Mozilla de enige browser die dit op het moment ondersteunt, voor zover ik weet

In verband met backwards compatibility moet je dit overigens niet overwegen als een serieuze oplossing, beschouw het als aanvulling op wat reeds gezegd is, en bedenk dat dit waarschijnlijk de manier van werken is zoals die over 1 à 2 jaar mogelijk gebruikt zal worden

[Verwijderd]

mooi betoog en zeer waar, hoop dat IE 7 dit en fatsoenlijke PNG support heeft.

[Verwijderd]

Calendar script online

[Verwijderd]

nu zit ik met het volgende, ik ben bezig met het scripten van events per datum, dat werkt vooralsnog helemaal perfect maar wil wat wreeds uithalen met de 'achtergrond' van de data's



is dit moeilijk te realiseren? een nummer qua aantal (open) events 'onder' het nummer v/d dag?

[Hangloozz]

lijkt me niet...
Je kunt tellen hoeveel events je hebt en die koppelen aan een plaatje die je als cell-background zet.

code:

events.length + ".gif";

toch

En getallen hoger dan 9 samenstellen uit 2 plaatjes... of gewoon ook plaatjes d'rvoor maken

[Verwijderd]

Hangloozz schreef op 07 november 2002 @ 16:38:
lijkt me niet...
Je kunt tellen hoeveel events je hebt en die koppelen aan een plaatje die je als cell-background zet.

code:

events.length + ".gif";

toch

En getallen hoger dan 9 samenstellen uit 2 plaatjes... of gewoon ook plaatjes d'rvoor maken

ik zie me al 100 pics maken nee ik zou dit graag zonder plaatjes willen doen want volgens mij kan ik pics namelijk niet centreren als 'background' en das dan best lullig... en scheelt natuurlijk bandwidth

[Verwijderd]

divjes met dynamisch gegenereerde getallen? hoewel een gifje/png-tje mooier is.

[crisp]

Verwijderd schreef op 07 november 2002 @ 17:36:
divjes met dynamisch gegenereerde getallen? hoewel een gifje/png-tje mooier is.

Dat divje voorzien van transparancy kan toch ook al een mooi effect opleveren denk ik

[Verwijderd]

ik snap niet helemaal wat jullie daarmee bedoelen, echter snap ik wel wat een div is maar niet hoe jullie deze opzet in gedachten hebben als het zo bv zou moeten

<td class="blaat">datum 8</td>

dan moet in de background van deze td het nummertje bevatten...

zouden jullie mischien een voorbeeld kunnen geven?

[Hangloozz]

Verwijderd schreef op 07 november 2002 @ 16:41:
[...]


ik zie me al 100 pics maken nee ik zou dit graag zonder plaatjes willen doen want volgens mij kan ik pics namelijk niet centreren als 'background' en das dan best lullig... en scheelt natuurlijk bandwidth

elke cel heeft toch hetzelfde formaat?
met css kun je het toch centreren?
een gifje van 30x30px kost je toch de kop niet?

maar goed; als het tot 100 kan lopen dan is het minder ja.. wie heeft er trouwens op 1 dag 100 dingen te doen dan en dat ie ze allemaal in een kalender moet kalken

De term GDlib schiet ook nog ff te binnen mar daar kun je geloof ik geen fontsize groter dan 16px aan meegeven...

[Verwijderd]

crisp schreef op 07 november 2002 @ 17:46:
Dat divje voorzien van transparancy kan toch ook al een mooi effect opleveren denk ik

hmm je hebt gelijk dat is eigenlijk best een goed idee

[Verwijderd]

Wat dacht je ervan om een tweede tabel te genereren met die getallen erin? Deze zou je dan achter de andere tabel kunnen plaatsen.

PHP:

<!-- Tabel met afspraken -->
<table style="position:absolute; left:10px; top:10px;">
<tr>
    <td>4</td><td>&nbsp;</td><td>2</td><td>5</td>
</tr>
</table>

<!-- Tabel met dag-nummers -->
<table style="position:absolute; left:10px; top:10px;">
<tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</table>

[Verwijderd]

Ik begrijp niet helemaal wat je bedoeld?... ik heb dit stukje getest maar dan krijg ik niet echt een 'mooi' resultaat

[Verwijderd]

even een mini vraagje is het ook mogelijk om die left/top ook te basseeeren op de cell zelf ipv het scherm...

[Hangloozz]

nah, ik had nix te doen moest eigenlijk wat anders doen waar ik geen zin in had dus ik heb ff een demo in elkaar gefietst van hoe ik het op zou lossen

klikerdekliketieklik

elke dag waar geen events zijn is het plaatje event_0 (transp. lege gif) op de dagen dat er wel wat te doen is een gif met als nummer het aantal events voor die dag
De rest is CSS en wat HTML... in jouw geval gemengd met JS of serverside scripting kun je de dynamiek eenvoudig toevoegen.

[Verwijderd]

ik heb dus het volgende al voor elkaar gekregen

code:

<script>

document.write('<tr>');
for (var n = 0; n < 31; n++){
    document.write('<td width="60" height="60" style="border: dotted">');
    document.write('<div style="position:relative;top:0;left:0;">');
    document.write('<font face="verdana" size="7" color="#cccccc"><center>'+n+'</center></font>');
    document.write('<div style="position:absolute;top:24;left:16;"><font face="verdana" size="2"><center><strong>'+(n+1)+'</strong></center></font></div>');
    document.write('</div>')
    document.write('</td>');
    if ((n + 1) % 5 == 0){
      document.write('</tr><tr>');
    }
}
document.write('</tr>');

</script>

output





alleen nu zit ik nog met het 'center' gedeelte, want ik wil dit ooit eens openstellen en dan is het wel van belang dat de site niet echt teveel onnodige bandwidth trekt... en wat scheelt nu meer 500+ bytes p/plaatje/p/cell of max 100chars per cell

[Hangloozz]

Verwijderd schreef op 07 november 2002 @ 22:46:

alleen nu zit ik nog met het 'center' gedeelte, want ik wil dit ooit eens openstellen en dan is het wel van belang dat de site niet echt teveel onnodige bandwidth trekt... en wat scheelt nu meer 500+ bytes p/plaatje/p/cell of max 100chars per cell

op zich is het zo best kien; alleen een stukkie script naar de gebruiker sturen en daarna de pc van de gebruiker inzetten om het rekenwerk te doen

je zult dan voor die events bijv. een array aan moeten maken waar de events per dag in staan.

code:

events = new Array("0","0","2",.enz);

[Verwijderd]

Hangloozz schreef op 07 november 2002 @ 23:07:
[...]


op zich is het zo best kien; alleen een stukkie script naar de gebruiker sturen en daarna de pc van de gebruiker inzetten om het rekenwerk te doen

je zult dan voor die events bijv. een array aan moeten maken waar de events per dag in staan.

code:

events = new Array("0","0","2",.enz);

by the weg; is dit over mijn scriptje, of over die van jou... grin

en als je het wel over mijn scriptje had, hoe bedoel je dat over die array's... de 'events' het is inderdaad wel een idee om een array te maken voor bv de event namen en dan blijvend in de cell wel gewoon het nummer v/d dag en het aantal events te displayen op de 'achtergrond'

[Hangloozz]

purcies en dat kun je doen door middel van zo'n array:

HTML:

events = new Array( '1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'); 


document.write('<tr>');
for (var n = 0; n < events.length; n++){
    document.write('<td width="60" height="60" style="border: dotted">');
    document.write('<div style="position:relative;top:0;left:0;">');
    document.write('<font face="verdana" size="7" color="#cccccc"><center>' + events[n] + '</center></font>');
    document.write('<div style="position:absolute;top:24;left:16;"><font face="verdana" size="2"><center><strong>'+(n+1)+'</strong></center></font></div>');
    document.write('</div>')
    document.write('</td>');
    if ((n + 1) % 5 == 0){
      document.write('</tr><tr>');
    }
}
document.write('</tr>');

</script>

je moet dus dan in die array per plaats aangeven wat de hoeveelheid events is, ik heb nu bij wijze van voorbeeld ook gewoon 1 t/m 31 genomen.

_{scusa mio voor de layout opfok}

[Verwijderd]

ziet er idd ook erg stylie uit

ik heb nu dit en post morgen de code wel ergens