Tag: Javascript

Categories
Other Programming

Javascript Net PDF Viewer

When trying to view PDF files on the internet, you have a very limited number of choices.  The obvious one is to let the user handle viewing PDFs with something like Adobe Acrobat Reader.  However, some users don’t have Acrobat installed.  Or the file gets downloaded instead.  If you want an easy way to view PDF files online though, look no further than Google Docs.

The Google Docs Javascript PDF Viewer will embed the same javascript pdf viewer that Google Docs uses right in to your page via an IFrame.  It’s really that easy.  It even allows for searching of documents (which is quite handy!).  If this sounds like what you’re looking for, the link is below.

Javascript Net PDF Viewer [Google Docs]

Categories
Other Programming

Ajax Utility Function

Edit:  This post was made before I started using JQuery or Mootools.  This can safely (luckily) be ignored now.

For the past couple months I’ve been playing around with Ajax style events on a few pages I’ve been working on.  One of the main problems I’ve run into is cross-browser compatibility (surprise!).  To solve that problem, I took the advice of a book that I’m reading and made a utility file for some of the most annoying cross-browser issues:  Event Handlers, Activated Objects, and Request Objects.  You can download the utility file by clicking the link below.

Download utils.js here.

Enjoy!  If you have any questions, please leave them in the comments and I’d be happy to get back with you.

Categories
Other Programming

Javascript + CSS Fade In

Edit:  This was created before I had discovered JQuery or MooTools.  Please, for the love of God, use those instead.

You’re working on your first sweet ajax form implementation.  You’ve got the form communicating asynchronously with the server and sending status updates between to the two.  However, when you want to let users know that the form is processing, the processing image just kind of “pops” in there.  What you need is an easy “fade in implementation”.

The HTML

<div id=”myimage”>
<img src=”myimage.gif” />
</div>

The CSS

#myimage {
opacity: 0;
}

The Javascript

function fadeIn(id, level) {
if(document.getElementById) {
object = document.getElementById(id);
if(level <= 100) {
setOpacity(object, level);
level += 10;
window.setTimeout(“fadeIn(‘”+id+”‘,”+level”)”, 100);
}
}
}

function setOpacity(object, level) {
level = (level == 100)?99.999:level;
object.style.filter = “alpha(opacity:”+level+”)”;
object.style.KHTMLOpacity = level/100;
object.style.MozOpacity = level/100;
object.style.opacity = level/100;
}

How To Use It
Using this code is pretty easy.  Make sure that the CSS & Javascript are included in your document correctly, then do the following.

fadeIn(“myimage”,0);

If you have any questions, leave a comment and I’d be glad to help.