glFusion Wiki

Site Tools


glfusion:widgets

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
glfusion:widgets [2010/04/05 11:35]
Geiss updated docs for wrapper widget
glfusion:widgets [2015/10/31 16:08] (current)
Mark [gl_mooSlide]
Line 3: Line 3:
 Widgets are little snippets of code that enhance a glFusion site. While not complex enough to be considered a [[:​glfusion:​plugin_admin|plugin]],​ they perform specific tasks or functions that add interactivity to your site. Widgets are little snippets of code that enhance a glFusion site. While not complex enough to be considered a [[:​glfusion:​plugin_admin|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**//​.+Many of the widgets included with glFusion are built in JavaScript, using the jQuery ​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**//​.
  
 +===== jQuery Widgets =====
 +[[http://​jquery.com/​|{{:​glfusion:​jquery-logo.png ​ |}}]]One of the benefits of including the jQuery 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 or PHP 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 theme template files for a constant site presence.
  
-===== MooTools Widgets ===== +**By default, the css styling for all jQuery ​based widgets is now located in your theme'​s **//​**style.css**//​ file.
-[[http://​mootools.net|{{ :​glfusion:​mootools2.png|}}]]One of the benefits of including the [[http://​mootools.net|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.+
  
 <​note>​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.</​note>​ <​note>​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.</​note>​
-====gl_mooDrawers==== 
  
-{{glfusion:​themes:​drawer.png |}}By implementing [[http://​demos111.mootools.net/​Fx.Slide|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. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_moodrawers|Click here]] to see a live example.+====Rotator====
  
-To create a mooDrawer widgetcreate ​static page with the following code:+{{:​glfusion:​screenshot-theme_glfusion_org_2015-10-22_09-24-36.png?​200 |}}By implementing [[http://​www.jqueryscript.net/​slider/​nivo-slider.html|Nivo Slider]] class, glFusion has the ability to create a flexibleresponsive slider. The Rotator widget is 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. 
  
-<code javascript>​ +To create a Rotator ​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.
-<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>​ +
-</​code>​ +
- +
-<​note>​You only need to include either the horizontal or vertical code, depending upon the specific slide you are creating.</​note>​ +
- +
-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: +
- +
-<code html> +
-<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>​ +
-</​code>​ +
- +
-<​note>​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**.</​note>​ +
-====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. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_moomorph|Click here]] to see a live example. +
- +
-<code html> +
-<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>​ +
-</​code>​ +
- +
-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: +
- +
-<code html> +
-<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>​ +
-</​code>​ +
- +
-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 [[http://​docs.mootools.net/​|MooTools documentation]]. +
- +
-====gl_mooRotator==== +
-{{ :​glfusion:​gl_moorotator2.png|}}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. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_moorotator|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:+
  
 <code php> <code php>
-// this static page needs to have PHP set to execute PHP below+// this staticpage ​needs to have PHP set to execute PHP below
 // use lib-widgets.php // use lib-widgets.php
 USES_lib_widgets();​ USES_lib_widgets();​
  
-//call the WIDGET_moorotator function from lib-widgets.php +$sliderData = array
-echo WIDGET_moorotator(); +'​images' ​=> array( 
-?> +  array( 
-<script type="​text/​javascript"​+    ​'image' => '/​images/​library/​Image/​moorotator1.jpg', 
- window.addEvent('domready', ​function() { +    '​caption' ​='Welcome to the glFusion Revolution!<​br>​Learn more about the glFusion development philosophy today!', 
- var rotator ​new gl_mooRotator('gl_moorotator', ​{ +    '​link' ​ => 'http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:mission'​ 
- controlstrue, +  )
- delay7000, +  ​array( 
- duration: 800+    '​image'​ ='/​images/​library/​Image/​moorotator2.jpg',​ 
- autoplay: true +    '​caption' ​=> '<b>Custom Header Images</b><br>​Personalize your site according to your visitors time of day!',​ 
- }); +    '​link' ​=> 'http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:​nouveau#​custom_header_images',​ 
- }); +  ), 
-</script+  array( 
-<div id="​gl_moorotator"​> +    '​image' ​=> '/​images/​library/​Image/​moorotator3.jpg',​ 
- <div class="​gl_moorotator"​> +    '​caption'​ => '<b>​Language Localization</​b><​br>​Support for a multi-lingual site right out of the box!',​ 
- <div class="​gl_moorotatorimage"​> +    '​link' ​=> 'http://www.glfusion.org/​wiki/​doku.php?​id=glfusion:​language',​ 
- <a href="http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:​mission"​ target="​_blank"​+  ), 
- <img src="http://yoursite/​images/​library/​Image/​moorotator1.jpg" /> +  array( 
- </a> +    '​image'​ => '/​images/​library/​Image/​moorotator4.jpg', 
- </div> +    '​caption'​ => '<b>Bugs Belong in Nature, not glFusion</b><br>Found a bug? Visit our Tracker and submit a report!',​ 
- <div class="​gl_moorotatortext"​+    '​link' ​=> '​https://​github.com/​glFusion/​glfusion/​issues',​ 
- <b>Welcome to the glFusion Revolution!</b> +  ), 
- <p> +  array( 
- Learn more about the glFusion ​development philosophy today! +    '​image'​ => '/​images/​library/​Image/​moorotator5.jpg',​ 
- </p> +    '​caption'​ => '<b>Remote Social Authentication</​b><​br>Login to glFusion ​using your favorite social networking services.',​ 
- </div> +    '​link'​ ='http://www.glfusion.org/​wiki/​glfusion:​remoteauth',​ 
- </div>+  ),
  
- <div class="​gl_moorotator">​ +  ​/* repeat the array as needed for more slides */
- <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"​+'​options' ​=> array( 
- <img src="http://yoursite/images/library/Image/moorotator3.jpg" ​/> +  '​slideWidth' ​=> 570,            // the width of each slide    
- </a> +  '​mode' ​=> '​horizontal', ​        // Type of transition - horizontal, vertical, fade 
- </div> +  '​speed'​ => 500,                 // Slide transition duration (ms) 
- <div class="​gl_moorotatortext"​+  '​slideMargin' ​=> 0,             // Margin between each slide 
- <b>Language Localization<​/b> +  '​startSlide' ​=> 0,              // Starting slide index (zero-based) 
- <p+  '​randomStart' ​=> false, ​        // Start slider on a random slide 
- Support ​for a multi-lingual site right out of the box! +  '​infiniteLoop'​ => true,         // if true, clicking Next while on last slide will transition to the first 
- </p> +  '​hideControlOnEnd'​ => false, ​   ​// If true, "Next" control will be hidden on last slide and vice-versa 
- </div+  '​captions'​ =true,             // Include image captions 
- </​div>​+  '​responsive' ​=> true,           // Enable or disable auto resize of the slider 
 +  '​touchEnabled'​ =true,         // slider will allow touch swipes 
 +  '​pager'​ =true,                // If true, a pager will be added 
 +  '​pagerType'​ => '​full', ​         // if full, a pager link will be generated ​for each slide. If short, ​y page will be used (ex. 1 / 5) 
 +  '​auto'​ =true 
 +
 +);
  
 +return WIDGET_slider($sliderData);​
 +</​code>​
  
- <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>​ 
-</​code>​ 
  
 <note warning> 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:​staticpages#​activating_php| glFusion Documentation]] to learn how to enable/​disable PHP in static pages. </​note>​ <note warning> 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:​staticpages#​activating_php| glFusion Documentation]] to learn how to enable/​disable PHP in static pages. </​note>​
Line 194: Line 81:
 Set **In a block** to //​**unchecked**//,​ set **PHP** to //**execute PHP**// and save your static page, including any other placement options you desire. Set **In a block** to //​**unchecked**//,​ set **PHP** to //**execute PHP**// and save your static page, including any other placement options you desire.
  
-<​note>​ To change the styling of the gl_moorotator, edit your theme'​s //​**style.css**//​ file.</​note>​+<​note>​ To change the styling of the Rotator, edit your theme'​s //​**style.css**//​ file.</​note>​
  
-====gl_mooRotator-block==== +====Rotator Block==== 
-{{ :glfusion:moorotator-block.png?​100|}}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.+ 
 +{{:​glfusion:​rotator-block.png?​100 |}}Utilizing the [[http://​bxslider.com/​|bxSlider jQuery Widget]], the Rotator Block 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 in a block on your site. 
 + 
 +To create a Rotator 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:
  
-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: 
  
 <code html> <code html>
-<script type="​text/​javascript"​ src="​http://​yoursite.com/​javascript/​mootools/gl_moorotator-block.js"></​script>​+<script type="​text/​javascript"​ src="​http://​www.yoursitehere.com/​javascript/​addons/bxslider/​jquery.bxslider.min.js"></​script>​
 <script type="​text/​javascript">​ <script type="​text/​javascript">​
- window.addEvent('​domready', ​function() { +    $(document).ready(function() { 
- var rotator = new gl_mooRotator_block('gl_moorotator_block'+        $('.bxslider1').bxSlider(
- controls: false, ​ //if true, make sure to specify ​the absolute path to blankimage var in gl_moorotator-block.js above+            ​slideWidth : 150, 
- delay4000+            mode : '​fade', ​         // Type of transition between slides - '​horizontal',​ '​vertical',​ '​fade'​ 
- duration800+            speed : 500,            // Slide transition duration (in ms) 
- autoplay: true +            slideMargin : 0,        // Margin between each slide 
- }); +            startSlide : 0,         // Starting slide index (zero-based) 
- });+            randomStart ​: false, ​   // Start slider on a random slide - (true / false) 
 +            infiniteLoop : true,    // If true, clicking "​Next"​ while on the last slide will transition ​to the first slide and vice-versa 
 +            hideControlOnEnd : true,// If true, "​Next"​ control will be hidden on last slide and vice-versa 
 +            captions : false, ​      // Include image captionsCaptions are derived from the image'​s title attribute 
 +            responsive : true,      // Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders
 +            ​touchEnabled ​false  // If true, slider will allow touch swipe transitions 
 +            ​controlsfalse       // If true, "​Next"​ / "​Prev"​ controls will be added 
 +            ​pager ​false, ​         // If true, a pager will be added 
 +            auto : true             // Slides will automatically transition 
 +        }); 
 +    });
 </​script>​ </​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"+<ul class="​bxslider1" ​style="padding:0px !important;">​ 
- <div class="gl_moorotatorimage_block">​ +    <​li>​ 
- <a href="​http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:​mission#​teamspeak" target="​_blank">​ +        ​<a href="​http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:​start" target="​_blank">​ 
- <​img ​alt="Talk With Us" title="​Talk With Us" src="​http://​yoursite/​images/​library/​Image/​moorotatorblock3.jpg" ​/+            <​img ​src="http://​theme.glfusion.org/​images/​library/​Image/​moorotatorblock1.jpg" title="​Documentation Wiki" ​alt="​Documentation Wiki">​ 
- </​a>​ +        </​a>​ 
- </div+    </​li>​ 
- <div class="gl_moorotatortext_block">&nbsp;</div+    <​li>​ 
- </div>+        <a href="​http://​www.glfusion.org/​wiki/​doku.php?​id=roadmap"​ target="​_blank">​ 
 +            <​img ​src="​http://​theme.glfusion.org/​images/​library/​Image/​moorotatorblock2.jpg" ​title="​glFusion Roadmap"​ alt="​glFusion Roadmap"​
 +        </​a>​ 
 +    </li
 +    <li> 
 +        <a href="http://​www.glfusion.org/​wiki/​doku.php?​id=glfusion:​mission"​ target="​_blank"> 
 +            <img src="​http://​theme.glfusion.org/​images/​library/​Image/​moorotatorblock4.jpg"​ title="​Join Us" alt="​Join Us">​ 
 +        </​a>​ 
 +    ​</li
 +</ul>
  
- <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>​ 
 </​code>​ </​code>​
 +
 +
  
 <note warning>​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.</​note>​ <note warning>​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.</​note>​
  
 <​note>​ To change the styling of the gl_moorotator-block,​ edit your theme'​s //​**style.css**//​ file.</​note>​ <​note>​ To change the styling of the gl_moorotator-block,​ edit your theme'​s //​**style.css**//​ file.</​note>​
-==== gl_mooSimplebox ==== 
  
-{{ :​glfusion:​gl_moosimplebox.png|}}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]]. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_moosimplebox|Click here]] to see a live example. 
  
-It works by first specifying a trigger element that will show the Simplebox, for example: +====Tab Slider ​==== 
- +{{ :​glfusion:​gl_slide2.png|}}The ​Tab Slider ​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. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_mooslide|Click here]] to see a live example.
-<code html> +
-<img id="​gl_moosimplebox_trigger1"​ src="​http://​yoursite/​layout/​nouveau/​images/​pgpkey.png"​ alt="​mooSimpleBox"​ title="​mooSimpleBox"​{xhtml}>​ +
- +
- +
-</​code>​ +
- +
-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: +
- +
-<code html> +
-<div id="​my_gl_moosimpleboxDiv">​This is html content in a sample mooSimpleBox</​div>​ +
- +
- +
-</​code>​ +
- +
-Finally, call the gl_moosimplebox javascript file, and in another script snippet, specify the parameters for your specific Simplebox:​ +
- +
-<code html> +
-<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>​ +
-</​code>​ +
- +
-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.)//​ +
- +
-<​note>​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.</​note>​ +
-====gl_mooSlide==== +
-{{ :​glfusion:​gl_slide2.png|}}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. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_mooslide|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. 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.
Line 316: Line 149:
  
 <code php> <code php>
-// this static page needs to have PHP set to execute PHP (return) below +  ​// this staticpage ​needs to have PHP set to execute PHP (return) below 
-// use lib-widgets.php +  // use lib-widgets.php 
-USES_lib_widgets();​ +  USES_lib_widgets();​ 
- +   
-// add your static page IDs, order here is order they appear on the mooslide ​tabs +  // add your staticpage ​IDs, order here is order they appear on the slide tabs 
-$slides ​Array('mooslide_whatsnew', 'mooslide_cachetech', 'mooslide_integratedplugins', 'mooslide_mootools', 'mooslide_widgets');+   
 +  ​$dataArray ​array( 
 +    ​'panels'​ => array( 
 +      '​slide_whatsnew', 
 +      ​'slide_cachetech', 
 +      ​'slide_integratedplugins', 
 +      ​'slide_jquery', 
 +      ​'slide_widgets'
 +    ), 
 +    '​options'​ => array( 
 +      '​autoplay'​ =>  6000,         // false or integer - Number of milliseconds betweeen transitions to the next tab. 
 +      '​tabArrowWidth'​ =>  35,      // Width in pixels of the tab arrows. 
 +      '​defaultTab'​ =>  1,          // Index of the tab selected by default. (1-indexed) 
 +    /*  '​height'​ =>  300,  */          // Set a static value for the height of the whole widget in pixels. 
 +      '​indicators'​ =>  true,       // Show panel indicators. 
 +      '​mousewheel'​ =>  true,       // Allow scrolling to the next and previous panel using the mousewheel. 
 +      '​position'​ =>  '​top', ​       // top or bottom ​ - Position of the tabs relative to the panel container 
 +      '​panelArrows'​ =>  true,      // Show the next and previous panel arrows. 
 +      '​panelArrowsShowOnHover'​ =>  true,  // Hide the panel arrows unless the panel container is being hovered over. 
 +      '​tabs'​ =>  true,             // Use tabs 
 +      '​tabHeight'​ =>  30,          // Height in pixels of the tabs container 
 +      '​tabArrows'​ =>  true,        // Use tab arrows when tabs overflow out of their container. 
 +      '​tabSlideLength'​ =>  100,    // Number of pixels to slide the tabs when using the tab arrows. 
 +      '​tabSlideSpeed'​ =>  200,     // Number of milliseconds of the tab sliding transition. 
 +      '​transition'​ =>  '​slide', ​   // slide or fade - Transition to use for panel transitions. 
 +      '​transitionSpeed'​ =>  500,   // Number of milliseconds of the panel transition. 
 +      '​width'​ =>  560,             // Set a static width in pixels for the widget. 
 +    ) 
 +  ); 
 +   
 +  //call the WIDGET_tabslide function from lib-widgets.php 
 +  return WIDGET_tabslide($dataArray);
  
-//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'​);​ 
 </​code>​ </​code>​
  
Line 332: Line 193:
 Set **In a block** to //​**unchecked**//,​ set **PHP** to //**execute PHP (return)**//​ and save your static page, including any other placement options you desire. Set **In a block** to //​**unchecked**//,​ set **PHP** to //**execute PHP (return)**//​ and save your static page, including any other placement options you desire.
  
-<​note>​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.</​note>​ + 
-====gl_mooSprings==== +==== Spring Menu ==== 
-{{glfusion:​themes:​gl_moospring.png |}}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. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_moospring|Click here]] to see a live example.+{{glfusion:​themes:​gl_moospring.png |}}Like the Tab Slider ​widget above, the Spring Menu 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 supplemental ​menus to important areas of your site. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_moospring|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: 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:
  
 <code php> <code php>
-// this static page needs to have PHP set to execute PHP below 
-// use lib-widgets.php 
 USES_lib_widgets();​ USES_lib_widgets();​
  
-//call the WIDGET_moospring function from lib-widgets.php +$menuData = array
-echo WIDGET_moospring(); +  '​images'​ =array( 
-?+    ​array( 
-<​center>​ +      '​image' ​=> '/​layout/​vintage/​images/​grabit.jpg',​ 
-<div id="​gl_moospring"​+      '​link'  ​=> 'http://dvlp.glfusion.org/​filemgmt/​' 
- <ul class="​gl_moosprings"​> +    ), 
- <​li>​ +    array( 
- <a class="​gl_moospring gl_moospring1"​ href="http://www.glfusion.org/​filemgmt/​index.php">​ +      '​image'​ ='/layout/vintage/images/​readit.jpg',​ 
- <span>Grab It</span> +      '​link'​ ='http://​glfusion.org/​wiki/​doku.php', 
- </a> +    ), 
- </li> +    array( 
- <li> +      '​image'​ ='/layout/vintage/images/​sayit.jpg',​ 
- <a class="​gl_moospring gl_moospring2"​ href="http://​glfusion.org/​wiki/​doku.php"> +      '​link'​ ='http://theme.glfusion.org/​forum/​', 
- <span>Read It</span> +    ), 
- </a> +    array( 
- </li> +      '​image'​ ='/layout/vintage/images/​joinus.jpg',​ 
- <li> +      '​link'​ ='http://​glfusion.org/​wiki/​doku.php', 
- <a class="​gl_moospring gl_moospring3"​ href="http://www.glfusion.org/​forum/​"> +    ) 
- <span>Say It</span> +  ), 
- </a> +  '​options' ​=> array( 
- </li> +   '​border'​ =5, 
- <li> +   '​duration'​ =400, 
- <a class="​gl_moospring gl_moospring4"​ href="http://www.glfusion.org/​wiki/​doku.php?id=glfusion:​mission"​+   '​openDim'​ =240, 
- <​span>​Join Us</span+   '​closeDim'​ =125, 
- </a+   '​fadeInTitle'​ =false, 
- </li+   '​height'​ =100 
- </ul+  ) 
-</div+);
-</center+
-</​code>​+
  
-<note warning> 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:​staticpages#​activating_php| glFusion Documentation]] to learn how to enable/​disable PHP in static pages. </​note>​+return WIDGET_springMenu($menuData);​
  
-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: 
- 
-<code css> 
-#​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; 
-} 
-</​code>​ 
- 
-Finally, add the additional list item elements to the static page code, as follows: 
- 
-<code html> 
- <​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>​ 
-</​code>​ 
- 
-<​note>​ 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:\\ 
- 
-<​code>​((total_springs -1) * squeeze_to) + max_width < #​gl_moospring{width} 
- 
-</​code>​ </​note>​ 
-====gl_mootickerRSS==== 
-{{glfusion:​themes:​gl_mootickerrss.jpg |}}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. [[http://​demo.glfusion.org/​staticpages/​index.php?​page=gl_mootickerRSS|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. 
- 
-{{ glfusion:​themes:​gl_mootickerrssoptions2.png|}}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: 
- 
-<code php> 
-USES_lib_widgets();​ 
-echo WIDGET_mootickerRSS();​ 
 </​code>​ </​code>​
  
 <note warning> 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:​staticpages#​activating_php| glFusion Documentation]] to learn how to enable/​disable PHP in static pages. </​note>​ <note warning> 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:​staticpages#​activating_php| glFusion Documentation]] to learn how to enable/​disable PHP in static pages. </​note>​
  
-Set **In a block** to **//unchecked//**, and set **PHP** to **//​execute ​php (return)//**. Save your static page, including any other placement options you desire.+Set **In a block** to //**unchecked**//, set **PHP** to //**execute ​PHP**// and save your static page, including any other placement options you desire.
  
-<​note>​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.</​note>​ 
-====gl_mooTips==== 
-By default, glFusion implements [[http://​demos111.mootools.net/​Tips|MooTools Tips]] by calling the following javascript code in **//​public_html/​layout/​nouveau/​htmlheader.thtml//​**:​ 
  
-<code html> 
-<!-- Load JavaScript --> 
-<script type="​text/​javascript"​ src="​{site_url}/​js.php"></​script>​ 
  
-</​code>​ 
- 
-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: 
- 
-<code php> 
-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);​ 
-} 
-</​code>​ 
- 
-The last line referencing //​**gltips.js**//​ will include the following: 
- 
-<code javascript>​ 
- 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 
- }); 
-</​code>​ 
- 
-{{ glfusion:​themes:​mootip1.jpg|}}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**//:​ 
- 
-<code html> 
-<a href="​{site_url}"​ class="​gl_mootip"​ title="​{site_name} :: {site_slogan}">​ 
- 
- 
-</​code>​ 
-\\  
- 
-{{glfusion:​themes:​mootip2.jpg |}}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. 
- 
-<​note>​To learn how to implement more advanced tooltip techniques, including custom styled tips, please refer to the [[http://​demos111.mootools.net/​Tips|MooTools Tips demo page]].</​note>​ 
- 
-====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.\\ 
-\\  
-{{ :​glfusion:​themes:​ie6warning2.png |IE6 warning}} 
-\\  
-After a brief delay, a collapsable div (similar to a [[#​gl_moodrawers|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 [[http://​www.microsoft.com/​windows/​downloads/​ie/​getitnow.mspx|Microsoft'​s site]] to do so. 
- 
-<​note>​One of the great features of this script is that if a user clicks on the {{:​glfusion:​themes:​ie6_close.png|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? ;​-)</​note>​ 
-  
-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: 
- 
-<code html><​script defer type="​text/​javascript"​ src="​{site_url}/​javascript/​mootools/​gl_mooie6warning.js"></​script>​ 
- 
- 
-</​code>​ 
-<note warning> 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.</​note>​ 
-<​note>​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.</​note>​ 
 ===== Auto Translations ===== ===== Auto Translations =====
  
Line 572: Line 298:
  
 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/​**//​. 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): 
- 
-<code php> 
-//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; 
-} 
-</​code>​ 
- 
-Next, add the following code to your public_html/​javascript/​common.js file: 
- 
-<​code>​ 
-//widget wrapper iframe buster (load links to parent site in parent window) 
-    if (top.location != location) { 
-    top.location.href = document.location.href;​ } 
-</​code>​ 
- 
-<​note>​ The above code snippets are already included with fresh installs of glFusion v1.1.9 and higher.</​note>​ 
- 
-Now create a new static page with the following: 
- 
-<code php> 
-// 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>​ 
-</​code>​ 
glfusion/widgets.1270485356.txt.gz · Last modified: 2015/07/11 17:20 (external edit)