> Is there a way to initially load the page with the map open
> and then close it after a timed period? Better yet, is there some way
> to load it with it hidden but not chopped up?
Yeah, having it display:none or visibility:hidden can muck up the
calculations of the containers dimensions. I'd suggest the good ole
trick of "hiding" IFrames, which is just set the container as
{ position:absolute; left: -4000px; } This way the map is off the
view port hence "invisible" to the user and yet fully accessible via
the DOM for dimension calculations.
Thinking more about it, you may not want to instantiate the map until
you're ready, nothing says it has to be done on page load, I had done
some work with Ext.js and Google maps, where Ext does the DOM element
creation all via JS execution, i loaded the map only when it was
necessary.
http://positionabsolute.net/projects/javascript/ext/googleservice/
--
http://positionabsolute.net
On Jun 5, 5:09 am, MIGhunter <ad...@botdls.com> wrote:
> I'm trying to use a script to hide and show user information. Right
> now I am just playing with it and here is what I
> have:http://migcfdesign.com/joani/index.html
>
> The problem is the map.
> I can't load the page with the map hidden. If I do chops off 1/2 of
> the map. Is there a way to initially load the page with the map open
> and then close it after a timed period? Better yet, is there some way
> to load it with it hidden but not chopped up? I'm not sure what's the
> conflict is between google's js and prototype.js.
> The url to a copy of the map messing up
> is:http://migcfdesign.com/joani/index2.html
>
> Here is the code I am using:
> <html>
> <head>
> <title>Toggle Test</title>
> <meta http-equiv="Content-Type" content="text/html;
> charset=utf-8" /
>
> <meta name="viewport" content="initial-scale=1.0,
> user-scalable=no" /
>
> <script src="/javascripts/lib/prototype.js"
> type="text/javascript"></
> script>
> <script src="/javascripts/src/scriptaculous.js" type="text/
> javascript"></script>
> <script type="text/javascript"
> src="http://maps.google.com/maps/api/
> js?sensor=true"></script>
> <script type="text/javascript">
> Event.observe(window, 'load', function() {
> Event.observe('featurebox-3-listen', 'click',
> function(){
> $('featurebox-3').toggle();
> });
> });
>
> Event.observe(window, 'load', function() {
> Event.observe('featurebox-4-listen', 'click',
> function(){
> $('featurebox-4').toggle();
> if($('featurebox-4').hide()){
>
> $('featurebox-4-listen').update('(812)555-5555');
> } else {
> //do nothing.
> }
> });
> });
>
> Event.observe(window, 'load', function() {
> Event.observe('featurebox-5-listen', 'click',
> function(){
> $('featurebox-5').toggle();
> if($('featurebox-5').hide()){
>
> $('featurebox-5-listen').update('#### Street Bloomington, IN
> 47401');
> } else {
> //do nothing.
> }
> });
> });
>
> function initialize() {
> var latlng = new google.maps.LatLng(39.1485520,
> -86.5857814);
> var myOptions = {
> zoom: 13,
> center: latlng,
> mapTypeId: google.maps.MapTypeId.ROADMAP
> };
> var map = new google.maps.Map(document.getElementById
> ("map_canvas"), myOptions);
> }
>
> </script>
> </head>
> <body onload="initialize()">
> <table>
> <tr>
> <td><img src="images/map_symbol.jpg" alt="Map"
> title="Map"></td>
> <td><p><span id="featurebox-3-listen"><a href="#"><strong>Map
> (Hide)
> </strong></a></span> |
> <span onclick="$('featurebox-3').toggle();"><a
> href="#"><strong>Map
> (Show)</strong></a></span></p></td>
> <div class="featurebox" id="featurebox-3"><div
> class="featurebox"
> id="featurebox-2">
> <p><div id="map_canvas" style="width:50%;
> height:50%"></div></p>
> </div>
> </tr>
> <tr>
> <td><img src="images/phone_symbol.jpg" alt="Phone"
> title="Phone
> Number"></td>
> <td><span id="featurebox-4-listen"><a href="#"><strong>Phone
> Number</
> strong></a></span></td>
> <div class="featurebox" id="featurebox-4"><div
> class="featurebox"
> id="featurebox-2"></div>
> </tr>
> <tr>
> <td><img src="images/house.jpg" alt="House"
> title="Address"></td>
> <td><span id="featurebox-5-listen"><a
> href="#"><strong>Address</
> strong></a></span></td>
> <div class="featurebox" id="featurebox-5"><div
> class="featurebox"
> id="featurebox-2"></div>
> </tr>
> </table>
> </body>
> </html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
