Or a.k.a how every other advertising program will contribute to the downfall of the quality of the internet.

Its just another rambling of an uninformed person on how this game will end:

1. Almost all advertising programs earns you money whenever a user clicks on a banner ad.
2. For a user to click on a banner, the banner content must be more interesting to the user than the content on the website.
3. Websites owners usually have no control over the quality of content on these banner ads.
4. The banner ads are usually of low value to the users compared to the content of your website.
5. The only logical way to improve the gradient is to lower the quality of the content of your website.
6. Since lower quality content website will rank lower on search engines, the website will resort to dubious SEO.
7. Now that most of the top ranked search results are mostly low quality content wesbites, at one point the user gives in a clicks on the banner ad just to get the proper information. A typical user does not have the patience to check the first 20 search results. The good content websites would be found on a lower ranking instead.
8. Low quality websites are now earning a lot while those with good content operates at a loss. By natural selection, low quality websites proliferate.
9. Search engines will become basically useless since the majority of websites are now of low-quality content and of no use to users.

No wonder Google needs a lot of PhDs for their search algorithm. The only thing it can do is delay the inevitable, because low quality websites will eventually reach a threshold where it will be almost indistinguishable from good ones. Expect the signal to noise ratio to become even lower…

Regex: its usually a bane for most developers and programmers to the point that most regex patterns in the wild are usually cut and paste from the web or text books. Even I admit that I’m guilty of this.

However, wouldn’t it be better if we learn how the regex pattern we input works? Good thing is, there is already such a thing! The website strfriend transforms a RegEx pattern into a simple chart that is easier to understand.

Here is an example:

This is actually from a RegEx I used for matching all XML schema elements and attribute groups that doesn’t use a closing tag that have a ref attribute.

<xs:(element|attributeGroup) ref=”[^"\r\n]*”[^\r\n/>]*/>

For those who are curious, here is the other RegEx I used for matching those XML schema elements / attribute groups with closing tags that have a ref attribute:

<xs:(element|attributeGroup) ref=”[^"\r\n]*”[^\r\n/>]*>(.|\r\n|\n)+?</xs:(element|attributeGroup)>

Having problems with checkbox validations? Then you’re not alone. Checkbox validation is usually more difficult due to its nature of having multiple values at the same time.

Consider this simple form where a user is required to select at least one checkbox:
Which of the following jQuery selectors do you usually use?
(Please select at least one)

#id

.class

element[@attribute]

Which of the following jQuery events do you usually encounter?
(Please select at least one)

click

focus

change

blur

submit

<b>Which of the following jQuery selectors
do you usually use? (Please select at least one)</b><br>
<input type="checkbox" name="selector[]"
id="selector" value="id">#id<br>
<input type="checkbox" name="selector[]"
id="selector" value="class">.class<br>
<input type="checkbox" name="selector[]"
id="selector" value="element">element[@attribute]<br><br>

<b>Which of the following jQuery events
do you usually encounter? (Please select at least one)</b><br>
<input type="checkbox" name="event[]"
id="event" value="click">click<br>
<input type="checkbox" name="event[]"
id="event" value="focus">focus<br>
<input type="checkbox" name="event[]"
id="event" value="change">change<br>
<input type="checkbox" name="event[]"
id="event" value="blur">blur<br>
<input type="checkbox" name="event[]"
id="event" value="submit">submit<br>

So how do we do the validation?

First we’ll have to bind the validations with the form’s submit event (submit() event on jQuery) and return false for all empty checkbox groups to prevent the form triggering its submission.

Without using jQuery, you’ll have to iterate through all of the checkbox elements, then check for the checked status of each individual check boxes (if none is checked then return false). And you’ll have to do this for each check box grouping.

However, jQuery makes things a little bit easier by introducing a selector filter for checked elements.
Using the :checked filter, it will select all of the checked elements for a particular element. so in this case,

$("input:checked")

will select all of the checked input elements. However, this is a downside for this. The :checked filter does not support #id and .class selectors so the following won’t work:

$("#selector:checked")
$("#event:checked")

So how do we work around this? Its pretty simple, by specifying the id, class, or even as an attribute, we can now separate the checkboxes according to its grouping. In this example, we are going to be using the #id to separate our checkboxes.

var selector_checked = $("input[@id=selector]:checked").length;
var event_checked = $("input[@id=event]:checked").length;
if (selector_checked == 0)
{
	return false;
}
else if (selector_checked == 0)
{
	return false;
}
else
{
	return true;
}

Its much simpler than iterating through each checkbox, since jQuery automatically does this for us. For two different checkbox groups, this is acceptable. However, when we would need to deal with more checkbox groupings, this can become a problem since the code will become more cluttered by then.

To simplify things, we’ll just make our own function passing the #id as a parameter to check for each checkbox group’s status. This is how the script would finally look like.

$(document).ready(function()
{
	$("form").submit(function()
	{
		if (!isCheckedById("selector"))
		{
			alert ("Please select at least one selector");
			return false;
		}
		else if (!isCheckedById("event"))
		{
			alert ("Please select at least one event");
			return false;
		}
		else
		{
			return true; //submit the form
		}
	});

	function isCheckedById(id)
	{
		var checked = $("input[@id="+id+"]:checked").length;
		if (checked == 0)
		{
			return false;
		}
		else
		{
			return true;
		}
	}
});

• View Demo
• Download Source

Here is an alternate tutorial on how to create a floating dialog using the jQuery library with the jqModal plugin. Aside from providing an easy way to create you floating dialog, the jqModal extension also allows you to drag and resize your dialog. For this tutorial, I will demonstrate how to create a draggable floating dialog.

First of all, in order to use jqModal, the jQuery library is a prerequisite. And since we will add the drag functionality for our dialog, we will also need to include jqModal’s Drag and Resize plugin. Aside from jqModal’s script library, it also comes with a default CSS which will take care of the default styles. To customize this default CSS, we can simply override it later on. But for now, let’s include the required scripts and styles:

<link href="jqModal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jqModal.js"></script>
<script type="text/javascript" src="jqDnR.js"></script>

Now the next step is creating the layer for the floating dialog itself. Before we go on any further, lets take a look at jqModal’s predefined special classes. By assigning these special classes to elements, they will automatically be configured depending on its class. You can either use the predefined classes, or you can create your own triggers. But for now, we’ll just use the predefined classes:

.jqmWindow - defines the styles for the dialog window (visibility, z-index)
.jqModal - defines a trigger for displaying the dialog window
.jqmClose - defines a trigger for closing the dialog window

For this demo we will only use the .jqmWindow and .jqmClose classes since we will add a custom event to our jqmWindow.

For this demo, we would also need some ids to identify our floating layer and its handle. We will use #previewLayer for the floating dialog and #handle for its handle. For the dialog’s content, we’ll use #previewContent. Here is how it would look like:

<div id="previewLayer" class="jqmWindow">
	<div id="handle">
		<a href="#" class="jqmClose">close window</a>
	</div>
	<div id="previewContent"></div>
</div>

Now that we have our dialog and our trigger, let’s set them up at out $.(document).ready() function:

$(document).ready(function()
{
	$('#previewLayer').jqm().jqDrag('#handle');
}

The following line of code simple means to make #previewLayer a modal window with #handle as its handle.

Now that we have created our own floating dialog, now its time to add some back-end logic for our window. For demonstration purposes, we’ll use it as a preview for a sample form:

First Name: <input type="text" id="fname" name="fname" /><br />
Last Name: <input type="text" id="lname" name="lname" /><br /><br />
Gender:<br/>
<input type="radio" name="gender" id="gender" value="Male"/>
 Male
<input type="radio" name="gender" id="gender" value="Female"/>
 Female<br /><br />

<input type="button" id="previewButton" value="Preview" />

What we’ll simply do is replace the contents of #previewContent with the values inside the form when the #previewButton is triggered:

function generatePreview()
{
	var fname = $('#fname').val();
	var lname = $('#lname').val();
	var gender = $('input[@id=gender][@checked]').val();

	if (!gender)
	{
		gender = '';
	}

	var preview = '<h2>Preview</h2><hr />';
	preview += '<b>First Name:</b> ' + fname + '<br />';
	preview += '<b>Last Name:</b> ' + lname + '<br />';
	preview += '<b>Gender:</b> ' + gender + '<br />';

	return preview;
}

$(document).ready(function()
{
	$('#previewLayer').jqm().jqDrag('#handle');

	$('#previewButton').click(function()
	{
		var content = generatePreview();

		$('#previewContent').empty().append(content);
		$('#previewLayer').jqmShow();
	});
});

If you want to see the demo in action, just click below
View Demo | Download Source

Had you ever experienced the IE6 z-index bug where a simple select box will always take priority over any predefined z-indices and always show up on top? Ever annoyed to make a floating dialog only to have a select box underneath popup and ruin the dialog? Well you’re not alone…

I’m in your divs, ruining your z-index Read more »