The following plugin allows you to create various ajax effects depending on screen width

So let's paint the picture... you've been given 2 designs. One for web and the other for mobile. Both designs show a list. The design for the web view requires pagination at the end of the list to animate to the next list when you click on the pagination, however the mobile view requires a 'view more' button to add new items to the end of the list. How on earth is this achieved? Look no further TITAN LOADER is here!

Unlike most conditional based javascripts out there this is solely based on your css. You don't have to fiddle with any javascript at all. Many developers are checking what to do using javascript's window.size method however there are differences between a browser width and a mobile width. To make your ajax effects and styles completely in sync and uniform we need to be able to do this entirely via the css. My method is an incredibly lightweight solution which doesn't need to use javascript's window.size method which is incredibly heavy on the processer and cpu (not to mention inaccurate). This plug-in is only 5kb!

Check out the example below on the web and then resize this window to a mobile width to see the 'view more' button feature appear. If this is what you're looking for, hop onto the set-up option further down or download the zip here.

Book Article 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget dignissim elit. Duis vitae blandit justo. Ut sagittis interdum ultricies. Nam sollicitudin dolor non ultricies euismod. Nunc posuere lacus egestas augue consequat, pharetra pellentesque odio eleifend. Etiam nunc nisl, porttitor a leo a, tincidunt dignissim tortor. Morbi hendrerit felis sit amet libero vestibulum porttitor. Pellentesque nec neque in justo tincidunt scelerisque. Vestibulum id pulvinar enim. Nullam volutpat tellus eu purus pulvinar, quis tempor turpis posuere. Nunc sed lorem at felis facilisis commodo id eget velit. In tempor at purus sit amet pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras sit amet justo nec enim tincidunt egestas.

Book Article 2

Sed sit amet mauris varius, lacinia eros a, interdum leo. Duis placerat tortor ac pretium fringilla. Aenean eu magna ligula. In hac habitasse platea dictumst. Donec consequat laoreet est, sed dignissim tellus convallis ac. Aenean porttitor sem eu diam pharetra, a placerat ipsum gravida. Curabitur pretium et lectus at pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel porttitor tortor. Quisque faucibus at enim aliquam auctor. Curabitur quis nulla magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin bibendum dui sit amet vestibulum condimentum. Curabitur ut elementum ante. Pellentesque sed sagittis eros. Donec ullamcorper ipsum risus, ut tincidunt diam venenatis id.

Book Article 3

Cras eleifend hendrerit lacus ac aliquet. Fusce condimentum urna elit. Quisque hendrerit urna ut felis interdum scelerisque. Fusce risus mi, porttitor sed tellus in, molestie pulvinar tortor. Phasellus sed varius tellus, sed volutpat mi. Nullam nec risus pulvinar, fermentum sem a, pulvinar nisi. Sed at odio at mauris pellentesque scelerisque in quis nibh. Fusce felis lorem, bibendum eget bibendum ut, aliquet nec est. Nam vel ultrices massa. Phasellus pellentesque odio id massa porttitor egestas. Aliquam congue lacus a lacus tempus, a suscipit felis aliquet. Vestibulum ornare nec lorem non pretium. Cras orci mi, venenatis et tortor vel, sodales ornare quam. Sed sollicitudin pretium quam id egestas.

  1. First you need to add in the correct data tags and classes like for like in the provided barebones example.
  2. Then copy the javascript into your own script file (it's minified don't worry you don't need to know what's in there as everything's been provided).
  3. Finally you need to set the following css in your general styles of your css:

    /* DO NOT CHANGE - Titan loader configurations START */ .titanLoaderControlList .navHeading{display: none;} .titanLoaderControlList .titanLoaderItemsHolder{display: block;} .js .titanLoaderControlList .titanLoaderItemsHolder{display: none;} /* If javascript IS enabled but the list isn't in focus then hide it */ .js .titanLoaderControlList .titanLoaderItemsHolder.inFocus, .js .titanLoaderControlList.animate .titanLoaderItemsHolder{display: block;} /* If javascript IS enabled AND the list is in focus, then show it */ .titanViewMoreItems{display: none;} .titanBottomScrollLoader{display: none;} /* DO NOT CHANGE - Titan loader configurations END */

    and then in the media query where you want the view more button to appear (maybe for mobile), add in the following css:

    /* DO NOT CHANGE - Titan loader, let the view more button appear START */ .js .titanMoreButtonEnabled .titanLoaderControlList .titanLoaderItemsHolder, .js .titanMoreButtonEnabled .titanLoaderControlList .titanLoaderItemsHolder.inFocus, .js .titanMoreButtonEnabled .titanLoaderControlList.animate .titanLoaderItemsHolder{display: inline;} .js .titanMoreButtonEnabled .titanLoaderPagination{display: none; /* And since the button is now active we can turn off the normal pagination */} .js .titanMoreButtonEnabled .titanViewMoreItems{display: block; /* We turn the button on */} /* DO NOT CHANGE - Titan loader, let the view more button appear END */
  4. You're done!
Other info
  • Q: Can I have 2 paginations?
    A: Yes you can! If you click on one of them, the other will instantly match it.
  • Q: Will it work without javascript?
    A: Yes! If javascript isn't detected the normal pagination will show on ALL views. When you click on one of the pagination options it will simply refresh the page... how ordinary!
  • Q: I want to customize lots of bits from the fade in times to what the ajax loading screens are.
    A: Okey doke! The provided minified file is there to cater to most scenerios. This is to the benefit of newer front end developers. However if you want more flexibility to get the experience you want in your project ust right, please see the non-minified file here.
  • Q: Are there any limitations?
    A: The only limitation is that it will only work on 1 list per page. But come on, whose going to use this on more than 1 list per page? It would make the page far too busy. This plug-in is meant for big main feature lists.
  • Q: Hang on! Can I set different javascript callback functions per ajax effect?
    A: Yes you can! These are entirely set in the html. If you want to set a callback function upon clicking an item in the pagination, put the following line in the data-pagination-point="true" line: data-callback-functions="$callbackFunction01(),$callbackFunction02()". Ensure you seperate the functions with a comma and it will run in the order you have listed it.
    To set a callback function on the 'view more' button, do exactly the same as above but put the callback-functions line on the data-more-button-point="true" line. If you want exactly the same function run in both ajax effects you have to set them individually.

Like It? Share It!


Leave a comment


Need help with this article?

Have you got a suggestion, compliment or need additional help with this article? Simply contact me at ajfhoward[@t] and I'll try to help as much as I can.