gmilby

<ul>
    <li>
        <h1>destination</h1>
        <span class="foldable">
            <span>(FRA) Frankfurt Airport</span>
        </span>
    </li>
    <li>
        <h1>airline</h1>
        <span class="foldable">

gmilby

<div id="main-bg"></div>
<form class="container">
  <ul id="bg-opts" class="row">
    <li class="bg-opt-item span4">
      <p class="lead text-info">Background Size</p>
      <div class="bg-opt-radios">
        <p><label for="bg_size_cover" class="radio"><input type="radio" name="bg_size" value="cover" id="bg_size_cover" checked /> Cover</label></p>
        <p><label for="bg_size_contain" class="radio"><input type="radio" name="bg_size" value="contain" id="bg_size_contain" /> Contain</label></p>
        <p><label for="bg_size_100_auto" class="radio"><input type="radio" name="bg_size" value="100% auto" id="bg_size_100_auto" /> 100% auto</label></p>
        <p><label for="bg_size_auto_100" class="radio"><input type="radio" name="bg_size" value="auto 100%" id="bg_size_auto_100" /> auto 100%</label></p>

gmilby

<select class="ajax">
  <option value="">-- Select a Site--</option>
	<option value="David Walsh Blog">David Walsh Blog</option>
	<option value="Script & Style">Script & Style</option>
	<option value="Band Website Template">Band Website Template</option>
</select>

<br /><br />

<input type="text" id="my-text" class="ajax" />

gmilby

/* create an array of days which need to be disabled */
var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];

/* utility functions */
function nationalDays(date) {
  var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
	//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
	for (i = 0; i < disabledDays.length; i++) {
		if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
			//console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);

gmilby

(function() {

  // Utility method to get and set objects that may or may not exist
	var objectifier = function(splits, create, context) {
		var result = context || window;
		for(var i = 0, s; result && (s = splits[i]); i++) {
			result = (s in result ? result[s] : (create ? result[s] = {} : undefined));
		}
		return result;
	};

gmilby

// from david walsh blog
// The PHP - Content & Header
// The following snippet goes at the top of the page:

if(isset($_GET['delete'])) {
  $result = mysql_query('DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'],$link);
}

// The following is used to display the records:

gmilby

The HTML
The HTML structure consists of a list with links, as you would expect from a navigation menu, however there are a few extra SPAN elements to aid the 3D effect:

<ul class="block-menu">
  <li><a href="/" class="three-d">
		Home
		<span aria-hidden="true" class="three-d-box">
			<span class="front">Home</span>
			<span class="back">Home</span>
		</span>

gmilby

afterscriptexecute Event
Written by David Walsh on January 2, 2013 ·  4 Comments

Fellow Mozillian Daniel Buchner, curator of the X-Tag project and clever developer who showed us how to detect dom node insertions using CSS animations, recently showed me a new feature JavaScript feature I'd never heard of:  the SCRIPT element's afterscriptexecute event.  This event, when detected within the document, provides developers insight as to when specific SCRIPT elements are executed.

View Demo
The following snippet listens for script executions on the page and logs the specifc SCRIPT element to the console after executed:

<script id="my_script" type="text/javascript">
document.addEventListener('afterscriptexecute', function(e){

gmilby

Written by David Walsh 

View Demo
The PHP => HTML
/* date settings */
$month = (int) ($_GET['month'] ? $_GET['month'] : date('m'));
$year = (int)  ($_GET['year'] ? $_GET['year'] : date('Y'));

/* select month control */

gmilby

One of the website features my customers love to provider their web users is an online dynamic calendar. An online calendar can be used for events, upcoming product specials, memos, and anything else you can think of. I've taken some time to completely rewrite the PHP event calendar so that I may share it with you.

View Demo
The CSS
/* calendar */
table.calendar  	{ border-left:1px solid #999; }
tr.calendar-row	{  }
td.calendar-day	{ min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover	{ background:#eceff5; }
td.calendar-day-np	{ background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }