Elements Rotation in web design

jqrotate

  • Mozilla Firefox 3.5+
  • Safari 5.0+
  • Internet Explorer 6+
  • Google Chrome 10+

===========================

jQuery element rotation plugin

In my previous project I needed to rotate some elements, but I hadn’t found any jQuery plugins regarding this issue. (which of course works with ie7 and ie8 as well!)

So I decided to take some time and write this small snippet for jQuery to make the CSS3 rotation easier. It’s a little slow with internet explorer 7 and internet explorer 8, but it still works. (since ie7 and 8 use the deprecated filter method)

===========================

 

Agile Toolkit JavaScript Digest

The purpose of JS chains in Agile Toolkit is to provide a glue between JavaScript and PHP. It is NOT to completely replace native JavaScript.

Agile Toolkit offers a better way to organise your JavaScript code. It is by putting it inside a jQuery namespace. The way you call your function will be slightly different:

// Before
myfunc(123);

// After
$.univ().myfunc(123);

// From PHP
$view->js(true)->univ()->myfunc(123);

 

Extending The Universal library

make a .js file in templates/js and put these codes:

$.each({
    myfunc: function(a){
        alert('myfunc: '+a);
    },
    mysum: function(foo,bar){
        return foo+bar+1;
    },
},$.univ._import);

now you can call js like this:

$page->add('Button')->set('Click Me')
    ->js('click')->_load('secret')
    ->univ()->myfunc('hello world');
/////////////////////////
$page->js(true)->_load('j')->univ()->myfunc(123);

Static Includes

If you are including some 3rd party code, they sometimes might not like dynamic loading. Third party code might assume that the on-ready is not yet triggered or do some other kind of magic. Google Maps code, for example, wants to be loaded along with your page.

If this happens, you can specifically instruct Agile Toolkit to put the include inside the HTML.

$this->api->jui->addStaticInclude('myfile');
// or
$this->api->jui->addStaticInclude('http://pathto/cdn/file.js');

You must be mindful to include this on the page, which is loaded directly, and can potentially open other pages through AJAX, requiring this include. If unsure, add this code to your API’s init() method.

If you want to go even more ‘hardcore’ with the include you can do this:

$this->api->template->append('js_include',
    '<script type="text/javascript" src="http://..."></script>'."\n");

Executing any JS code

One of the goals of JS Chains is security. JavaScript injection is a common problem and by having a nice interface between your JavaScript and server backend you become immune to it.

If you think that you know better, you can execute a string of JavaScript code from anywhere like this:

// DANGER: Contains JavaScript injection vulnerability
$view->js(true,"alert('$my_message')");

// SAFE: $my_message is escaped
$view->js(true)->univ()->alert($my_message);

.