Enhancing Responsive Layouts with Jquery Implementing Jquery Plugins

CSS Layouts | Enhancing Responsive Layouts With JQuery Enhancing Responsive Layouts With JQuery You can do a lot with just HTML and CSS (particularly HTML5 and CSS3), and we can design beautiful and beautifully responsive Web sites using only those tools. However, JavaScript—particularly the popular JavaScript library jQuery—can enhance your site in a myriad of ways, helping you create content sliders, incorporate interactive photo galleries, animate elements, and more. We touched briefly on jQuery Mobile in the last lecture. In this lecture, we're going to explore a handful of jQuery In this lecture, we'll explore a variety plugins that sharpen and expand your of jQuery plugins that can help you add options for responsive designs. Follow elegance and interactivity to your along at the example site here, and be responsive layouts. sure to check out the source code. In this lecture, you can Implementing JQuery Plugins expect to: Learn how to implement jQuery plugins into your site. Implementing jQuery plugins into your site is fairly easy, and as you Learn how to enhance move through this lecture, you'll notice a pattern in implementing a image slideshows with a responsive slider. jQuery plugin. Once you link to the the main jQuery library in your HTML Learn how to document, using a plugin usually involves the following steps: incorporate a modal dialog. Learn how to customize tooltips. 1. Download the plugin files and upload them to your Learn how to make a mobile friendly server. Minimally, the files include a JavaScript file, but navigation menu. they can also include CSS files. 2. Link to the script (and the CSS, if applicable) in the head of your HTML document. 3. Include a small script in your head as well, defining any plugin options as well as the plugin "trigger." This trigger, usually a class or id name, serves as a hook for the script, so the plugin knows which elements within your document to act on. 4. Place these triggers (as class or id names) in the relevant HTML elements in the body of the document. 5. For some plugins, you have to add some additional CSS rules to your main CSS file. HTML Layout Preparation Before we dive into the plugins themselves, let's begin with our HTML layout. Note here that we're using an HTML5 based responsive framework by Harry Roberts called inuit.css, which makes it easier for us to get up and running with a responsive design: <head> <meta charset=UTF8> Don't try to <meta name=viewport content="width=devicewidth, minimumscale=1.0, maximumscale=1.0"> reinvent the wheel, but do <title>Nine Muse Photography</title> make sure you <! The framework > have the latest <link rel=stylesheet href="css/inuit.css"> wheel <! Your extension > technology: use <link rel=stylesheet href="css/style.css"> an HTML5 based <link href='http://fonts.googleapis.com/css? responsive family=Mrs+Saint+Delafield' rel='stylesheet' type='text/css'> framework to give yourself a <! jQuery > <script leg up on src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jque responsive ry.min.js"></script> design </head> preparation! Note, first of all, our header. We've included a link to the latest version of jQuery (as of this writing, 1.7.1). All of our plugins depend on being included as part of the Web page. Now let's look at the code for our layout: <div class="wrapper"> <div class="grids"> <div class="grid12"> <header> <nav> <ul> <li><a href="#">Contact Us</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> </ul> </nav> <h1>Nine Muse Photography</h1> </header> </div><! /grid12 > </div><! /grids > </div><! /grids > <div class="grids"> <div class="grid12"> <ul> <li><a href="#"><img src="img/pic1.jpg" alt="Picture 1" /></a></li> <li><a href="#"><img src="img/pic2.jpg" alt="Picture 2" /></a></li> <li><a href="#"><img src="img/pic3.jpg" alt="Picture 3" /></a></li> </ul> </div><! /grid12 > </div><! /grids > <hr> <div class="grids"> <div class="grid12 tagline"> We capture your most precious moments, beautifully. </div><! /grid12 > </div><! /grids > <hr> <div class="grids"> <div class="grid4"> [...] </div><! /grid4 > <div class="grid4"> [...] </div><! /grid4 > <div class="grid4"> [...] </div><! /grid4 > </div><! /grids > <hr> <div class=footer> ©2012 Nine Muse Photography, All Rights Reserved </div> </div><! /wrapper > If you recall Lecture One, you'll find the layout's "grid" notation familiar. Here we have a twelve column grid. The header, photo section, and tagline all span the entire width of the page (all twelve columns). There is a middle div with some text, split into three columns. Each "row" is enclosed in a wrapping div, with the class name grids. So far, our page looks like this: Here's our original page running with our now familiar gridded layout system. Now let's add some responsiveness! Click here for a larger version of the image. Photo credits: baby photo by 2nd Street Photography, wedding photo by Varin Tsai, and engagement photo by Seth Lemmons. Notice how much screen real estate those three photos take up. The text is buried beneath them, demanding a lot of scrolling from the user. Let's balance things out and add some interactivity by turning that stack of photos into a slideshow with a responsive slider. Responsive Slider The Web is inundated with content slider jQuery plugins, but only a select handful of those are responsive (that is, the slider shrinks to fit when viewed on a mobile device). For this example, we're going to use ResponsiveSlides.js, a simple slider plugin by Viljami Salminen that is lightweight, less then 1kb when minified, which means all unnecessary whitespace and other characters (such as carriage returns) have been removed to optimize file size and reduce loading time for the user. Once we download the plugin and include it in our file structure, we need Look for plugins that to pull it into our document. Include the following in the head section: have been "minified" to be as lightweight as <script src="path/to/responsiveslides.js"></script> possible. Remember: everything you include The plugin also comes with a CSS file, which we'll need to include as is something that has well. Add the file to your CSS folder, and link to it in your header: to load when users visit your page. <link rel="stylesheet" href="path/to/responsiveslides.css" /> Now, we need to include the following script in our header as well: <script> $(function () { $(".rslides").responsiveSlides({ pager: true, speed: 500, maxwidth: 960 }); }); </script> This defines the "trigger" in our HTML—here, the rslides class—that prompts the slider plugin. We're also setting some basic options: adding a pager and setting both the slideshow speed and the maximum width of the slider (which is just the width of the layout). The advantage of this plugin is that it is completely customizable with CSS,which can also be a disadvantage, as you have to do quite a bit of coding to get the pagers and navigation buttons looking slick. Fortunately, the plugin includes some great demo files, from which we can swipe the CSS we need: .rslides { margin: 0 auto; } .rslides_container { marginbottom: 50px; position: relative; float: left; width: 100%; } .rslides_tabs { margintop: 10px; textalign: center; } .rslides_tabs li { display: inline; float: none; _float: left; *float: left; marginright: 5px; } .rslides_tabs a { textindent: 9999px; overflow: hidden; webkitborderradius: 15px; mozborderradius: 15px; borderradius: 15px; background: #ccc; background: rgba(0,0,0, .2); display: inlineblock; _display: block; *display: block; webkitboxshadow: inset 0 0 2px 0 rgba(0,0,0,.3); mozboxshadow: inset 0 0 2px 0 rgba(0,0,0,.3); boxshadow: inset 0 0 2px 0 rgba(0,0,0,.3); width: 9px; height: 9px; } .rslides_tabs .rslides_here a { background: #222; background: rgba(0,0,0, .8); } The rslides_tabs class encloses the pager, which is just an unordered list of links. The code above styles these links elegantly with shadows, borders, and rounded corners. Now our slideshow looks like this: Shadows and borders give a sense of physical substance to your designs. For users, the more tangible something feels, the more it feels like the product of careful choices, which (not coincidentally) is the definition of elegance. A much more balanced layout, with an elegant image slideshow that features a responsive slider. Click here to see the full layout in action. Now that we've used jQuery to improve our management of screen real estate and add some interactivity, what's next? Well, if the user likes what they see, they'll want to know more, so let's use jQuery to help us give the user an elegant way to get in touch. Modal Window What we'd like is a dialog that allows the user to send us a message, requesting a quote. To create an elegant modal window that pops up when the user clicks on a link, we're going to use leanModal, a jQuery plugin made by a Web design studio out of Australia called Finely Sliced. Again, there are quite a few jQuery plugins that do the same thing; we're picking a minimal one that's small in size but gets the job done. First, add a link to the plugin script in your header: <script src="path/to/jquery.leanModal.min.js"></script> Now, there are two parts to the window in our HTML: the content of the modal window, and the link to this content.

Enhancing Responsive Layouts with Jquery Implementing Jquery Plugins

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support