Cross-Browser Inline-Block
Does it seriously need to be this hard to do what seems to be a simple thing?
display: inline-block is really a cool thing, or is it?
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
JavaScript: change CSS
This is a simple script that will change the CSS of any object.
You send the function the ID, the CSS attribute you want to change, and the value..
I actually struggled a bit with this as using dot syntax for the CSS attribute would not work. I had to use brackets.
<div id=”myDiv” onclick=”CSS_change(‘myDiv’,'color’,'#ff0000′)”>Change Color</div>
function CSS_change(ID, CSSATTRIB, VALUE)
{
var obj_style = document.getElementById(ID).style;
obj_style[CSSATTRIB] = VALUE;
}
setAttribute(“class”…… does not work in IE9
This does not work in IE9:
var button_div_container = document.createElement(“div”);
button_div_container.setAttribute(‘class’, ‘button’);
You must do it this way:
var button_div_container = document.createElement(“div”);
button_div_container.className = “button”;
WTF?
PDF hosted on S3 not rendering in FireFox
I was having a problem with a PDF document showing up in the browser. The PDF was on an Amazon S3 server and it was called from an HTML file. When I clicked on the link, the browser was blank. The URL looked correct.
I checked that the permissions were correctly set for the PDF file on S3. They were.
I was using FireFox 4 on Win7, so I tried other browsers. IE 6, 7, 8, and Chrome all rendered the PDF correctly.
I opened the PDF in FireFox directly from my computer and it opened fine.
I uploaded the PDF to my person al site and it displayed properly in FireFox 4.
I read a few blogs that talked about the Metadata and setting the “Content-Type” in the Amazon Web Services Console. So I went there and I checked the PDF and it was already set to “application/pdf”.
After spinning my wheels a while longer I checked some of the other values in the “Content-Type” drop-down and did not see any other settings that would apply. So I set it back to “application/pdf” and for the hell of it, I hit “save”. Well that did it. The PDF now showed up?????
How to prevent or allow directory listing?
Options +Indexes
[The above line enables Directory listing.]
Options –Indexes
[The above disables directory listing for your web site.]
http://www.besthostratings.com/articles/prevent-directory-listing.html
window.onload
function Hello()
{
alert(‘Hello World!”);
}
window.onload=Hello; // DO NOT put the parenthesis next to the function name.
PHP/MySQL connect and select database
<?php
// the first part assigns all the MySQL/database login info to variables
$server = ‘localhost’; // This is the server URL.
$un = ‘root’; // This is the database user name.
$db = ‘log’; // This is the name of the database
$pw = ”; // This is the database password
// Connect and select.
if ($dbc = @mysql_connect ($server, $un, $pw)) // Connect MySQL
{
if (@mysql_select_db ($db)) // Selects the database
{print (‘ <p>The Database “‘.$un.’” has been selected </p>’);}
else
{die (‘<p>Could not select Datebase “‘.$un.’” <b>’ . mysql_error() . ‘</b></p>’);}
}
else
{die (‘<p>Could not connect to MySQL because: <b>’ . mysql_error() . ‘</b></p>’);}
?>
JS get value of selection from form select
Here’s a short script to use if you need to get the value of a selection list on the fly. It uses the onChange event that is attached to the select form element.
What I also wanted to achieve was to have a select list with one option as “other”. If other is chosen, a text field will display to let the user enter text.
<html><head>
<title>Select</title>
<style>#other {display:none;}</style>
<script tyle=”text/javaScript”>
function selectListValue()
{
var Beatle = beatles_list.beatles_member.options[beatles_list.beatles_member.options.selectedIndex].value;
if(Beatle == ‘other’)
{document.getElementById(‘other’).style.display=’block’;}
else{document.getElementById(‘other’).style.display=’none’;}
}
function TestDataCheck()
{
var Beatle = beatles_list.beatles_member.options[beatles_list.beatles_member.options.selectedIndex].value;;
var Other = beatles_list.other.value;
alert(Beatle+’ ‘+Other);
return false;
}
</script>
</head>
<body>
Choose a Beatle:<br />
<form method=”POST” name=”beatles_list” onSubmit=”return TestDataCheck()”>
<select size=”1″ name=”beatles_member” onChange=”selectListValue()”>
<option value=”john”>john</option>
<option value=”paul”>paul</option>
<option value=”george”>george</option>
<option value=”ringo”>ringo</option>
<option value=”other”>other</option>
</select>
<br /><br /><br />
<div id=”other”>Other:<br /><textarea name=”other”></textarea></div>
<input type=”submit” value=”submit” />
</form>
</body></html>
CSS: input[type="text"]
This nifty little CSS attribute selectors is clean way to style form input elements.
FYI: It does not work in IE6.
#form1 input[type="text"] {
width:100px;
}
#form1 input[type="submit"] {
width:auto;
}
