Jump to content

dbhynds

Members
  • Content Count

    16
  • Joined

  • Last visited

Posts posted by dbhynds

  1. Hi all, I'm trying to create a page that has several tabs, each with their own unique content. I have my navigation as an inline list, with content divs below it. I created some javascript that, when a nav item is clicked, sets all of the content divs to display:none and sets the corresponding content div to display:block. I tested it across Firefox, Safari, Chrome and IE. It works in all of them except IE. I get the following error: Object doesn't support this property or method. Here is a live example: http://bit.ly/cbktTw Here is the relevant HTML:

    	 <div class="content tab1 left">		 <div class="tabnav">			 <ul>				 <li><a id="link1" class="this"  href="java script:tab('about','link1');">About  Program</a></li>				 <li><a id="link2"  href="java script:tab('students','link2');">Our  Students</a></li>				 <li><a id="link3"  href="java script:tab('apply','link3');">How to  Apply</a></li>				 <li><a id="link4"  href="programpage-info.html">Request More Info</a></li>			 </ul>		 </div>		 <div class="tabContent visible" id="about">			 <div class="visible" id="content1">				 <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Curabitur luctus leo eget tortor ultricies posuere.  Donec tincidunt nulla at enim eleifend nec cursus enim sagittis.  Vestibulum adipiscing porta justo in suscipit. Proin turpis leo, congue  ac consectetur vel, porta eu nisi. Pellentesque at metus quis augue  commodo condimentum. Integer ultricies mauris orci. Proin eget turpis  lectus. Aliquam auctor nulla at urna ultrices eu iaculis nulla semper.  Curabitur ligula mauris, luctus id semper blandit, scelerisque at  nunc.</p>			 </div>		 </div>		 <div class="tabContent hidden" id="students">			 <div class="visible" id="content1">				 <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Curabitur luctus leo eget tortor ultricies posuere.  Donec tincidunt nulla at enim eleifend nec cursus enim sagittis.  Vestibulum adipiscing porta justo in suscipit. Proin turpis leo, congue  ac consectetur vel, porta eu nisi. Pellentesque at metus quis augue  commodo condimentum. Integer ultricies mauris orci. Proin eget turpis  lectus. Aliquam auctor nulla at urna ultrices eu iaculis nulla semper.  Curabitur ligula mauris, luctus id semper blandit, scelerisque at  nunc.</p>			 </div>		 </div>		 <div class="tabContent hidden" id="apply">			 <div class="visible" id="content1">				 <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Curabitur luctus leo eget tortor ultricies posuere.  Donec tincidunt nulla at enim eleifend nec cursus enim sagittis.  Vestibulum adipiscing porta justo in suscipit. Proin turpis leo, congue  ac consectetur vel, porta eu nisi. Pellentesque at metus quis augue  commodo condimentum. Integer ultricies mauris orci. Proin eget turpis  lectus. Aliquam auctor nulla at urna ultrices eu iaculis nulla semper.  Curabitur ligula mauris, luctus id semper blandit, scelerisque at  nunc.</p>			 </div>		 </div>	 </div>

    And here is the relevant java script:

     function tab(acontent,alink) {	 	 link1=document.getElementById("link1");	 link2=document.getElementById("link2");	 link3=document.getElementById("link3");	 link1.className="";	 link2.className="";	 link3.className="";	 	 active1=document.getElementById("about");	 active2=document.getElementById("students");	 active3=document.getElementById("apply");	 active1.className="tabContent hidden";	 active2.className="tabContent hidden";	 active3.className="tabContent hidden";	 		 	 obj=document.getElementById(acontent);	 thislink=document.getElementById(alink);	 obj.className="tabContent visible";	 thislink.className="this";  }

  2. Thanks for the suggestion. I tried it, and it half-way fixed it. It removed the extra space at the bottom, but the extra space at the top is still there. A little more help on it would be greatly appreciated.Unrelated (I think), you'll notice that adbox8 has some issues with the top. Anybody have a guess as to what the problem is here, too?The link again is: http://hyndswebdesign.com/test/page-core.htmlThe code should all be the same except with the font-size: 0px; added in to the CSSThanks!

  3. I'm using CSS to create a drop shadow on a site, and have run into some problems using IE 8 (haven't checked yet on older versions). You can take a look at the page here.Everything is working fine in Firefox. However, IE is adding too much space to the top and bottom of the image... 13 pixels on each side, to be precise.The drop shadow works using images (small gradients) stretched the height of the div. When I use the Developers Tools to check it out, it shows that the CSS correctly designates the size the div should be (img height + 7 for shadow). However, when I take a screenshot of the div selected in Developer Tools, and measure the height in Photoshop, the div is larger than the CSS says, so I know my math isn't off.Here is my HTML:

    <html><head><LINK REL=StyleSheet HREF="style-core.css" TYPE="text/css" MEDIA=screen></head><body><div class="body"><div class="page-holder"><div class="column-4"><div class="adbox8"><img src="images-core/seminars.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox6"><img src="images-core/contact.jpg" /></div><div class="adbox7"><img src="images-core/blog.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox9"><div class="shadow-top"></div><img src="images-core/testimonials.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div><div class="header"><img src="images/header-core.jpg" /></div><div class="nav-holder"><div class="nav-right"><img src="images/nav-right.gif" /></div><div class="nav-left"><img src="images/nav-left.gif" /></div><div class="nav">Navigation</div></div><div class="column-1"><div class="adbox1"><div class="shadow-top"></div><img src="images-core/bio.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox2"><div class="shadow-top"></div><img src="images-core/video.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div><div class="column-2"><div class="adbox3"><div class="shadow-top"></div><img src="images-core/network.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox4"><div class="shadow-top"></div><img src="images-core/resources.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div><div class="column-3"><div class="adbox5"><div class="shadow-top"></div><img src="images-core/programs.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div></div></div></div><div class="footer"><div class="footer-holder"><div class="footer-left">Seaborne Leadership<br />Wendell Seaborne, Ph.D.</div><div class="footer-middle">317.750.2682<br /><a  href="mailto:wendell@seaborneleadership.com">wendell@seaborneleadership.com</a></div><div class="footer-right">PO Box 401<br />Fishers, IN 46038</div></div></div></body></html>

    And here is my CSS:

    /*Theme Name: Seaborne LeadershipTheme URI: [url="http://wordpress.org/"]http://wordpress.org/[/url]Description: Template for Seaborne Leadership.Version: 0.1Author: David HyndsAuthor URI: [url="http://hyndswebdesign.com/"]http://hyndswebdesign.com/[/url]Tags: blue, red, custom header, fixed width, two columns*//*Red: B41F24Blue: 1F53C9Light blue: F1F1F4Grey: 3C3C3C*/* {	margin: 0;	}html {	height: 100%;	}body {	font-size: 68.75%;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	color: #3C3C3C;	text-align: center;	margin: 0px;	width: 100%;	height: 100%;	}.body {	min-height: 100%;	height: auto !important;	height: 100%;	margin: 0 auto -47px;	background: url('images/bg-core.gif') repeat-x;	background-color: #D1DEEB;	}p {	font-size: 1em;	color: #3c3c3c;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	line-height: 1.375em;	margin-top: 1.5em;	margin-bottom: 0px;	}h1 {	font-size: 1.5em;	font-family: "Palatino Linotype", Palatino, "Times New Roman", Serif;	text-transform: uppercase;	color: #3c3c3c;	letter-spacing: 1px;	margin: 0;	}a:active, a:link {	font-size: .6875em	color: #B41F24;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: underline;	}a:hover {	font-size: .6875em	color: #FF0000;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: none;	}a:visited {	font-size: .6875em	color: #1F53C9;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: underline;	}a img {	border: 0px;	}.body-top {	width: auto;	}.header {	height: 185px;	width: 528px;	float: left;	}.nav-holder {	width: 527px;	background: url('images/nav-bg.gif') repeat-x;	background-color: #95BDE6;	float:left;	}.nav {	padding-top: 3px;	text-align: center;	font-weight: bold;	color: #B41F24;	right: 200px;	}.nav a {	font-size: .75em	color: #B41F24;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: none;	font-weight: bold;	}.nav-right {	background-color: #95BDE6;	width: 3px;	height: 22px;	float: right;	background: url('images/nav-right.gif')	}.nav-left {	background-color: #95BDE6;	width: 3px;	height: 22px;	float: left;	background: url('images/nav-left.gif')	}.page-holder {	width: 811px;	margin-left: auto;	margin-right: auto;	overflow: auto;	}.shadow-bottom {	background: url('images/shadow-bottom.gif') repeat-x;	height: 7px;	}.shadow-left {	background: url('images/shadow-left.gif') no-repeat;	width: 7px;	height: 7px;	float: left;	}.shadow-right {	background: url('images/shadow-right.gif') no-repeat;	width: 7px;	height: 7px;	float: right;	}.shadow-top {	background: url('images/shadow-top.gif') no-repeat;	width: 7px;	height: 7px;	float: right;	}.column-1 {	float: left;	}.adbox1 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	width: 144px;	height: 224px;	margin-top: 20px;	text-align: left;	}.adbox2 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	width: 144px;	height: 125px;	margin-top: 13px;	text-align: left;	}.column-2 {	float: left;	margin-left: 13px;	}.adbox3 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	margin-top: 20px;	width: 174px;	height: 99px;	text-align: left;	}.adbox4 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	margin-top: 13px;	width: 174px;	height: 251px;	text-align: left;	}.column-3 {	margin-left: 13px;	float: left;	}.adbox5 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	margin-top: 20px;	width: 190px;	height: 364px;	text-align: left;	}.column-4 {	float: right;	width: 277px;	}.adbox6 {	margin-top: 20px;	width: 135px;	height: 93px;	float: left;	text-align: left;	}.adbox7 {	margin-top: 13px;	width: 135px;	height: 194px;	float: left;	text-align: left;	}.adbox8 {	margin-top: 20px;	margin-left: 10px;	width: 132px;	height: 301px;	float: right;	text-align: left;	}.adbox9 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	width: 277px;	height: 251px;	margin-top: 13px;	float: right;	text-align: left;	}.footer {	height: 26px;	width: auto;	background-color: #F1F1F4;	border-top: 1px solid #3C3C3C;	padding-top: 10px;	padding-bottom: 10px;	text-align: center;	}.footer a:active, a:link, a:visited {	color: #3c3c3c;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: none;	}.footer a:hover {	color: #3c3c3c;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: underline;	}.footer-holder {	margin-left: auto;	margin-right: auto;	width: 641px;	}.footer-left {	padding-right: 50px;	color: #3C3C3C;	text-align: right;	float: left;	}.footer-middle {	padding-left: 50px;	padding-right: 50px;	border-right: 1px solid #3C3C3C;	border-left: 1px solid #3C3C3C;	text-align: center;	float: left;	}.footer-right {	padding-left: 50px;	color: #3c3c3c;	text-align: left;	float: left;	}

    Any help would be greatly appreciated. I've been over it a dozen times, and can't see what I'm doing wrong.

  4. I installed Firebug, and here's the error I get:ptau is not defined[break on this error] function showau() { ptau.openInfoWindowHtml(au);};Like I said, I'm not the best at java. What does that mean is the problem? Any suggestions on how to fix it?

  5. I'm trying to make a bubble pop up over a marker on a Google Map APIHere's the link of the page I'm working on:http://www.anderson.edu/alert/hospitals.html

        <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA_TcZ-f0O0u7RY2MqeKmZoBSdNmmf_GZX9MlSgEE6OFIufsXyERRvAKNW-JTjOeINh4ckZGsSG3mkEg" type="text/javascript"></script>    <script type="text/javascript">    //<![CDATA[var tinyIcon = new GIcon();tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";tinyIcon.iconSize = new GSize(12, 20);tinyIcon.shadowSize = new GSize(22, 20);tinyIcon.iconAnchor = new GPoint(6, 20);tinyIcon.infoWindowAnchor = new GPoint(5, 1);markerOptions = { icon:tinyIcon };var geocoder = new GClientGeocoder();var au='<b>Anderson University</b><br />1100 E 5th St.<br />Anderson, IN 46012';var stjohns='<b><a href="http://www.stjohnshealthsystem.org/" target=new>Saint John's Health System</a></b><br />2015 Jackson St.<br />Anderson, IN 46012<br />(765) 649-2511';var community='<b><a href="http://www.communityanderson.com/" target=new>Community Hospital Anderson</a></b><br />1515 N. Madison Ave.<br />Anderson, IN 46011<br />(765) 298-4242';var auaddress = '1100 East Fifth St., Anderson, IN 46012';var stjohnsaddress = '2015 Jackson St., Anderson, IN 46012';var communityaddress = '1515 N. Madison Ave., Anderson, IN 46011';var ptstjohns = new GMarker(new GLatLng(40.096,-85.681), markerOptions); var ptcommunity = new GMarker(new GLatLng(40.1303,-85.692), markerOptions);     function load() {      if (GBrowserIsCompatible()) {        var map = new GMap2(document.getElementById("map"));        var center = new GLatLng(40.1124, -85.675);        map.setCenter(center, 13);        map.setMapType(G_HYBRID_MAP);        map.addControl(new GSmallMapControl());        map.addControl(new GMapTypeControl());        geocoder = new GClientGeocoder();   map.addOverlay(ptstjohns);   map.addOverlay(ptcommunity);GEvent.addListener(ptstjohns, "click",  function() { showstjohns(); });GEvent.addListener(ptcommunity, "click",  function() { showcommunity(); });// THIS IS WHERE I NEED HELP  geocoder.getLatLng(auaddress, function(point) {      if (!point) {        alert(address + " not found");      } else {        var ptau = new GMarker(point);         map.addOverlay(ptau);        GEvent.addListener(ptau, "click",  function() { showau(); });       }});// END NEED HELP      }    }function showau() { ptau.openInfoWindowHtml(au);};function showstjohns() { ptstjohns.openInfoWindowHtml(stjohns);};function showcommunity() { ptcommunity.openInfoWindowHtml(community);};    //]]>    </script>  <body onload="load()" onunload="GUnload()"><h1>Local Area Hospitals</h1>    <div id="map" style="width: 590px; height: 428px"></div><ul><li><a href="java script:void(0)" OnClick="showau()"><strong>Anderson University</strong></a> [<a href="http://maps.google.com/maps?f=d&hl=en&geocode=6142647476688581302,40.111180,-85.665899&saddr=&daddr=1100+East+Fifth+Street,+Anderson,+IN+46012+(Anderson+University)&mra=pe&mrcr=0&sll=40.111534,-85.664944&sspn=0.01733,0.026608&ie=UTF8&z=16" target="new">Get driving directions</a>]<br />1100 E 5th St.<br />Anderson, IN 46012</li><li><a href="java script:void(0)" OnClick="showstjohns()"><strong>Saint John's Health System</strong></a> [<a href="http://maps.google.com/maps?f=d&hl=en&geocode=7087725764188778215,40.096237,-85.680490&saddr=&daddr=2015+Jackson+St,+Anderson,+IN+46016+(St+John's+Health+System)&mra=pe&mrcr=0&sll=40.103816,-85.723945&sspn=0.116069,0.20874&ie=UTF8&z=16" target="new">Get driving directions</a>]<br />2015 Jackson St.<br />Anderson, IN 46012<br />(765) 649-2511<br /><a href="http://www.stjohnshealthsystem.org/" target=new>Website</a></li><li><a href="java script:void(0)" OnClick="showcommunity()"><strong>Community Hospital Anderson</strong></a> [<a href="http://maps.google.com/maps?f=d&hl=en&geocode=14601001884254169233,40.128660,-85.691621&saddr=&daddr=1515+N+Madison+Ave,+Anderson,+IN+46011+(Community+Hospital+Anderson)&mra=pe&mrcr=0&sll=39.874012,-85.907232&sspn=0.931682,1.669922&ie=UTF8&z=16" target="new">Get driving directions</a>]<br />1515 N. Madison Ave.<br />Anderson, IN 46011<br />(765) 298-4242<br /><a href="http://www.communityanderson.com/" target=new>Website</a></li></ul></div>

    Here's the excerpt of the critical code that I'm having trouble with:

      geocoder.getLatLng(auaddress, function(point) {        if (!point) {          alert(address + " not found");        } else {          var ptau = new GMarker(point);           map.addOverlay(ptau);          GEvent.addListener(ptau, "click",  function() { showau(); });         }  });

    I'm not the best at javascript yet, so dummy explainations with small words would be appreciated.

  6. I have two float divs inside of another div. Depending on the page, either could be larger than the other. I want to have a divider between the two. I've tried doing a border, but because either one could be higher, on some pages it doesn't extend all the way down the page.I need to set one of my float divs to run the entire length of its parent div, but cannot figure out how.Any suggestions?Here's the site:www.dougberkytheatre.comHere's an example of the div not running to the bottom:www.dougberkytheatre.com/?p=7Here's my CSS:

    body {background: url('/images/background.gif');background-color: #6D3115;background-repeat: repeat-x;margin-top: 24px;}h1 {font-family: 'Times New Roman';text-align: left;font=color: #271008;font-size: 24px;}a img {border: 0px;}a {font-family: tahoma;color: #BB4400;font-size: 12px;}p, b, strong, em, i, u{text-align: left;font-family: tahoma;color: #554433;font-size: 12px;line-height: 18px;}.headerdiv {background-color: #EAD5BA;width: 702px;}.pagediv {border-left: 3px #C59265 solid;border-right: 3px #C59265 solid;border-bottom: 3px #C59265 solid;width: 696px;background-color: #EAD5BA;overflow: auto;}.navdiv {background-image: url('/images/navbg.gif');background-color: #D3BB99;border-bottom: 1px #271008 solid;border-top: 1px #271008 solid;height: 29px;vertical-align: top;}.navitem {border-right: 1px #C9A883 solid;float: left;height: 23px;padding-top: 6px;}.navitem a {font-family: tahoma;color: #271008;font-size: 12px;text-decoration: none;margin-left: 20px;margin-right: 20px;}.bodydiv {background-image: url('/images/subnav.gif');background-repeat: repeat-x;background-color: #EAD5BA;padding-left: 20px;padding-right: 20px;padding-bottom: 10px;padding-top: 37px;vertical-align: top;float: left;width: 453px;border-right: 1px #C9A883 solid;}.sidebardiv {background-image: url('/images/subnav.gif');background-repeat: repeat-x;background-color: #EAD5BA;padding-left: 20px;padding-right: 20px;padding-bottom: 10px;padding-top: 37px;vertical-align: top;float: right;}.footerdiv {width: 702px;padding-top: 3px;padding-right: 23px;}.footerdiv p {color: #C59265;text-align: right;}.footerdiv a {color: #C59265;text-decoration: none;}

    And here is the code on my page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>><head profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /><title><?php bloginfo('name'); ?>. <?php wp_title(); ?></title><meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->    <style type="text/css" media="screen">        @import url( <?php bloginfo('stylesheet_url'); ?> );    </style><link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><?php wp_head(); ?></head><body><center><div class="headerdiv"><?php get_header(); ?></div><div class="pagediv"><div class="navdiv"><?php $my_query = $wp_query; ?><?php query_posts('cat=3'); ?><?php while (have_posts()) : the_post(); ?><div class="navitem" nowrap><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div><?php endwhile; ?></div><div class="sidebardiv"><?php get_sidebar(); ?></div><div class="bodydiv"><h1><?php the_title(); ?></h1><?php the_content(); ?></div></div><div class="footerdiv"><?php get_footer(); ?></div></center><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-3170858-4";urchinTracker();</script></body></html>

  7. I'm creating a website using WordPress, www.dougberkytheatre.com.I'm new to php (really new, as in learning it for this project) and I'm having some trouble getting it to do what I want.I have several posts labelled under Category 3. I want to display the titles of each page in the navigation. I can get it to display correctly, but any time you click the link to load a page, always loads the same post.Here is the code I have for the navigation:

    <table border=0 cellpadding=0 cellspacing=0><tr><?php query_posts('cat=3'); ?><?php while (have_posts()) : the_post(); ?><td class="nav" nowrap><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></td><td><img src="/images/navdivider.gif"></td><?php endwhile; ?><td class="nav" width="100%"></td></tr></table>

    Here is my code for the main body of my page:

    <h1><?php the_title(); ?></h1><?php the_content(); ?>

    So here's the problem, the site automatically loads the page entitled "Test Post." However, when you click "Test post 2" it will load "Test Post" instead. Basically, any link you click will always display "Test Post."I think the "<?php query_posts('cat=3'); ?>" code is somehow causing it, because when I delete that, everything works fine. The problem is that I don't want posts in Category 4 to be displayed in the navigation, and deleting this code causes Category 4 posts to be displayed. Oh, the other wierd thing that tells me it's somehow connected to that line of code is that when I move the Navigation code below the Main Body, everything works fine. So it's like the query_post function is somehow getting hung up on the last post in the category (which is "Test Post"), but only does so if the function occurs before the main body code.Can someone help me out here? I'm completely new to php.

  8. I'm trying to create a Google map that generates directions. When a user searches for directions, it displays the route, and puts the directions below. Everything works great except for when a user makes a subsequent search. the map displays the route fine, but instead of creating a new set of directions, it just adds the second set to the bottom of the first. (For example: try searching "Gridley" then "Glyn Ellen" and scroll down).See it at www.anderson.edu/welcome/map/google2.htmlI'm a little new and inexperienced with javascript, so I can't figure out why it adds the new directions to the bottom of the first or how to fix it. The code dumps the directions into a div called "route". The function "setDirections" is where I'm having the trouble, so that's where you need to look. Here's the code:

    	//<![CDATA[	var map;	var directionsPanel; 	var gdir;	var auloc = new GMarker(new GLatLng(40.111196, -85.665904)); var reasons=[];	  reasons[G_GEO_SUCCESS] = "Success";	  reasons[G_GEO_MISSING_ADDRESS] = "No Address: Please enter an address.";	  reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address:  No corresponding geographic location could be found for the specified address. Please ensure the address was accurately entered";	  reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address: This address cannot be displayed due to legal or contractual reasons.";	  reasons[G_GEO_BAD_KEY] = "Bad Key: The API key is either invalid or does not match the domain for which it was given.";	  reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";	  reasons[G_GEO_SERVER_ERROR] = "Server error: The geocoding request could not be successfully processed.";	  reasons[G_GEO_BAD_REQUEST] = "A directions request could not be successfully parsed.";	  reasons[G_GEO_MISSING_QUERY] = "No query was specified in the input.";	  reasons[G_GEO_UNKNOWN_DIRECTIONS] = "The GDirections object could not compute directions between the points.";	function initialize() {	  if (GBrowserIsCompatible()) {	   map = new GMap2(document.getElementById("map"));		var center = new GLatLng(40.08647729380881, -85.65284729003906);		map.setCenter(center, 12);		map.addControl(new GSmallMapControl());		map.addControl(new GMapTypeControl());GEvent.addListener(auloc, "click",  function() { auloc.openInfoWindowHtml("<b>Anderson University</b><br />1100 East 5th Street<br />Anderson, IN 46012<br />1-800-428-6414"); }); map.addOverlay(auloc);GEvent.addListener(gdir, "error", function() {	var code = gdir.getStatus().code;	var reason="Code "+code;	if (reasons[code]) {	  reason = reasons[code]	  } 	  alert("Failed to obtain directions, "+reason);   });	   }	}function setDirections(fromAddress, fromstate) {	  map = new GMap2(document.getElementById("map"));	  directionsPanel = document.getElementById("route");	  gdir = new GDirections(map, directionsPanel);	  gdir.load(fromAddress + ", " + fromstate + " to 1100 East 5th Street, Anderson, IN");	  auloc.hide();	}	//]]>

    And here's the HTML: <body onload="initialize()" onunload="GUnload()"> <div id="map" style="width: 570px; height: 428px"></div><p align="center"><form action="#" onsubmit="setDirections(this.from.value, this.state.value); return false">City: <input type="text" size="35" id="fromAddress" name="from" /><select id="state" name="state"><option value="AL">AL</option><option value="AK">AK</option><option value="AZ">AZ</option><option value="AR">AR</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN" selected>IN</option><option value="IA">IA</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="ME">ME</option><option value="MD">MD</option><option value="MA">MA</option><option value="MI">MI</option><option value="MN">MN</option><option value="MS">MS</option><option value="MO">MO</option><option value="MT">MT</option><option value="NE">NE</option><option value="NV">NV</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NY">NY</option><option value="NC">NC</option><option value="ND">ND</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VT">VT</option><option value="VA">VA</option><option value="WA">WA</option><option value="WV">WV</option><option value="WI">WI</option><option value="WY">WY</option></select> <input name="submit" type="submit" value="Get Directions" /></form></p><div id="route" style="border; 1px solid black;"></div> </body>Any help would be greatly appreciated! Remember, I'm a bit of a newbie, so you might have to use dumb-person language.

×
×
  • Create New...