redesign

Started by maurice0811, February 10, 2018, 09:29:03 PM

Print
Go Down Pages1
User actions

maurice0811

February 10, 2018, 09:29:03 PM
Hello peoples,

I am using a old design to calculate the taxi fare (see script under here).

Code Select

[sub]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>ADL Taxi ritprijs bereken module</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Bereken uw ritprijs">
<meta name="keywords" content="afstand, berekening, kosten, twee, plaatsen, postcode, tabel, distance, calculation, adltaxi">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQ IAAAAnuJR4LRoDzUr6UAzMKz5qhSST5iocg_mE_TutLwEIp8h7 JhN4RTp8mZ_GDWg-LQtzI9 Z-vrKrKZR5A" type="text/javascript"></script>
<script type="text/javascript">
function initialize()
{
if (GBrowserIsCompatible())
{
// new object WITHOUT parameters, because we do not want to show a written route AND a folder....
// http://code.google.com/apis/maps/doc...ml#GDirections
gdir = new GDirections();
GEvent.addListener(gdir,"load", set_distance);
}
}

function setDirections(fromAddress, toAddress, locale)
{
// http://code.google.com/apis/maps/doc...ectionsOptions
gdir.load("from: " + fromAddress + " to: " + toAddress, {locale: locale, travelMode:G_TRAVEL_MODE_DRIVING,avoidHighways: false} );
}

function set_distance()
{
// extra: foutafhandeling, kan handig zijn!!!
handleErrors();
// document.getElementById("afstand").innerHTML = (gdir.getDistance().meters);

var adl_afstand = gdir.getDistance().meters

var prijsOnafgerond = (((adl_afstand/1000)-2)*2.2)+7.5

prijs = Math.round(prijsOnafgerond + 0.5)



prijsEuro = 'De geschatte ritprijs is: ? ' + prijs.toFixed(2)

document.getElementById("ritprijs").innerHTML = prijsEuro;
}

// aantal kilometers - 2 *2.2+7.5= prijs

function handleErrors()
{
// http://code.google.com/apis/maps/doc...GGeoStatusCode
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY || gdir.getStatus().code == G_GEO_MISSING_ADDRESS)
alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_UNAVAILABLE_ADDRESS)
alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_UNKNOWN_DIRECTIONS)
alert("The GDirections object could not compute directions between the points mentioned in the query. This is usually because there is no route available between the two points, or because we do not have data for routing in that region.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_TOO_MANY_QUERIES)
alert("The given key has gone over the requests limit in the 24 hour period or has submitted too many requests in too short a period of time.\n Error code: " + gdir.getStatus().code);
}

</script>

<style type="text/css">
body {
background-color: #5f5f5f;
color: #fff;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
line-height: 18px;

}

#rittabel {
border:
}

#ritprijs {
font-weight: bold;
font-size: 14px;
color: #fff;
}

#euro {
text-align: right;
font-size: 13px;
}
#tableprijs {
padding-top: 15px;
}
#rights {
font-size: 9px;
color: #ccc;
}
h1 {
font-size: 16px;
font-weight: bold;
}

</style>

</head>
<body onload="initialize()" onunload="GUnload()">
<form action="#" onsubmit="setDirections(this.from.value, this.to.value, 'nl'); return false">
<table id="rittabel" cellspacing="5" cellpadding="5">
<tr>
<td colspan="2">
<h1> ritprijs berekenen</h1>
</td>
</tr>

<tr>
<td colspan="2">
Via het onderstaande formulier kunt u berekenen wat de taxirit ongeveer gaat kosten. Deze prijs is gebaseerd op een luxe voertuig met 4 zitplaaten.Voor busvervoer gelden andere tarieven.
</td>
</tr>
<tr>
<td colspan="2" style="height: 20px;">
</td>
</tr>
<tr>
<td>Voer uw postcode, adres of plaats van vertrek in: &nbsp;</td>

<td valign="top"><input type="text" size="30" id="fromAddress" name="from" value="Leeuwendalersweg, Amsterdam" onblur="if(this.value=='') this.value='Leeuwendalersweg, Amsterdam';" onFocus="if(this.value=='bijv.: Leeuwendalersweg, Amsterdam') this.value='';"/></td>
</tr>
<tr>
<td colspan="2" style="height: 20px;">
</td>
</tr>
<tr>
<td>Voer uw postcode, adres of plaats van aankomst in:&nbsp;</td>
<td valign="top"><input type="text" size="30" id="toAddress" name="to" value="bijv.: 1061 BH, 103" onblur="if(this.value=='') this.value='bijv.: Schiphol';" onFocus="if(this.value=='bijv.: 1061 BH, 103') this.value='';"/></td>
</tr>
<tr>

<td>&nbsp;</td>
<td><input tabindex="1" name="submit" type="submit" value="Bereken ritprijs!" /></td>
</tr>
<tr>
<td colspan="2" style="height: 20px;">
<table border="0" width="100%" id="tableprijs">
<tr>
<td><div id="ritprijs"></div></td>
</tr>
<tr>

<td id="rights">Aan deze prijsschatting kunnen geen rechten worden ontleend.</td>
</tr>
</table>
</td>
</tr>
</table>
</form>

All works fine but want to upgrade it a bit so it is more usable for HTML5  and can use it in a responsive website.
I usually work with free templates, know how that works but unfortunately dont know much about forms and scripts.

I like to implement googlemap in te script so the route in shown and also make it when people type the adress, it gives adress suggestion.
And finaly have the inputboxes rounded so it looks more nice.

I hope somebody can help me with that

Many thank in advance

HostechSupport

#1
March 03, 2018, 03:02:07 AM
Hello maurice0811,
       Gone through your website details, seems like you want to fully upgarde your website. Can you provide your website URL so that it can be inspected more closely?

Davidsmith0143

#2
May 03, 2018, 02:52:14 AM
The redesign means design again or in a different way. The act or process of changing the way something looks is made or works.
Print
Go Up Pages1
User actions