Silex and Javascript

Silex has a Javascript editor built-in. It lets you add standard Javascript in your Silex websites.

About Javascript

Javascript is a language made to add interactivity to your websites. Here are some useful links:

• the (always the best) introduction by wikipedia
• a list of several interesting tutorials to get started

It is the complementary to the HTML and CSS languages, which are also available in Silex. See the topics HTML in Silex, and CSS in Silex.

JQuery is included

In all Silex websites, the JQuery javascript library is included. So you can use it in the Javascript editor like this

$(function(){
    // here, the website is loaded
    // this will fade the body out and then fade in again
    $('body').hide(2000).show(2000);
});

Useful links about JQuery

• jQuery Learning Center
• jQuery API Documentation

Runtime vs in-editor vs published

Runtime is when your website is being viewed by a user as a preview, before it is published. This can be done using the view menu + preview or by opening the editable page in a browser. The body will have the silex-runtime CSS class.

The "in-editor" website is when you are viewing your website in Silex, to edit it. The body will have the silex-editor CSS class.

When you publish your website, Silex adds the silex-published CSS class to the body, and since it is visible only outside the editor, it also adds the silex-runtime CSS class. Read this page for more info about the publication process.

Note that the Javascript which you add to your website in the editor included in Silex, is executed at runtime only, not edition time.

Useful CSS classes

In your Javascript you can use CSS classes to select nodes, just like you do in the CSS editor. There are several useful CSS classes predefined in Silex, and you can add your own classes to the elements, using the CSS classes text field, in Apollo mode.

$(function(){
    // here, the website is loaded
    // this will prevent the right click on all the images of your website (no menu on right click)
    $('.image-element').bind("contextmenu", function(e) {
        return false;
    });
});

See the help topic CSS in Silex for instructions about CSS classes.

Custom CSS classes

In your scripts, you can select precise elements and add interactivity to it. E.g. this prevents right click, only on the images you want

$(function(){
    // here, the website is loaded
    // this will prevent the right click on all the images of your website (no menu on right click)
    $('.my-css-class').bind("contextmenu", function(e) {
        return false;
    });
});

To apply select the elements you want, simply add the class name my-css-class to them. To do so, enter Silex advanced "Apollo" mode with tools > Apollo mode.

Then select an element. In the properties you will see a text filed named "CSS classes" (the single line text input). Add a class name there, for example my-css-class.

Page events

In order to have several pages in a single HTML page, Silex uses a JQuery plugin called "pageable" which shows / hide elements when the user clicks on internal links. This plugin also changes the browser address bar with #page-name in the URL. Each time the current page changes, the plugin sends an event called pageChanged which you can catch with $('body').on('pageChanged', yourCallback), like this:

$(function() {
  // this will be executed when the page is loaded
  var current = $('body').pageable('option').currentPage;
  $('body').addClass(current + '-opened');
  $('body').on('pageChanged', function (event, pageName) {
    // this will add a css class on the body, with the name of the page + '-opened'
    // e.g. open the page `page-test1` will add the css class `page-test1-opened` to the body
    $('body').addClass(pageName + '-opened');
    // remove previous one
    $('body').removeClass(current + '-opened');
    current = pageName;
  });
});

The front end API

Please ask questions about that in the issues and add the answers you get here.