https://github.com/rricard/regions.js

DEPRECATED: It's not standard, don't use that. And it's a jQuery plugin, one more reason not to use it !
https://github.com/rricard/regions.js

Last synced: about 14 hours ago
JSON representation

DEPRECATED: It's not standard, don't use that. And it's a jQuery plugin, one more reason not to use it !

• Host: GitHub
• URL: https://github.com/rricard/regions.js
• Owner: rricard
• Created: 2011-06-11T22:36:30.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2013-01-02T16:15:15.000Z (almost 12 years ago)
• Last Synced: 2023-08-03T20:10:04.445Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 424 KB
• Stars: 65
• Watchers: 4
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Regions.js

==========

The first implementation for the CSS3-Regions in the real world.

That means : not just in an experimental prototypal and unstable browser.

What's the big deal ?

---------------------

If you find [this](http://labs.adobe.com/technologies/cssregions/) interesting, just try this script !

It requires [jQuery](http://jquery.com/) and [Lettering.js](https://github.com/davatron5000/Lettering.js) in order to work, but after that, that's easy !

But first : we aren't able to handle CSS3-Regions properties in your CSS (hey that's planned !). You will have to write a little bit of javascript (oh, you'll see that's really easy !).

How it works !

--------------

**This API is likely to change soon, because it's beta stuff !**

Add that in your page : 

    

    

    

After that, just add :

    

    $(function(){ // When DOM is Loaded

        $("#article-flow").regions(".article-region");

    });

    

So, somewhere in your HTML, you can put things like that :

    


        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae neque id tellus congue sollicitudin sit amet eget nisi. Morbi gravida vehicula varius. Morbi sapien quam, sollicitudin nec vehicula ut, luctus a magna. Sed id ultricies libero. Etiam sagittis, ligula in luctus aliquet, libero urna sodales purus, at suscipit orci est at libero. Nulla cursus pharetra ligula et ultrices.

        
Donec eu odio sed urna consectetur lacinia. Maecenas quam dolor, vestibulum nec condimentum vel, egestas eu lectus. Quisque sit amet quam non eros pulvinar tempus eget in erat. Suspendisse sed sodales justo. Nunc hendrerit cursus tortor, eget accumsan urna sollicitudin sed.

    

    


    


    


Your weird layout is now ready to go !

Syntax

------

You can also pass a jQuery Object or a list of jQuery Objects / jQuery Selectorstring to the function :

    $("#content-source-element").regions($(".content-target-elements"));

    // or

    $("#content-source-element").regions(["#article-region-1", "#article-region-2", "#article-region-3"]);

    // or

    $("#content-source-element").regions([$("#article-region-1"), $("#article-region-2"), $("#article-region-3")]);

    // even mixed

    $("#content-source-element").regions([$("#article-region-1"), "#article-region-2", $("#article-region-3")]);

If you want to use CSS3-Regions (without this polyfill) in a supported browser, you should consider using [Modernizr](http://www.modernizr.com/). A feature detector is present in `feature-detects/cssregions.js`.

**Note that there is currently (4th of april 2012) no browser supporting css-regions, even Chrome [has dropped the support](https://bugs.webkit.org/show_bug.cgi?id=78525#c0)**