Monday, July 13FreeJQuery

Tag: jQuery

How to Add jQuery Scripts to WordPress
2019, WordPress, WordPress Plugins

How to Add jQuery Scripts to WordPress

Add jQuery Scripts to WordPress This Article is about Add jQuery Scripts to WordPress. jQuery Scripts to WordPress 2019 Before we start attaching scripts to WordPress, let’s look at jQuery’s compatibility mode. WordPress comes pre-packaged with a copy of jQuery, which you should use with your code. When WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries.What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use JQuery instead. Take a look at the code below to see what I mean:/* Regular jQuery */$('.hideable').on('click', function() {$(this).hide();})/...
How to Print background image or color in PHP or HTML
CSS, HTML5, PHP, WordPress

How to Print background image or color in PHP or HTML

Print background image or color in PHP or HTML In this article, we discuss about Print background image or color in PHP or HTML. It’s very helpful for developers in web development. Everyone familiar with print() in PHP and HTML. But nobody tries to print background images or colors on the HTML page. Print particular div in print screen is very easy. But nobody knows how to implement background image in print screen using HTML or PHP. All are familiar @media print in CSS. The @media print in CSS helps to specify the style in print screen. Print Example :1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47<!doctype html> <html> ...
How to Load jQuery Conditionally
2019, jQuery, jQuery Plugins

How to Load jQuery Conditionally

This article is about How to Load jQuery Conditionally Many developers like to link to an externally hosted jQuery library, like for example Google’s jQuery library but the problem with linking to an external jQuery library is that they can be a bit unreliable. If for some reason there are any issues with the server, the script may not be able to be accessed and your jQuery code won’t work.HTML5’s boilerplate uses a really cool conditional statement that will load a local jQuery library on the occasion that, for whatever reason, your external library isn’t loading or working correctly. Check it out:<!-- Grab Google CDN jQuery. fall back to local if necessary --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> windo...
Top Best jQuery Pagination Plugins
2019, jQuery, jQuery Plugins

Top Best jQuery Pagination Plugins

Top Best jQuery Pagination Plugins In This Article We Discuss Best jQuery Pagination plugins allow you to split your website’s large contents into several generated hyperlink web pages. Pagination lets you manage your website's contents in an elegant way and makes it easy for visitors to navigate and access each part of your websites. Pagination can be applied on a website in two different ways manually and with the help of jQuery Pagination Plugins.For this roundup, we have amassed a list of best jQuery Pagination plugins for developers that will help you to easily integrate pagination to their websites with few lines of code. Enjoy !! 1. Bootstrap PaginationThis jQuery plugin simplifies the usage of Bootstrap Pagination. It uses appropriate classes. Pagination, .activeand .disa...
Top Most jQuery Scrolling Plugins 2019
jQuery, jQuery Plugins

Top Most jQuery Scrolling Plugins 2019

jQuery Scrolling Plugins In this Article, We Discuss Top Most jQuery Scrolling Plugins for 2019. Creating a single page, horizontal and parallax scrolling website are in trend and being used widely by web designers.  1. Scroll MagicScrollMagic is a jQuery plugin that essentially lets you use the scrollbar like a progress bar. It’s the plugin for you, if you want to start an animation at a specific scroll position, synchronize an animation to the scrollbar movement, pin an element at a specific scroll position (sticky elements). 2. SmooveSmoove makes it easy to implement awesome CSS3 transition effects, making your content smoothly glide into the page as your scroll down the page. 3. One Page ScrollOne Page Scroll, a jQuery plugin, simplifies creating such websites so easy. ...
jQuery Bootstrap Spreadsheet
Bootstrap, tables

jQuery Bootstrap Spreadsheet

jQuery Bootstrap SpreadsheetIn this post, we discuss jQuery Bootstrap SpreadsheetThis editable jquery converts any table into an editable spreadsheet. The size usually This tiny (3KB, < 120 lines)  It's one of the useful jquery bootstraps spreadsheets can be used for multiple purposes the features are mentioned below you can utilize it. Features of Bootstrap Spreadsheet No magic – works on a normal HTML table (so you can plug it in into any web table) Supports validation and change events (so you can warn about invalid input or prevent invalid changes) Uses standard DOM focus for selection (so does not interrupt scrolling or tabbing outside the table) Native copy/paste support Does not force any styling (so you can style it any way you want, using normal CSS) ...
Free jQuery Touch Swipe Image Gallery Plugins
2019, Gallery, jQuery, JQuery mobile

Free jQuery Touch Swipe Image Gallery Plugins

Touch Swipe Image Gallery Plugins In This Article, We Discuss 6 Different JQuery Touch Swipe Image Gallery Plugins such as LightGallery, nano Gallery,blueimp and more.For this roundup, we have gathered some of the best jQuery touch swipe image gallery plugins that will help you to present and display your web content, images, videos, pictures etc in an eye-catching and elegant way. Following jQuery image gallery plugins are touch-enabled and fully responsive and offer numerous features and you can easily integrate them in your web applications. Here is the list of Gallery Plugins. 1. LightGalleryFree jQuery light gallery is a lightweight touch-friendly jQuery lightbox for displaying image and video gallery. 2. nano GallerynanoGALLERY is a touch-enabled and responsive image g...
jQuery Supported YouTube Player : ytPlayer
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...
How to Use jQuery to Test CSS3 Browser Support
2019, jQuery

How to Use jQuery to Test CSS3 Browser Support

How to Use jQuery to Test CSS3 Browser Support This Article Is About How to Use jQuery to Test CSS3 Browser Support The tricky thing about using CSS properties (especially newer ones that have just been introduced) is that they aren’t always supported by every browser, particularly older versions of any browser, which can be a pain if you’re really striving for consistency in your projects. Luckily, there are a few ways around this issue of cross-browser compatibility. You could quickly test to be sure that your properties of choice are supported, and if they aren’t, you can choose to nix them, or conversely, you could choose to use the property, and write different code for the browsers that don’t support the property.But how do you test to see if a CSS property will work on a browse...
Anti-Bot Icon Captcha using jQuery & PHP : IconCaptcha
PHP, Plugins

Anti-Bot Icon Captcha using jQuery & PHP : IconCaptcha

  Icon Captcha using jQuery & PHP IconCaptcha is easier, faster and more user-friendly captcha than most other captchas. You no longer have to read any annoying text-images, with IconCaptcha you only have to compare two images and select the image which is only present once.Besides being user-friendly, IconCaptcha is also developer-friendly. With just a few steps you can get the captcha up and running. Even developers new to JavaScript and PHP can easily install IconCaptcha. The demo page contains all the code needed to get the captcha working.Also, Check 7 New JavaScript Libraries for DevelopersFeatures:User-Friendly: The captcha uses easily understandable images instead of hard to read texts to complete the captcha. Server-side validation: Any validati...
Using Head.js to Load All Your JavaScript
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 Optimize jQuery Code for Better Performance
2019, jQuery

How to Optimize jQuery Code for Better Performance

How to Optimize jQuery Code for Better Performance In This Article We Discuss About how to Optimize jQuery Code for Better Performance jQuery is the most popular client side library, in fact almost every website uses it. It is popular because it is easy to learn, makes development quick, offers clean code and helps in implementing complex functionality with ease.  The downside is that it can also decrease the performance of websites and can result in slow loading, if not used properly. To ensure the best performance of Optimize jQuery Code for Better Performance, one has to know and follow best practices. In this post, we list some of the most crucial tips for optimizing the performance of jQuery code.Load jQuery from CDN A content delivery network (CDN) is a system of distributed se...
How to Disable Right-Click Menu Using jQuery
2019, jQuery

How to Disable Right-Click Menu Using jQuery

This Article Is About How to Disable Right-Click Menu Using jQuery. There can be so many reasons of why you want to disable right click on any given website. A common one is that you don’t want your users to be able to steal or download your images (this can be done easily if your users have access to a right click menu, which gives users the option to save images when they right-click on them). Whether you want to protect your images or if you have another reason to want to do away with the right-click menu on your site, it’s actually really easy to disable this functionality with jQuery. Disable Right-Click Menu Using jQuery Here’s how you would do it using only a few simple lines of code:$(document).bind("contextmenu", function(e) {return false;});That’s all it takes, ...
How To Convert Image to Black and White
2019, jQuery

How To Convert Image to Black and White

Convert Images to Black and White using jQuery Convert Images to Black and White using jQuery is no longer a manual event. As client side technologies becoming more powerful, conversion processes can be automated and be done in real-time. Read on to learn different ways of converting images to black and white using CSS3, HTML5 with jQuery and various other jQuery plugins. There are jQuery plugins available which can do this job, but first we look at how to do it with simple CSS. Then we will move on to using jQuery code, and finally jQuery plugins. It is best to avoid jQuery plugins until they are absolutely necessary.CSS CSS3 supports various filters and filter properties providing graphical effects like blurring, sharpening, or color shifting an element. Filters are commonly used ...
How to Use jQuery to Create Blinking Text
2019, jQuery, jQuery Plugins

How to Use jQuery to Create Blinking Text

Use jQuery to Create Blinking Text Use jQuery to Create Blinking Text. Blinking text is one of those cool features that you never actively think to add to your projects, but it’s still really fun to play around and experiment with as a text effect. While it might not be super versatile in terms of which of your web pages you might want to or be able to include it in, it is a relatively easy and straightforward effect to master.There are a number of different ways of creating a blinking text effect, but one of the easiest ways to achieve it is by using the fadeOut() and fadeIn() jQuery methods and assigning a slow speed to the methods. This creates a slower blinking effect, like the kind you’d see on a billboard or on a window sign.To use the effect for any of your projects, check ...
How to Change iFrame Styling Using jQuery
2019, jQuery

How to Change iFrame Styling Using jQuery

In This Article We Discuss About Change iFrame Styling Using jQuery. If you’ve ever had the displeasure of working with iFrames, then you know how tedious and frustrating the process can be. Because an iFrames is just embedded HTML content that can be from any website, often when you’re working with them, the style sheets that determine how the content looks are hosted on another server. This can be a real problem, because you won’t be able to override the styling of the content using plain CSS. So colors, font-sizes, font-families, etc, within iFrames are typically very hard to change, unless you use the following snippet of jQuery code, which allows you to use the .contents() and .find() methods to select and change the styling of elements within an iFrame: $(document).ready(function(){...
How To Add Keyboard Shortcut to Anchor Tag Using jQuery
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 ...
How To Add jQuery’s Selectors
2019, jQuery

How To Add jQuery’s Selectors

jQuery’s Selectors In This Article We Are Going To Talk About jQuery’s Selectors in jQuery are actually similar in a lot of ways to selectors in CSS. For example, when you want to select an ID, you precede it with the “#” symbol, and when you want to select a class, you precede it with the symbol, only the syntax for doing so is quite different.In jQuery, when you want to select an element (for the purposes of this example, let’s say you’re selecting an element with the ID of “main”), your selector will need to look like this:$("#main") Beginner’s Guide to jQuery’s Selectors So like CSS, you use the “#” symbol to indicate that it’s a class you’re selecting, but unlike CSS, the selection text all needs to go in within quotation marks, surrounded by parentheses, and preceded by th...
How to Use jQuery to Check if Cookies are Enabled
2019, jQuery

How to Use jQuery to Check if Cookies are Enabled

Use jQuery to Check if Cookies are Enabled In this Article You Find About How to Use jQuery to Check if Cookies are Enabled a cookie (not the kind with chocolate chips) is a small piece of data sent by a website and stored in a user’s computer by their web browser. This is why if you’ve viewed a particular pair of pants on an eCommerce website recently, you might see an ad for those same pants later when browsing Facebook or reading the New York Times — this kind of integration is made possible through the use of cookies. Check if Cookies are Enabled As a user and consumer, you can decide whether or not you choose to enable cookies on your own personal web browser. As a web developer, however, it may be important for you to know if a user has cookies enabled on his or her browser, depen...
How to Use Google Analytics with jQuery Mobile
2019, jQuery, JQuery mobile

How to Use Google Analytics with jQuery Mobile

Google Analytics with jQuery Mobile Google Analytics with jQuery Mobile is an HTML5 based web-page framework that’s optimized for touch — so it’s perfect for using to make responsive web pages and websites that will look great and work phenomenally on mobile devices and tablets. The framework is also optimized for performance. It typically has a very fast page load time, because each page load isn’t a full page load, but rather, when a new page loads, it’s really just a designated HTML snippet being loaded to the browser by JavaScript.This helps keep things nice and speedy, but it also can cause some issues in terms of your analytics data. Because the page load is set up this way, chances are that each page view of a session will be treated by analytics as one single page view, which ...
How jQuery Snippets Getting the Current Year
2019, jQuery

How jQuery Snippets Getting the Current Year

jQuery Snippets Getting the Current Year In This Article you read about jQuery Snippets Getting the Current Year here’s a fun, simple, and incredibly useful jQuery that you can probably use on just about every single one of your projects. This snippet uses jQuery to grab the current year and display it wherever you’d like within your webpage. This is a great chunk of code to have on hand.One particularly good use for this snippet is in the copyright section of your web page or project. Most websites have a copyright notice, followed by the current year, somewhere on their web pages (usually you’ll find it down towards the footer or in the footer, but not always). Getting the Current Year We’ve all probably seen sites with copyrights that are super outdated. When you see a copyright ...