Web Development

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





Archive for September, 2007

Curb a String – PHP Function

Tuesday, September 18th, 2007

I recently had several uses for this function, and there are probably many out. I am not proclaiming this unique nor the best available, but it works which is what counts. I actually took the majority of it from someone else, I think from php.net, but I tweaked it a little bit.

curb function

function curb($text, $maxlen = ”)
{
$MAXLENGTH = (empty($maxlen)) ? 100 : $maxlen; $split = explode(” “, $text);
$numwords = count($split);
$i= 0; //while counter
$a = 1; //counts the text chunks$amount = ceil(strlen($text)/($MAXLENGTH – 5)); //get total word chunks
while($i < $numwords) {
$len = (strlen($newtext[$a]) + strlen($split[$i])); //get length of the active chunk
if($len > ($MAXLENGTH – 5)) { //do we have to start a new one?
$a++;
$newtext[$a] = “[$a/$amount] “; //Adds [1/2]
} else {
$newtext[$a] = $newtext[$a] . ” ” . $split[$i];
$i++;
}
}
return $newtext[1] . “…”; // Don’t want the other variables
}

Pass in the string, and optionally, the length you want to curb it to. You can set a default in the highlighted section of the code (currently set at 100). Right now it returns it with a “…” at the end, which is what I wanted. Go ahead and remove the second highlighted section of the code if you don’t want this. (The highlights are very small – look hard! Squint if you must.)-Kerry

Posted in PHP, Phoenix Development | No Comments »

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

Posted in Javascript, Phoenix Development, Web Design | No Comments »

Phoenix Development – New Design

Wednesday, September 12th, 2007

Ok, so its been over a month since my last blog. I promise more are coming, I have a few topics I’d like to go over, such as cron jobs and yet another IE bug. Possibly some complaints about more horrible hosting… you know, the good stuff.

I would just like to announce that my site, http://www.phoenixdev.net, has gotten a new design. I’d love some feedback. I haven’t fixed up all the CSS on certain headings – but I’m talking about the overall look.

Talk soon,
Kerry

Posted in Phoenix Development, Web Design | No Comments »