Tuesday, July 14

Remove Extension PHP

I'm using a Joomla module called JX List Files. Simple, nice little module to list files in a directory. My only complaint was that it left the file extension in the name, so I added this little function I found.

function remext($strName){
$ext = strchr($strName, '.');
if($ext !== false){
$strName = substr($strName, 0, -strlen($ext));
}
return $strName;
}

Friday, July 10

Show/Hide with Select

This isn't complicated, but I forgot how I did it before, so I'm going to write it down this time.

The Case:
I have a form with a select box, if you select Yes, you get one set of options, and No gets another. The two pieces are in divs, both with style=display:none. The dropdown is a required field and it starts as a blank box.

The JavaScript:

function showHide(show, hide){
document.getElementById(show).style.display='block';
document.getElementById(hide).style.display='none';
}
The HTML:
<select id="yesno">
<option> </option>
<option value="yes" onclick="showHide('pickYes', 'pickNo')">Yes</option>
<option value="no" onclick="showHide('pickNo', 'pickYes')">No</option>
</select>
<div id="pickYes" style="display:none">
I display if Yes is selected
</div>
<div id="pickNo" style="display:none">
I display if No is selected
</div>


:UPDATE:
Oh man, I totally lied. That only works in Firefox. onclick isn't an option javascript event. Oops. Here's the real solution

Javascript:
function showHide(){
var sel = document.getElementById('yesno').value;
if (sel == 'yes'){
document.getElementById('pickYes').style.display='block';
document.getElementById('pickNo').style.display='none';
}
else if (sel == 'no'){
document.getElementById('pickNo').style.display='block';
document.getElementById('pickYes').style.display='none';
}else{
document.getElementById('pickYes').style.display='none';
document.getElementById('pickNo').style.display='none';
}
}
HTML:
<select id="yesno" onchange="showHide()">
<option> </option>
<option value="yes" onclick="showHide('pickYes', 'pickNo')">Yes</option>
<option value="no" onclick="showHide('pickNo', 'pickYes')">No</option>
</select>

So yeah... this isn't as pretty, but it works in other browsers.

ANOTHER UPDATE (from months in the future):
This whole ugliness can be completely avoided by just using JQuery :)

Wednesday, July 1

Random CSS Background

The Case:
We have a header background image on the top of the site. The customer wants it to rotate randomly between any number of images.

The Javascript:

var images=new Array();
images[0] = "header1.jpg";
images[1] = "header2.jpg";
images[2] = "header3.jpg";
images[3] = "header4.jpg";
images[4] = "header5.jpg";
var path = "http://example.com/images/";

function changeHeader(){
var rn=Math.floor(Math.random()*images.length);
document.getElementById('header').style.background = "url('"+path+images[rn]+"')";
}
And the HTML:
<script type="text/javascript">
window.onload=function(){
changeHeader();
setInterval("changeHeader()",5000);
}</script>
Don't forget to set a default image for those who don't use javascript.