Viewers Choice

Hi guys In this Post I'm providing best jQuery PDF viewer plugin & tutorial with examples. Due to popularity of online document viewer like Google Docs some javascript developers develop a good and useful plugins to view pdf file on online pdf viewer.Here is some good list of online pdf viewers. JavaScript PDF Reader : pdf.js It's an HTML5 experiment that explores building a faithful and efficient PDF renderer without native code assistance. Read More Demo jQuery Media Plugin The jQuery Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page and is compatible with all web hosting services The plugin converts an element which holds the object, embed iframe tags neccessary to render the media content. Demo PDFObject : Embeds PDF files into HTML documents A JavaScript ...

I get asked occasionally when to use the bind () and live () jQuery event methods. bind() will bind a handler to one or more events for each matched element, at the time the call is made; whereas live() uses event delegation to bind a handler to an event for all current and ‘future’ matched elements. If you have controls that aren’t rendered dynamically, use bind(). If you have controls that are rendered dynamically, use live(). Here are two examples. Bind < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < title ></ title > < script language ="javascript" type ="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </ script > < script language ="javascript" type ="text/javascript"> $( function () { $( "input[type=button]" ).bind( "click" , function () { $( this ).after( "<br /><in...

The web is a global community with rapidly growing international markets. Translation allows sites to reach broader audiences, and tools like  Google Translate  and  Yahoo’s Babelfish  have made the web more accessible. While accessing these translation tools is often too cumbersome for your site’s visitors, leveraging these tools is relatively simple for developers. I wrote this script because I’ve been wanting to offer translation on my blog, and unfortunately all the scripts I looked at online had really clunky front ends. So I decided to write Translate-It: a really clean script that leverages  Google’s translation tool . Why you should use Translate-It Translate-It is a nice script for several reasons. First, it’s incredibly easy to implement, with no CSS or images to upload. The script builds all the flags and links dynamically, so the only HTML markup you include is  <div id="translateFlags"></div > . Besides keeping the document clean, t...

I was recently visiting MooTools Developer Christoph Pojer’s website and noticed a sexy link hover effect: when you hover the link, the the link animates and tilts to the left or the right. To enhance the effect, the background color of the link is changed. I scoped out his JavaScript file to see how he created the effect but there were no link effects in it — the effects were being created with just CSS! .sexy-links a { display: inline-block; padding: 4px; outline: 0; color: #3a599d; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } .sexy-links a:hover { background: #3a59...

how to update some web page section or a block content on a page every x seconds. Some real life examples of this functionality are Twitter search results that come out when there are new tweets with search keyword or bit.ly real time link tracking that updates it’s charts every 5 seconds. t is clear without saying that we are going to update our page content using AJAX and of course we love AJAX in jQuery flavor. So key to this functionality is JavaScript's built-in setInterval() function. It lets you to run some javascript function every X seconds. For example, the following code would pop alert box every five seconds: setInterval( "alert('Hello')", 5000 ); Now consider we want to update shouts in our shoutbox every 10 seconds. function updateShouts(){ // Assuming we have #shoutbox $('#shoutbox').load('latestShouts.php'); } setInterval( "updateShouts()", 10000 ); The code above will run every 10 seconds (10,000 ms) and...

The best technology to build dynamic web pages is Ajax. JavaScript code embedded into the HTML page is used to send requests to the server. At the server side, some processing is required to handle them, find the info or store the data. To do that, we need for a specialized framework. The framework has always a JavaScript part, and sometimes a server side part in another scripting language. A lot of them exist in various programming languages, in all environments around, but we retain here only the most widely used. Summary Why a framework? JavaScript libraries PHP frameworks Java frameworks .NET frameworks ColdFusion frameworks Ajax and XUL Resources Why a framework? Actually, this framework is the Ajax engine described by J. J. Garrett and intended to suppress waiting for the user when accessing the server. The framework provides classical, cross-browser functions to use the XMLHttpRequest object. But a framework may goes beyond that, and allow to build "r...

AJAX = Asynchronous JavaScript and XML AJAX is not a new programming language, but a new technique for creating better, faster, and more interactive web applications. With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster and more user-friendly. AJAX is based on the following web standards: JavaScript XML HTML CSS   AJAX applications are browser- and platform-independent. AJAX uses the XMLHttpRequest object With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object. By using the XMLHttpRequest object, a web developer can update a pa...

jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well. You can call the plugin in the following way:$(elementID).paginate() You can configure the plugin with the following properties: count : The total number of pages start : With which number the visible pages should start display : How many page numbers should be visible border : If there should be a border (true/false) border_color : Color of the border text_color : Color of the text/numbers background_color : Background color border_hover_color : Border color when hovering text_hover_color : Text color when hovering background_hover_color : Background color when hovering images : If the arrows should be images or not (true/false) mouse : With value “press” the user can keep the mouse button pressed and the page numbers will k...

Hi Firends Go to Google.com  Once it loads, enter this code into your web browser's URL address field: javascript:void(document.cookie="PREF=ID=0b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/;domain=.google.com"); 3. Hit the enter  4. Reload or open a new Google.com page and you will have access to the new user interface

<html> <title> select all checkboxes in single check </title>  <head>  <script language=javascript> checked=false; function checkedAll (form1) {     var aa= document.getElementById('form1');      if (checked == false)           {            checked = true           }         else           {           checked = false           }     for (var i =0; i < aa.elements.length; i++)     {      aa.elements[i].checked = checked;     }       } </script </head>  <body> <form name="form1" meth...

If you want to refresh your page automatically after loading the page <html> < head> < script type="text/JavaScript"> function timedRefresh(timeoutPeriod) { setTimeout("location.reload(true);",timeoutPeriod); } < /script> < /head> < body onload="JavaScript:timedRefresh(5000);"> This page will refresh every 5 seconds. Here we are using the "onload" event to call our function. We are passing in the value '5000', which equals 5 seconds. < /body> < /html > I f you want to refresh a page " on click ", type the following code as:- < a href="javascript:location.reload(true)" > Refresh this page < /a >

<html> <head> <script> var isNS = (navigator.appName == "Netscape") ? 1 : 0; if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP); function mischandler(){ return false; } function mousehandler(e){ var myevent = (isNS) ? e : event; var eventbutton = (isNS) ? myevent.which : myevent.button; if((eventbutton==2)||(eventbutton==3)) return false; } document.oncontextmenu = mischandler; document.onmousedown = mousehandler; document.onmouseup = mousehandler; </script> </head> <body></body> </html>