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.

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!

• 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.