2019 Archives | Free jQuery

Responsive & Touch-Friendly Audio Player FreejQuery

21Sep

By Kashan QaziNo Comments

CSS2 / CSS3.0, HTML5, Responsive, Video & Audio

Responsive & Touch-Friendly Audio Player FreejQuery

A jQuery audio player plugin that is responsive and touch-friendly. The UI is CSS-only, no images used. The jQuery plugin itself would be pretty much useless without the respective CSS which is responsible for the looks and some of the features summarized below. The plugin replaces targeted audio elements with some HTML and JavaScript events attached to it.Don’t confuse this player with the whole media center like iTunes or so. It is nothing like that. This is a tiny, lightweight player with a very clear purpose: to play a single audio file. I have built it having this credo in mind: “don’t solve problems that do not exist”. You don’t need complex plugins or ugly Flash players with thousands of useless functions to play that damn audio file. Be innovative, be subtle....

jQuery Supported YouTube Player : ytPlayer

21Sep

By Kashan QaziNo Comments

Plugins, Video & Audio, Web

jQuery Supported YouTube Player : ytPlayer

YouTube Player jQuery Supported YouTube Player:The plugin works only if used under a web server. It doesn’t work if you run the HTML page as file (file://…). If you want to run it locally on your computer you need a web server installed (for ex: MAMP for Mac, XAMP for Windows, LAMP for linux) and reach the file from http://localhost… or whatever you mapped in the Host file as localhost jQuery Supported YouTube Player.The plugin doesn’t work with jquery.slim.js as it requires methods that have been removed from the slim version of jQuery.head inclusions:<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="inc/jquery.mb...

21Sep

By Muhammad HuzaifaNo Comments

2019, jQuery

How to Load jQuery Conditionally

In This Article We read about Load jQuery Conditionally Many developers like to link to an externally hosted jQuery library, like for example Google’s jQueryCheck it out: CODE: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>Of course, you’ll need to insert your own path to wherever your local jQuery files are located (instead of ‘<script src=”js/jquery-1.4.2.min.js”></script>’), but this is a very simple way to make sure that your jQuery library always loads. Read More |

Using Head.js to Load All Your JavaScript

18Sep

By Muhammad HuzaifaNo Comments

2019, JavaScript, jQuery

Using Head.js to Load All Your JavaScript

Using Head.js to Load All Your JavaScript In This Article We Discuss About Using Head.js to Load All Your JavaScript. Client side frameworks have become very powerful and offers unique features to implement complex functionalities on the client side, instead of relying on server side. This is really great for developers, but it has also made life difficult when it comes to managing multiple resources. One of its disadvantage is that loading multiple JavaScript file makes the site slow to load. This is because scripts block the rendering of the page until they are downloaded, parsed and executed. This can be fix by using a Script loader library, and of these Head.js is the most popular. What is Script Loader? There is no concrete definition for Script loader, but one can think of Script ...

How To Add Keyboard Shortcut to Anchor Tag Using jQuery

16Sep

By Muhammad HuzaifaNo Comments

2019, jQuery

How To Add Keyboard Shortcut to Anchor Tag Using jQuery

Add Keyboard Shortcut Using JQuery In This Article We Are Discuss About how to add Keyboard Shortcut Using JQuery Making a user friendly website can be quite a challenging task. There are many areas where user interactions can improve and become friendlier. One area that can almost always be improved is navigation, and one great way to do this is by adding keyboard shortcuts to anchor elements that allow the user to open hyperlinks via the keyboard instead of the mouse. Keyboard shortcuts improve productivity by enabling users to accomplishing tasks more quickly and without much effort. In this post, we’ll learn how to add keyboard shortcuts to anchor tags using jQuery.HTML Markup First, let’s take a look at the HTML markup. There are 3 anchor tags defined with href attribute set to ...

7 New JavaScript Libraries for Developers

14Sep

By Muhammad HuzaifaNo Comments

2019, JavaScript

7 New JavaScript Libraries for Developers

In This Article You Read About JavaScript Libraries for Developers. A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. The primary use of JavaScript is to write functions that are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page.For this roundup I have built list of 7 New JavaScript Libraries released recently, the following JavaScript Libraries are useful and serve almost every purpose for developers. Let’s take a look at the list. 1. StretchyStretchy is a javascript library to make form elements autosizing, the way it should be. 2. Jet.jsJets.js is a javascript library to create native cs...

11Sep

By Kashan QaziNo Comments

Article, Learn JQuery

How To Learn JavaScript & jQuery

What is JavaScript?In This Article You Learn About How To Learn JavaScript & jQuery an object-oriented computer programming language commonly used to create interactive effects within web browsers, It's one of the useful & powerful language on the internet. Why Learn JavaScript?JavaScript is among the most useful and powerful programming languages of the web. It powers the dynamic behavior on most websites, including this Free jquery. Also Check Head.js To Load COMMON CONCEPTS //Selecting DOM elements and adding an event listener in JS const menu = document.getElementById('menu'); const close Menu Button = document.getElementById('close-menu-button'); closeMenuButton.addEventListener('click', () => { menu.sty...

10Sep

By Muhammad HuzaifaNo Comments

2019, JavaScript, jQuery

jQuery Code Snippets Free JQuery

jQuery Plugins Code Snippets jQuery Plugins Code Snippets are handy and very useful. They do the job for you without much effort. Hold onto these snippets to use for your next project. Change button text when clicked:1 2 3 4 5$(document).ready(function(){ $(".button").click(function(){ $(this).val("Some other text"); }); }); Mark external links with an icon1 2 3 4 5 6$('a').each(function(){ if(this.hostname != location.hostname){ $(this).append('<img src="external.png" />') .attr('target','_blank'); } }); Change DIV background color randomly1 2 3 4 5 6 7 8 9 10$(document).ready(function() { changeColor(); });function changeColor() { v...

10Sep

By Kashan QaziNo Comments

Core Java Script, Web

JSL JavaScript Loader Free jQuery

JSL JavaScript Loader Free jQueryJSL JavaScript Loader Free jQuery is one of the useful core JavaScript for the coders. It's a connection between the web browser & the internet. This highway is optimize to let pictures, text, and CSS fly by. But, when it comes to external scripts, the highway creates a toll booth that slows traffic. JSL JavaScript Loader Free jQuery is the worst part is that pictures text, and css caught behind these scripts have to wait until they pass through. JSL is the latest in toll both avoidance. It creates an express lane that lets all pictures, text, css, and external scripts pass by without worrying about toll booths. That means you save time and money on traffic costs. Normal Script Inclusion to Apply <script type="text/javascript" src="...

8Sep

By Muhammad HuzaifaNo Comments

JavaScript, RESOURCES

Top Best JavaScript Template Engines

Best JavaScript Template Engines In This Article you can read about Best JavaScript Template engines which will help in the decoupling of HTML and JavaScript code to reduce the client-side code complexity and make it manageable. Once you know the advantages of the template engines, you will definitely fall in love with them and start using them right away. There are lots of problems that you come across at the time of client-side development likeThese template engines were chosen based on their popularity, simplicity to learn and code, being actively maintained, and having great community support. Let’s begin. Handlebars.jshttp://handlebarsjs.com/Handlebars is a logic-less templating engine. Logic-less templates help to build templates with ease and without adding any ...

Contact Us with multiple options adding Callback Request Features

8Sep

By Kashan QaziNo Comments

Plugins, premium

Contact Us with multiple options adding Callback Request Features

Callback Request FeatureThe Contact Us with all in one options allows us to access Callback Request Feature more than one fields in one time. The We chat Facebook Messenger, WhatsApp, Skype, Medium Slack, Viber, Telegram, Call Back, Email and more channels just in one button! Let customers choose their favorite method to reach you with in one click and follow up the conversation anytime and anywhere! The best thing in this plugin is the access of it you can reach on multiple application in one click.Features:Callback request – customer can reach easily by request a call-back to his/her phone number Google reCaptcha V3 integration – prevent bots to send call-back request via invisible Google reCaptcha V3 Countdown timer – display countdown timer when customer reque...

Fade HTML Table Row on Hover Using jQuery

6Sep

By Muhammad HuzaifaNo Comments

jQuery, TUTORIALS

Fade HTML Table Row on Hover Using jQuery

Fade HTML Table Row Fade HTML table Row are the ideal choice for displaying data in tabular form. You can do different style experiments with tables for a better user experience. In this short post, we’ll also experiment with fading all rows except the selected row on hover to get user attention using jQuery and CSS. Fade HTML MARKUP To get started, create a standard HTML table on the page. For this demo, our table has 3 columns: Name, Age, Country and some random data. <table id="tblData"> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> <tr> <td>Maria Anders</td> <td>30</td> <td>Germany</td> </tr> <tr> <td>Francisco Chang</td> <td>24</t...

6Sep

By Muhammad HuzaifaNo Comments

jQuery, jQuery Plugins

How to use Redux with jQuery

How to use Redux with jQuery Redux is generally used in combination with React, but it’s not tied to React. It is written in vanilla JavaScript which makes it compatible with other libraries such as jQuery, Angular, Backbone, or Cycle.js. This post reviews Redux and its core concepts and then demonstrates how to use it with jQuery. We’ll be creating 2 applications to demonstrate the use of Redux with jQuery. The first application deals with simple string values, the second with an application using an object. What is Redux? From the official documentation. Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a grea...

10 Stylish and Modern jQuery Tooltip Plugins

6Sep

By Muhammad HuzaifaNo Comments

2019, Plugins

10 Stylish and Modern jQuery Tooltip Plugins

jQuery Tooltip Plugins Writing your own implementation for creating jQuery Tooltip Plugins may require a lot of effort, testing and fixing platform compatibility issues will definitely consume time. If you don’t want to waste your precious hours, here is a list of 10 stylish and powerful jQuery tooltip plugins for your next project! TooltipsterTooltipster is a tiny, flexible, extensible, simple yet powerful jQuery plugin for creating modern tooltips. This plugin works well with HTML and plain text, and supports a variety of features, including:Support of image maps & SVG Custom themes & animations Multiple tooltips on a single element Smart positioning to reposition based on the viewport dimension Custom callbacks Extensible with plugins Support cust...

7 Responsive jQuery Dropdown Menu Plugins

5Sep

By Muhammad HuzaifaNo Comments

Plugins

7 Responsive jQuery Dropdown Menu Plugins

Dropdown Menu Plugins In this article you guys can read about 7 Responsive jQuery Dropdown Menu Plugins. JQuery Dropdown Menu Plugins are mostly used for website navigation. They are essentially lists of horizontal options that each contain a vertical menu that will “drop down” when the user hovers the mouse on the primary option. jQuery Dropdown menu plugins are the preferred and ideal choice for accommodating a large set of options for display in a menu.7 Responsive jQuery Dropdown Menu Plugins StellarnavOther features:3 different inbuilt theme options: Light, Dark and Plain Option to make menu sticky on the scroll Auto fix of horizontal scrollbar issue on very long navs Pixel value configuration to create mobile friendly menu PrMenuIt ...

5Sep

By Muhammad HuzaifaNo Comments

Date & Time, Plugins

Digital Stopwatch App With Angular

Digital Stopwatch App Digital Stopwatch App is a simple timer service for Angular, base on RxJS.Name/ID(string) base API. RxJS object not exposed.Install Usage Module Component API newTimer delTimer getTimer getSubscription subscribe unsubscribe Example Repository Contributors Changelog LicenseInstall Digital Stopwatch App ng2-simple-timer is implemented as Angular injectable service name SimpleTimer.Add SimpleTimer into module providers (eg. app.module.ts).import { SimpleTimer } from 'ng2-simple-timer'; @NgModule({ providers: [SimpleTimer] })Componentimport {SimpleTimer} from 'ng2-simple-timer'; export class ChildComponent { constructor(private st: SimpleTimer) { } }new Timer newT...

4Sep

By Muhammad HuzaifaNo Comments

2019, AngularJS, Forms

Countit : Text Analyzer With Angular Material

Countit Text Analyzer This is a fast Countit Text Analyzer app built using Angular Material.Text analyzer will examine your wall of text and display the occurrence of each unique word in click-able bars.Fork and Run Install Angular-CLI npm install -g @angular/clicd into project, npm installRun ng serve , navigate to localhost:4200 Build Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build. Text Analyzer Text analyzer will examine your wall of text and display the occurrence of each unique word in click-able bars. Clicking on a word will display more details. To see an example, click "Try Me!".For More Amazing Content Click Read More | Demo | Download

3Sep

By Muhammad HuzaifaNo Comments

2019, Ajax, Drag & Drop, File Uploader, HTML5, Images, PHP, Plugins

Fileuploader

Fileuploader:Fileuploader is a beautiful and powerful HTML5 file uploading tool. A jQuery and PHP plugin that transforms the standard file input into a revolutionary and fancy field on your page.File preview with image thumbnail or icon File image thumbnail can be generated in canvas to resize it perfectly for given with and height Render synchron the file preview File icon background is generated from file extension Customize your own input and thumbnail elements Responsive and fancy animations Choose multiple files from different folders Drag&Drop feature Upload each file with Ajax Synchron the files Upload Upload progressbar with many data available Start, retry and cancel upload actions Paste images from clipboard (only in Chrome) ...

Two Fields Autocomplete Using jQuery & PHP Latest

3Sep

By Kashan QaziNo Comments

jQuery UI, PHP

Two Fields Autocomplete Using jQuery & PHP Latest

Autocomplete Using jQuery & PHPAutocomplete Using jQuery & PHP we are going to watch how to highlight state name & country name in the same text field.When user types the city or state name in the text box, It will make ajax request to apache server, where PHP will make connection to MySQL database and get the city and state names based on user entered data in the textbox. Then Apache server return those response, finally jQuery UI autocomplete will show the city and state name as suggestions to select. Two Fields jQuery UI Autocomplete Working Description: When user types the city or state name in the textbox, It will make ajax request to apache server, where PHP will make connection to MySQL database and get the city and state names based on user entered data ...

1Sep

By Muhammad HuzaifaNo Comments

AngularJS, Carousel, Plugins

Angular directive for Slick Carousel

Directive for Slick CarouselAn Angular directive for slick carousel, which is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! Usage for Slick CarouselUsing bower to install it. bower install angular-slick-carousel Add jquery, angular, slick-carousel and angular-slick-carousel to your code.<link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick.css"> <link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick-theme.css"><script src="../bower_components/jquery/jquery.js"></script> <script src="../bower_components/angular/angular.js"></script> <script src="../bower_components/slick-caro...

31Aug

By Muhammad HuzaifaNo Comments

calendar, Plugins

AngularJS Arshaw FullCalendar

angular-fullcalendar directive A complete AngularJS directive for the Arshaw FullCalendar.A simple and lite directive for quickly include Fullcalendar (v.3) in your AngularJS projects. Perfomed for AngularJS 1.6.xYou can view DEMO. How to use Installing package with bower: bower install angular-fullcalendar --saveInstalling pacakge with npm: npm i angular-fullcalendar --saveUse directive as an attribute and you can pass the fullcalendar options and the list of events in ngModel. <div fc fc-options="optionsObj" ng-model="eventsObj" ></div>You can use the Arshaw Fullcalendar options in official docs. // <div fc fc-options="calendarOptions" ng-model="events" ></div> var app = angular.module('demo', ['angular-ful...