Error in html ontwerp
ik heb op mijn pagina http://tinyurl.com/mxgu25v een error
Wanneer je een route intypt en op bereken route klikt dan wordt de route weergeven maar 90% kun je niet zien hoe kan ik dit het best oplossen ?
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<h3>Routeplanner</h3>
<div id="map_canvas"></div>
<form action="/routebeschrijving" onSubmit="calcRoute();return false;" id="routeForm">
<input type="text" id="routeStart" value="">
<input type="submit" value="Bereken route">
</form>
<div id="directionsPanel">
Voer een bestemming in en klik op "Bereken route".
</div>
<div id="map_canvas"></div>
<form action="/routebeschrijving" onSubmit="calcRoute();return false;" id="routeForm">
<input type="text" id="routeStart" value="">
<input type="submit" value="Bereken route">
</form>
<div id="directionsPanel">
Voer een bestemming in en klik op "Bereken route".
</div>
Gewijzigd op 29/07/2014 23:56:16 door Jaimy A
Of, nog beter, een puur html/css manier vinden om dat hoogte probleem op te lossen. Erg mooi is deze oplossing namelijk niet.
P.S. je weet trouwens ook dat je de routeplanner van Google de route ook in het Nederlands kan laten tonen? Ik krijg het namelijk in het Engels, terwijl je hele site verder in het Nederlands is.
Gewijzigd op 29/07/2014 23:26:25 door Erwin H
Code (php)
1
<body onload="new ElementMaxHeight(); initialize();">
Euhm google maps wordt volledig in het nederlands weergeven, als iemand anders dit ook in het engels ziet had ik dit graag geweten ^^
- Aar -:
Het is onnodig om de voorgaande post te quoten. Quote daarom verwijderd.
Gewijzigd op 30/07/2014 00:22:22 door - Ariën -
Toevoeging op 30/07/2014 00:30:00:
PS. en inderdaad, niet bij de sigarenboer getest, maar hier wel. Als ik mijn browser op turks zet, dan krijg ik een routebeschrijving waar ik geen touw aan vast kan knopen....
<body onload="new ElementMaxHeight();
opnieuw laden?
Code (php)
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
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
function calcRoute() {
var start = document.getElementById("routeStart").value;
var end = "51.100899,4.415780";
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
if (status == 'ZERO_RESULTS') {
alert('No route could be found between the origin and destination.');
} else if (status == 'UNKNOWN_ERROR') {
alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
} else if (status == 'REQUEST_DENIED') {
alert('This webpage is not allowed to use the directions service.');
} else if (status == 'OVER_QUERY_LIMIT') {
alert('The webpage has gone over the requests limit in too short a period of time.');
} else if (status == 'NOT_FOUND') {
alert('At least one of the origin, destination, or waypoints could not be geocoded.');
} else if (status == 'INVALID_REQUEST') {
alert('The DirectionsRequest provided was invalid.');
} else {
alert("There was an unknown error in your request. Requeststatus: \n\n"+status);
}
}
});
}
var start = document.getElementById("routeStart").value;
var end = "51.100899,4.415780";
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
if (status == 'ZERO_RESULTS') {
alert('No route could be found between the origin and destination.');
} else if (status == 'UNKNOWN_ERROR') {
alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
} else if (status == 'REQUEST_DENIED') {
alert('This webpage is not allowed to use the directions service.');
} else if (status == 'OVER_QUERY_LIMIT') {
alert('The webpage has gone over the requests limit in too short a period of time.');
} else if (status == 'NOT_FOUND') {
alert('At least one of the origin, destination, or waypoints could not be geocoded.');
} else if (status == 'INVALID_REQUEST') {
alert('The DirectionsRequest provided was invalid.');
} else {
alert("There was an unknown error in your request. Requeststatus: \n\n"+status);
}
}
});
}
Code (php)
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
var ElementMaxHeight = function() {
this.initialize.apply(this, arguments);
}
ElementMaxHeight.prototype = {
initialize: function(className) {
this.elements = document.getElementsByClassName(className || 'maxheight');
this.textElement = document.createElement('span');
this.textElement.appendChild(document.createTextNode('A'));
this.textElement.style.display = 'block';
this.textElement.style.position = 'absolute';
this.textElement.style.fontSize = '1em';
this.textElement.style.top = '-1000px';
this.textElement.style.left = '-1000px';
document.body.appendChild(this.textElement);
this.textElementHeight = document.getDimensions(this.textElement).height;
var __object = this;
var __checkFontSize = this.checkFontSize;
this.checkFontSizeInterval = window.setInterval(function() {return __checkFontSize.apply(__object)}, 500);
this.expand();
// Refresh elements height onResize event
var __expand = this.expand;
if (window.addEventListener) {
window.addEventListener('resize', function(event) {return __expand.apply(__object, [( event || window.event)])}, false);
} else if (window.attachEvent) {
window.attachEvent('onresize', function(event) {return __expand.apply(__object, [( event || window.event)])});
}
},
expand: function() {
this.reset();
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style.height = document.getDimensions(this.elements[i].parentNode).height + 'px';
}
},
reset: function() {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style.height = 'auto';
}
},
checkFontSize: function() {
var height = document.getDimensions(this.textElement).height;
if(this.textElementHeight != height) {
this.textElementHeight = height;
this.expand();
}
}
}
if (!!document.evaluate) {
document._getElementsByXPath = function(expression, parentElement) {
var results = [];
var query = document.evaluate(expression, parentElement || document,
null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0, length = query.snapshotLength; i < length; i++)
results.push(query.snapshotItem(i));
return results;
}
}
document.getElementsByClassName = function(className, parentElement) {
if (!!document.evaluate) {
var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
return document._getElementsByXPath(q, parentElement);
} else {
var children = (parentElement || document.body).getElementsByTagName('*');
var elements = [], child;
for (var i = 0, length = children.length; i < length; i++) {
child = children[i];
if (child.className.length != 0 &&
(child.className == className ||
child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))) {
elements.push(child);
}
}
return elements;
}
}
document.getDimensions = function (element) {
var display = element.style.display;
if (display != 'none' && display != null) { // Safari bug
return {width: element.offsetWidth, height: element.offsetHeight};
}
return {width: originalWidth, height: originalHeight};
var jswidth = screen.width;
}
this.initialize.apply(this, arguments);
}
ElementMaxHeight.prototype = {
initialize: function(className) {
this.elements = document.getElementsByClassName(className || 'maxheight');
this.textElement = document.createElement('span');
this.textElement.appendChild(document.createTextNode('A'));
this.textElement.style.display = 'block';
this.textElement.style.position = 'absolute';
this.textElement.style.fontSize = '1em';
this.textElement.style.top = '-1000px';
this.textElement.style.left = '-1000px';
document.body.appendChild(this.textElement);
this.textElementHeight = document.getDimensions(this.textElement).height;
var __object = this;
var __checkFontSize = this.checkFontSize;
this.checkFontSizeInterval = window.setInterval(function() {return __checkFontSize.apply(__object)}, 500);
this.expand();
// Refresh elements height onResize event
var __expand = this.expand;
if (window.addEventListener) {
window.addEventListener('resize', function(event) {return __expand.apply(__object, [( event || window.event)])}, false);
} else if (window.attachEvent) {
window.attachEvent('onresize', function(event) {return __expand.apply(__object, [( event || window.event)])});
}
},
expand: function() {
this.reset();
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style.height = document.getDimensions(this.elements[i].parentNode).height + 'px';
}
},
reset: function() {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style.height = 'auto';
}
},
checkFontSize: function() {
var height = document.getDimensions(this.textElement).height;
if(this.textElementHeight != height) {
this.textElementHeight = height;
this.expand();
}
}
}
if (!!document.evaluate) {
document._getElementsByXPath = function(expression, parentElement) {
var results = [];
var query = document.evaluate(expression, parentElement || document,
null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0, length = query.snapshotLength; i < length; i++)
results.push(query.snapshotItem(i));
return results;
}
}
document.getElementsByClassName = function(className, parentElement) {
if (!!document.evaluate) {
var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
return document._getElementsByXPath(q, parentElement);
} else {
var children = (parentElement || document.body).getElementsByTagName('*');
var elements = [], child;
for (var i = 0, length = children.length; i < length; i++) {
child = children[i];
if (child.className.length != 0 &&
(child.className == className ||
child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))) {
elements.push(child);
}
}
return elements;
}
}
document.getDimensions = function (element) {
var display = element.style.display;
if (display != 'none' && display != null) { // Safari bug
return {width: element.offsetWidth, height: element.offsetHeight};
}
return {width: originalWidth, height: originalHeight};
var jswidth = screen.width;
}
Oplossing 1: auteur vragen
Oplossing 2: hele boel weggooien en een oplossing in css/html maken, zoals het hoort