Web Development

Web Development Tips & Tricks, the things that you don’t want to figure out.





Archive for the ‘Javascript

PHP.JS – Your Javascript PHP Library

Tuesday, August 4th, 2009

PHP.JSThe tile may have been a wee bit confusing, partially intended. PHP.JS is one of the most useful tools I’ve seen around, and boy did they do a good job. So, what is it, specifically?

PHP.JS is a Javascript library that has converted pretty much the entire PHP library into Javascript. This is their description:

“PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side.”

It’s completely free (thank you, open source) and can help enormously.

The main question that was on my mind was, “Do I have to download the whole thing?” After all, something that comprehensive is probably pretty hefty.

The answer, thankfully, is no! They have every function broken out into pieces and the ability to download a wide variety of packages, and each package can be modified to add or subtract individual functions.

Well, that’s it for today! If you can’t think of many uses, let me know, because I can think of a plethora of uses.

Have a great day!

-Kerry

Javascript Countdown

Wednesday, July 29th, 2009

Javascript-KitSo… hard… to… find… time… to… post…

Of course I will be attempting to find more time to post as always, try to fit into my schedule, as I have SO much data I would like to share, so trying to find free time (like now), that I can share them with you.

Today, I had to do a Javascript countdown. No big deal, they’re everywhere, I just thought I would show you the one I used, as it worked great. I found it at Javascript Kit, which is a great site to find a good deal of free scripts.

I used one with a very simple function call. I simply reorganized the script code, customized it a little bit, and it worked great. You can find it here.

I would give you a link to the site, but it will only be there for 10 days, so I’ll just give you an image:

Countdown

Have a great day!

jQuery – The beginning of Web 3.0

Tuesday, June 23rd, 2009

jQueryI am fully aware that ‘Web 3.0′ isn’t really defined, other than it’s a step in the direction of a new age in web browsing. I believe jQuery is a large part/start in that direction.

So, what is jQuery?

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”

That just sounds like a new way of writing Javascript, and not all that new and exciting. Essentially, it is just that, but what it brings about can yield spectacular results. It gives you complete control over Javascript and makes you able to change everything with ease.

Recently I had a project that I wanted everything to be on one page. With jQuery I was able to setup a Split-Pane Divider (like the ones you see in an explorer window), a sortable table that you could change the widths of the columns (by dragging), made my own accordion menu that when clicking on an item, dynamically populated the sortable table.

On top of all that, I used ThickBox to make it even more dynamic.

There’s more functionality that I’m not going into here (Calendar Control, etc.), but I ended up with a fully functional page that used multiple database tables and completely functional like a regular web page, without any refreshing, with animated effects (according menu slides down, other fields faded in and out). This is the result of jQuery.

From what I’ve gathered there are four main Javascript libraries, jQuery, Prototype, Dojo and Mootools. From the reviews I’ve read, jQuery is on the top, though some people prefer the others. Dojo might have a little bit more funtionality. All of them have their own plugins, hundreds of things to make your site more functional and increase it’s design with javascript animated effects.

jQuery has full documentation as well as premade visual plugins in their jQuery UI pack.

I’m completely sold and have been using it for a while. If you need tutorials, they have them too.

Shrinking Javascript the Better Way

Thursday, February 28th, 2008

Hello everyone!

There are many ways to shrink or obfuscate Javascript, simply search Google and you should find plenty of results. I found that many are programs that shrink it, then you upload the new code, which I was going to use until I found a better solution.

I found two that were recommended, jspacker and JSMin. After searching for jspacker and finding their site down, I went to JSMin. I found links at the bottom for PHP code that would do it on the spot, which made me happy because I figured I could figure out a way to do something tricky with it, which I did.

Through the use of .htaccess, JSMin and another file I created, I made the site I was working on automatically shrink all my Javascript files when called, but look completely normal in Dreamweaver.

Here’s the code:

.htaccess

Options +FollowSymLinks
RewriteEngine on

RewriteRule ^js/(.*).js$ /js/minimize.php?jsPage=$1 [L]

Quick note, I keep all my Javascript files in a folder called “js” which is also where “minimize.php” is located. You can adjust this according to your setup.

includes/minimize.php

<?php
require(‘../includes/jsmin.php‘);

// Output a minified version of the Javascript file.
echo JSMin::minify(file_get_contents($_GET['jsPage'] . ‘.js’));
?>

Again, should adjust the include of the “jsmin.php” which can be downloaded here. Also, with the way I set it up, “minimize.php” must be in the same folder. You can adjust all of this however you like, but this was the best for my use.That’s it! Basically what’s happening is when the site calls your “example.js” file, it instead reads the file “minimize.php?JSPage=example”, which then minimizes and outputs the “example.js”.

-Kerry

Image Cross-Fader in Javascript

Sunday, September 16th, 2007

Ok, I know I have a bunch of bugs to report as well but this what I’ve been working on, so I thought I would share it with you.

Many sites use flash tor fading images into each other, or to present a slide show. Sure, you can do this if you have the flash experience, or have one of the many programs that create them for you (most are paid programs, unless you want a watermark.) It’s not a bad solution, but there is another solution, Javascript.

A friend of mine found this cross-fade script, Image Cross Fade Redux. That shows it in action (I suggest taking a look so you can see what the cross fader does), he unfortunately doesn’t offer you the code. It’s not hidden, but he doesn’t display it for you to download or copy and paste. Well, here’s the code:

xfade.js

/*****Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.comPlease leave this notice intact.Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html*****/window.addEventListener?window.addEventListener(“load”,so_init,false):window.attachEvent(“onload”,so_init);var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

// DON’T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
// http://slayeroffice.com/code/imageCrossFade/xfade2.css
css = d.createElement(“link”);
css.setAttribute(“href”,“/css/xfade.css”);
css.setAttribute(“rel”,”stylesheet”);
css.setAttribute(“type”,”text/css”);
d.getElementsByTagName(“head”)[0].appendChild(css);

imgs = d.getElementById(“imageContainer”).getElementsByTagName(“img”);
for(i=1;i imgs[0].style.display = “block”;
imgs[0].xOpacity = .99;

setTimeout(so_xfade,5000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;

nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = “block”;
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
imgs[current].style.display = “none”;
current = nIndex;
setTimeout(so_xfade,5000);
} else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = “alpha(opacity=” + (obj.xOpacity*100) + “)”;
}

}

There are two parts that you may have/want to change.The first is the two parts where it says “5000″. That’s how many milliseconds in between each fade, and I wanted 5 seconds.

The second is the line ‘css.setAttribute(“href”,”/css/xfade.css”);’. Simply change the “/css/xfade.css” to the location of the CSS file I’m about to show you:

xfade.css

#imageContainer {
float: left;
width: 210px;

margin:auto;
position:relative;
}#imageContainer img {
display:none;
position:absolute;
top:0; left:0;
}

Feel free to change anything in the #imageContainer section of the CSS file. The only parts that need to stay is the “position: relative;” and “margin: auto;”. I suggest setting the width and height to the width of the widest image and the height of tallest image.

Make sure you include the Javascript on the page, a line like:<script type=”text/javascript” language=”javascript” src=”/js/xfade.js”></script>

The last part is the actual pictures you want to cross fade into.

HTML code

<div id=”imageContainer”>
<img src=”/images/sailor.jpg” width=”181″ height=”378″ />
<img src=”/images/footballfullsize.jpg” width=”210″ height=”338″ />
<img src=”/images/cop.jpg” width=”209″ height=”500″ />
<img src=”/images/baseball.jpg” width=”200″ height=”474″ />

</div>

There is one thing you should pay attention to.

The <div id=”imageContainer”> contains all the images you want to fade into each other. This must remain the same.

You can see it in action on Life Size Custom Standups, where I was learning to use it.

-Kerry