Adding Javascript to your pages - client.js

Availability

XS version 24 or later

Article last update

  • 31 December 2016 - added info re client.js method onlayoutdialog
  • 23 October 2015

Related articles

Building a custom home page

Building a custom footer

Adding Custom CSS

Using aliases

Fixing thumbnail hovering problems

Introduction

You can add your own Javascript code, which will then be executed after all the XS script has executed upon page load.

  • Note that for manipulating page elements, you should use CSS whenever possible - as opposed to using script. 
  • Make sure that there isn't a backoffice setting to achieve what you want, before you create CSS or script. When in doubt, contact support by creating a ticket.

Prerequisites

You must have a solid understanding of Javascript, HTML and CSS if you want to make use of this function. Please read the articles about building a custom home page and using custom CSS first. If you want to be eligible for support (in case there are problems with your script), then you must use proper syntax, variable names and indentation.

Adding your Javascript

You can of course add script to any HTML page, but the system has a standard object called client.js that will be included on all client facing pages if you enable it. This is described in this article.

Go to Site configuration and click on Code editor. Next choose Client javascript in the dropdown box at the top of the page. If no script has been added before there will be no code in the editor. Otherwise your code will show and on the top right you'll find information about who made the most recent changes and when. Click on revision to display a list of revisions. This list will allow you restore previous versions e.g. in case you've made a mistake.

Your pages will look for an object with the name client, and if the object exists, its init() function will be called when the page is completely loaded and after the Infradox XS script has finished executing. Therefore, your script must look like this:

var client = {
    init: function() {
          // enter your script here
     }
};

You can add functions to your client object as needed. For example:

var client = {
    init: function() {
         var obj=this;
         obj.sayhello();
         obj.saygoodybey();
     },

     sayhello: function() {
          alert('hello');
     },

     saygoodbye: function() {
          alert('goodbye');
     }
};

Standard methods/functions for the client object

The Infradox XS script libraries check the client object to see if certain functions exist. For example: 

beforepreview: function(modal) {
   alert('called just before opening/loading a preview, modal is either 1 or 0')
}

afterpreview: function(modal) {
   alert('called after opening/loading a preview, modal is either 1 or 0')
}

onlayoutdialog: function() {
   alert('called before displaying the page layout dialog')
}

You can use the onlayoutdialog function to e.g. hide certain options when in mobile mode. E.g. to check if the mobile menu button is showing, and if it is to then hide all view styles from the dialog except styles 0 and 2.

var client = {
   init: function() {
      ...

   },

   onlayoutdialog: function() {
       var tr=$("#pagelayoutmenu tr.tsize").filter(".inuse1").not(".vstyle0,.vstyle2");
       if($("#mobilemenubutton").is(":visible")) {
          tr.hide(); // hide viewstyles except 0 and 2
       } else {
          tr.show();
       }
    }
};

Using JQuery

The XS website pages include JQuery, so you can also use JQuery in your script. For example:

$("#quicksearchtext").css({"border":"1px solid green"}).val("Enter keywords here...");

Explaining JQuery is of course beyond the scope of this article.

Common uses and pitfalls: Make sure to execute script on certain pages only

Jquery script is commonly used to hide or position elements that you can't change with the backoffice settings.

Make sure that you check if you can change settings for something you want to do, BEFORE adding script for it. For instance, to hide certain fields on the preview pages, to change the color of certain field labels and so on - you should use the metadata repository, not script.

Please understand that the script that you add to the code editor is included and executed on every client facing page. Especially if you use a lot of script to manipulate your pages, you should include code so that certain script is only executed on pages where it is relevant. 

You can use the settings object to find out which page (actually which template) is displaying and you can then execute specific script accordingly. 

For example:

if(settings.page==="site\\home.html") {
     alert("You are on the home page");
}

Also, most pages have a unique body id which you can alternatively use to determine the page and execute relevant script only.
Use a code inspector (i.e. Developer tools in Chrome) to find out which elements and id's are used.

For instance, the preview page has a body id "preview". To execute certain script only on the preview page you can use:

if($("#preview").length) {
     // execute this when on the preview page
}

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk