JavaScript Window Class

  • Views Views: 16,020
  • Last updated Last updated:

Navigation

Development - Fabrik-based Web sites
   Application Tutorials - Real Examples
      Community Builder Interests Picklist
   AutoFading System Messages
   Common Javascript Tasks
   Common PHP tasks
      Check age from DoB in PHP
      Days between 2 dates in PHP
   Content type
   Email templates
   Handy SQL Snips
      How to use field records to filter your db_join?
   How do I ... Developer
      Promote from Dev to Production
   Image overrides
   Javascript
      Form Javascript Objects
      JavaScript Window Class
      Javascript: Elements
      List JavaScript
      User ajax
   Javascript common tasks
      Comparing two dates in javascript
      Masking areas whilst ajax updates
      Select a radio / checkbox in JS
      Setting one date depending on an other
   Javascript Interactivity (+)
   Override default Joomla Login page
   PHP helper functions
   Using eval

Wiki index

Page
  • You can make use of Fabrik's window class anywhere on your Joomla site, as long as the Fabrik System plugin is installed.

    To load the window Javascript you need to use this PHP:

    Fabrik 3.1
    PHP: 

    
<?php
    
FabrikHelperHTML::script(FabrikHelperHTML::framework());
    
FabrikHelperHTML::iniRequireJS();
    
FabrikHelperHTML::windows('a.myFabWin');
    
?>

    Fabrik 3.0:
    PHP: 
    <?php FabrikHelperHTML::framework();
    
FabrikHelperHTML::windows('a.myFabWin'); ?>

    That will first load Fabrik's Javascript framework, then turn any link with a class 'myFabWin' into a trigger to open the window.

    An example of a link might be:
    [HEADING=tml]<a href="https://fabrikar.com"
    class="myFabWin"
    rel="{'content':'test','height':500,'title':'my link rocks','loadMethod':'iframe'}">
    My Link
    </a>[/html]

    The href property is the URL that will be opened in the window.

    The rel property contains a string in a json format. You can include the following properties:
    • width - the window's width in px
    • height - the window's height in px
    • title - the window's title
    • id - a unique id for the window.
    • loadMethod:
      • iframe - will load the URL defined by the href property in an iframe (or by the contentURL property). This is the recommended option to use as it will correctly load external sites, and has fewer issues loading css files which the xhr option sometimes exhibits
        Note: if you are loading a Fabrik page via an iframe please add :
        &iframe=1 to the end of your page's url - this ensures that the fabrik css files are loaded.
      • xhr - will load the URL defined by the href property via an Ajax call
      • html - ignores the href attribute and instead puts the property 'content' in the window
    • content - if loadMethod is html then this content will be placed inside the window. HTML tags can be used.
    • onContentLoaded - a function, if not supplied the default function is to fit the window to the size of its content and to center it on the page. To stop this happening and to force the use of the width/height settings supply a null value e.g.
      HTML: 

      
<a href="https://fabrikar.com" 
      
  class="myFabWin" 
      
  rel="{'content':'test','height':500,'title':'my link rocks','loadMethod':'iframe', 'onContentLoaded': null}">
      
        My Link
      
</a>
    Note: If you are loading URL's to internal pages within your Joomla site, it is best to add the querystring '&tmpl=component' to your url, to load only the page's content and not the surrounding Joomla template.

    Opening via JavaScript​


    To open a simple window to show some html:
    Javascript: 

    
Fabrik.getWindow({id:'uniqueid', 'loadMethod': 'html', 'content':'hello'})

    To load a page in an iframe:

    Javascript: 

    
Fabrik.getWindow({id:'uniqueid', 'loadMethod': 'iframe', 'contentURL':'https://fabrikar.com', 'title': 'window title'});
Back
Top