Hi Pavel!
I played around with the location-chooser a little bit.
The first thing i tryed was to start with my location by calling the "open"-method of the YoLocationChooser with the argument "Austria/Vienna":
Code: Select all
locationChooser.open("Austria/Vienna");
That works as expected.
Then i tried to have the widget reflect this initial setting which did not work.
I tried to make the "place" and "locationChooser a global variable, initialized them in the "onLoad"-method at the beginning and set the "location_id"-property in the "flashvars"-json-object to the id from the location-chooser-variable.
My assumption is that the location-chooser-object also has the properties which are described with the "node"-object.
What i expected was that the widget would show Vienna as the location because the chooser was called with this initial setting. But it showed New York City, the default location.
It seems as if the location id of the location-chooser object only is set when the user changes the selection in the drop-down-box.
Could you please modify the location-chooser object so that the id is (and the other properties are) set when the object is initialized too? Or let the location-chooser object has the same properties as the node-object?
Please!
What i want is that the widget can start with the location the location-chooser was initialized with.
My modified javascript-code:
Code: Select all
<html>
<head>
<title>Location Chooser and YoWindow weather widget</title>
<!-- Location Chooser component -->
<script type="text/javascript" src="http://js.yowindow.com/js/yolc.js"></script>
<!-- YoWindow widget component -->
<script type="text/javascript" src="http://js.yowindow.com/js/yowidget.js"></script>
<script language="JavaScript">
var place = null;
var locationChooser = null;
function onLoad()
{
place = document.getElementById('location_chooser_place');
locationChooser = new YoLocationChooser(place);
installLocationChooser();
// the following alert displays "undefined" for the id
alert('locationChooser["@id"]=' + locationChooser["@id"] + "***");
installYoWidget();
}
function installLocationChooser()
{
var place = document.getElementById('location_chooser_place');
//Subscribe to onLocationChange event
locationChooser.onLocationChange = onLocationChange;
/**
lc.open(); - let the user to choose the location, starting on country-level
lc.open("#auto"); - detect location by IP and open it
lc.open("United Kingdom/London"); - open London
*/
locationChooser.open("Austria/Vienna");
}
/**
Event of YoLocationChooser
It is called every time the location changes.
When location was deselected - node is null
node format
node = {
@id, // GeoNames id
@name, // Name from the Geonames data-base
@p // Population
}
Here we reflect selected location in the widget.
*/
function onLocationChange(node)
{
//Do not do anything if location was deselected (node is null).
if (node)
{
// the following alert displays the correct id for Vienna!
alert('locationChooser["@id"]=' + node["@id"] + "***");
var locationId = node['@id'];
var yowidget = document.getElementById('yowidget');
//Select location in YoWindow widget
yowidget.setLocationId(locationId);
}
}
/**
Creates YoWindow widget and adds it to the place-holder "yowidget_place"
*/
function installYoWidget()
{
/**
flashvars parameters
See http://yowindow.com/widget_parameters.html
I have put some examples in the code, uncomment to see them in effect
*/
var flashvars = {
// location_id: "auto",
location_id: locationChooser["@id"],
landscape: "seaside",
background: "#FFFFFF",
lang: "de",
unit_system: "metric",
time_format: "24"
};
/**
Flash parameters
*/
var params = {
quality: "high",
bgcolor: "#FFFFFF",
allowscriptaccess: "always",
allowfullscreen: "true",
wmode: "opaque"
};
/**
id and name of YoWindow widget in HTML DOM
*/
var attributes = {
id: "yowidget",
name: "yowidget"
};
YoWidget.embed(
"yowidget_place", //place-holder id
300, //width
150, //height
flashvars,
params,
attributes
);
}
</script>
</head>
<body onLoad="onLoad();">
<div>
<span id="location_chooser_place" style="display:inline-block; width:250px; vertical-align:top;">
</span>
<span id="yowidget_place" style="display:inline-block;">
</span>
</div>
</body>
</html>
