gebruik doctype conflict javascript
Zie de link:
Voorbeeld
Op dit enkele document is gelukt wat ik wilde bereiken dmv javascript.
Ik wil dat a.d.h.v. de container div de maten worden gewijzigd van img#map en div#mapholder.
Wat ik wil bereiken is het volgende:
* Een afbeelding wordt beeldvullend in beeld gebracht.
* Hierover wil ik een div plaatsen, met de zelfde maat als de afbeelding.
* In deze div komen punten te staan welke iets moeten activeren.
* Omdat niet elk beeldscherm even groot is wil ik dus dat de maten van de div hierop aangepast worden. Zodat de punten ook op de juiste plek op de kaart worden weergegeven.
* De gebruiker zelf kan straks zelf nieuwe plaatsen toewijzen etc. En punten verwijderen, dus ik wil de punten niet vast als een afbeelding maken.
Bij voorbeeld werkt het allemaal naar wens.
Maar zodra ik !Doctype etc. ga invoegen in de head sectie, werkt het niet meer. De sommetjes worden wel gedaan, maar de maat van #mapholder wordt niet meer aangepast.
Iemand een idee?
Bij voorbaat dank,
met vriendelijke groet,
Wouter
Gewijzigd op 10/08/2012 11:01:55 door Wouter H
Zo werkt het; ook met doctype.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function showDims() {
var mydiv = document.getElementById('container');
var img = document.getElementById('map');
var width = img.clientWidth;
var height = img.clientHeight;
var ratio = width / height ;
var divwidth = mydiv.scrollHeight * ratio ;
var divratio = divwidth / mydiv.scrollHeight ;
var divwidth = Math.round(divwidth)
var d = document.getElementById('mapholder');
d.style.width = divwidth + 'px';
d.style.height = mydiv.scrollHeight + 'px';
img.style.width = divwidth + 'px';
img.style.height = mydiv.scrollHeight + 'px';
}
var mydiv = document.getElementById('container');
var img = document.getElementById('map');
var width = img.clientWidth;
var height = img.clientHeight;
var ratio = width / height ;
var divwidth = mydiv.scrollHeight * ratio ;
var divratio = divwidth / mydiv.scrollHeight ;
var divwidth = Math.round(divwidth)
var d = document.getElementById('mapholder');
d.style.width = divwidth + 'px';
d.style.height = mydiv.scrollHeight + 'px';
img.style.width = divwidth + 'px';
img.style.height = mydiv.scrollHeight + 'px';
}