The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
YoWindow Weather Widget Details »» | |||||||||||||||||||||||||||||||||||||||
What is it?
A simple template modification to bring the YoWindow Weather Widget to vB4 Quote:
Title: Weather Location Code Description: (Whatever you want - here's what I use because the process might confuse some users) Quote:
Field Editable by User: Yes Private Field: Yes Field Searchable on Members List: No Show on Members List: No Display Page: Edit Profile Take note of the newly created profile field number. 2. Next you need to create a new template. Go to AdminCP > Styles & Templates > Style Manager > Add New Template Title: block_weather Code:
<center><li> <div class="block smaller"> <div class="blocksubhead"> <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a> <span class="blocktitle">{vb:raw blockinfo.title}</span> </div> <div class="widget_content blockbody floatcontainer"> <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow"> <vb:if condition="$bbuserinfo[fieldXX] !=''"> <div style="width:230px; height:150px;"> <object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="220" height="150"> <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/> <param name="allowfullscreen" value="true"/> <param name="wmode" value="opaque"/> <param name="bgcolor" value="#FFFFFF"/> <param name="flashvars" value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&time_format=24&us=metric&background=#FFFFFF&mini_locationBar=false&copyright_bar=false" /> <a href="http://yowindow.com/weatherwidget.php" style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;" >HTML weather</a> </object> </div> <div style="width: 220px; height: 15px; font-size: 14px; font-family: Arial,Helvetica,sans-serif;"> <span style="float:left;"><a target="_top" href="http://yowindow.com?client=widget&link=copyright" style="color: #2fa900; text-decoration:none;" title="Desktop weather">YoWindow.com</a></span> <span style="float:right; color:#888888;"><a href="http://yr.no" style="color: #2fa900; text-decoration:none;">yr.no</a></span> </div> <vb:else /> <br/><b>Add your <a href="{vb:raw vboptions.bburl}/profile.php?do=editprofile">Weather Location Code</A> to show your weather forecast in this block. <br/></b> </vb:if> </div> </div> </div> <div class="underblock"></div> </li></center> 3. Go to AdminCP > Forums & Moderators > Forum Blocks Manager > Add Block Title: Weather Forecast Content Type: HTML Content: <div></div> Template To Use: block_weather Now, this part may prove tricky for some going by what I've seen in other weather widget modifications so I'll try and make it simple and add a few pictures, this process is also required to be done by your members to display their local forecast. Go to http://yowindow.com/weatherwidget.php and fill in your details and generate the code. The only part of the code you need is the number after id=gn: and before &. Take note of that number and go to Edit Profile on your site, scroll down to the newly made Weather Code Location and blurb box and enter the number. Save your profile. Go back to your forum home and the new block should display with your weather details for the next 5 days. Click on the scenery image and it will expand to full-screen and give a more detailed outlook. How To Add Location Scenery (village, seaside, airport or oriental) To Your Weather Widget - https://vborg.vbsupport.ru/showpost....1&postcount=24 How To Add Weather Widget To Member Profiles - https://vborg.vbsupport.ru/showpost....4&postcount=18 Added: 28.12.2012 An alternative version that uses IP location to display the weather rather than creating and entering data into a profile field can be found here - https://vborg.vbsupport.ru/showpost....8&postcount=36. It also allows the user to display weather forecasts from many other locations via dropdown menus. If anyone wants to further develop any of my addons, you are free to do so. Screenshots
Show Your Support
|
Comments |
#42
|
|||
|
|||
Quote:
is this block_html? PHP Code:
|
#43
|
||||
|
||||
No, block_html is one of the default templates. I want to see what the code structure is so I can try to get your block to display properly
|
#44
|
|||
|
|||
Quote:
Code:
<li> <div class="block smaller"> <div class="blocksubhead"> <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a> <span class="blocktitle">{vb:raw blockinfo.title}</span> </div> <div class="widget_content blockbody floatcontainer"> <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow"> {vb:raw content} </div> </div> </div> <div class="underblock"></div> </li> |
#45
|
||||
|
||||
Not sure why you are receiving the other errors. Did you follow create the block_weather template using the code from post #36 then follow the steps to create the block?
|
#46
|
|||
|
|||
Quote:
How to create a new template called block_weather? 2- According to the following code, I made some mods to get as the pic, and still waiting for your help to solve the other errors. Code:
<center><div><li> <!-- 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"> //To track if commands can be sent to YoWidget window.isYoWidgetReady = false; function onLoad() { installLocationChooser(); installYoWidget(); } function installLocationChooser() { var place = document.getElementById('location_chooser_place'); //Create YoLocationChooser and keep it as a variable of HTML window this.locationChooser = new YoLocationChooser(place); //Subscribe to onLocationChange event this.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/Stirling"); - open London */ this.locationChooser.open("#auto"); } /** 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) { return; } var locationId = node['@id']; //You can call yowidget methods only after it gets ready to intercept commands var yowidget = document.getElementById('yowidget'); if (!window.isYoWidgetReady) { return; } //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.php I have put some examples in the code, uncomment to see them in effect */ var flashvars = { // location_id: "auto" // landscape: "airport", // background: "#FFFFFF", // lang: "de", unit_system: "us", u_temperature: "c", // time_format: "24" }; /** Flash parameters */ var params = { quality: "high", bgcolor: "#FFFFFF", allowscriptaccess: "always", allowfullscreen: "true", wmode: "opaque" }; var attributes = { //Optionally control the color of the copyright text // copyright_color: "#0000FF", // copyright_link_color: "#FF0000", //id and name of YoWindow widget in HTML DOM id: "yowidget", name: "yowidget" }; YoWidget.embed( "yowidget_place", //place-holder id 240, //width 150, //height flashvars, params, attributes ); } //This function is called by YoWidget SWF when it is ready for commands function yowidget_onReady() { window.isYoWidgetReady = true; var yowidget = document.getElementById('yowidget'); //Display location selected in Chooser if any var node = this.locationChooser.selectedLocation; if (node) { var locationId = node['@id']; yowidget.setLocationId(locationId); } } </script> <body onLoad="onLoad();"> <div> <span id="yowidget_place" style="display:inline-block;"> </span> <span id="location_chooser_place" style="display:inline-block; width:240px; vertical-align:top;"> </span> </div><br/> <div><center><b>Click the image for expanded forecast.</b></center></div> </div> </div> </div> </li></div></center> |
#47
|
||||
|
||||
Quote:
Title - block_weather Code:
<li> <div class="block smaller"> <div class="blocksubhead"> <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a> <span class="blocktitle">{vb:raw blockinfo.title}</span> </div> <div class="widget_content blockbody floatcontainer"> <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow"> <center><div><li> <!-- 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"> //To track if commands can be sent to YoWidget window.isYoWidgetReady = false; function onLoad() { installLocationChooser(); installYoWidget(); } function installLocationChooser() { var place = document.getElementById('location_chooser_place'); //Create YoLocationChooser and keep it as a variable of HTML window this.locationChooser = new YoLocationChooser(place); //Subscribe to onLocationChange event this.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/Stirling"); - open London */ this.locationChooser.open("#auto"); } /** 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) { return; } var locationId = node['@id']; //You can call yowidget methods only after it gets ready to intercept commands var yowidget = document.getElementById('yowidget'); if (!window.isYoWidgetReady) { return; } //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.php I have put some examples in the code, uncomment to see them in effect */ var flashvars = { // location_id: "auto" // landscape: "airport", // background: "#FFFFFF", // lang: "de", unit_system: "us", u_temperature: "c", // time_format: "24" }; /** Flash parameters */ var params = { quality: "high", bgcolor: "#FFFFFF", allowscriptaccess: "always", allowfullscreen: "true", wmode: "opaque" }; var attributes = { //Optionally control the color of the copyright text // copyright_color: "#0000FF", // copyright_link_color: "#FF0000", //id and name of YoWindow widget in HTML DOM id: "yowidget", name: "yowidget" }; YoWidget.embed( "yowidget_place", //place-holder id 240, //width 150, //height flashvars, params, attributes ); } //This function is called by YoWidget SWF when it is ready for commands function yowidget_onReady() { window.isYoWidgetReady = true; var yowidget = document.getElementById('yowidget'); //Display location selected in Chooser if any var node = this.locationChooser.selectedLocation; if (node) { var locationId = node['@id']; yowidget.setLocationId(locationId); } } </script> <body onLoad="onLoad();"> <div> <span id="yowidget_place" style="display:inline-block;"> </span> <span id="location_chooser_place" style="display:inline-block; width:240px; vertical-align:top;"> </span> </div><br/> <div><center><b>Click the image for expanded forecast.</b></center></div> </div> </div> </div> <div class="underblock"></div> </li> Title: Weather Forecast Description: Whatever Cache Time: You Decide Display Order: Up to you Content Type: HTML Content: <div></div> Template To Use: block_weather Save. Purge cache. I don't know what else to tell you, I've tried in 3 different styles and cannot reproduce the errors you have stated. |
#48
|
|||
|
|||
working on it now, just hang on
|
#49
|
|||
|
|||
Quote:
EDIT: I fixed it by making the weather block is the last block, it is temp fix, but better than nothing till we figure out how to fix it while it is in the middle with other blocks |
#50
|
||||
|
||||
Can you send me a link to your site?
|
#51
|
|||
|
|||
www.mobileguide-mea.com/vb
you switch forum language to English from the bottom of the page funny thing happened now, it gives me the date 1 day earlier and the time 1 hour more?!! Edit: the funny thing is back to normal!!! time and date are correct now |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|