Google map infoWindow/infoWindowHtml doesn’t render background

Because google maps control how the overflowed DIV renders in infoWIndow/infoWIndowHtml class by itself, it sometime overshadows user defined overflow/max-height/max-width properties. It will cause the background tiles of infoWindows/infoWindowHtmls don’t render (lastly found in IE 6 Windows 2k/XP/SP 1, esp the page is iframed by another page, in my case it happens to be in another domain if it matters; or if the infoWindow is opened by click on a DOM object other than the marker it’s associated with). The solutions could be automatically loading the iframed page a second time, or emulating user directly clicking on the marker using javascript.

In the figure, the symptom happens in IE  6(winXP/2k pro) when the page with google maps is framed via a page from another domain. It happens If the user clicks on a ward number on the bottom of the page to pop up an infoWindowHtml the first time the iframe page gets loaded (instead of clicking on the corresponding custom markers within the map.) The fix is to use a trick that first calling “map.openInfoWindow()” then “map.closeInfoWindow()” immediately to simulate a mouse click the first time the map tiles rendered. What will happen in actuality is that no infoWindow will be displayed but it force IE to “rerender” the map tiles to get the right relative positioning for CSS.

max-height/overflow for google map infowindow

//KLUDGE: in windows XP SP2, if the user clicks the num div first to open an infowindow/infowindowhtml, the background images of the marker doesn’t render or renders partially (sometimes the center div bkg renders sometimes the frames images render); while this didn’t happen if the user clicks directly on a marker to open the infowindow/infowindowhtml. This trick helps to circumvent the situation by openinfowindow directly first to emulate the fact that a user clicks on a marker, or loading the framed page a second time.

_global in as

Declaration:

_global.myVar;

Set:

_global.myVar = “something”;

Get:

if(myVar==”anotherthing”){}

lightweight flash object

here is how Google video is using Flash Object:

Sample code:

<embed 

	style=“width: 100%; height: 100%;” 

	id=“VideoPlayback” type=“application/x-shockwave-flash” 

	src=“/googleplayer.swf?&videoUrl=http://vp.video.google.com/videodownload?version=0&secureurl=twAAAClqeHzNZY6S6k1LAkocsV_7A_xqwntKJHO0hegdIh0hBuRs9_1-V7tRNbg-OSTyMxQDCx1AGMHU1_3ISijrxSMlVEw0NEWUDpKl4F92fIBqSrHu1RUDH_0yAqHqXWeJ1pSFr9687_OcAtO9uCX1G83md9lMwoFNWSKZrucxWQTsVwrl9cX7aqlQZpKDuHOlzaaVQg3d3T0V9lTyBy_u3bxPfrKZOGtezIm65D3iNtG4V4m4QSBHW7JdD4UsShMqjg&sigh=pgbjX9CQZkp-YvpdysLfgALvSiE&begin=0&len=2897133&docid=5650400464718085334&messagesUrl=http://video.google.com/FlashUiStrings.xlb?frame=flashstrings&hl=en&thumbnailUrl=http://video.google.com/ThumbnailServer2?app=vss&contentid=d3ce7e4fb30a2308&offsetms=155000&itag=w320&lang=en&sigh=l8Txh9HxxHBtd9YxkoP-f2uQASg” 

	allowscriptaccess=“always” 

	quality=“best” 

	bgcolor=“#ffffff” 

	scale=“noScale” 

	salign=“TL” 

	flashvars=“playerMode=normal&autoPlay=true&docid=5650400464718085334&clickUrl=” 

	align=“middle”>

 </embed>

Google uses escaped characters (like “\u003d” etc.) in javascript to dynamically generate the fullscreen pop-up window.

append a random number as the query string

function appendRandomQuery(){
if(!window.location.search.toString().length){
var ran = Math.round(Math.random()*10000000);
window.location.search = “?”+ran;
alert(”the random number is “+ran);
}
}

function appendRandomQueryToTop(){
if(!window.top.location.search.toString().length){
var ran = Math.round(Math.random()*10000000);
window.top.location.search = “?”+ran;
alert(”the random number is “+ran);
}
}

function appendRandomQueryPrarentWindow(){
if(!window.parent.location.search.toString().length){
var ran = Math.round(Math.random()*10000000);
window.parent.location.search = “?”+ran;
alert(”the random number is “+ran);
}
}

appendRandomQuery();

The techniques demonstrated above can be used to load an iframe twice automatically. The need for an iframe to be immediately reloaded again after loaded once is that some DOM objects are not rendered correctly the first time the page got loaded. In a google map mashup project I recently did, the first time the page gets loaded, the map was showing its top-left corner; tile images were cut-off 3/4 and the all other parts were grayed out. It seems the DOM objects were displaced to several hundreds pixels left-bottom to where they are supposed to be in the Google map. Most of the times (but not always!) reloading the page (by pressing the “Reload current page” button) will solve the issue. It happens in an iframe viewed in IE (6/7; XP sp1/2). Never happens in Firefox or Mozilla. A combination of attempts(including changing the slug in the content management system [urls for the parent window document]; getting rid of tage and using the javascript reload) seems to have fixed the bug.

full screen and exit button in flash projectors

I was trying to put a “return to non-full-screen mode” button in a flash projector. I found out the following:

1. In full screen mode, the top-left corner of the screen is not the same as the top-left corner of the flash movie Stage.

2. Without setting “Stage.align”, the stage will be centered (both horizontally and vertically) in full screen mode.

Here is the code (where I put the “exit-full-screen-button” on the top-right corner of the screen):

var exitFull_mc:MovieClip;
var movieWidth:Number = 900;
var movieHeight:Number = 570;
var margin_right:Number = 12;
var margin_top:Number = 3;

exitFull_mc.onPress = function(){
fscommand(”fullscreen”, “false”);
}

function stickExitFullMc(Void):Void{
exitFull_mc._x = (Stage.width - movieWidth)/2+movieWidth - exitFull_mc._width - margin_right;
exitFull_mc._y = exitFull_mc._height - margin_top - (Stage.height - movieHeight)/2;
}

function onResize(){
stickExitFullMc();
}
Stage.addListener(this);

stickExitFullMc();

Here is how to prompt the user with “Press Esc to exit full screen mode”:

stop();

import com.mosesSupposes.fuse.*;

Stage.scaleMode = “noScale”;

fscommand(”fullscreen”, “true”);

ZigoEngine.register(shortcuts, Fuse);

var exitP_mc:MovieClip;
var _l1:MovieClip = this;
var f:Fuse = new Fuse({
start_y: 300,
start_alpha: 0,
duration: 2
},
{
delay: 2,
alpha: 0,
y: 300,
duration: 1.2
},
{
func:function(){play();},
scope:_l1
}
);

f.target = exitP_mc;
f.start();

multiline vs. wordWrap in as

Multiline:

In order to use html tags/features such as “<br/>”, “<p>”, “<img>” and “mouseWheelEnabled”, a textfield needs to be set as “html” and “multiline”.

If “multiline” property is not set (by default is null), even if the textfield has “wordWrap” with defined _width, the text won’t, e.g., flow around an embedded image or return to a newline at a <br> tag.

wordWrap:

wordWrap will allow the text wrapped into the defined rectangular area (when calling createTextField(instanceName:String, depth:Number, x:Number, y:Number, width:Number, height:Number) )

at some point, i misteriously found (but havn’t proofed whether it’s a bug or something) that even if worWrap is set to “false”, setting multiline to “true” with “<br/>” tags inside text will wrap the text.

Here is the Adobe live documents about TextField (as 3).

pass additional parameters to event handler using Prototype.js

bindAsEventListener(scope, arg1, arg2,…)

example (all functions inside body script tags):

Event.observe(div, 'click', zoomToWard.bindAsEventListener(this, wardIndex));

function zoomToWard(evt, index){
	alert("index::: "+index);
	}

http://www.simpltry.com/?cat=2&paged=2

http://www.google.com/search?hl=en&q=pass+arguments+observe+prototype&btnG=Google+Search

in encytemedia
http://encytemedia.com/blog/articles/2006/02/08/working-with-events-in-prototype

typo - SWiK
http://swik.net/Typo+Prototype