Thread: vBulletin CMS Widgets - YoWindow Weather Widget
View Single Post
  #36  
Old 12-28-2012, 09:14 PM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Here is an alternative method of displaying the widget. In this one it should display your weather according to your IP and also give you the option to view other locations.

To use this method, create a new template called block_weather and copy the following code:
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">
<!-- 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: "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"
            };
 
            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>
Now add a new forum block. AdminCP > Forums & Moderators > Forum Blocks Manager > Add Block > Custom HTML/PHP

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.

You should be able to add this to your CMS or MEMBERINFO (profile) template by substituting the block_weather code into the relevant template.
Attached Images
File Type: jpg weather.jpg (48.1 KB, 0 views)
Reply With Quote
2 благодарности(ей) от:
In Omnibus, Krusty1231
 
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01275 seconds
  • Memory Usage 1,824KB
  • Queries Executed 12 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD_SHOWPOST
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_box
  • (2)post_thanks_box_bit
  • (1)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (1)post_thanks_postbit_info
  • (1)postbit
  • (1)postbit_attachment
  • (1)postbit_onlinestatus
  • (1)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • reputationlevel
  • showthread
Included Files:
  • ./showpost.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showpost_start
  • bbcode_fetch_tags
  • bbcode_create
  • postbit_factory
  • showpost_post
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • showpost_complete