[javascript?] Uitzoomen van een div binnen een pagina

[Verwijderd]

Ik ben bezig met een applicatie waarbij de gebruiker dynamisch een diagram op kan bouwen. Deze diagram wordt opgebouwd binnen een div en kan erg groot worden. Om de gebruiker toch goed overzicht te laten houden wil ik de mogelijkheid bieden om het diagram uit (en weer in) te zoomen.

Ik probeer nu onderstaande maar dat werkt niet. Er gebeurt hier helemaal niets. Wat ik uiteindelijk wil bereiken is dat bij iedere klik de inhoud van de div 10% uit zoomt (lijnen, text, afbeeldingen)

code:

var fontsize = 1

function ButtonClickFont(i){
    if (i<3){
        i++;
    }else{
        i=0;
    }
    fontsize = i;
    ChangeFontSize(i)
}

function ChangeFontSize(i){
    var size = 0;
    var p = document.getElementById('eendiv');
    
    switch (i) {
        case 0: size = '0.9em'; break;
        case 1: size = '1.1em'; break;
        case 2: size = '1.5em'; break;
        case 3: size = '2.0em';
    }
    
    for(j=0;j<p.length;j++) {
        p[j].style.fontSize = size;
    }
}

Ben al een hele dag aan het googelen maar kom niet tot een goede oplossing. De google maps zoom is ongeveer wat ik wil bereiken maar dan dus op een div.

Iets waar ik ook mee wil experimenteren is een bird-eye view. Een klein dialoog op je scherm met een mini afdruk van je div. Zodra je binnen dit dialoog navigeert gaat de "parent" div mee. www.mind42.com heeft deze functionaliteit (moet je wel eerst voor inloggen). Zoeken op bird-eye (oid) in google geeft geen resultaat. Vermoedelijk gebruik ik de verkeerde zoekterm maar waar zou ik dan op moeten zoeken?

[RobIII]

Verwijderd schreef op woensdag 26 augustus 2009 @ 14:20:
www.mind42.com heeft deze functionaliteit (moet je wel eerst voor inloggen).

offtopic:
Nee hoor

[Verwijderd]

RobIII schreef op woensdag 26 augustus 2009 @ 15:13:
[...]

offtopic:
Nee hoor

Inderdaad, niet aan gedacht... Mooie functionaliteit maar kan er op het web niets van vinden over hoe ze dat doen.... In diezelfde site zit trouwens ook de zoom functionaliteit zoals ik die zoek (met een slider). Erg mooi.

[Verwijderd]

Zoek nog even verder maar volgens mij moet ik met de in en uit zoom een aardig eind komen met:

code:

onclick="eendiv.style.zoom='50%'"

Moet wel zien dat ik dit toepas op alle individuele elementen binnen de div.

[ Voor 29% gewijzigd door Verwijderd op 26-08-2009 15:38 ]

[evaarties]

als je gebruik maakt van prototype, dan zou je dit kunnen doen:

JavaScript:

function zoom(zoomin)
{
  var minimum = 0.5;
  var dediv = $("dediv");
  var huidig = dediv.getStyle("font-size");
  //bepaal huidige zoom
  var zoom = huidig/1;
  if (zoomin)
  {
    var nieuwezoom = 1 + zoom + 0.1;
  }
  else
  {
    var nieuwezoom = 1 - zoom - 0.1;
  }

  // Minimum bereikt?
  if (nieuwezoom < minimum) {
    nieuwezoom = minimum;
  }
  dediv.setStyle("font-size", nieuwezoom + 'em')

}

[Verwijderd]

evaarties schreef op woensdag 26 augustus 2009 @ 21:41:
als je gebruik maakt van prototype, dan zou je dit kunnen doen:

JavaScript:

function zoom(zoomin)
{
  var minimum = 0.5;
  var dediv = $("dediv");
  var huidig = dediv.getStyle("font-size");
  //bepaal huidige zoom
  var zoom = huidig/1;
  if (zoomin)
  {
    var nieuwezoom = 1 + zoom + 0.1;
  }
  else
  {
    var nieuwezoom = 1 - zoom - 0.1;
  }

  // Minimum bereikt?
  if (nieuwezoom < minimum) {
    nieuwezoom = minimum;
  }
  dediv.setStyle("font-size", nieuwezoom + 'em')

}

Ik ga het bekijken. Maak zelf gebruik van Jquery, kijken of dat elkaar niet bijt.

[Mike2k]

Uiteraard kan je deze code ook omkatten naar jquery...die kan namelijk ook de font-size aanpassen zonder al te veel moeite...

Het rekenwerk is namelijk hetzelfde...je moet alleen de manier van het aanpassen van de div wijzigen...

[ Voor 29% gewijzigd door Mike2k op 26-08-2009 22:58 ]

[Verwijderd]

Ik neem aan dat ik er alléén met het aanpassen van de font size niet ben? Images etc zullen ook moeten.

[Mike2k]

Google maps laad elke keer nieuwe plaatjes bij het in en uitzoomen...dat zul jij ook moeten doen.

[Bosmonster]

Wat Google maps doet is wel een beetje overkill denk ik.

Is het geen optie om hier iets als Flash (of als je er bekend mee bent iets als svg/canvas) te gebruiken? Dan kun je namelijk gewoon vectoren hanteren en is zoomen ineens een eitje.

Als alternatieve versie kun je dan altijd nog een afbeelding (of semantische boomstructuur) hanteren van hetzelfde schema.

[ Voor 20% gewijzigd door Bosmonster op 27-08-2009 09:56 ]

[Verwijderd]

Bosmonster schreef op donderdag 27 augustus 2009 @ 09:55:
Wat Google maps doet is wel een beetje overkill denk ik.

Is het geen optie om hier iets als Flash (of als je er bekend mee bent iets als svg/canvas) te gebruiken? Dan kun je namelijk gewoon vectoren hanteren en is zoomen ineens een eitje.

Als alternatieve versie kun je dan altijd nog een afbeelding (of semantische boomstructuur) hanteren van hetzelfde schema.

Ik ben er niet echt bekend mee maar zal er eens induiken.

[evaarties]

Wat je ook kunt doen, is in de img tags een width + height neerzetten in "em", die schalen dan ook mee.