Everything our app template does: July 2014 edition | NPR Visuals
The NPR News Apps team, before its merger with the Multimedia team to form Visuals, made an early commitment to building client-side news applications, or static sites. The team made this choice for many reasons — performance, reliability and cost among them — but such a decision meant we needed our own template to start from so that we could easily build production-ready static sites. Over the past two years, the team has iterated on our app template, our “opinionated project template for client-side apps.” We also commit ourselves to keeping that template completely open source and free to use. We last checked in on the app template over a year ago. The Backbone The fundamental backbone of the app template is the same as it has always been: a Flask app that renders the project locally and provides routes for baking the project into flat files. Fabric: Using the app template requires knowledge of the command line. Out of these tools, we essentially built a basic static site generator.
Circular Content Carousel with jQuery
Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the "more" link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original posi View demo Download source Today we want to share a simple circular content carousel with you. The beautiful animal icon set in the ZIP file are by Cyberella and they are licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) License. The HTML Structure The structure consists of a main container and a wrapper for the items. The initial view of the content carousel: When we click on “more…”, another content area will slide out and move the respective item to the left:
Storybench | The art and science of digital storytelling
40 jQuery Plugins to Make Your Website User Friendly
The basic function of a plugin is for it to perform an array of methods with a collection of elements. Each method which comes with the jQuery core such as a plugin, like .fadeOut() or .addClass() . A jQuery plugin is basically a new method which is used in order to extend the jQuery’s prototype object. When extending the prototype object all of the jQuery objects are enabled and are able to inherit any methods which are added. jQuery has a vast community of skilled developers who continually create incredible scripts and applications for the web. Enjoy! 1. FlowType.JS is a jQuery plugin which can auto-resize the font-size and line-height (according to the width of the element wrapping it) so that our content is displayed just as we prefer. 2.jQuery Flat Shadow jQuery Flat Shadow is a plugin which can add this fading shadow to everything targeted. 3. Arbitrary.Anchor.js is a jQuery plugin that extends the standard anchor functionality (linking with #). 4. tidyTime.js 5. 6. 7. 8. 9. 10.
Wiki HybLab datajournalisme
Reveal: jQuery Modal Plugin
Setting up Reveal modals is only three easy steps. Attach the needed files, drop in your modal markup then add an attribute to your button. Reveal is awesome because it's easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB. What that means for you is that it's fast, sexy and just works. Reveal is now part of Foundation! This version of Reveal has been depreciated. Visit Foundation Step 1: Attach Needed Files Step 2: The Modal Markup Step 3: Attaching Your Handler By putting the "data-reveal-id" attribute on the anchor, when clicked the plugin matches the value of the "data-reveal-id" attribute (in this case "myModal") with an HTML element with that ID. Basically, put the "data-reveal-id" attribute on an object and make it's value the ID of your modal. Options Every good plugin has options, and this one has just a few, but important ones: Download Download the Reveal Kit Demo The Modal Now On GitHub
Unique scrolling website. jQuery Plugins and techniques. - wwValue. Design, free psd, Icons, vectors. Website templates. Wordpress optimization
The top trends of web design are managing content in a completely different way as we always used it. No more common breadcrumbs, left side or top side menus with navigation links. Now we get more fancy way of representing our portfolio, photo galleries or promotion pages. More and more websites uses parallax effect and sliding/scrolling content with object animation, putting data visualization to the next level. You can ask how they do all these fancy stuff? Here you will find a list of tutorials and also a list of jQuery plugins for creating a scrolling presentational website. Acsensor.js Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system, where pages are navigated by clicking on customizable navigation are or by using previous/next buttons. Features: Scrollorama Good plugin to do all sorts of stuff, like objects flying, rotating and fading; parallax effect and ability to pin content etc. Curtain.js Features Compatibility Impress.js jmpress.js
MeanMenu - a jQuery responsive menu Plugin | MeanThemes
The Main Features Hide or show menu childrenTarget navigation element to swap out with MeanMenuOrientation adjustment (centered menu will reposition when you tilt the device)Control screen width at which MeanMenu activatesExpanding/Collapsing sub navigationBundled with configurable CSSQuick to setup and configureMedia Query independent The Demo The dedicated demo page All of the boring “how to implement” stuff is over on… The WordPress Plugin Buy via PluginHero The jQuery Plugin Github or download it straight away: MeanMenu zip download The Small Print This jQuery plugin is free for you to use and implement, we do not offer any official support for the plugin, if you would like to ask any questions though, please do over on our contact page. Please note: This is not a menu system replacement. If you are looking for drop down functionality on the desktop, MeanMenu doesn’t do it.
S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations
Today I'm going to share with you a gallery plugin I built (yeah, like the world needs another gallery plugin, right?) after having stumbled upon SONY's products gallery while I was browsing their website a while ago. Their products' image gallery is a simple one, but two things grabbed my attention about the gallery: It's made with Flash when it can totally be created with HTML, CSS3 and Javascript. Not to mention that the gallery is accessible by keyboard and you can navigate through the images via keyboard shortcuts, and enter into fullscreen mode with only the gallery being in fullscreen, therefore removing all distractions so that you can focus only on the products gallery. The plugin uses HTML5's FullScreen API, and relies heavily on CSS3 animations transforms, so it will work only in browsers that support these features. Markup The small images should be scaled versions of the big images, i.e they should all have the same aspect ratio for best results. Dependencies Using the Plugin
jquery - Progress bar should display on screen until web page loads fully
