JavaScript

JavaScript, JS, source code, scripts, developing, tips & hints

Search suggestions in AJAX + PHP

2
609 days
by in JavaScript, PHP

Simple search suggestions for PHP using ajax.

HTML:

<input type="text" name="s" id="s" value="" onkeyup="showSugestions();" />
<div id="livesearch"></div>

(more…)

Moving option elements HTML

0
638 days
by in JavaScript


Not much to explain just an example:

Left

Right

Show me the code!
(more…)

Include Javascript file inside another

0
656 days
by in JavaScript

This can be really handy sometimes, in Javascript there’s no way of including or importing other JS files.

For example in my case I want it to include the JQuery file from the CDN of Google, but I didn’t want to use another typical call to an external file.

What I did is inside of the common JS library of my project add this:

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://code.jquery.com/jquery-1.4.2.min.js';
head.appendChild(script);

With tihs simple trick we added the script to the HTML header.

Of course you can use a function if you are going to use it a lot:
(more…)

Youtube brackets

0
679 days
by in JavaScript, PHP

I’ve been using youtube bracket for wp for long time.

Based on that Idea I isolated it to make it work at any installation.

This script allows you to write anywhere in your content this and will return a flash player with the video embed.

Function that embeds the flash in the content:

$content=mediaPostDesc($content);//usage
 
function mediaPostDesc($the_content){//from a description add the media
//using http://www.robertbuzink.nl/journal/2006/11/23/youtube-brackets-wordpress-plugin/
    if (VIDEO){
        $stag = "[youtube=http://www.youtube.com/watch?v=";
        $etag = "]";
        $spos = strpos($the_content, $stag);
        if ($spos !== false){
            $epos = strpos($the_content, $etag, $spos);
            $spose = $spos + strlen($stag);
            $slen = $epos - $spose;
            $file  = substr($the_content, $spose, $slen);    
			//youtube
            $tags = '<object width="425" height="350">
                    <param name="movie" value="'.$file.'"></param>
                    <param name="wmode" value="transparent" ></param>
                    <embed src="http://www.youtube.com/v/'. $file.'" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
                    </object>';    
            $new_content = substr($the_content,0,$spos);
            $new_content .= $tags;
            $new_content .= substr($the_content,($epos+1));
 
            if ($epos+1 < strlen($the_content)) {//reciproco
                $new_content = mediaPostDesc($new_content);
            }
            return $new_content;
        }
        else return $the_content;
    }
    else return $the_content;
}

(more…)

Allow only numbers or letters in HTML inputs

2
720 days
by in JavaScript

What about forcing the user to type a number/letter in the input you want.

With just a bit of JavaScript we can control this what is the user typing int he input.

Allow only numbers:
(also dot and del)

function isNumberKey(evt){
	var charCode = (evt.which) ? evt.which : event.keyCode;
 
	if((charCode==46||charCode==8||charCode==45||charCode==47) ||(charCode >= 48 && charCode <= 57) ){
		return true;
	}
	else {
		return false;
	}		
}

And to use it in a input would be like this for example:

<input id="math"  type="text"  onkeypress="return isNumberKey(event);" />

Try it: How much is 20+10?

Allow only letters:
 (also space, del, enter)

function isAlphaKey(evt){
	var charCode = (evt.which) ? evt.which : event.keyCode;
	 if ((charCode==231 || charCode==199) || (charCode==241 || charCode==209) ||(charCode==8 || charCode==32) || ( (charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122) ) ) {
	 	return true;
	 }
	 else {
		 return false;
	 }
}

And to use it in a input would be like this for example:

<input id="name" type="text"  onkeypress="return isAlphaKey(event);"  />

Try it: Your name:

I know should be easier, but just wait a bit for HTML 5 that is going to make our life better. For sure ;)

IT Excuses Generator

2
784 days
by in JavaScript

Some times we really need to fool people to get more time to work, or just some of you want to play more video games…

For all of us we can always use the IT excuses generator ;)

screenshot IT Excuses Generator

To use it in your site c&p this:

<script type="text/javascript" src="http://lab.neo22s.com/ITexcuses/itexcuses.js"></script>
<div id="display_excuse" style="cursor:pointer;" onclick="displayExcuse();">When does the project end?</div>

Example:

When does the project end?


Other excuses generators:

jsSelect – Multiple select value modifier

0
787 days
by in JavaScript

Last day I show you how to change the value of a select in html, but what if you need to change many at same time?

I did this function to handle it:

Demo | Download

function changeSelectValues(theController,theElements) {
	theElements = theElements.split(','); 
	for(var z=0; z<theelements .length;z++){
		theItem = document.getElementById(theElements[z]);
		if(theItem.type){
			if (theItem.type=='select-one') {
				theItem.value=theController.value;
				}
		} 
		else {
			theInputs = theItem.getElementsByTagName('select');
			for(var y=0; y<theInputs.length; y++){
				if(theInputs[y].type == 'select-one' && theInputs[y].id != theController.id){
					theInputs[y].value = theController.value;
				}
			}
		} 
  	}
}

In the first param, normally you would write this. Second parameter is a list delimited by coma (“,”) to specify from where you want to change the selects.

Example to change all the selects from a div call “selects”: (more…)

Set value for Select – JavaScript

0
794 days
by in JavaScript

This JavaScript function allows you to set the value of a select tag without having to know its position in the list.

function setValueSelect(SelectName, Value) {
     SelectObject = document.getElementById(SelectName);
     for(index = 0;  index < SelectObject.length;  index++) {
            if(SelectObject[index].value.toLowerCase() == Value.toLowerCase()) SelectObject.selectedIndex = index;
      }
}

Usage Example:

<select id="clang">
<option value="arabic">Arabic</option>
<option value="english">English</option>
<option value="french">French</option>
<option value="persian">Persian</option>
<option value="turkish">Turkish</option>
</select>
setValueSelect("clang", "persian");

This selects the persian value in the select.

isArray JavaScript

0
804 days
by in JavaScript

Simple JavaScript function that returns true if is an array or false if it’s not ;)

function isArray(obj) {
     if (obj.constructor.toString().indexOf("Array") == -1)
	      return false;
     else return true;
}

Google Maps full screen

3
822 days
by in JavaScript

What about having a full screen Google Maps APP?

It should be not so difficult, but what if we add street search, mouse wheel zoom, maps redimension and street view?

Example:(check source code for full implementation)
screenshot Google Maps full screen

How does it work:

To have Google Maps in full screen we need a a bit of css+HTML:
(more…)

Page 1 of 212
Go to Top