Error in html ontwerp

Door Jaimy A op 29-07-2014 22:30 gewijzigd op 29-07-2014 23:56

1.430 views

hey ,

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 ?

<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>

Erwin H

29-07-2014 23:12 gewijzigd op 29-07-2014 23:26

Dat ligt zo te zien niet aan je html, maar aan een javascript toepassing. Er wordt een maximale hoogte aan een paar divs gegeven. Die maximale hoogte wordt wel aangepast indien de browser van afmetingen verandert, maar niet als er op de knop geklikt wordt om de route te berekenen. Bereken maar eens de route en verander dan hoogte van je browser eens, dan is de hele route opeens wel te zien. Je zal dus die functie die de hoogte bepaalt moeten aanroepen op het moment dat je de route hebt berekent.

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.

Jaimy A

29-07-2014 23:59 gewijzigd op 30-07-2014 00:22

Geweldig idd wanneer je het scherm verkleint en dan terug vergroot is de routeplanning er wel :D dus moet ik eens kijken naar mijn javascript of ik deze ook kan laten vernieuwen. waarschijnlijk zit het hier in ElementMaxHeight

<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 ^^

Erwin H

30-07-2014 00:26

Nee, in jouw browser komt het in het Nederlands, omdat je dat blijkbaar in je browser hebt staan. Google gebruikt de instellingen van de browser om te bepalen welk taal er gebruikt moet worden, tenzij je dat overruled. Als ik dus op een gedeelde pc van de sigarenboer hier op de hoek je pagina open dan kan het maar zo in het Turks komen..... Geef je als taal Nederlands op dan weet je zeker dat het in het Nederlands komt.

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....

Jaimy A

30-07-2014 10:12

Dit is het gedeelte dat mijn route berekend hoe kan ik het best mijn
<body onload="new ElementMaxHeight();
opnieuw laden?

	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);
				}
			}
		});
	}

Erwin H

30-07-2014 10:34

Dan moet je even kijken of er een methode aanwezig is in dat object ElementMaxHeight dat het mogelijk maakt om de herberekening te forceren.

Jaimy A

30-07-2014 12:59

Dit is de function dat de resize doet wat heb ik allemaal juist nodig?

    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;


    }

Erwin H

30-07-2014 14:12

Geen idee. Aangezien het weer zo'n prachtig stuk proza is zonder commentaar.
Oplossing 1: auteur vragen
Oplossing 2: hele boel weggooien en een oplossing in css/html maken, zoals het hoort

Reageren

Inloggen om te reageren