January 30, 2008
Looking for a way to add random dates to a column in one of your MySQL tables?
I ran across this problem and found a straightforward solution. By utilizing str_to_date(), concat(), floor() and rand() you can specify a random date for a column.
update mytable
set mycolumn = str_to_date(
concat(
floor(1 + rand() * (12-1)), /* Generate a random month */
'-',
floor(1 + rand() * (28 -1)), /* Generate a random day */
'-',
'2008'
),
'%m-%d-%Y'
);
6 Comments | 
MySQL, Quick Answers | Tagged: CONCAT(), FLOOR(), MySQL, RAND(), random date, STR_TO_DATE() | 
Permalink
Posted by acsummer
January 2, 2008
Many people have asked me to put up a Quick Answer that would allow them to dynamically apply a border to all IMG elements in the DOM.
Before …
After …
To dynamically apply CSS padding and borders to all IMG elements in the DOM, you can use the following Javascript function:
<html>
<head>
<script language="Javascript">
function drawIMGBorder()
{
//Create a reference of all IMG elements in DOM
var imgs = document.getElementsByTagName('img');
//Loop through each of the IMG elements
for(i = 0; i <= (imgs.length -1); i++)
{
//Apply CSS padding to current IMG
imgs[i].style.padding = "2px";
//Apply CSS border to current IMG
imgs[i].style.border = "2px Solid #cacaca";
}
}
</script>
</head>
<body onLoad="drawIMGBorder();">
<img src="picture1.jpg" border="0" />
<img src="picture2.jpg" border="0" />
</body>
</html>
In this example the Javascript function is called when the page loads, but this can easily be modified to another Javascript event.
Leave a Comment » | 
Javascript, Quick Answers | Tagged: DOM, Dynamically Border Images, Javascript | 
Permalink
Posted by acsummer
January 2, 2008
You can dynamically determine the number of images (<img>) on a web page by using Javascript.
var imgCount = document.getElementsByTagName('img').length
To create a reusable function you can use the following code:
function countAllImages()
{
var imgCount = document.getElementsByTagName('img').length;
return imgCount;
}
Leave a Comment » | 
Javascript, Quick Answers | 
Permalink
Posted by acsummer
December 30, 2007
Sometimes I come across the need to count the number of child elements in any given area of the DOM. Below is an example of how to count the number of elements by using the getElementsByTagName() function.
<html>
<head>
<script language = "Javascript">
function countChildElements(parent, child)
{
var parent = document.getElementById(parent);
var childCount = parent.getElementsByTagName(child).length;
alert(childCount);
}
</script>
</head>
<body>
<ul id = "listing">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<input type = "button" value = "Count <li>" onClick="countChildElements('listing','li');" />
</body>
</html>
When you click the button, the browser will alert you to the number of child <li> elements to the “listing” <ul>.
3 Comments | Javascript, Quick Answers | Tagged: Client Side Scripting, Document Object Model, DOM, Dynamic HTML, getElementById(), getElementsByTagName(), Javascript, Web Development, XHTML | Permalink
Posted by acsummer
December 29, 2007
Javascript is capable of appending child elements to the DOM of a web page dynamically. This quick answer demonstrates one way to append a <a> element to a <div>.
How to append a hyperlink to the DOM is relatively straight forward.
- First reference the parent node to add the new child element to
- Create a new <a> element using document.createElement(‘a’);
- Set the “href” attribute value for the <a>
- Create a new text node using document.createTextNode();
- Append the text node to the <a> element
- Finally, append the new <a> element to the parent node
<html>
<head>
<script language="Javascript">
function appendLink()
{
//Get the element that we want to append to
var divEl = document.getElementById('link_div');
//Create the new <a>
var aElem = document.createElement('a');
aElem.href="http://www.google.com";
//Create a text node to hold the text of the <a>
var aElemTN = document.createTextNode('link to Google.com');
//Append the <a> text node to the <a> element
aElem.appendChild(aElemTN);
//Append the new link to the existing <div>
divEl.appendChild(aElem);
}
</script>
</head>
<body>
<input type="button" value="Add Link" onClick="appendLink();">
<div id="link_div"></div>
</body>
</html>
Web Browser Output of code before button is clicked:
Web Browser Output after button is clicked:
1 Comment | Javascript, Quick Answers | Tagged: Add, Add Link, Append Child Javascript, appendChild(), createElement(), document.appendChild(), document.createElement(), dynamically add a link, Javascript, javascript appending child to document, Quick Answer | Permalink
Posted by acsummer
