Archive for October, 2015

10 jQuery plugins with full screen support

Developers can check out the list below of jQuery plugins that provide full screen support. These plugins provide full screen website, image galleries, editor, slider, menu, loading bar, Youtube videos and modal windows.

1. fullPage.js

fullPage.js is a simple and easy to use plugin to create full screen scrolling websites (also known as single page websites or one page sites). It allows the creation of full screen scrolling websites, as well as the addition of some landscape sliders inside the sections of the site.

fullPage js

2. fullsizable 

fullsizable is a jQuery plugin that allows designers to make use of the available browser space for more enjoyable image viewing.

fullsizable

3. jQuery Fullscreen Editor

jQuery Fullscreen Editor plugin transforms text fields to customizable editors, either it can be used within a form or as a stand alone.

jQuery_Fullscreen_Editor

4. YoutubeBackground

This jQuery plugin for Youtube API allows designers to embed  YouTube videos into their web pages as a video background.

jQuery Youtube Background

5. Full Content

Full Content is a jQuery plugin that enables full screen single-page websites with url hash & animated scrolling.

fullContent js

6. HoldOn.js

HoldOn.js is a jQuery plugin to prevent user interaction while a webpage is loading or busy by displaying a full screen loading indicator.

HoldOn js

7. Alton

Alton is a jQuery-powered scrolling plugin that utilizes custom vertical scrolling effects in order to present and navigate through web content in a unique manner. It utilizes scrolljacking idea, but greatly improves the often-poorly-implemented scrolljacking experiences designers might be used to.

Alton

8. JiSlider

JiSlider is a simple jQuery Plugin used to create an Image Slider. The settings can be modified to create the desired the slider.

JiSlider

9. animatedModal.js

animatedModal.js is a jQuery plugin that creates a full screen modal with CSS3 transitions. Designers can use the transitions from animate.css or create their own transitions.

animatedModal js

10. jQuery – fatNav

jQuery favNav creates a chubby full screen menu with nice hamburger toggle.

jQuery_fatNav

Use jQuery to Create a Simple Slider

All it takes are a few lines of code to make your own simple, lightweight content slider using jQuery -- no plugins necessary. First, use divs to separate your content and create each slide. Make sure each of these divs has its own unique ID. Each div should also contain text or an image/icon with its own class that will be used to trigger the jQuery code.  
HTML:
  1. <div id="slide-1">
  2.      <p>First Slide</p>
  3. </div>
  4. <div id="slide-2" class="dormant-class">
  5.      <p>Second Slide</p>
  6. </div>

  Add these lines to your CSS, and make sure that every slide except the first one is given the class "dormant-class", like in the example above, so that they are initially hidden.  
CSS:
  1. .dormant-class{
  2.      display: none;
  3. }
  4.  
  5. .active-class{
  6.      display: block;
  7. }

  Here's where the jQuery comes in. When the trigger (#arrow) is clicked, we're going to use jQuery to add the class "dormant class" to the first slide, and remove the class "dormant-class" while adding the class"active-class" to the second slide.  
JavaScript:
  1. $('#arrow').click(function(){
  2.  
  3.    $('#slide-1').addClass('dormant-class');
  4.  
  5.    $('#slide-2').removeClass('dormant-class').addClass('active-class');
  6.  
  7. })

  The first slide will disappear as the second slide is displayed. To switch back to the first slide, the #slide-2 will have its own trigger (#arrow2), which will remove "active-class" and add "dormant-class" to the second slide, and remove "dormant class" from the first slide, making it active and visible once again.  
JavaScript:
  1. $('arrow2').click(function(){
  2.  
  3.    $('#slide-2').removeClass('active-class').addClass('dormant-class');
  4.  
  5.    $('#slide-1').removeClass('dormant-class');
  6.  
  7. })

 

6 Free JavaScript Books for Advanced Learners

Learn JavaScript is essential for anyone who wants to become a creative webpage designer.  It is one of the most powerful and dynamic programming languages which has been most commonly used alongside HTML and CSS.

JavaScript is used by most web browsers and supports object oriented programming, which also has an application programming interface for working with texts, dates, etc.

There are a wealth of materials available online or to download to guide students through the different levels and aspects of JavaScript.  Here are a few books which can be very useful in providing quick tips and pointers. They are designed  to engage beginners and advanced programmer alike.

1. The JavaScript Tutorial by Illya Kantor

The JavaScript Tutorial by Illya Kantor is a free book available online that has been designed for beginners. This book provides readers with an introduction to basic elements, syntax of JavaScript and the important tips like setting up the environment, testing script with different browsers etc. It also introduces advanced concepts which is a good starter to improve knowledge of JavaScript.

2. Eloquent JavaScript by Marijn Haverbake

Eloquent JavaScript by Marijn Haverbake is available online for free or in paperback form. This book provides a good introduction to JavaScript and the basic programming concepts needed in order to master the language. This book starts from values, types and operators used and takes readers through the program structure, basic and advanced functions which are available in JavaScript.   It also gives an introduction about how JavaScript works in tandem with other design languages such as HTML, CSS.

javascript-books

3. Addy Osmani’s Learning JavaScript Design Patterns

Learning JavaScript design Patterns is a very short and sweet book available for free online and also downloadable for a minimal charge, which discusses design patterns in JavaScript. This book starts with an introduction to design patterns, discussing their importance and optimum ways of implementing them. The main target audience for this book is professional web developers who want to improve their knowledge of design patterns and how they caeffectively implement them with JavaScript.

javascript-books

4. Gerd Wagner’s Building Front-End Web Apps with Plain JavaScript

This book by Gerd Wagner is a complete tutorial on how to develop a front end web application by only using JavaScript without using any third party framework or library. This book has been designed for JavaScript programmers and also software developers who have experience in OOPS based programming languages. The book provides readers with a complete code of example applications which can be run from the web server to help users with the nuances of building a front end application.

javascript-books

5. DOM Enlightenment by Cody Lindley

For those who want to become experts in JavaScript, a knowledge of Data Object Modeling is important. This book is a gem available online that is one of the most exhaustive books written about DOM Scripting. The book is designed for advanced programmers to understand the nuances of JavaScript and taking to the next level.

6. Mikito Takada ‘s Single Page Apps in Depth

One of the best ways to learn to use a programming language is to study where and how it is implemented. This book by MIkito Takada focuses on how to develop web applications and provide practical solutions to common issues that arise at different stages of development.