Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2007
    Posts
    162
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Trying to place legend and organize tabs...IE and FF differences

    Hi

    Here's a page I'm working on:http://www.greenandtheblue.com/weather/allsites.html

    I'm only concerned about the styling right now. In firefox, the legend is placed nicely in the bottom right corner of the map, and the tabs are aligned together. However, in IE8, tabs are spread apart and the legend is off the map.

    I thought the inclusion of a wrapper would work for keeping the legend at the bottom right of the map, but doesn't seem to work in IE8. Also, I'm wondering why the tabs and map extend to the far right of the screen on IE8 but not on firefox?

    Thanks for any help!
    S

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    You have a number of problems with your page. Your top menu, You call it tabs, is in the <head> area not in the body. I just removed them to look at the rest of your layout.
    The wrapper is doing nothing for you, so I eliminated it.
    The body css - I just replaced that with a simple reset css script.

    The legend, one of the things that you were having trouble with:
    You are using position: absolute; bottom: 15px; right: 5px;
    That's forcing this to hang out at the bottom of the page. I changed everything here.

    Solutions. About your top menu. See this page and change it
    http://www.seoconsultants.com/css/menus/tutorial/
    or this one
    http://css3menu.com/
    The one your using causes a LONG wait to display the page.

    Here's the code without the top menu:

    Code:
    <style type="text/css">
    body {margin: 0;padding: 0;border: 0;font-size: 100%;}
    h1 {font-family:Helvetica; font-size:11px;}
    #legend {
    	width: 100px;
    	padding: 4px;
    	position:relative;
    	top: 180px;
    	border:1px solid black;
    	background-color: #CCCCFF;
    	float:left;
    }
    </style>
    </head>
    
    <body onload="initialize()">
    <div id="map" style="height: 360px; width: 700px; margin-left: 20px; float:left;"></div>
    <div id="legend">
    	<img src="http://www.greenandtheblue.com/weather/pass.png" alt="" width="21" height="24" /> Pass<br />
    	<img src="http://www.greenandtheblue.com/weather/camping.png" alt="" width="21" height="24" /> Camping<br />
    	<!--<img src="http://www.greenandtheblue.com/weather/skiing.png" alt="" width="21" height="24" />Skiing <br />-->
    	<img src='http://www.greenandtheblue.com/weather/snow.png' alt="" width="21" height="24" /> Snow Park <br />
    	<img src='http://www.greenandtheblue.com/weather/park.png' alt="" width="21" height="24" /> Park<br>
    	<img src='http://www.greenandtheblue.com/weather/hiking.png' alt="" width="21" height="24" /> Trail<br>
    	<img src='http://www.greenandtheblue.com/weather/water.png' alt="" width="21" height="24" /> Water
    </div>
    
    <div id="location"></div>
    <div id="fcst" style= "margin-left: 20px">
    	<iframe name = 'forecast_below' scrolling="no" frameborder='0' margin-left: '20px' width='700' height ='800'></iframe>
    </div>
    </body>
    </html>
    I would think twice about using an iframe in the <div id="fcst"... Can't you just display the forecast in the div? I hate iframes so take that with a grain of salt. OK?

  • Users who have thanked sunfighter for this post:

    shadkeene (11-04-2011)

  • #3
    Regular Coder
    Join Date
    May 2007
    Posts
    162
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Thanks for the advice...I will read again and heed. Since you mentioned iframes, I chose them because I'm loading pages below the map. I'd prefer not to use them either because I'd like the page to load in mobile devices. Any suggestions? I guess I could use php to include a dynamically changing website depending on user click.

  • #4
    Regular Coder
    Join Date
    May 2007
    Posts
    162
    Thanks
    13
    Thanked 0 Times in 0 Posts
    I implemented the changes, but I see the legend now to the right of the map instead of on the map...in the bottom right section, which is where I'm looking to place it. The reason I had absolute was because I thought it, within the wrapper, would keep it on the absolute bottom right of the map.

    http://www.greenandtheblue.com/weath...es_legend.html

    Thanks for any more help!
    Shad

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Read up on relative positioning. You set you div using top and left amongst others. Use the right in this case to kick to div over to the right, because it's floated.

    You cut my code up and then stuck part of it in the wrong place and added an extra </head> tag.

    Read up on relative positioning because you will need to change things when you put the menu back in.

    This is the correcyed code for the site. Replace everything.

    Code:
    <!--Added forecast frame below map -->
    
    <!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">
    <head>
    <title>Recreation Forecast Page</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="downloadxml.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <script type="text/javascript">
    
    //declare global variables to be used throughout the script
    
      var map;
      var mgr;
      var batch = [];
      var markers;
      var forecast;
      var gicons = [];
      var map = null;
      var currentinfowindow = null;
    
    //declare icons to be used on map
      var icon_campground = 'http://www.greenandtheblue.com/weather/camping.png';
      var icon_trail = 'http://www.greenandtheblue.com/weather/hiking.png'
      var icon_park = 'http://www.greenandtheblue.com/weather/park.png'
      var icon_water = 'http://www.greenandtheblue.com/weather/water.png'
      var icon_recreation_site = 'http://www.greenandtheblue.com/weather/park.png'
      var icon_snow = 'http://www.greenandtheblue.com/weather/snow.png'
      var icon_ski = 'http://www.greenandtheblue.com/weather/skiing.png'
    var icon_pass = 'http://www.greenandtheblue.com/weather/pass.png'
    
      var icon_campground_haz = 'http://www.greenandtheblue.com/weather/hazard/camping.png';
      var icon_trail_haz = 'http://www.greenandtheblue.com/weather/hazard/hiking.png'
      var icon_park_haz = 'http://www.greenandtheblue.com/weather/hazard/park.png'
      var icon_water_haz = 'http://www.greenandtheblue.com/weather/hazard/water.png'
      var icon_recreation_site_haz = 'http://www.greenandtheblue.com/weather/hazard/park.png'
      var icon_snow_haz = 'http://www.greenandtheblue.com/weather/hazard/snow.png'
      var icon_ski_haz = 'http://www.greenandtheblue.com/weather/hazard/skiing.png'
    var icon_pass_haz = 'http://www.greenandtheblue.com/weather/pass.png'
    
    
    
      function category2icon(category) {
    
      	switch(category) {
         	case "campground": icon = "icon_campground";
                    break;
         	case "trail":    icon = "icon_trail";
                    break;
         	case "park":    icon = "icon_park";
                    break;
           	case "water":    icon = "icon_water";
                    break;
    	case "snow":    icon = "icon_snow";
                    break;
    	case "recreation_site":    icon = "icon_recreation_site";
                    break;
    	case "ski":    icon = "icon_ski";
                    break;
    	case "pass":    icon = "icon_pass";
                    break;
         	default:   icon = "icon_water";
                    break;
    
    	case "campground_haz": icon = "icon_campground_haz";
                    break;
         	case "trail_haz":    icon = "icon_trail_haz";
                    break;
         	case "park_haz":    icon = "icon_park_haz";
                    break;
           	case "water_haz":    icon = "icon_water_haz";
                    break;
    	case "snow_haz":    icon = "icon_snow_haz";
                    break;
    	case "recreation_site_haz":    icon = "icon_recreation_site_haz";
                    break;
    	case "ski_haz":    icon = "icon_ski_haz";
                    break;
         	case "icon_water_haz":  icon = "icon_water_haz";
                    break;
    	case "icon_pass_haz":  icon = "icon_pass_haz";
                    break;
        }
      return icon;
      }
    
    //define google's gicons based on category and icon definition from above
        gicons["campground"] = icon_campground;
        gicons["trail"] = icon_trail;
        gicons["park"] = icon_park;
        gicons["water"] = icon_water;
        gicons["snow"] = icon_snow;
        gicons["ski"] = icon_ski;
        gicons["recreation_site"] = icon_recreation_site;
    gicons["pass"] = icon_pass;
    
    
        gicons["campground_haz"] = icon_campground_haz;
        gicons["trail_haz"] = icon_trail_haz;
        gicons["park_haz"] = icon_park_haz;
        gicons["water_haz"] = icon_water_haz;
        gicons["snow_haz"] = icon_snow_haz;
        gicons["ski_haz"] = icon_ski_haz;
        gicons["recreation_site_haz"] = icon_recreation_site_haz;
    gicons["pass_haz"] = icon_pass_haz;
    
    
    function initialize() {
        var myLatlng = new google.maps.LatLng(42.6663,-121.5877);
        var myOptions = {
          zoom: 7,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    
    	var infowindow = new google.maps.InfoWindow;
    
    
    //declare marker manager to be used later
        mgr = new MarkerManager(map);
    
    //ensure marker manager is loaded before loading and parsing xml document
        google.maps.event.addListener(mgr, "loaded", function() {
            downloadUrl("parkssss.xml", function(doc) {
    
    	    var xml = xmlParse(doc);
                markers = xml.documentElement.getElementsByTagName("park");
                var marker;
    //load 20 markers at zoom level 6 and so on for various zoom levels
    		mgr.addMarkers(createMarker(40), 6);
    		mgr.addMarkers(createMarker(60), 7);
    		mgr.addMarkers(createMarker(90), 8);
    		mgr.addMarkers(createMarker(140), 9);
    
    		mgr.refresh();
    
    
    
    	});
        });
    
    
    //function that creates marker where n is the number of markers to load
      function createMarker(n, html, infowindow) {
    
    //loop through recreation sites and parse attributes for marker info and icons
      	for (var i = 0; i < n; ++i) {
    
        		var hazard_exist = markers[i].getAttribute("hazard_exist");
    		var name = markers[i].getAttribute("name");
    		var category = markers[i].getAttribute("type");
    
    		//if hazard exists at marker, use yellow border icon to bring attention to hazard
    	        if (hazard_exist == "yes") {
    		category = category += "_haz";
     		}
    		var marker = (new google.maps.Marker({
            	position: new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lon"))),
            	icon: gicons[category],
    		title: name
    
    
      }));
    
    		 attachSecretMessage(marker, i);
    
    		batch.push(marker);
    		}
    
    	return batch;
    
      	}
    
    }
    
    
    function attachSecretMessage(marker, i) {
    
      var lat = markers[i].getAttribute("lat");
      var lon = markers[i].getAttribute("lon");
      var name = markers[i].getAttribute("name");
      var website = markers[i].getAttribute("website");
      var meteogram = "http://forecast.weather.gov/MapClick.php?FcstType=graphical&textField1="+lat+"&textField2="+lon+"&site=mfr&unit=0"
    var category = markers[i].getAttribute("type");
    var pass_fcst = markers[i].getAttribute("pass_fcst");
    if (category == "pass") {
    marker.setZIndex(1000)
    }
    
      var html = '<span style="font-size: 10pt;">' + name + '<hr><a href="'+website+'" target = "_blank">' + 'On the Web' + '</a>' + '<span style="font-size: 10pt; color: red;"><hr><a href="'+meteogram+'" target = "_blank">' + 'Hourly Forecast Graph' + '</a>' + '<span style="font-size: 10pt; color: red;">';
    
    if (category == "pass") {
    marker.setZIndex(1000)
    
    html = '<span style="font-size: 10pt;">' + name + '<hr><a href="'+website+'" target = "_blank">' + 'Pass Cam' + '</a>' + '<span style="font-size: 10pt; color: red;">';
    
    }
    
     google.maps.event.addListener(marker, "mouseover", function() {
      marker.setZIndex(10000000000);
      });
       google.maps.event.addListener(marker, "mouseout", function() {
      marker.setZIndex(undefined);
      });
    
      var infowindow = new google.maps.InfoWindow(
          { content: html,
            size: new google.maps.Size(50,50)
          });
      google.maps.event.addListener(marker, 'click', function() {
         if (currentinfowindow != null) {
            currentinfowindow.close();
        }
        infowindow.open(map,marker);
    	currentinfowindow = infowindow;
    
    
    
    
    //open forecast below map based on lat lon
    var re = /Mount Shasta Bunny Flat Trail/;
    if (re.test(name)) {
    window.open("http://www.wrh.noaa.gov/total_forecast/getprod.php?wfo=mfr&prod=XXXRECMFR&version=&print=yes", "forecast_below")
    }
    
    else if (category == "pass") {
    window.open(pass_fcst, "forecast_below");
    }
    
    else {
    window.open("http://forecast.weather.gov/MapClick.php?lat="+lat+"&lon="+lon+"&site=pqr&unit=0&bmap=1&lg=en&TextType=2", "forecast_below")
    
    }
    
    
    
    
      });
    }
    
        // This Javascript is based on code provided by the
        // Community Church Javascript Team
        // http://www.bisphamchurch.org.uk/
        // http://econym.org.uk/gmap/
        // from the v2 tutorial page at:
        // http://econym.org.uk/gmap/example_categories.htm
    
        </script>
    
    <style type="text/css">
    body {margin: 0;padding: 0;border: 0;font-size: 100%;}
    h1 {font-family:Helvetica; font-size:11px;}
    #legend {
    	width: 100px;
    	height: 180px;
    	padding: 4px;
    	position:relative;
    	top: 172px;
    	right: 110px;
    	border:1px solid black;
    	background-color: #CCCCFF;
    	float:left;
    }
    </style>
    </head>
    
    <body onload="initialize()">
    <div id="map" style="height: 360px; width: 700px; margin-left: 20px; float:left;"></div>
    <div id="legend">
    	<img src="http://www.greenandtheblue.com/weather/pass.png" alt="" width="21" height="24" /> Pass<br />
    	<img src="http://www.greenandtheblue.com/weather/camping.png" alt="" width="21" height="24" /> Camping<br />
    	<!--<img src="http://www.greenandtheblue.com/weather/skiing.png" alt="" width="21" height="24" />Skiing <br />-->
    	<img src='http://www.greenandtheblue.com/weather/snow.png' alt="" width="21" height="24" /> Snow Park <br />
    	<img src='http://www.greenandtheblue.com/weather/park.png' alt="" width="21" height="24" /> Park<br>
    	<img src='http://www.greenandtheblue.com/weather/hiking.png' alt="" width="21" height="24" /> Trail<br>
    	<img src='http://www.greenandtheblue.com/weather/water.png' alt="" width="21" height="24" /> Water
    </div>
    
    <div id="location"></div>
    <div id="fcst" style= "margin-left: 20px">
    	<iframe name = 'forecast_below' scrolling="no" frameborder='0' margin-left: '20px' width='700' height ='800'></iframe>
    </div>
    </body>
    </html>
    The page your going to insert. Are you getting it from a different site and just displaying it? Could you just get the important parts of the forecast and use that? After you get the menu working maybe we can work on the iframe.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •