Widgets

Widgets are little snippets of code that enhance a glFusion site. While not complex enough to be considered a plugin, they perform specific tasks or functions that add interactivity to your site.

Many of the widgets included with glFusion are built in javascript, using the MooTools library as their foundation. Widgets can also be functions that reside in public_html/lib-common.php, private/system/lib-custom.php (for your non-standard custom ones), or most commonly private/system/lib-widgets.php.

MooTools Widgets

One of the benefits of including the MooTools compact javascript library, is the ability to create custom widgets that bring additional functionality to your site. Most of the widgets below function by adding HTML code to a block or static page. You can then position the block or static page however you like on your glFusion powered site (i.e. above or below the featured story, at the bottom of the page, etc.) Additionally, some widgets can be used within .thtml files for a constant site presence.

Typically, the code will call an external javascript file (or you can include the code inline), and then you will wrap the widget contents in a div tag, with appropriate id and/or class selectors.

By default, the css styling for all gl_moo-based widgets is now located in your theme's style.css file.

Since this site uses UTF-8 character encoding, copying and pasting code from this wiki documentation may have unexpected results in non UTF-8 aware text editors.

gl_mooDrawers

By implementing MooTools FX.Slide class, glFusion has the ability to create slideable div elements where you can place additional content that is initially hidden, then once a link is clicked, the div will slide into view either horizontally or vertically, depending upon the parameters specified. Click here to see a live example.

To create a mooDrawer widget, create a static page with the following code:

<script type="text/javascript">
window.addEvent('load', function() {
 
//--horizontal slide
    var mySlideH = new Fx.Slide('gl_moodrawerH', {mode: 'horizontal'}).hide();
        $('toggleH').addEvent('click', function(e){
            e = new Event(e);
            mySlideH.toggle();
            e.stop();
        }); //end horizontal slide
 
//-vertical slide
	var mySlideV = new Fx.Slide('gl_moodrawerV').hide();
		$('toggleV').addEvent('click', function(e){
			e = new Event(e);
			mySlideV.toggle();
			e.stop();
        }); //end vertical slide
 
});
</script>

You only need to include either the horizontal or vertical code, depending upon the specific slide you are creating.

Then, below the above javascript code, create your div elements with the proper id selectors, either gl_moodrawerH or gl_moodrawerV, and then create your toggle link with the id selector (toggleH or toggleV) that will slide in/out the content div:

<div style="width:300px; padding:10px; clear:both;" id="gl_moodrawerV">
	<span class="info">Using MooTools, you can place any content you want in drawers!
		<p>This is an example of a vertical drawer.</p>
	</span>
</div>
 
<a href="#" style="float: left;" id="toggleV">Introducing Vertical MooDrawers</a><br />
<a href="#" style="float: left;" id="toggleH">Introducing Horizontal MooDrawers</a><br />
 
<div style="width:300px; padding:10px; clear:both;" id="gl_moodrawerH">
	<span class="info">Using MooTools, you can place any content you want in drawers!
		<p>This is an example of a horizontal drawer.</p>
	</span>
</div>

To create additional slides, simply increment the selector values in the javascript and in your div elements. For example, a second horizontal slide on the same page would have a javascript var name of MySlideH1, an id of gl_mooslideH1, and a toggle id of toggleH1. The content div id would have a matching id of gl_mooslideH1, and the toggle link id would be toggleH1.

gl_mooMorph

MooTools allows you to animate a morph between CSS property states. For instance, we can animate the glFusion site messages, and have them fade away after a specific amount of time. Click here to see a live example.

<script type="text/javascript">
window.addEvent('load', function() {
var myFade = new Fx.Styles('fade', {duration: 1000, transition: Fx.Transitions.Cubic.easeIn});
	myFade.start.delay(5000, myFade, {
		'height': 0,
		'opacity': 0
	});
});
</script>
<div class="morph-start" id="fade">
	<div style="padding:5px;color:#FFFFFF;background:url(http://demo.glfusion.org/layout/nouveau/images/header-bg.png) #1A3955;">
		<span class="floatright"></span>
			System Message - 04/04 09:47PM
	</div>
	<div style="padding:5px 15px 15px 15px;border-top:3px solid black;background:#E7E7E7;">
		<p style="padding:5px"><img src="http://demo.glfusion.org/layout/nouveau/images/sysmessage.png" border="0" align="left" alt="" style="padding-right:5px; padding-bottom:3px">
			Use this to morph between two CSS states.<br />
			After 5 seconds, this message will automatically fade away and roll up.
		</p>
	</div>
</div>

By default, glFusion ships with a similar morph enabled to automatically fade out the system messages displayed by glFusion. This was accomplished by modifying blockfooter-message.thtml and adding the following javascript after the closing div tag:

<script type="text/javascript">
	var fx = new Fx.Styles('msgbox', { duration: 3000 });
	fx.addEvent('onComplete',function () { $('msgbox').setStyle('display', 'none'); });
	fx.start.delay(5000, fx, { 'opacity' : 0 });
</script>

Then we modified blockheader-message.thtml and set id=“msgbox” to identify the div we wanted to be affected. That's it! For more info on the javascript that animates the effect, refer to the MooTools documentation.

gl_mooRotator

The gl_moorotator widget is a sequential image rotator with hyperlinks and optional descriptive text. Created with javascript, it provides an alternative to using Flash to rotate featured content links on your site. Click here to see a live example.

To create a gl_moorotator widget, go to the Static Page admin interface, and create a static page, and make sure Post Mode is set to HTML Formatted. Then enter the following code, inserting your own content where specified:

// this static page needs to have PHP set to execute PHP below
// use lib-widgets.php
USES_lib_widgets();
 
//call the WIDGET_moorotator function from lib-widgets.php
echo WIDGET_moorotator();
?>
<script type="text/javascript">
	window.addEvent('domready', function() {
		var rotator = new gl_mooRotator('gl_moorotator', {
			controls: true,
			delay: 7000,
			duration: 800,
			autoplay: true
		});
	});
</script>
<div id="gl_moorotator">
	<div class="gl_moorotator">
		<div class="gl_moorotatorimage">
			<a href="http://www.glfusion.org/wiki/doku.php?id=glfusion:mission" target="_blank">
				<img src="http://yoursite/images/library/Image/moorotator1.jpg" />
			</a>
		</div>
		<div class="gl_moorotatortext">
					<b>Welcome to the glFusion Revolution!</b>
				<p>
				Learn more about the glFusion development philosophy today!
				</p>
		</div>
	</div>
 
	<div class="gl_moorotator">
		<div class="gl_moorotatorimage">
			<a href="http://www.glfusion.org/wiki/doku.php?id=glfusion:nouveau#custom_header_images" target="_blank">
				<img src="http://yoursite/images/library/Image/moorotator2.jpg" />
			</a>
		</div>
		<div class="gl_moorotatortext">
					<b>Custom Header Images</b>
				<p>
				Personalize your site according to your visitors time of day!
				</p>
		</div>
	</div>
 
	<div class="gl_moorotator">
		<div class="gl_moorotatorimage">
			<a href="http://www.glfusion.org/wiki/doku.php?id=glfusion:language" target="_blank">
				<img src="http://yoursite/images/library/Image/moorotator3.jpg" />
			</a>
		</div>
		<div class="gl_moorotatortext">
					<b>Language Localization</b>
				<p>
				Support for a multi-lingual site right out of the box!
				</p>
		</div>
	</div>
 
 
	<div class="gl_moorotator">
		<div class="gl_moorotatorimage">
			<a href="http://tracker.glfusion.org" target="_blank">
				<img src="http://yoursite/images/library/Image/moorotator4.jpg" />
			</a>
		</div>
		<div class="gl_moorotatortext">
					<b>Bugs Belong in Nature, not glFusion</b>
				<p>
				Found a bug? Visit our Tracker and submit a report!
				</p>
		</div>
	</div>
 
	<!-- repeat as needed -->
</div>

PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the glFusion Documentation to learn how to enable/disable PHP in static pages.

Set In a block to unchecked, set PHP to execute PHP and save your static page, including any other placement options you desire.

To change the styling of the gl_moorotator, edit your theme's style.css file.

gl_mooRotator-block

The gl_moorotator-block widget is a sequential image rotator with hyperlinks and optional descriptive text. It is the same as the gl_moorotator above, but with different dimensions. Created with javascript, it provides an alternative to using Flash to rotate featured content links in a block on your site.

To create a gl_moorotator-block widget, go to the Block admin interface and create a new block, and make sure Type is set to Normal Block. Then enter the following code, inserting your own content where specified:

<script type="text/javascript" src="http://yoursite.com/javascript/mootools/gl_moorotator-block.js"></script>
<script type="text/javascript">
	window.addEvent('domready', function() {
		var rotator = new gl_mooRotator_block('gl_moorotator_block', {
			controls: false,  //if true, make sure to specify the absolute path to blankimage var in gl_moorotator-block.js above.
			delay: 4000,
			duration: 800,
			autoplay: true
		});
	});
</script>
<div id="gl_moorotator_block">
	<div class="gl_moorotator_block">
		<div class="gl_moorotatorimage_block">
			<a href="http://www.glfusion.org/wiki/doku.php?id=glfusion:start" target="_blank">
				<img alt="Documentation Wiki" title="Documentation Wiki" src="http://yoursite/images/library/Image/moorotatorblock1.jpg" />
			</a>
		</div>
		<div class="gl_moorotatortext_block">&nbsp;</div>
	</div>
 
	<div class="gl_moorotator_block">
		<div class="gl_moorotatorimage_block">
			<a href="http://www.glfusion.org/wiki/doku.php?id=roadmap" target="_blank">
				<img alt="glFusion Roadmap" title="glFusion Roadmap" src="http://yoursite/images/library/Image/moorotatorblock2.jpg" />
			</a>
		</div>
		<div class="gl_moorotatortext_block">&nbsp;</div>
	</div>
 
	<div class="gl_moorotator_block">
		<div class="gl_moorotatorimage_block">
			<a href="http://www.glfusion.org/wiki/doku.php?id=glfusion:mission#teamspeak" target="_blank">
				<img alt="Talk With Us" title="Talk With Us" src="http://yoursite/images/library/Image/moorotatorblock3.jpg" />
			</a>
		</div>
		<div class="gl_moorotatortext_block">&nbsp;</div>
	</div>
 
	<div class="gl_moorotator_block">
		<div class="gl_moorotatorimage_block">
			<a href="http://www.glfusion.org/wiki/doku.php?id=glfusion:mission" target="_blank">
				<img alt="Join Us" title="Join Us" src="http://yoursite/images/library/Image/moorotatorblock4.jpg" />
			</a>
		</div>
		<div class="gl_moorotatortext_block">&nbsp;</div>
	</div>
 
<!-- repeat as needed -->
</div>

Make sure you update public_html/javascript/mootools/gl_moorotator-block.js and specify the absolute path to your blankimage variable. If you don't, you'll notice broken image issues in between image fades. Since the block editor doesn't support switching back and forth between PHP and html code (like the staticpage editor does), you will have to make this edit manually.

To change the styling of the gl_moorotator-block, edit your theme's style.css file.

gl_mooSimplebox

The mooSimplebox is a popup box with fading animation that you can use to display additional html content on your site. It was adapted from the mooMessageBox script located at http://www.artviper.net/mooMessageBox.php. Click here to see a live example.

It works by first specifying a trigger element that will show the Simplebox, for example:

<img id="gl_moosimplebox_trigger1" src="http://yoursite/layout/nouveau/images/pgpkey.png" alt="mooSimpleBox" title="mooSimpleBox"{xhtml}>

Then, place the content that will display in the Simplebox. This div element will start out hidden on your page, and then as it is triggered, will fade in to reveal the Simplebox centered on the browser screen:

<div id="my_gl_moosimpleboxDiv">This is html content in a sample mooSimpleBox</div>

Finally, call the gl_moosimplebox javascript file, and in another script snippet, specify the parameters for your specific Simplebox:

<script type="text/javascript" src="http://yoursite/javascript/mootools/gl_moosimplebox.js"></script>
<script language="javascript" type="text/javascript">
window.addEvent('load',function(){
	var p = new mooSimpleBox({
		width:430,
		height:195,
		btnTitle:'Test',
		closeBtn:'myBtn',
		btnTitle: ' ',
		boxClass:'gl_moosimplebox',
		id:'gl_moosimplebox',
		fadeSpeed:500,
		opacity:'1',
		addContentID:'my_gl_moosimpleboxDiv',
		boxTitle:'My mooSimpleBox Title',
		isDrag:'false'
	});
	$('gl_moosimplebox_trigger1').addEvent('click',function(e){
		e = new Event(e).stop();
		p.fadeIn();
	})
})
</script>

There are several options that you can specify when calling the Simplebox. You can set the Width, Height, Button Title (if you use a button instead of an image), the id of the simplebox, the Fade Speed, the Opacity, the Title of the Simplebox window, and finally, whether the box is draggable or not. (Note: If the box is draggable, the content in the Simplebox will not be selectable.)

The background and close buttons for the Simplebox, are located in the public_html/layout/nouveau/images/moosimplebox/ folder. Additional styling options are found in your theme's style.css file.

gl_mooSlide

The gl_mooslide widget allows you to create multiple content elements, and then alternate between viewing those elements within the display area. This maximizes the use of screen space, keeps the overall page layout cleaner, and allows for enhanced user interaction with your site. Click here to see a live example.

You can navigate between the content elements by either clicking on the individual tab header links, or by using the blue previous and next buttons.

In glFusion v1.1.0 and beyond, we have included a function that will take the content of other static pages, and combine them to create one mooslide. Simply create your static pages, and then create a separate static page, and make sure Post Mode is set to HTML Formatted, then enter the following code:

// this static page needs to have PHP set to execute PHP (return) below
// use lib-widgets.php
USES_lib_widgets();
 
// add your static page IDs, order here is order they appear on the mooslide tabs
$slides = Array('mooslide_whatsnew', 'mooslide_cachetech', 'mooslide_integratedplugins', 'mooslide_mootools', 'mooslide_widgets');
 
//call the WIDGET_mooslide function from lib-widgets.php
// last 3 options below are width, height, and css id
return WIDGET_mooslide($slides, 560, 160, 'gl_slide');

PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the glFusion Documentation to learn how to enable/disable PHP in static pages.

Set In a block to unchecked, set PHP to execute PHP (return) and save your static page, including any other placement options you desire.

The generated mooslide will honor the permissions settings of each individual staticpage element. If the user does not have sufficient rights to see the top tab and corresponding content panel, it will simply be omitted from the mooslide. This means that you could have different mooslide tabs displayed to different users or groups, similar to other content types in the system.

gl_mooSprings

Like the gl_mooSlide widget above, the gl_mooSpring widget is a great way to showcase content, while maximizing layout space. This widget is geared toward prominently displaying important links on your site, and will grab the attention of your visitors, keeping them engaged as they interact with the fun, yet unobtrusive sizing animation. Use them as supplimental menus to important areas of your site. Click here to see a live example.

To setup this widget, go to the Static Page admin interface, and create a new static page. Make sure Post Mode is set to HTML Formatted, then enter the following code:

// this static page needs to have PHP set to execute PHP below
// use lib-widgets.php
USES_lib_widgets();
 
//call the WIDGET_moospring function from lib-widgets.php
echo WIDGET_moospring();
?>
<center>
<div id="gl_moospring">
	<ul class="gl_moosprings">
		<li>
			<a class="gl_moospring gl_moospring1" href="http://www.glfusion.org/filemgmt/index.php">
				<span>Grab It</span>
			</a>
		</li>
		<li>
			<a class="gl_moospring gl_moospring2" href="http://glfusion.org/wiki/doku.php">
				<span>Read It</span>
			</a>
		</li>
		<li>
			<a class="gl_moospring gl_moospring3" href="http://www.glfusion.org/forum/">
				<span>Say It</span>
			</a>
		</li>
		<li>
			<a class="gl_moospring gl_moospring4" href="http://www.glfusion.org/wiki/doku.php?id=glfusion:mission">
				<span>Join Us</span>
			</a>
		</li>
	</ul>
</div>
</center>

PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the glFusion Documentation to learn how to enable/disable PHP in static pages.

Set In a block to unchecked, set PHP to execute PHP and save your static page, including any other placement options you desire.

To create more than 4 spring elements, open public_html/layout/nouveau/style.css and adjust the height and width values for the #gl_moospring selector. Then add the appropriate CSS for the total number of springs desired. For instance:

#gl_moospring .gl_moospring5 {
background:url(layout/nouveau/images/myimage5.jpg) no-repeat;
}
#gl_moospring .gl_moospring6 {
background:url(layout/nouveau/images/myimage6.jpg) no-repeat;
}

Finally, add the additional list item elements to the static page code, as follows:

		<li>
			<a class="gl_moospring gl_moospring5" href="http://glfusion.org/wiki/doku.php?id=gllabs">
				<span>My Spring 5</span>
			</a>
		</li>
		<li>
			<a class="gl_moospring gl_moospring6" href="http://glfusion.org/wiki/doku.php?id=gllabs">
				<span>My Spring 6</span>
			</a>
		</li>

There are 3 variable options you can set in public_html/javascript/mootools/gl_moospring.js that will adjust the size of the spring elements. They are squeeze_to, normal_width, and max_width. Use them in conjunction with the width property under #gl_moospring in style.css to set the appropriate sizing for your springs.

Make sure that the number of springs, minus 1, multiplied by the squeeze_to width, plus the max_width is less than the width declared in #gl_moospring. What? 8-O

So, in mathematical terms:

((total_springs -1) * squeeze_to) + max_width < #gl_moospring{width}

gl_mootickerRSS

This widget allows you to include a slimline RSS feed in your site. The feed links dissolve from one to the next, and when you hover over a link, it pauses the timer. There are also previous and next buttons to navigate the feed manually. Click here to see a live example. By default, it is setup as a static page, but you can easily include the code anywhere in your site.

To setup this widget, first create a portal block in the Block admin interface, give it a Title and Block Name of gl_mootickerRSS.

Make sure you set Type to Portal Block. (The other settings don't matter much, as the block will be hidden anyways.)

Finish filling in the parameters for your RSS URL, and then save it. Then view it to make sure the feed populates. Then, go back into the block setup and uncheck the Enabled box and click Save.

Now go to the Static Page admin interface, and create a static page with the Title and ID of gl_mootickerRSS, and make sure Post Mode is set to HTML Formatted. Then enter the following code:

USES_lib_widgets();
echo WIDGET_mootickerRSS();

PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the glFusion Documentation to learn how to enable/disable PHP in static pages.

Set In a block to unchecked, and set PHP to execute php (return). Save your static page, including any other placement options you desire.

You can set the “Latest News” text label in your site language file(s) located in private/languages/english-utf8.php by default. You can change styling options in your theme's style.css file.

gl_mooTips

By default, glFusion implements MooTools Tips by calling the following javascript code in public_html/layout/nouveau/htmlheader.thtml:

<!-- Load JavaScript -->
<script type="text/javascript" src="{site_url}/js.php"></script>

As part of the loaded javascript, js.php will look in a theme's functions.php file and load any javascript functions it sees in there. For example:

function nouveau_themeJS() {
    global $_CONF;
 
    $js = array();
// uncomment the line below to enable gl_moochronometer header rotator
// MAKE SURE TO CLEAR BROWSER & C.T.L. CACHE when activating/deactivating
//    $js[] = $_CONF['path_html'] .'javascript/mootools/gl_moochronometer.js';
    $js[] = $_CONF['path_layout'] .'js/gltips.js';
 
    return($js);
}

The last line referencing gltips.js will include the following:

		var Tips1 = new Tips($$('.gl_mootip')); //enables use of tooltips
		var Tips2 = new Tips($$('.gl_mootipfade'), { //enables use of fade in/out tooltips
			initialize:function(){
				this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
			},
			onShow: function(toolTip) {
				this.fx.start(1);
			},
			onHide: function(toolTip) {
				this.fx.start(0);
			}
		});
		var Tips3 = new Tips($$('.gl_mootipfixed'), { //enables use of fixed position tooltips (good for hover help text)
			showDelay: 150,
			hideDelay: 400,
			fixed: true
		});

In its most basic form, to create an onhover tooltip, simply give your element the class selector of “gl_mootip” and title of “Tip Title :: Tip Content” like this example from the main site logo in public_html/layout/nouveau/header.thtml:

<a href="{site_url}" class="gl_mootip" title="{site_name} :: {site_slogan}">


To create a tooltip that fades in/out, use the class selector of “gl_mootipfade”. To create a tooltip that is fixed in place (typically used for help dialogs on text links), use the class selector of “gl_mootipfixed”.

If you do not include the :: seperators in your title markup, the tooltip title will automatically be set to the URL of the link, and what you included within the ” and ” will display as the Tip Content.

To change the styling of the mootips, edit the gl_mootips CSS section of your theme's style.css file.

To learn how to implement more advanced tooltip techniques, including custom styled tips, please refer to the MooTools Tips demo page.

IE6 Warning Javascript

glFusion v1.0.1+ includes an IE6 warning javascript based on the MooTools library. It is located at public_html/javascript/mootools/gl_mooie6warning.js. This script is only called if the agent's browser is Internet Explorer 6 or below.

IE6 warning
After a brief delay, a collapsable div (similar to a gl_moodrawer) will animate down from the top of the browser viewport. Text explains to the user (in non-antagonistic terms) why they should upgrade their browser, and provides a link to Microsoft's site to do so.

One of the great features of this script is that if a user clicks on the Close button in the upper right of the message window, it will set a cookie to not remind them to upgrade for 7 days. This way, they won't receive the upgrade notice on each page they visit or refresh. Pretty snazzy, eh? ;-)

The Nouveau theme currently works great in IE6, but if you would rather not use this warning script, simply edit public_html/layout/nouveau/htmlheader.thtml and remove the following line of code:

<script defer type="text/javascript" src="{site_url}/javascript/mootools/gl_mooie6warning.js"></script>

Make sure to clear the CTL cache by going to Command & Control and clicking on the Clear Template Cache icon, and to clear your local browser cache by pressing CTRL + F5.

You can edit the style of the IE6 warning message by opening public_html/layout/nouveau/ie6.css and editing the declarations under the IE6 warning javascript section.

Auto Translations

In addition to the multi-language capabilities built into glFusion, we have partnered with Google to leverage their automatic translation services.

The function WIDGET_autotranslations in private/system/lib-widgets.php builds a list of flag image links that, when clicked, will automatically translate your glFusion site to one of several languages. This translated page is persistent for the browser session, so if you continue to navigate the translated site, each page you visit will continue to be translated, until you close the browser window.

. The languages currently supported by Google include:

Language ISO Code Language ISO Code Language ISO Code Language ISO Code Language ISO Code
Arabic ar English en Italian it Norwegian no Serbian sr
Bulgarian bg Spanish es Hebrew iw Polish pl Swedish sv
Catalan ca Finnish fi Japanese ja Portugese pt Filipino tl
Czech cs French fr Korean ko Romanian rc Ukrainian uk
Danish da Hindi hi Lithuanian lt Russian ru Vietnamese vi
German de Croatian hr Latvian lv Slovak sk Chinese Simplified zh-CN
Greek el Indonesian id Dutch nl Slovenian sl Chinese Traditional zh-TW

The structure of each link is as follows:

<li><a href="http://translate.google.com/translate?hl=XX&sl=YY&tl=XX&u=http://yoursite"><img src="http://yoursite/images/translations/XX.png" alt="XX" /></a></li>

Where XX represents the language to be translated to (see the ISO codes listed above), and YY represents the default language of your site. In the hyperlink, the text hl represents the language the Google header will appear in, sl represents the default language of your site, tl represents the language Google will translate to, and finally u is the URL of the site to be translated.

To call this function in a static page, go to the Static Page admin interface and create a new static page, give it a Title and ID, and make sure Post Mode is set to HTML Formatted. Then enter the following code:

USES_lib_widgets();
echo WIDGET_autotranslations(1);

By setting 1 when calling the function, glFusion will return the text “Click on a flag to automatically translate this site into that country's language” above the list of flags. This text can be edited in the site language file, under the lib-widgets section. By removing the “1” when calling the function, glFusion will return just the list of flag links.

PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the glFusion Documentation to learn how to enable/disable PHP in static pages.

By default, glFusion includes this function already formatted in a nice block that appears on the right side of the homepage.

If you edit that block, you will notice that the code used to create the block is slightly different from the code used above to create the static page. This is because of the additional security in the block system that requires a PHP function called in a block to have the prefix “phpblock_”. Rather than duplicate the entire function and give it a different name, we've decided to wrap the WIDGET_autotranslations function in a phpblock_autotranslations function that lives in public_html/lib-common.php.

/**
 * This block will display a list of flags that link to the Google
 * automatic translation service.
 *
 * Loads the autotranslations widget block from private/system/lib-widgets.php
 */
function phpblock_autotranslations() {
   global $_CONF, $LANG_WIDGETS;
   require_once $_CONF['path'] . 'system/lib-widgets.php';
   return(WIDGET_autotranslations());
}

The flag icons used in this widget came from http://www.famfamfam.com/lab/icons/flags/. These icons are public domain, and as such are free for any use (attribution appreciated but not required). If you find these icons useful, please donate via paypal to mjamesATgmailDOTcom (or click the donate button available at http://www.famfamfam.com/lab/icons/silk)

Note that these flags are originally named using the ISO3166-1 alpha-2 country codes where appropriate. A list of codes can be found at http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2. We have renamed the flags used to match the respective 2 digit language code used by Google for the translation service. These flag icons can be found in public_html/images/translations/.

Wrapper

The wrapper widget allows you to include an external page or site (not part of glFusion, but hosted on the same physical server), within a glFusion page, so it looks like it is part of your glFusion site. It does this via an iframe, and dynamically adjusts the frame height to match the height of the content loaded within the frame. In addition, any links within the frame that point back to your main glFusion site, will break out of the iframe and render properly in the main browser window.

First, make sure you have the following code in private/system/lib-widgets.php (before the closing php tag):

//wrapper widget: wraps a page outside of glFusion (but on the same server)
//and auto adjusts the height of the iframe to whatever page is loaded
//also, load links to parent site in parent window (see public_html/javascript/common.js)
//this script borks in Opera 
function WIDGET_wrapper() {
//add the javascript to take care of dynamic iframe
    global $LANG_WIDGETS;
 
    $display = <<<EOW
    <script type="text/javascript">
 
/***********************************************
* IFrame SSI script II - Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
 
//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]
 
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers)
//This script is tested to work in FF, IE, Safari, Chrome, but borks in Opera
var iframehide="no"
 
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
 
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
 
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
 
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
 
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
 
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
 
if (Browser.Engine.presto) { //mootools 1.2 code to display Opera only message
window.addEvent('domready', function(){
$('noOpera').appendText('{noOpera}');
});
};
 
</script>
EOW;
 
    $display = str_replace('{noOpera}',$LANG_WIDGETS['noOpera'] , $display);
    return $display;
}

Next, add the following code to your public_html/javascript/common.js file:

//widget wrapper iframe buster (load links to parent site in parent window)
    if (top.location != location) {
    top.location.href = document.location.href; }

The above code snippets are already included with fresh installs of glFusion v1.1.9 and higher.

Now create a new static page with the following:

// this staticpage needs to have PHP set to execute PHP below
// use lib-widgets.php
USES_lib_widgets();
 
//call the WIDGET_wrapper function from lib-widgets.php
//see lib-widgets.php for advanced options
echo WIDGET_wrapper();
?>
 
<!--
enter the URL to be wrapped below in the src field below.
THIS URL MUST RESIDE ON THE SAME PHYSICAL SERVER
AS YOUR GLFUSION SITE TO WORK PROPERLY! 
You can also use link(s) on your main page to show an iframe by using the code below
<a href="javascript:loadintoIframe('myframe', 'external.htm')">Link</a>
-->
 
<!-- notice to Opera users only that this script will NOT automatically re-size the iframe height in that browser -->
<div id="noOpera" style="width:100%; text-align:center; margin:10px auto;"></div>
 
<iframe
	src="http://my-other-website-here"
	id="myframe"
	scrolling="no"
	marginwidth="0"
	marginheight="0"
	frameborder="0"
	style="
	        overflow:visible;
		width:100%;
"></iframe>
glfusion/widgets.txt · Last modified: 2010/04/05 16:35 by Geiss
 
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3