There’s been some questions on the specifications for website projects. I have said that you are to make three ‘hand-crafted’ code items and one advanced jQuery Plugin.
A jQuery plugin is an external script file that is dependent on jQuery in order to work. In class we used a plugin called jQuery Transit. Transit will not work on its own – it is a jQuery plugin. There are a wide variety of jQuery plugins, jQuery Validate, jQuery Transit, Slick Slider, BX slider, Responsive Slides and more. Here’s a link to a page that has a list of plugins that are good in 2019.
In class we will be writing our own jQuery scripts, using jQuery methods for our handcrafted items. We’ve done an accordion and a lightbox. We’ll also be doing a slider and a number of other things utilizing the jQuery library. Our ‘hand crafted utilizing jQuery code’ looks something like this example from our accordion demo:
<script> $('.question').click( function(){ if($('.active').length > 0){ $('.active').each( function(){ //handles each item with the class of active: $(this).slideToggle( function(){ $(this).removeClass('active'); }) }) } //gets next element of item that was clicked. $(this).next().slideToggle().addClass('active'); }) </script>
You can use pure JS, but pure JS makes it harder to create an animated effect. Check out this post on Art of the Web to see what I am talking about.
CSS Animations might be the easiest way to add animation to an element without jQuery by adding or removing a class like we saw in the alien animation demo.
As I mentioned above, a jQuery plugin is dependent upon jQuery and is an additional external file to load on top of jQuery. If you have any questions, feel free to ask.