background preloader

StickUp - a free jQuery Plugin

StickUp - a free jQuery Plugin
Setting up stickUp in Wordpress is a breeze. I am also working on development of a Wordpress Plugin version of stickUp, which will allow for an easy backend to work with and include many features. Its exactly the same as setting it up on any other website, but here are exact instructions for Wordpress users. First, you must download the stickUp javascript file 'stickUp.min.js' and place it in a directory called 'js' in your theme's directory. Visit GitHub Next, include the stickUp javascript file into Wordpress. Near the very bottom of the file above the '</body>' tag and below the '<? Finally, add the javascript code that enables stickUp on your Wordpress Theme. Directly below the code that we inserted in the last step, paste the following code snippit. Done! **Specifically look at the Extras feature 'marginTop' to add a margin for use with the Wordpress Toolbar, otherwise it may have a conflict.

Echo.js, simple JavaScript image lazy loading I’m currently working on a project for Intel’s HTML5 Hub in which I require some image lazy-loading for an HTML5 showcase piece that’s high in image content. After a quick Google search for an existing lazy-load solution there was yet another mass of outdated scripts or jQuery plugins that were too time consuming to search through or modify for the project - so I ended up writing my own. Echo.js is probably as simple as image lazy loading gets, it’s less than 1KB minified and is library agnostic (no jQuery/Zepto/other). Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image src attribute. This is also an asynchronous process which also benefits us. Using Echo.js Just drop the script into your page before the closing </body> tag and let it do its thing. JavaScript var Echo = function (elem) { this.elem = elem; this.render(); this.listen();};

slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:

<voice-elements> Provides you a simple DOM API to do speech synthesis (text to speech). In the following demo, we set some content into the text attribute. Then, by using the autoplay attribute, the voice is played when the element loads. Reload the page to hear it again. In the following demo, we define a different language by using the accent attribute. <voice-player id="mi-elemento" accent="es-ES" text="Me gusta la gasolina"></voice-player><script>var form = document.querySelector('#mi-form'), element = document.querySelector('#mi-elemento'); form.addEventListener('submit', function(e) { e.preventDefault(); element.speak(); }); </script> In the following demo, the text attribute is set according to the input value. Options Methods Events

Moment.js | Home Try WinJS aroc/side-comments · GitHub

Related: