How to Implement Infinite Page Scroll Effect in Static Webpages [Tutorial] |
- How to Implement Infinite Page Scroll Effect in Static Webpages [Tutorial]
- 10 Photo-Editing Apps To Fix Facial Imperfections Easily
- Create GIFs Directly On Chrome with MakeGIF
| How to Implement Infinite Page Scroll Effect in Static Webpages [Tutorial] Posted: 15 Aug 2013 08:01 AM PDT Users of popular social networks like Twitter and Tumblr must be familiar with infinite scrolling. This effect is a wonderful dynamic replacement for pagination links where the user doesn’t need to wait for a page refresh. All the external content is loaded dynamically and appended into your content wrapper. But the problem with this effect is how difficult it can be to setup. WordPress users have their choice of plugins to automatically insert this effect onto archive & category pages. However Web developers working in basic HTML5/CSS3 are forced to use some other solutions. In this article I want to present two of my favorite plugins for infinite scrolling applied to static Web content. Both of these examples are useful because of how they handle data requests. Some users may be interested in loading static HTML while others need to include backend languages such as PHP or Ruby. Between both of these jQuery plugins we can find a useful solution to fit any Web project. Recommended Reading: How to Enable Infinite Scroll for WordPress Theme Infinite ScrollI want to start out with arguably the most popular jQuery plugin infinite scroll. This was created by Paul Irish and can also be found in the WordPress plugins repository. Most users have given very high ratings for the plugin and it appears to still be supported in the newly released WP 3.5.1. However coding your own custom loader is a tad more difficult. We need to use some jQuery method calls and pass in the related data inside our layout. Any infinite loading plugin will require a series of important elements on the DOM. These include the previous/next page anchor links, along with the content wrapper which should hold the new data. <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Infinite Scroll Testing</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 type="text/css" rel="stylesheet" media="all" href="style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.infinitescroll.js"></script> <script type="text/javascript" src="manual-trigger.js"></script> </head> My demo is based off the original demo which can be found in the Github repo. You should download a copy of the script or my script since we will need a series of documents for this to work. Obviously I have included the latest release of jQuery, along with the infinite-scroll plugin and another JS file named manual-trigger.js. I found an excellent post on Stack Overflow which goes into a bit of detail for why this JS script aides the effect. Loading External HTML PagesMy stylesheet is also the original copied from the demo, but we really do not need to worry much about CSS styles. The paged documents would still load even if we removed all the padding and font styles. But you can see everything has been consolidated into the header except for the JS function which we’ll look into now. The inner page body is held inside a div with the ID #content and we need to reference this in jQuery. Also the navigation link has the ID #next which is crucial for the pages to load properly. I have copied the entire script block element so we can see how this method is called on the page. <script type="text/javascript"> $(document).ready(function(){ $('#content').infinitescroll({ navSelector: "#next:last", nextSelector: "#next:last", itemSelector: "#content", debug: false, dataType: 'html', maxPage: 4, path: function(index) { return "index" + index + ".html"; } // appendCallback : false, // USE FOR PREPENDING }, function(newElements, data, url){ // used for prepending data // $(newElements).css('background-color','#ffef00'); // $(this).prepend(newElements); }); }); </script> The difference between navSelector and nextSelector is subtle, but definitely important. Your navigation selector can be the element which contains the entire navigation. This may be a div containing multiple pages or even two buttons with previous/next page. However the next selector is solely targeting your specific anchor link which points towards the next page. The “path” value is very important because this is labeling each page we need to request. The parameter may accept a string value or a custom function returning to each new page. For my demo we are using some of the sample code to include three external index pages. The index variable may be passed into the function and you can perform logic to determine which page needs to be loaded next. Much of this JavaScript code may be placed into an external document if you’d like to clean up the frontend. I would argue that Infinite Scroll does have a potentially stressful learning curve if you are not familiar with jQuery. But it works perfectly fine when all your files are in order. The biggest downside is that you can only load HTML, JSON, or XML pages into the document. It is unlikely we will ever get support for dynamic PHP, ASP, or Python for a backend solution. jQuery ScrollPaginationHere we have another great jQuery plugin which was developed by Anderson Ferminiano. I would argue that ScrollPagination is also initially very difficult to pick up, but it is well worth the effort. You can get more information from the scrollPagination homepage which also includes a live demo. I have ported a few sample codes into my own layout and built a great demo loading content through PHP. But first you should grab a copy off the Github repo which does include sample files and a brief demo. After unzipping the contents we only need one file named scrollpagination.js to get the effect working. Also we need to include a recent version of jQuery, but that should be assumed. <div id="w"> <h2>Infinite Loading Demo</h2> <div id="content"> <p>This is the main content element. All the infinite scroll content will load into this div.</p> </div> <div class="loading" id="loading">Loading please wait...</div> <div class="loading" id="nomoreresults">Sorry, no more results to display.</div> </div> You will notice my HTML code is much smaller for this example. The two div elements at the bottom of the page should be hidden by default. These will only show up when the plugin has been activated to either load new content, or has reached the end of the content. ScrollPagination actually has a parameter to limit the number of new HTML DOM elements we want to append onto the page. JS Function ParametersThe most important part of getting this function to work is passing the proper data into the correct variables. Compared to the previous Infinite Scroll plugin we are looking at a much larger block of data. Some of these parameters are referencing functions to call elements when there are new objects to load, and when we have exhausted the list of all objects. var page = 0; $(function(){ $('#content').scrollPagination({ 'contentPage': 'ajax.php', // the url you are fetching the results 'contentData': { 'page': page }, 'scrollTarget': $(window), 'heightOffset': 10, 'beforeLoad': function(){ // before load function, you can display a preloader div $('#loading').fadeIn(); }, 'afterLoad': function(elementsLoaded){ $('#loading').fadeOut(); var i = 0; $(elementsLoaded).fadeInWithDelay(); page++; if ($('#content').children().size() > 140){ // if more than 140 results already loaded, then stop pagination $('#nomoreresults').fadeIn(); $('#content').stopScrollPagination(); } } }); So the parameter contentPage will pick up whatever we need and pass it into the page via Ajax. This means we can load dynamic content and still have it parsed by our server. In this example I am pulling XML data from YouTube and looping through the results in PHP to return a list of videos and thumbnails. The contentData parameter is also good to use if you need to pass further data into each ajax request. This may be left empty and the plugin will still function properly. But in my example we can pass in the paged value for each loading call and increase the page by +1 each time. Unfortunately I have yet to find a method of getting this value into the backend PHP code. But it can be just as useful in the JavaScript functions. // code for fade in element by element $.fn.fadeInWithDelay = function(){ var delay = 0; return this.each(function(){ $(this).delay(delay).animate({opacity:1}, 175); delay += 100; }); }; }); At the very bottom of our ScrollPagination method we can see another custom bit of code. This does not require any editing from the user’s end, we just need to ensure that the function works and will be included along with the script codes. fadeInWithDelay will push the same jquery .animate() method onto any of the page elements we need. This makes it a lot easier rather than copying the same animation codes onto each section in the plugin. Although admittedly this would look much nicer if these codes were stored in a separate JS file (which is possible). However the most redeeming quality of ScrollPagination must be the ability to process backend languages. Check out our live demo or download a copy of the project source code to run on your own server. This is the best infinite page scroll solution for dynamic websites which are not powered by a CMS. Final ThoughtsI do hope this tutorial may be educational and will open the doors for new infinite loading effects. Web designers have been vigilant about presenting new trends in a uniform and coherent fashion. This means users are becoming more accustomed to infinite scroll within their daily interactions. It is up to designers & developers to keep up with these trends and see how they may apply onto ideas in the future. Please feel free to download a copy of both demos we have presented in the article. Each of their respective HTML pages are constructed using very minimalist code, which makes it easier to copy and implement on your own. But there are additional parameters to each function that may be of interest for developers. Be sure to toy around with the codes on your own and let us know your thoughts in the post discussion area. 
      | ||
| 10 Photo-Editing Apps To Fix Facial Imperfections Easily Posted: 15 Aug 2013 06:01 AM PDT Love taking selfies but wish you don’t have to fall back on Photoshop so much? Let’s face it, we all want to look good on our profile pictures but a pimply complexion, dry skin, a hair out of place, red eyes, or just bad lighting can really mess up an otherwise perfect-for-sharing picture. Rather than depend on photo filters so much, why not use these handy smartphone apps that can give you a quick makeover for a flawless complexion and surgery-free enhancements. Here are 10 free apps we have found for iPhone and Android devices that let you edit and retouch your pictures for more share-worthy results. Edit your photos to your heart’s content even straight from your smartphone. Recommended Reading: 10 New & Fresh iPhone Photography Apps 1. FacetuneHave very bad acne days? Facetune is going to be your next best friend. Dubbed the cheaper alternative to Photoshop, you can remove a stray hair, or a gray one, give yourself acne- and wrinkle-free skin, remove red eye and even change your eye color and more, with this handy app. The response for iOS is great but there is no word by the team to create one for Android yet (eventhough there is a clear demand). The app also has great share options, leading to Facebook, instagram, Tumblr, Twitter, Flickr as well as email. Platform: iOS [$2.99] 2. PixtrPixtr does all the hard work for you by automatically detecting what needs to be corrected in your picture. It will eliminate skin blemishes and red eye to ensure a flawless, natural look, and it works even in group photos. Pixtr has the added option to let you automatically set an improved photo as your Facebook profile picture straight from the app. Alternatively you can share photos on Facebook, Twitter or via email. Pixtr will be coming to Android soon. Platform: iOS [Free] 3. Perfect365The face detection feature of this phone makes it easy for you to remove dark circles under your eyes, remove unsightly blemishes from your skin, and even customize your face (think higher cheekbones, higher nose, firmer faces). There are also pre-set makeup templates to give you an instant makeover or you can save your customizations to apply to your future selfies. The app has quickshare options to Facebook, Flickr and Twitter. Platform: iOS | Android [Free] 4. Photo makeoverWant more control of your face? Try Photo Makeover that can literally put a smile on your face (or any other facial expression you prefer on a photo. With the app, you can also widen the eyes or the face, introduce more symmtery to the face or make other adjustments to the face. The app also lets you make quick one-tap color corrections for photos that were taken under bad lighting, under-exposed or a victim of poor backlighting. The app also has a handy magic shake option that instantly apply customizations to a face. You can however only share photos to Facebook. Platform: iOS [$0.99] 5. ModiFace Photo EditorModiFace has a wide range of apps including this one that can really turn you into somebody else. With this very new app, you can enhance your facial features (jaw, nose, cheeks), change eye color and size, whiten teeth and clear face blemishes. Like other ModiFace apps, this app lets you apply makeup to your photos with preset templates. You can also apply filters and frames or add text to the enhanced photos before sharing it on Facebook. For a trial run, you check out their makeover site first. Platform: iOS [Free] MoreThere are other apps you can use for a quick touchup of your photographs before sharing it on your social network sites. This however have fewer, limited functions compared to the above, but as always, it doesn’t hurt to have more options. 6. Beauty Booth ProThis app only gives you skin corrections and eye effects, but you get added stamps, speech bubbles, photo borders and beauty filter effects. The app also has share options for Facebook, Twitter, Instagram and KakaoTalk. Platform: iOS [$1.99] | Android [$1.80] 7. Visage LabThis app retouches your picture automatically by applying skin and eye makeup, shine removal, smoothing wrinkles, enhancing colors and even whiten teeth, all at once. This however means that you have no control of how much change you want applied. The share options are great for this app though: Facebook, Instagram, Twitter, Pinterest, email and direct download. Platform: iOS | Android [Free] 8. Beauty CameraThis app will not only help you brighten up your poorly lit pictures but it will also change the picture’s tone and detail. You can also take a picture or select a picture on your device and smoothen out skin or remove any spots. Share your images on Facebook, Twitter and via email. Platform: Android [Free] 9. PicBeautyPicBeauty is a simple app that clears up blemishes and wrinkles, and whiten your teeth before you share it to your Facebook or via iMessage on iOS. Platform: iOS | Android [Free] 10. Pimple Remover Photo RetouchThis is quite a smart app. All you need to do is select areas with marks or pimples and the app will remove it completely. It will give you a natural retouched treatment and it doesn’t affect skin color. Platform: Android [Free] 
      | ||
| Create GIFs Directly On Chrome with MakeGIF Posted: 15 Aug 2013 03:01 AM PDT What do you use to create a GIF (which is pronounced Jif, if you haven’t heard)? Most of us will use Adobe Photoshop or GIF-making tools that require you to download the video first. While desktop tools give users more options when creating GIF we have found a much easier way to create a GIF. MakeGIF is a Chrome browser extension that lets you create a GIF straight from a Chrome browser. You don’t have to download a video first or leave your browser. Recommended Reading: 7 Apps To Create Cinemagraphs On Your Smartphone Creating A GIFTo start, first you need to add MakeGIF to your Chrome browser after which you will find the icon for it on the right side of the URL bar. Head over to your video site and click in to the video you want to make a GIF of. Choose the time in the video and pause the video there. Click on the MakeGIF icon. Set the GIF quality, GIF size, capture FPS and max frames you want and click Start. MakeGIF will start to capture the frames. Click on Done when you think the GIF should end. Before generating the GIF you can Add Text or Reverse the GIF under ‘Frame Options’. Click Generate GIF. After generating the GIF you can share or save the GIF. For GIF sharing, the max GIF size share-able is 4 MB. If the GIF size is bigger than 4 MB the only option you have is to save the GIF into your hard disk. Here is the example of a GIF that we created using MakeGIF. LimitationsMakeGIF is definitely makes creating a GIF a breeze. But, there are some limitations:
      |
| 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