Silex and Javascript #200

Open
lexoyo opened this Issue Sep 14, 2014 · 0 comments

Projects

None yet

1 participant

@lexoyo
Member
lexoyo commented Sep 14, 2014 edited

Silex and Javascript

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

Silex Javascript editor

About Javascript

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

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

Runtime vs edition time

Runtime is when your website is being viewed by a user, or when you preview it using the view menu + preview. It is opposed to edition time, which is when you are viewing your website in Silex, to edit it.

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.

edit CSS classes of an element

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;
  });
});
@lexoyo lexoyo added question doc and removed question labels Dec 29, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment