xspade/fullscreen-jquery-plugin

There is no license information available for the latest version (0.1) of this package.

Makes HTML elements fullscreen by changing height and width without recreating the element again.

0.1 2015-05-18 15:42 UTC

Requires

• components/jquery: >1.9

Requires (Dev)

• components/jquery: >1.9

Unknown License

• PrabeenGiri

README

This is a simple jQuery plugin which sets any HTML element as fullscreen by changing its height and width. It does not recreate the element again like other Layover, Modalbox does.

Usage:

$('#fullscreen-link').click(function(){
  $('#iframe,#content-block').FullScreen({
    // This option has to be implemented if 'title' is required on the header when fullscreen mode is on.
    title: function(fullScreenElement) {
      if (!fullScreenElement.parents('.dashboard-iframe-block').find('.dashboard-iframe-header span:first')) {
        throw new Error("Require element to display fullscreen title is not found.")
      }
      return fullScreenElement.parents('.dashboard-iframe-block')
        .find('.dashboard-iframe-header span:first')
        .attr('data-title'); 
    },
    // Optional settings
    // Activates fullscreen when CTRL + F key is pressed only if there is only one Fullscreen element
    // in the DOM.
    controlF : false,
    //Invoked when fullscreen mode is inactive after being active
    hidden: function (fullScreenElement) {
      fullScreenElement.sibiling('span').show();
    },
    // Invoked when fullscreen mode is active
    shown: function (fullScreenElement) {
      fullScreenElement.next('div.test').hide();
    },
    // Exit title that gets dispalyed in the top of the page when fullscreen mode is active
    exitTitle: "Exit Fullscreen",
    // Length of the title to be displaye in the header of the fullscreen mode. If titile exceeeds 
    // The specified length, then its will trim it appending ellipsis at the end. 
    titleLength: 85
  });
});