• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

JavaScript Window Class

  • Views Views: 16,009
  • Last updated Last updated:
  • 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:

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

    To load a page in an iframe:


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