Animate to Hide and Slide Content with jQuery [Tutorial] |
- Animate to Hide and Slide Content with jQuery [Tutorial]
- Web Development & Programming Bundle [Deal]
- 6 Hottest Portable Gaming Devices of 2013
- Convert More Than 100 File Types On Browser With CloudConvert
| Animate to Hide and Slide Content with jQuery [Tutorial] Posted: 12 Sep 2013 08:30 AM PDT Over the past few years I have seen dozens of various portfolio website layouts. There are so many different techniques you can use on such a typical user interface. And even with larger design firms or agencies, many of the same UI aesthetics will work great. One of my favorite examples is the sliding navigation found on Riot Industries. In this tutorial I want to demonstrate how we can build a similar interface using jQuery animation. These codes are fairly basic and should work in any fixed-style website layout. This type of design leaves room for hidden content, along with main content cascading down the page. Ideally we will be using jQuery animations powered by jQuery UI easing effects. I have created a live example with the navigation bar fixed onto each corner of the webpage. Check out some of my demos and see if this interface could work well in any upcoming design projects. More: Navigation sliding from right, or top. Building our First DocumentWe can start with the left-hand navigation menu and build out the other demos using similar code snippets. I am including the jQuery and jQuery UI libraries hosted by Google, along with a custom Google Webfont class. We will keep all the sliding codes tucked away inside a separate JS file named nav-left.js. <!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Vertical Page Navigation Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://www.hongkiat.com/blog/favicon.ico"> <link rel="icon" href="http://www.hongkiat.com/blog/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="global.css"> <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=ABeeZee"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/nav-left.js"></script> </head> This method works so well because we can quickly swap out the JavaScript file to implement a different sliding effect elsewhere on the page. But of course, this also requires some very specific CSS properties. The hidden background content should always be positioned behind the main content window so it is originally out of view. <div id="about"> <h2>Lorem Ipsum Dolor</h2> .... </div> <div id="mainpage"> <nav> <h1>Webpage Title</h1> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#about">Click Me</a></li> <li><a href="#" class="hovertrigger">Hover Me</a></li> </ul> </nav> <div id="content"> <!-- place your main page content here --> </div> </div> The inner body container uses 2 divs for separating this content. The first div #about holds our hidden content, and should be labeled appropriately. In this demo we are displaying information about the company but you could make this into anything. Now the Designing the Page LayoutWith all the basic HTML in place we can jump over into our CSS stylesheet. Aside from the typical resets there are also some rules for positioning each of the two divs on top of one-another. More specifically we need the main content div to always be above the hidden div, and we need to limit the content so it fits within the window. #about { display: block; width: 350px; padding: 8px 11px; padding-top: 35px; position: absolute; top: 0; left: 0; height: 100%; } #mainpage { width: 100%; height: auto; display: block; background: #473d47 url('http://media02.hongkiat.com/jquery-sliding-navigation/bg.png'); min-height: 800px; overflow: hidden; position: relative; z-index: 2; color: #fff; } Absolute positioning is the quickest way to have the hidden div snap right up onto the page and move everything over it. We are limiting to 350px width because that is just about how many pixels we are sliding the menu open to display this new content. We also need to use #mainpage nav { position: absolute; width: 180px; min-height: 100%; padding: 0px 8px; padding-top: 220px; background: #343638; } #mainpage nav h1 { font-family: 'ABeeZee', 'Trebuchet MS', Arial, sans-serif; font-size: 2.85em; line-height: 1.3em; font-weight: bold; text-transform: uppercase; margin-bottom: 11px; } #navigation { list-style: none; } #navigation li { display: block; margin-bottom: 2px; font-size: 1.4em; font-weight: bold; } #navigation li a { display: block; padding: 8px 6px; width: 100%; color: #d1e0f8; text-decoration: none; } #navigation li a:hover, #navigation li a.open { color: #fff; background: #484e57; } Now for the navigation menu I am using a root The inner anchor links are set up block-style to break down onto a new line. Also this gives extra padding so it is easier to click on the links without being so precise. Much of the other navigation styles are setup later in the document. But these follow a similar ruleset using absolute positioning to pin the navigation menu wherever we want it. Looking into jQuery AnimationFor developers who are unfamiliar with JavaScript this code may appear daunting at first. There are a lot of logic checks and animation functions we’re calling, but the methods are well-explained in the jQuery documentation. But to make things easier we can break this down into separate blocks for each individual action. $("#navigation li a").on("click", function(e){ e.preventDefault(); var hrefval = $(this).attr("href"); if(hrefval == "#about") { var distance = $('#mainpage').css('left'); if(distance == "auto" || distance == "0px") { $(this).addClass("open"); openSidepage(); } else { closeSidepage(); } } }); // end click event handler The first chunk of code is placing a click event handler onto all of our navigation links. Whenever the user clicks on a link we call this internal function to stop the href value from loading and instead check which link has been clicked. If we can see the href points to Then we are checking against the current CSS “left” position of the navigation. If this value is set to auto or 0px then it means the nav is closed and we want to open it. Otherwise the left value is larger than 0px and it is already open, so we need to close the menu. The two functions function openSidepage() { $('#mainpage').animate({ left: '350px' }, 400, 'easeOutBack'); } function closeSidepage(){ $("#navigation li a").removeClass("open"); $('#mainpage').animate({ left: '0px' }, 400, 'easeOutQuint'); } Having these functions written and coded will save us lots of space when writing other methods in the future. Now we don’t have to copy/paste the same codes repeatedly just to generate the same effect. Notice how the two animations are using different easing functions as well. jQuery UI can offer an invaluable service to improve custom animations on your page. Display Menu on HoverThe other two jQuery blocks are checking for when the user hovers over our “hover” link, and when the user clicks the “close” button. These perform very different tasks but also utilize the same functions written above. Let’s start with the hover effect: $("#navigation li a").on("hover", function(){ var classval = $(this).hasClass("hovertrigger"); if(classval == true) { var distance = $('#mainpage').css('left'); if(distance == "auto" || distance == "0px") { $(this).addClass("open"); openSidepage(); } } }); // end hover event handler We are again checking against every single anchor link in the navigation, except this time our event handler is tied to a hover event. Then we see if the hovered link is using the class $("#closebtn").on("click", function(e){ e.preventDefault(); closeSidepage(); }); // end close button event handler A lot of these codes are fairly repetitive and perform the same actions many times over. But this is crucial for our layout since the user will have many different ways of accessing the same content. Now inside the nav-right.js we are using the same codes except on the opposite side. So instead of checking the CSS left value, we are checking against the right and seeing if the menu is opened or closed. Now my other two demos feature the navigation bar on the right-hand side, or at the top of the screen Using a fixed bottom nav means that it will scroll with you as you go down the page. It is a nice little effect if there is enough padding at the bottom of the screen to keep from cutting off additional page content. Be sure to download a copy of my source code and see what else you can build. More: Navigation sliding from right, or top. Final ThoughtsDevelopers who are unfamiliar with jQuery may feel a bit overwhelmed by the size of these various functions. But in truth the scripts are written very simple and shouldn’t require much time to understand. And even without the sliding effects you can still make an awesome layout focused on this vertical-navigation design style. I do hope this tutorial may offer a solution to some designers or web developers out there. The codes have been tested in all modern standards-compliant browsers and should work perfectly. You are free to download a copy of my codes and edit/customize to your own liking. But we also want to hear your thoughts on this tutorial in the post discussion area. 
   | ||
| Web Development & Programming Bundle [Deal] Posted: 12 Sep 2013 08:00 AM PDT Want to learn CSS3 or HTML5 but can never really wrap your head around the tutorials available on the Web? We’ve established that not everyone is good with the self-taught method but it’s never too late to learn to code and there are plenty of resources to help guide you. In this bundle, you will be able to learn CSS3 and HTML5 among other web programming languages from 255 lectures spread out over 14 hours of actionable instruction lessons from John Bura of Mammoth Interactive. The course is perfect for beginners, can be viewed on the iPad and is optimized for both Windows and Mac OS. Valid for the next 14 days, head back to school by signing up for this course for just $79 via deals.hongkiat.com. You will receive a license that lets you subscribe to the course for unlimited access. 
   | ||
| 6 Hottest Portable Gaming Devices of 2013 Posted: 12 Sep 2013 06:01 AM PDT Within a short time, the future of gaming has shifted from the arcade to the TV then straight into our hands. While devices keep coming from the big names in gaming, many indie developers and designers now have the opportunity to bring their ideas to fruition through crowdfunding. iPad games may be a hit with casual gamers young and old, however hardcore and professional gamers are spoilt for choice with a wider selection of smaller, lighter yet more powerful devices to play their favorite games on these days. We are going to look at 7 of the latest and greatest portable gaming devices and consoles that 2013 has to offer. Read Also: 30 Awesome Gaming Devices For PC Gamers 1. NVIDIA SHIELDThe NVIDIA SHIELD is a revolutionary product that redefines how games can be played. The technology enables you to stream games from your PC to the device, over Wi-Fi. Via cloud gaming, users can now play high-performance PC games even though they are not supported on portable devices (yet). The controller and built-in speakers on the NVIDIA SHIELD give gamers the full gaming experience, and you don’t have to be stuck in front of your PC to experience it. SHIELD also supports Android games as the 720p 5-inch touchscreen acts like a tablet, and just like a tablet, it has 16GB of storage, supports MicroSD cards and can be charged with a Micro USB port. [$299] 2. Razer Edge ProGamers would know about Razer, a gaming peripheral company that has influenced the scene for a long time. They recently started making mobile devices, still keeping hardcore gamers as their target audience. The Razer Edge Pro is a 10.1-inch Windows 8 tablet that can support most of today’s high-performance PC games. It is powered with an Intel i7 Processor, NVIDIA 640M Graphics, 8GB of RAM and 128GB/256GB Solid State Drive. Because of its crazy hardware however, it’s a bit heavy (over 900g or 2lbs), can get quite hot and will set you back about a grand. The gamepad pictured above is also sold separately. [$1299.99 + $249.99] 3. Razer Blade ProNot a fan of tablet gaming? Well, opt for the Razer Blade Pro gaming laptop instead. The unique selling point here is the Switchblade interface that replaces the traditional numpad. The Switchblade interface is a fully customizable LCD Track panel which can dislay game info, plus 10 buttons that can be programmed with the gamer’s favorite hotkeys. The aluminium body laptop houses a lot of powerful hardware: i7 Quad Core Processor, NVIDIA 765M Graphics, 8GB RAM, 128/256/512GB Solid State Drive, front facing webcam, Wi-Fi, Bluetooth together with a backlit keyboard for gaming in the dark. [$2299 - $2799] 4. GameStickHere is a successful Kickstarter project that can be plugged into the HDMI port of your TV for a gaming session. The games you’ll find in this USB flash-drive-like device are Android based. A single GameStick can support up to 4 controllers, connected via Bluetooth, giving you a multiplayer experience with your friends. Games are stored in its built-in 8GB storage with the option of adding a 32GB Micro SD card for even more games. It’s also very portable as the HDMI-stick fits into the Bluetooth controller, so you can bring it wherever you go, with ease. [$79.99] 5. WikipadAlthough the Wikipad is a tablet, one thing sets it apart from other tablets. Out of the box, it comes with a controller dock where the 7-inch tablet sits in. Its NVIDIA Tegra 3 mobile processor delivers powerful performance and beautiful graphics. It also comes with 16GB of storage, a front camera 1280×800 display and Android 4.1. It’s not very pricey for a decent tablet, but if you think about it, you’re really paying for a full-featured controller to play all your Android games on. [$249.99] 6. PISTON ConsoleIt’s mind boggling how this 4-inch console can have a 3.2 GHz AMD Processor, Radeon 7000-series Graphics, 8GB of RAM and a 128GB Solid State Drive. To add to that, the PISTON console can also support up to 3 monitors. The idea of this box is that it works like a (very) mini-PC that supports operating systems like Windows, Linux and a few others. Its size makes it very portable, allowing you to plug it into a hotel TV for busy people who still want to game on the go. Expect a release at the end of 2013. Controllers not included. [$999] Make This Happen!This one is a concept design worth mentioning (because we really, really want to see it happen). The Razer Switchblade is a hybrid of a laptop and handheld gaming device. Instead of using a traditional keyboard, the Razer Switchblade will have fully customizable buttons which can be programmed by the player. Each button can also show its own icon as it’s a small LCD. The idea is for gamers to be able to play any PC game without the need of a full-sized keyboard since the keyboard has too many buttons anyways. Here’s hoping that the developers are still working on getting this commercialized. 
   | ||
| Convert More Than 100 File Types On Browser With CloudConvert Posted: 12 Sep 2013 03:01 AM PDT Don’t you hate it when you try to open a file on your smartphone and it just wouldn’t open? A common problem that people face today is the incompatibility of file formats on mobile i.e. your device does not have the right application to open a particular file. Rather than getting apps that allow you to open a certain file format (imagine how many you will need to cover all bases), you’d probably want to try file conversion. CloudConvert can do that for you. It will convert anything to anything – and we’re looking at about 140 different file types here – on a browser. And you can even get it done on mobile. Here are all the cool things CloudConvert (even while at beta at the point of this writing) can do for you. Recommended Reading: Convert Video, Audio & Images For Different Devices With Adapter Start Converting Your FilesCloudConvert supports 140 file types that includes file archives, audio, CAD, document, ebook, image, presentation, spreadsheet and video files. Upon entering CloudConvert on your desktop, upload the files you need converted. You can even upload multiple, different file formats all at one go then choose each individual output format for each file. To start converting, click on the big red Start Conversion button. To download your converted file, you can choose any of the following methods:
Wrong File Format?Picked the wrong file format? Don’t wory, you don’t have to reupload the file. Just pick either the input file or output file then generate the conversion from there. Using CloudConvert On MobileCloudConvert is unique because it also works (great) on mobile web browsers. After going to the website on your mobile browser, select files from your Camera Gallery or from Dropbox or Google Drive to convert . You can also upload multiple files from your cloud storage. Just like the desktop browser, select a output format and just tap the Start Conversion button to begin conversion. You can then have the file sent to your email, uploaded to your Dropbox or downloaded to your device (tap the Download button). You can then open the file with other apps on your device. ConclusionCloudConvert is a very smooth file conversion service that works great on mobile devices as well. It’s also free to use but with there are a few limitations as to how many conversions you can do in a day. However, you can choose to register for a free account for more perks such as a higher limit of daily conversions, and higher maximum limit for file size and a longer storage time i.e. 24 hours for converted files. 
   |
| You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment