[HTML]Hoe kan ik deze XP-achtige dingen nabouwen ?

huh ?

Topicstarter

Hoi

(het kan zijn dat deze in SA hoort..)

Op http://msdn.microsoft.com zijn aan de rechterkant van die informatie-in/uitklap-framepjes te zien.. Ik vind deze wel erg stoer en probeerde ze dus er uit te slopen maar dat lukte dus niet. Ik heb ook al proberen te achterhalen hoe ze die dingen in XP hebben gedaan maar kon er ook niet achterkomen...
Afbeeldingslocatie: http://www.ncgq.nl/shades/got/framepjes.gif

Afbeeldingslocatie: http://www.ncgq.nl/shades/got/framepjes.gif

Iemand een idee hoe ik zelf die dingen kan maken ?

zaterdag 13 april 2002 13:28

Acties:

Verwijderd

Bij Flash MX zit een template waarmee dit kan. Misschien dat ik hem straks ff post. Maar zoiets is erg moeilijk te maken.

http://www.eyecatchers-online.com/proef/dynamicMenu.html
Je hebt de Flash 6 player hiervoor nodig.

zaterdag 13 april 2002 13:39

Acties:

Verwijderd

ik zou eens met beehive van onze grote dhtml vriend Clay gaan stoeien: http://www.xs4all.nl/~peterned/

zaterdag 13 april 2002 16:44

Acties:

huh ?

Topicstarter

Op zaterdag 13 april 2002 13:28 schreef Cool_Duck het volgende:
Bij Flash MX zit een template waarmee dit kan. Misschien dat ik hem straks ff post. Maar zoiets is erg moeilijk te maken.

http://www.eyecatchers-online.com/proef/dynamicMenu.html
Je hebt de Flash 6 player hiervoor nodig.

Stoer voorbeeld maar ik wil het in html (dhtml) doen. MS heeft het zo ook gedaan... het kan gewoon niet heel erg moeilijk zijn...

zaterdag 13 april 2002 16:51

Acties:

Verwijderd

gewoon wat div's dynamisch groter/kleiner (of hiden / showen) is niet zo moeilijk.

kijk anders even op m'n sequencesite (zie sig, no spam intended), als je daar commentaar geeft, worden ook div's verplaatst / verkleind / gehide

zaterdag 13 april 2002 17:00

Acties:

smaij

als het net zoals hun moet, dan kijk je toch gewoon in hun broncode en gebruik je het bruikbare

zaterdag 13 april 2002 17:18

Acties:

MisterData

Op zaterdag 13 april 2002 17:00 schreef smaij het volgende:
als het net zoals hun moet, dan kijk je toch gewoon in hun broncode en gebruik je het bruikbare

Dat verhaal gaat niet op voor de brakke code van Microsoft hoor

zaterdag 13 april 2002 17:45

Acties:

Verwijderd

Misschien is Java geschikt om zoiets te maken?

zaterdag 13 april 2002 17:58

Acties:

Blue-eagle

Ik hoor java en flash.. waarom? Het kan veel makkelijker met gewone HTML en een paar scriptjes...

zaterdag 13 april 2002 18:13

Acties:

r0bert

Beetje HTML, beetje CSS > visibility switchen en beetje JS > schuiven..

Beetje van alles gewoon

zaterdag 13 april 2002 18:13

Acties:

smaij

Op zaterdag 13 april 2002 17:18 schreef MisterData het volgende:

[..]

Dat verhaal gaat niet op voor de brakke code van Microsoft hoor

der staat ook.. gebruik het bruikbare... (misschien is dat dus heeeel weinig

)

zaterdag 13 april 2002 19:15

Acties:

Verwijderd

Dit is echt oersimpel. Maak een div aan en zet de display property op block of op none.

document.getElementById('mijnmenu').style.display = 'none';
document.getElementById('mijnmenu').style.display = 'block';

zaterdag 13 april 2002 23:58

Acties:

huh ?

Topicstarter

Op zaterdag 13 april 2002 17:00 schreef smaij het volgende:
als het net zoals hun moet, dan kijk je toch gewoon in hun broncode en gebruik je het bruikbare

Heb je daar wel eens in gekeken ?
Ik kom er niet echt uit.

zondag 14 april 2002 00:01

Acties:

huh ?

Topicstarter

Op zaterdag 13 april 2002 19:15 schreef Gordijnstok het volgende:
Dit is echt oersimpel. Maak een div aan en zet de display property op block of op none.

document.getElementById('mijnmenu').style.display = 'none';
document.getElementById('mijnmenu').style.display = 'block';

ga ik morgen even proberen.
Ik snap wel dat de guru's hier het allemaal 'oersimpel' vinden maar ik ben er nog niet zo in thuis...

zondag 14 april 2002 12:47

Acties:

huh ?

Topicstarter

effe dom testje gedelete..

dit werkt wel:

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<div id='framepje'>
<table border='0' cellpadding='0' cellspacing='0' bgcolor="999999">
<tr><td onclick="javascript:document.getElementById('framepje').style.display = 'none';">Weghalen</td><tr>
<tr><td>item 1</td><tr>
<tr><td>item 2</td><tr>
<tr><td>item 3</td><tr>
<tr><td>item 4</td><tr>
</table>
</div>
</BODY>
</HTML>

Hoe krijg het nu zo dat dat 'weghalen' gedeelte blijft staan.. Wil hem ook weer zichtbaar maken enzo

zondag 14 april 2002 13:57

Acties:

Verwijderd

Op zondag 14 april 2002 12:47 schreef shades het volgende:
Hoe krijg het nu zo dat dat 'weghalen' gedeelte blijft staan.. Wil hem ook weer zichtbaar maken enzo

Dan moet je gebruik maken van een andere div, waar je de link inplaatst.

maandag 15 april 2002 11:12

Acties:

huh ?

Topicstarter

Op zaterdag 13 april 2002 17:58 schreef Blue-eagle het volgende:
Ik hoor java en flash.. waarom? Het kan veel makkelijker met gewone HTML en een paar scriptjes...

P'sies... ik wil dat de code voor ieder te snappen is zodat meerdere mensen dit uit mijn page kunnen jatten....

maandag 15 april 2002 11:27

Acties:

huh ?

Topicstarter

Ik heb even een stukje jscript er in gedaan..
De display = 'none' werkt maar de height dus niet. Een foutmelding krijg ik ook niet.. Kan iemand zeggen waarom het niet werkt ?

Stukje jscript:

code:

<script language='JavaScript1.2'>
  function hideObj(Obj) {
    var divje
    divje = document.getElementById(Obj);
    divje.style.height = 12;
    // divje.style.display = 'none';
  }
</script>

Aangepaste <div>

code:

<BODY>
<div id='framepje'>
<table border='0' cellpadding='0' cellspacing='0' bgcolor="999999">
<tr><td onclick="hideObj('framepje');">Inklappen</td><tr>
<tr><td>item 1</td><tr>
<tr><td>item 2</td><tr>
<tr><td>item 3</td><tr>
<tr><td>item 4</td><tr>
</table>
</div>

maandag 15 april 2002 11:37

Acties:

Verwijderd

Als je hem ook weer wilt openklappen dan maak je die controls gewoon buiten de dicht te klappen layer.

code:

<div id="controls">
<a href="javascript://" OnClick="document.getElementById('content').style.display='none';">Sluiten</a><a href="javascript://" OnClick="document.getElementById('content').style.display='block';">Openen</a>
<div id="content" style="display:block;">
</div>
</div>

maandag 15 april 2002 11:43

Acties:

huh ?

Topicstarter

Op maandag 15 april 2002 11:37 schreef Gordijnstok het volgende:
Als je hem ook weer wilt openklappen dan maak je die controls gewoon buiten de dicht te klappen layer.
code:
1
<Code er even uitgeknipt>

Donders... dat werkt...
Nu alleen nog wat verbeteren en mooi maken

Maar ik weet nu nog steeds niet waarom dat resize niet werkt.. Wil namelijk ook kleuren enzo gaan aanpassen. Doe ik iets structureels fout ?

maandag 15 april 2002 23:46

Acties:

huh ?

Topicstarter

het is me uiteindelijk gelukt.

hier een voorbeeldje wat ik nog uit moet werken.
http://www.ncgq.nl/shades/got/divprobeer.html

Waarschijnlijk zullen de twee functions nog wat aangepast moeten worden en waarschijnlijk kan het nog korter maar vind het al heel wat..

wanneer je de namen van de divjes als frame1, frame2 etc noemt dan kan je de twee functie voor oneindig veel divs gebruiken.. (de inhoud maakt meer duidelijk denk ik)

dinsdag 16 april 2002 00:27

Acties:

Red

Blue

Maar nu wil ik het dus andersom hebben, dat de menu's eerst ingeklapt zijn en na het klikken op Show uitklappen.... Alleen dat krijg ik niet voor mekaar

en ook zou ik er net zoals de topic-starter kleuren in willen verwerken ...

dinsdag 16 april 2002 08:48

Acties:

Verwijderd

Op dinsdag 16 april 2002 00:27 schreef DoRRoN het volgende:
Maar nu wil ik het dus andersom hebben, dat de menu's eerst ingeklapt zijn en na het klikken op Show uitklappen.... Alleen dat krijg ik niet voor mekaar en ook zou ik er net zoals de topic-starter kleuren in willen verwerken ...

code:

1	<body onload="hideObj('1')" >

dinsdag 16 april 2002 12:51

Acties:

huh ?

Topicstarter

Op dinsdag 16 april 2002 08:48 schreef bmx_grover het volgende:

[..]
code:
1
<body onload="hideObj('1')" >

Je kan natuurlijk ook style="display:none; van frame1close naar frame1open verplaatsen...

Als iedereen hier een beetje blij mee is dan zal ik de uitgewerkte versie posten...

dinsdag 16 april 2002 12:58

Acties:

huh ?

Topicstarter

Op dinsdag 16 april 2002 00:27 schreef DoRRoN het volgende:
Maar nu wil ik het dus andersom hebben, dat de menu's eerst ingeklapt zijn en na het klikken op Show uitklappen.... Alleen dat krijg ik niet voor mekaar en ook zou ik er net zoals de topic-starter kleuren in willen verwerken ...

Als je de bron-code bekijkt zie je dat id=frame1 uit twee tabellen bestaat die door een onclick binnen frame1open en frame1close wel of niet te zien zijn.. De tabel kan je kleur meegeven of desgewenst een style via een css-tje, In fact. het maakt niets uit wat er tussen de div frame1open en frame1close staat zolang je maar de onClick's er in laat staan..

Het zou best kunnen dat er een simpelere manier of iets dat je ook kan drag/droppen zoals op de M$-site maar zover gaat mijn kennis niet (als je daar al van mag spreken

)

dinsdag 16 april 2002 22:18

Acties:

huh ?

Topicstarter

http://www.ncgq.nl/shades/got/klapframes/klapframes.html

in http://www.ncgq.nl/shades/got/klapframes vind je de files. ik ga er vanuit dat ik meer 'themes' ga maken dus heb ik een apart mapje daarvoor gemaakt..

woensdag 17 april 2002 13:35

Acties:

Verwijderd

ik zou even de muispointer aanpassen als je over die show en hide gaat, is wel zo duidelijk

woensdag 17 april 2002 14:39

Acties:

huh ?

Topicstarter

Op woensdag 17 april 2002 13:35 schreef mophor het volgende:
ik zou even de muispointer aanpassen als je over die show en hide gaat, is wel zo duidelijk

Ja.. Ik moet nog veel meer regelen.. Ben ook absoluut beginnend met jscript en (d)html.. Vind zelf dat al aardig op weg ben

woensdag 17 april 2002 14:56

Acties:

woensdag 17 april 2002 16:05

« - _ - »

Waarom maak je niet een object van die XP-achtige informatie boxjes, zoals bv:

code:

function XPLikeInfoBox(a, b) {
     this.headertext = a;
     this.maininfo = b;
}

XPLikeInfoBox.prototype.WriteOutput = function() {
//Hier dan je document.write, etc etc...
}

Acties:

Verwijderd

FYI: die menuutjes op http://msdn.microsoft.com/ zijn ook nog versleepbaar, nice.

woensdag 17 april 2002 20:01

Acties:

huh ?

Topicstarter

Op woensdag 17 april 2002 14:56 schreef Woudloper het volgende:
Waarom maak je niet een object van die XP-achtige informatie boxjes, zoals bv:
code:
1
2
3
4
5
6
7
8
function XPLikeInfoBox(a, b) {
     this.headertext = a;
     this.maininfo = b;
}

XPLikeInfoBox.prototype.WriteOutput = function() {
//Hier dan je document.write, etc etc...
}

Ahhh een meedenker

Ik ga het gelijk proberen....

edit:
Euh, ik snap het niet

Hoe krijg ik nu dat ding op mijn beeld ?

Op woensdag 17 april 2002 16:05 schreef Anchorman het volgende:
FYI: die menuutjes op http://msdn.microsoft.com/ zijn ook nog versleepbaar, nice.

Ja dat weet ik maar zover wil ik niet gaan (lees: geen verstand van..)

donderdag 18 april 2002 09:23

Acties:

donderdag 18 april 2002 12:57

« - _ - »

shades:
Euh, ik snap het niet
Hoe krijg ik nu dat ding op mijn beeld ?

Wellicht kan je gebruik gaan maken van Beehive, dit is een DHTML API welke op zich vrij eenvoudig werkt...

Als je dan naar een paar van zijn voorbeelden kijkt snap je zo wat er gedaan moet worden.

Je kan het dan naar mijn idee als volgt aanpakken:

code:

<script type="text/javascript" src="src\beehive.js">
<script type="text/javascript">
   var boxWidth     = 250; //Standaardbreedte
   var boxHeight     = 350; //Standaardhoogte
   var XPMenus       = [];  //Array voor de menuutjes...

function init() {
   new XPMenu(0, 'Menu #1', 'Dit is de content voor het menuutje');
   //etc.. etc...
}

function XPMenu(id, header, content) {
   this.id   = id;
   this.header   = header;
   this.content = content;

   this.build();
}

xpmenuproto = XPMenu.prototype;
xpmenuproto.build = MenuBuild;

   function MenuBuild() {
     with(this.lyr = new dynObject('xpbox' + this.id, 'canvas')) {
      //Hier kan je dan meerder properties zetten...
      //o.a. de breedte, hoogte...
     }
     XPMenus[this.id] = this;
   }

Het is maar een opzetje, voor een implementatie van de beehive code moet je eens kijken in dit ([topic=381358] heeft daar een menuutje o.b.v. beehive gemaakt....

waar je bij bovenstaand nog bij moet nadenken is het scheiden van de header en de content, hiervoor moet je maar even de sources bekijken van papa_eend en anders even een vraagje stellen aan Clay...

_{Let wel op dat Clay een druk bezet iemand is en ik weet niet hoeveel vrije tijd hij op dit moment heeft...}

Acties:

Verwijderd

Als je het helemaal professioneel wil aanpakken kijk eens op deze site. Erg cool

http://webfx.eae.net/

donderdag 18 april 2002 12:59

Acties:

SchizoDuckie

Kwaak

Moment, ik zal ff kijken of ik dat menu nog ergens heb...

[edit]

Found it

[edit again]
link removed due to buggy code

Stop uploading passwords to Github!

donderdag 18 april 2002 13:38

Acties:

donderdag 18 april 2002 13:52

« - _ - »

papa_eend: link removed due to buggy code

Gelukkig staat (link naar) de code nog in het bericht waar ik aan refereer

Acties:

SchizoDuckie

Kwaak

Op donderdag 18 april 2002 13:38 schreef Woudloper het volgende:

[..]

Gelukkig staat (link naar) de code nog in het bericht waar ik aan refereer

Okee, toch maar ff een bughuntje gedaan naar waarom dat menu niet wou opbouwen (found) dit is namelijk een brakke versie, ik heb thuis ergens een versie die bijna 'af' is.

http://www.nvlf.nl/beehive/
(open/dichtklappen werkt nu maar 1x, maar u probably get the point

)

Stop uploading passwords to Github!

donderdag 18 april 2002 17:08

Acties:

huh ?

Topicstarter

het wordt me allemaal even te veel geloof ik... zie door bomen het bos niet meer.. toch even dat bhive neergeladen.. jammer dat er geen docs bijzitten...

Wil gewoon een uitklap dingetje

http://webfx.eae.net/ is trouwens wel behoorlijk stoer ja... die lui gebruiken span ipv div, zit daar nog verschil tussen ?

edit: aahhh http://webfx.eae.net/webboard/ STOER !! Maar goed, dat weten jullie allang natuurlijk

donderdag 18 april 2002 18:01

Acties:

Verwijderd

Op maandag 15 april 2002 23:46 schreef shades het volgende:
het is me uiteindelijk gelukt.

hier een voorbeeldje wat ik nog uit moet werken.
http://www.ncgq.nl/shades/got/divprobeer.html

Waarschijnlijk zullen de twee functions nog wat aangepast moeten worden en waarschijnlijk kan het nog korter maar vind het al heel wat..

wanneer je de namen van de divjes als frame1, frame2 etc noemt dan kan je de twee functie voor oneindig veel divs gebruiken.. (de inhoud maakt meer duidelijk denk ik)

heb je ook enig idee hoe je er dan voor kan zorgen dat ze "dicht" zijn als je erop komt en ze later uit kan klappen?

TNX

donderdag 18 april 2002 18:51

Acties:

paragon

Op woensdag 17 april 2002 16:05 schreef Anchorman het volgende:
FYI: die menuutjes op http://msdn.microsoft.com/ zijn ook nog versleepbaar, nice.

Even topic doorlezen!

maandag 22 april 2002 09:12

Acties: