Quick Answer: Add Random Dates to MySQL Database

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'
                                );

8 Comments | MySQL, Quick Answers | Tagged: , , , , , | Permalink
Posted by acsummer

Quick Answers: Dynamically Apply a Border to all IMGs in the DOM

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 …

border-002.png

After …

border-001.png

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: , , | Permalink
Posted by acsummer

Quick Answers: How many images are in the DOM?

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

Quick Answer: Count the Number of Child Elements in DOM

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: , , , , , , , , | Permalink
Posted by acsummer

Quick Answer: Dynamically Adding a Hyperlink to the DOM

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.

  1. First reference the parent node to add the new child element to
  2. Create a new <a> element using document.createElement(‘a’);
  3. Set the “href” attribute value for the <a>
  4. Create a new text node using document.createTextNode();
  5. Append the text node to the <a> element
  6. 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:

Dynamically Adding a Hyperlink 001

Web Browser Output after button is clicked:
Dynamically Adding a Hyperlink 002

2 Comments | Javascript, Quick Answers | Tagged: , , , , , , , , , , | Permalink
Posted by acsummer