scriptygoddess

It seems like a lifetime ago I first saw that javascript that does the neat “show/hide” trick. Recently I did a search to see what the latest version of that script was and there must have been a dozen different varieties. I think I liked this one the best which is a million times simpler than ones I’ve previously posted on this site. (I haven’t really looked at those scripts in a long time, but for some reason this week alone I’ve needed to use it on two separate projects.) That one does a toggle:

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}

I actually split it so that I could do a separate show/hide:

function show(menuName) {
var el = document.getElementById(menuName);
el.style.display = 'block';
}

function hide(menuName) {
var el = document.getElementById(menuName);
el.style.display = 'none';
}

How to force a file to download (without having to zip it up).

$filename = "secure/writeToFile.doc";

header("Content-Length: " . filesize($filename));
header('Content-Type: application/msword');
header('Content-Disposition: attachment; filename=writeToFile.doc');

readfile($filename);

a few other content types - lots more at the above link…

"pdf": "application/pdf"
"zip": "application/zip"
"xls": "application/vnd.ms-excel"
"ppt": "application/vnd.ms-powerpoint"
"gif": "image/gif"
"png": "image/png"
"jpg": "image/jpg"
"mp3": "audio/mpeg"
"mp3": "audio/mp3"
"wav": "audio/x-wav"
"mpe": "video/mpeg"
"mov": "video/quicktime"
"avi": "video/x-msvideo"

Another “tired of hunting for the exact syntax” things… Here’s shorthand for an “if” statement:

echo isset($var) ? $var : "sorry, nothing here";

So my latest CSS fight, with which browser? IE, of course!

I was updating someone’s site, and set up a new “side menu” type navigation. I set it up as an unordered list using images for bullets, because I wanted them to change on :hover (and we know that IE will not listen to any :hover descriptions that is not an anchor (a) type). Easy enough:

.maincontent .sidemenu ul {
margin:0;
padding: 5px 0 0 0px;
list-style: none;
list-style-type:none;
}

.maincontent .sidemenu ul li {
padding: 0 0 10px 0;
margin: 0 0 0 10px;
list-style: none;
list-style-type: none;
}

.maincontent .sidemenu ul li a {
color: #000;
padding: 0 0 0 15px;
display: block;
background: url('/images/arrow-red.gif') left 4px no-repeat;
}

.maincontent .sidemenu ul li a:hover {
color: #D43D2B;
background: url('/images/arrow-black.gif') left 4px no-repeat;
}

(the padding, etc was for styling)… Looks great in Firefox, but load the page up in IE, and mysteriously, the bullet for the lists was still there…

Finally, I thought it was odd that the list-style was even stylized somewhat instead of a plain old bullet… hunted down in some of the other stylesheets of the site and noticed that there was a universal definition for UL and even though I was trying to “override” it in my stylsheet… it refused to do so in IE:

UL { list-style: circle; }

Changing that to be specific for the container it was in (which was not the sidemenu) fixed the problem…

.othercontentdiv UL { list-style: circle; }

Is it just me or with the last update to Firefox has it been… uhm.. particularly buggy? I’ve had it crashed more than ever before, and it’s just… slow… I used to LOVE firefox. But this is getting pretty annoying. I don’t have an outrageous number of addons/extensions running, but I might try turning them off (then back on one at a time) to see if that helps… Anyone else having issues? (I’m using ver 2.0.0.1)

From Javascript Get or Set Checked Radio Value

// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}

// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}

Boy, do I love that “Position is everything” site. Every problem I’ve been having these days with CSS, the fix can be found there.

Here’s today’s CSS dilema. Had a simple floated div. Gave it a margin - and for some reason, IE doubled it. The solution is just to add “display: inline;” to the floated div, and all is well.

Ran into this problem today: Had a container div with floated divs inside. However the container div was shrinking up above the bottom of the floated divs inside.

See example here.

Found this solution which basically suggested adding the following so that it wouldn’t do that:

.containerdiv:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

As well as adding a height: 1% (to to the container div)

See fixed example here.

Ever email someone a really long link and have the thing wrap to two lines, and then your friend gets the email clicks on the link but it’s broken so they can’t go to it? I just found this website: Email URL that will give you a simple URL to send to people and it will redirect them to the long complicated URL.

So for example this URL: http://www.amazon.com/o/ASIN/B000B7TBNE/ref=s9_asin_image_0/002-1630007-1917641
can simply be this url:
http://emailurl.com/1GZ374

No idea how long they store the referrer though. (I’ll bet you could write a script that basically does the same thing for your personal use and stores it forever on your own database…)

Like I said, I’m still fighting my way through understanding CSS. Here’s a little tid-bit I finally understand today. Had a bit of text that I wanted to have centered in a nav bar. “vertical-align: middle;” didn’t seem to do anything. Found this article which said this:

the thing with vertical-align is that it’s vertical aligning text according to the default line-height of the inline-text boxes. You can manipulate that by setting the line-height to the same height as your block, but this will only be effective if the line of text (link) does not wrap onto more than one line.

NOW it makes sense…

So if you had:

<div id="nav"><a href="#" class="centerme">Home</a></div>

Then:

#nav {
height: 25px;
line-height: 25px;
}
.centerme {
vertical-align: middle;
}

should do the trick…