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. It has a neat feature: exiting the slideshow mode back to the grid view mode, the last image which was active in the slideshow mode "returns back" to its position in the grid view, thus the user knows where they have stopped and what images are left in the gallery that they haven't maybe browsed. 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. Markup
Any tutorials on simple responsive navigation bar? Very simple, very basic....can be elaborated on to include a sandwich icon which are common with mobile menus. Alternatively Google youtube there's plenty of tutorials, some complex and some simple - solution depends what it is you want to do. <title>Mobile Menu</title> $(document).ready(function() { $('#showMenu').css('cursor' , 'pointer').click(function() { $('nav').slideToggle(); $(window).on('resize', function(){ var win = $(this); //this = window if (win.width() >= 600) { $('nav').show(); } if (win.width() <= 599) { $('nav').hide(); } body { margin: 0; padding: 0; font-family: sans-serif; font-size: 15px; nav { display: block; background-color:#333; nav ul { nav li { list-style: none; width: 100%; nav a { text-decoration: none; color: #fff; padding: 10px; border-bottom: 1px solid #fff; nav a:hover { background-color: #999; #showMenu { display: none; @media screen and (min-width: 600px) { display: inline; display: inline-block; border-bottom: none; <div id="showMenu">Show Menu</div> <li><a href="#">Link 1</a></li>
jquery - Progress bar should display on screen until web page loads fully Off Canvas Page Slide / Fly-Out Navigation Example | Responsive Navigation Over the past few years, this method has really become the de-factor method of responsive navigation. This menu pattern was originally derived from how Facebook has popularized the "off-canvas" look on their mobile website and app. When the browser gets down below a certain breakpoint, the menu disappears and we are presented with a single "menu" button. When this button is clicked, the menu slides out from the left and the main body content moves to the right. This gives the appearance of a menu that is sitting "off canvas" or out of the picture, then it slides in to reveal itself. I used to think that this menu couldn't accommodate a large menu with lots of sub-navigation. Javascript Check out the JS that gives the body a class of "active" when the menu button is clicked: $('.js #menu-toggle').click(function (e) { $('body').toggleClass('active'); e.preventDefault(); }); It's pretty straight forward - once the menu button is clicked, we toggle a class of "active" on the body tag. Credit
html - How can I insert text from an external file onto a div Erick Arbe Updated on: 3-9-2013 I’ve looked at a lot of websites on my iPhone. I’ve tried to study how other designers and developers out there are tackling navigation when their website is viewed on a tiny screen. So I started to check out what the web had to offer on responsive navigation. Here are a few fun things I have learned about how to handle navigation on your responsive projects: Make ALL of your content accesible from all platforms and devices. Make your buttons easy to tap. Should I Hide Menu Items to Make My Navigation Responsive? The quick answer: probably not. The reason I don’t like hiding your sub-nav: why hide content from your users just because they are browsing your website from a mobile device? In Conclusion So after all of this research, here is a link to the site that I built which contains some examples of navigation patterns. www.responsivenavigation.net →
jQuery TwentyTwenty Plugin Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them! Download TwentyTwenty The Problem We recently needed a way to showcase the visual differences between two images. One of our Design Leads pointed us to Canada Goose, a cold weather outfitter. This sparked a few new ideas on how to do something similar for our own needs. Responsive and functional on all devices Doesn't require images to workWorks with Foundation out of the box How it works TwentyTwenty works by stacking two images on top of each other. We're using custom movement events from the jquery.event.move library in order to support 1:1 slider movement on mobile devices. Setting up It's easy to get started, just wrap two images inside of a container. Then call twentytwenty() on this container once the images have loaded: $(window).load(function() { $("#container1").twentytwenty(); }); And voila! Preventing FOUC JavaScript Options Dependencies Customizing
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. 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: The default options are the following: We hope you enjoy this simple carousel and find it useful! View demoDownload source
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.
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. Now let's see how easy is can be to get Reveal working! 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:
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? A pinch of modern technologies like HTML5 and CSS3, powered with jQuery, will make any unflavored sites totally fresh. 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 Curtain.js Features Compatibility Impress.js jmpress.js features
How to 'lazy'-load images with jQuery – Christian Fei – Web Developer In this tutorial you'll learn how to delay the loading of images in long web pages. Images outside of the viewport (visible part of web page) wont be loaded before the user scrolls to them. This is the exact opposite of image preloading. I needed this little hack, because of a couple of lists with many images (here,here & here). You can try it out by yourself by clicking on the links above and see it in action. A sneak peek of what you'll get: Before/while the user scrolled on the images : Images that now 'lazy'-loaded successfully : How to implement it This steps are pretty simple and straightforward, though you have to alter your html code: 1) Download the minified version of lazyload from github 2) In the-tag of your site you have to get the latest jquery and also include the lazyload source : 3) Now change the following things where you have images that you want to lazy-load : a) The source attribute src in your images needs to be replaced by the custom data-original attribute. After :
Sliding Letters with jQuery Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different […] Today we have a neat little effect for you. We will be using the Lettering.js jQuery Plugin which you can find on Github. Example In the following we will go through an example and we’ll start by the html for a little menu: We will use data-hover to indicate the word that should appear on hover. So, “sl-w1″ is the class for the first word letters and “sl-w2″ is the class for the second word letters. Finally, we call the plugin: The following settings can be used: We hope you liked this little experiment and find it useful! View demoDownload source