Skip to main content

Posts

Showing posts with the label jQuery

How to replace plain URLs with links

Here we will explain how to replace Urls with links from string Using PHP $string ='Rajiv Uttamchandani is an astrophysicist, human rights activist, and entrepreneur. Academy, a nonprofit organization dedicated to providing a robust technology-centered education program for refugee and displaced youth around the world.  CNN Interview - https://www.youtube.com/watch?v=EtTwGke6Jtg   CNN Interview - https://www.youtube.com/watch?v=g7pRTAppsCc&feature=youtu.be'; $string = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.%-=#]*(\?\S+)?)?)?)@', '<a href="$1">$1</a>', $string); Using Javascript <script> function linkify(inputText) {     var replacedText, replacePattern1, replacePattern2, replacePattern3;     //URLs starting with http://, https://, or ftp://     replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;     replacedText = inputT...
1 comment
Read more

How to create jQuery fadeIn fadeOut Animation

How to create jQuery fadeIn fadeOut Animation Html: <ul> <li class="client-testimonial"><img src="demo1.png"></li> <li class="client-testimonial"><img src="demo2.png"></li> <li class="client-testimonial"><img src="demo3.png"></li> <li class="client-testimonial"><img src="demo4.png"></li> </ul> jQuery: jQuery(document).ready(function(){ if(jQuery('.client-testimonial').length > 0){ var showImg = jQuery(".client-testimonial-img"); var quoteIndex = -1; function showFadeInFadeOut() { ++quoteIndex; showImg.eq(quoteIndex % showImg.length) .fadeIn(2000) .delay(2000) .fadeOut(2000, showFadeInFadeOut); } showFadeInFadeOut(); } });
Post a Comment
Read more

How to change integer value in number format jQuery

Here are simple way you can change integer value in number format on key up using jQuery Html Code: <input type="text" name="amount" class="required" value=""> jQuery Code: <script> jQuery.noConflict(); jQuery(document).ready( function($){  $(document).on('keyup', 'input.required', function(event){ if($(this).hasClass('field-error')){ $(this).css('border-color', '#83A4C5'); $(this).removeClass('field-error'); }    var selection = window.getSelection().toString(); if ( selection !== '' ) { return; }            // When the arrow keys are pressed, abort it. if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) { return; }       var $this = $( this );            // Get the value. var input = $this.val();             var input = input.replace(/[\D\s\._\-]+/g, ""); input = input ? pa...
2 comments
Read more

YouTube Player API Reference for iframe Embeds

YouTube Player API Reference for iframe Embeds The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript.Using the API's JavaScript functions, you can queue videos for playback; play, pause, or stop those videos; adjust the player volume; or retrieve information about the video being played. <script>       // 1. This code loads the IFrame Player API code asynchronously.     var tag = document.createElement('script');     tag.src = "https://www.youtube.com/iframe_api";     var firstScriptTag = document.getElementsByTagName('script')[0];     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);     // 2. This function creates an <iframe> (and YouTube player)     //    after the API code downloads.     var player;            f...
Post a Comment
Read more

Search Table Row by jquery

Search Table Row by jquery Search content from table using jQuery. Live searching method via jquery Create function to remove highlight content. If content not matched. function removeHighLighting (elm){         elm.each(function(){             var element = $(this);             element.replaceWith(element.html());         })     } Create function to highlight matched content. function addHighLighting (elm, data){         var text = elm.text();         var highlightedText = '<em>' + data+ '</em>';         var newText = text.replace(data, highlightedText);         elm.html(newText);     } Search text on keyup $("#search").on("keyup", function() {     ...
Post a Comment
Read more

Server Side Datatable handling using PHP and MySql

Server Side Datatable handling using PHP and MySql jQuery datatable server side processing. Using jQuery Ajax and MySql. Step 1: View Layout for display Student Record index.html  <!DOCTYPE html> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <title>Server Side Datatable handling</title>         <link rel="stylesheet" id="font-awesome-style-css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="all">         <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"/>                 <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQue...
Post a Comment
Read more

Refresh a particular div jQuery

Refresh a particular div jQuery Method 1: How to refresh a particular div content when page is loading through ajax load() function <ul id="nav" class="nav" style="font-size:12px;"> <li><a href="#" data-url="location.html">Location</a></li> <li><a href="#" data-url="multi.html">Multi-Location</a></li> </ul> <div id="home"></div> $('#nav a').on('click', function(e){      e.preventDefault();      $('.active').removeClass('active'); // removes the active class from other link      $(this).addClass('active'); // adds the active class to current cliked link      setInterval(function(){        $("#home").load($('.active').data('url'),{},function(){}); // populates the div with data-url of active class.      }, 5000); }); $('#nav li:eq(0) a').trigge...
Post a Comment
Read more

FusionCharts in jQuery

Visualizing Data Makes It Easier To Read When dealing with data analysis, most companies rely on MS Excel or Google Sheets. While those are powerful tools, it’s difficult to notice trends, much less make any sense out of large rows of spreadsheet data. Dealing with data presented this way isn’t very interesting, but once you add visualization to that data, things become easier to manage, and that’s the topic of today’s tutorial - making interactive charts using jQuery. It’s difficult to notice trends from rows of spread sheet data, but once you add visualization... I will use  FusionCharts’ JavaScript chart library  for this project as it offers a large library of 90+ charts, is compatible with every browser, and is pretty easy to work with. It also offers a dedicated plugin for jQuery that will make our job easier. I will start by making a basic chart using FusionCharts’ core JavaScript library and its  jQuery charts plugin , then I will add the drill-down ...
Post a Comment
Read more