Surprisingly, it took me a long time to find this solution so I decided to post it for anyone who had a situation similar to mine.
Let’s say you have the following 2D associative array in PHP of fruits and their corresponding prices and you want to have them sorted by price:
$fruits = array
(
[...]
function calculatePercentage (oldval, newval) {
percentsavings = ((oldval – newval) / oldval) * 100;
document.getElementById(“results”).innerHTML = Math.round(percentsavings*100)/100;
}
Here is a simple JavaScript function that does dynamic or on-the-fly percentage calculations.
Demo
MSRP (in dollars)
Sale Price (in dollars)
You have saved 50 %
I recent ran into an interesting IE bug involving the following bit of html code:
<a href="javascript: void(0);" onclick="dosomething();">click me</a>
I honestly did not write this one but I will leave names out of this to protect the innocent =)
The void(0) JavaScript code is usually used to prevent loading or reloading of the page when the user [...]
I was looking for a way to order the rows randomly in a MySQL query and the solution was not easy for me to come by. I am posting the solution here in hopes of helping others.
1
2
3
SELECT *
FROM my_table
ORDER BY RAND()
RAND() returns a random floating-point value but functions to randomly order the selection [...]
Let’s say you have the following PHP code that extracts the date from the times table in your MySQL database. The date is of timestamp type which has the following format: ‘YYYY-MM-DD HH:MM:SS’ or ‘2008-10-05 21:34:02.’
1
2
3
4
$res = mysql_query("SELECT date FROM times;");
while ( $row = mysql_fetch_array($res) ) {
echo $row[’date’] . "<br />";
}
Let’s say you have the following table called votes that keeps track of how people voted and you want a query to count the number of votes for you instead of having to loop through all the rows with a counter in PHP.
person
vote
obama
yes
mccain
no
obama
yes
obama
no
mccain
yes
obama
yes
obama
yes
obama
no
mccain
no
function removeYellowBox() {
var parentBox = document.getElementById(‘parentBox’);
var yellowBox = document.getElementById(‘yellowBox’);
parentBox.removeChild(yellowBox);
}
JavaScript has a built-in function called confirm which takes a string argument that poses the question to the user and gives them the option to click the OK or Cancel buttons and returns true if [...]
function findParentNode(parentName, childObj) {
var testObj = childObj.parentNode;
var count = 1;
while(testObj.getAttribute(‘name’) != parentName) {
alert(‘My name is ‘ + testObj.getAttribute(‘name’) + ‘. Let\’s try moving up one level to see what we get.’);
[...]
function loopForm(form) {
var cbResults = ‘Checkboxes: ‘;
var radioResults = ‘Radio buttons: ‘;
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == ‘checkbox’) {
[...]
function calculate(equation) {
var answer = eval(equation);
document.getElementById(’screen’).value = answer;
}
function pushButton(buttonValue) {
if (buttonValue == ‘C’) {
document.getElementById(’screen’).value = ”;
}
else {
[...]
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
function setCookie(c_name,value,expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ “=” +escape(value)+((expiredays==null) ? “” : “;expires=”+exdate.toGMTString());
}
function getCookie(c_name) {
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + “=”);
[...]
This JavaScript demo verifies that an email address is in the correct format and that the user has typed in the same address in both fields to prevent mistyping of the address. I have borrowed the regex for verifying the correct email format from a different site.
Demo
Email:
Please type in your email again:
function removeElement(parentDiv, childDiv){
if (childDiv == parentDiv) {
alert(“The parent div cannot be removed.”);
}
else if (document.getElementById(childDiv)) {
var [...]
This is a neat little script that demonstrates two things:
1) Find – If only the Find box is filled in, then the findMyText() JavaScript function will just perform a find for the div that is given. If there is a match, the text will be highlighted and marked in bold.
2) Find and Replace – [...]
There is a rare need for this type of functionality but I have found myself in a couple of situations where I needed it. Here is a quick demo of a button click that is simulated from another event handler. In this case, the button click is invoked by checking a checkbox.
Demo
Check the [...]
function selectToggle(toggle, form) {
var myForm = document.forms[form];
for( var i=0; i < myForm.length; i++ ) {
if(toggle) {
myForm.elements[i].checked = “checked”;
[...]
function verifyForm(form) {
var userName = form.name.value;
var userEmail = form.email.value;
var success = 1;
if (!userName) {
document.getElementById(“usernameMsg”).style.display = “”;
form.name.style.backgroundColor = “yellow”;
[...]
The Document Object Model (DOM) allows for dynamic styling because it makes all HTML elements and attributes readily accessible using JavaScript. Here is a simple demo of how powerful this technology can be:
Demo
Hello world!
Not all forms are meant to be static. Sometimes, you want to allow the users to add certain parts of the form as they need them. Here is a nice example of dynamically adding inputs to your form as users need them. In addition, an input limit has been implemented in the [...]
Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.
function toggle() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = [...]