TutorBoy Articles » Javascript

Detect iPod, iPad and iPhone Using JavaScript

Midhun Devasia — Wed, 08 Sep 2010 11:54:09 +0000

JavaScript code to detect the user-agents of iPhone, iPad or iPod.

if (/iPad|iPod|iPhone/.test(navigator.userAgent)){
	// do ur stuffs for apple
}else{
	// do ur stuffs for other browsers
}

Include js files inside a js file

Midhun Devasia — Mon, 06 Sep 2010 05:50:14 +0000

Some times you want to include or load other .js files inside another .js files or on document. JavaScript doesn’t have any function to include any external js files. Writing script tag each time to DOM is not a good practice. Here the solution to load the script tag inside the head.

JavaScript

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'externalScriptFile.js';
document.getElementsByTagName("head")[0].appendChild(script);

Use the above JavaScript code inside your body or .js file. The script.src is the file name which you want to load and the script will append to the head tag. If you have to load more files like this, just copy paste this into a function body.

JavaScript

function include(jsFile) {
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = jsFile;
	document.getElementsByTagName("head")[0].appendChild(script);
}
include('externalScriptFile1.js');
include('externalScriptFile2.js');

Well you are done with that, now just read something about the script tag in HTML. The script tag is used to load or run scripts HTML, we use mainly 3 attributes for the script. No need to use the commenting() tags inside the script tag, that is for the first generation browsers to prevent scripts from showing up as text.

Script tag to load the script file

You should not write any codes inside the script tags when its use to load any file(s). Because if the src is present the script tag will considered as a load process. So any script inside that will not execute. But you can use the script with-out src will help you to execute the script.
Script tag to execute the script

Attributes

src : This attribute specifies the location of an external script.
type : This attribute specifies the scripting language of the element’s contents and overrides
the default scripting language. The scripting language is specified as a content type
(e.g., “text/javascript”). Authors must supply a value for this attribute.
There is no default value for this attribute.
defer : When set, this boolean attribute provides a hint to the user agent that the script
is not going to generate any document content (e.g., no “document.write” in javascript)
and thus, the user agent can continue parsing and rendering.
language : This attribute specifies the scripting language of the contents of this element.
Its value is an identifier for the language, but since these identifiers are
not standard, this attribute has been deprecated in favor of type.
Reference: http://www.w3.org/TR/REC-html40/interact/scripts.html

Vertical Floating Menu With Accordion Effect Using CSS & jQuery

Midhun Devasia — Wed, 23 Jun 2010 01:55:13 +0000

It is a combination of 3 types of menu styles, Floating, Sliding and Accordion with the css and jQuery. The menu will appear in the screen as a floating menu, on mouse over the menu will slide(visible) from left to outside. And on mouse out event the menu will slide to left. On the menu you can click on each item, and the sub-entries will shown with an animated effect. While window scrolling the menu will hide to left-side and floating on the same position.The two level menu style is done with nested ul, li elements.

Download Demo

HTML


 
 
 
 Recent Posts
 
 Link 1
 Link 2
 Link 3
 
 
 
 Archives
 
 Link 4
 Link 5
 Link 6

The above html is the layout of the UL li list. Replace with your content.

CSS

body {padding:0;margin:0;height:2000px;}
#floating {position:absolute;top:150px;font-size:.9em;}
#floating a {color:#FFF;text-decoration:none;}
#accordionMenu {width: 300px;}
#closeOpen {float:right;width:18px;}
#accordion {border:1px #666 solid;background-color:#DDD;margin-top:0;padding:0;float:left;list-style: none;width: 280px;}
#accordion ul {list-style: none;padding:0;display: none;}
#accordion li{cursor: pointer;padding:3px;list-style:none;font-weight:bold;background-color:#36A8FF;}
#accordion li ul li a{font-style:italic;}
#accordion li ul li{border-top:1px #666666 solid;}
#accordion li ul li:hover{background-color:#c0c0c0;}
#accordion li ul {display: none;}
#accordion li.current ul{display:block;}
#accordion .current ul{padding-left:10px;}

HTML Header

You need to download the latest jQuery and scrollTo plugin.

jQuery Script

In the above jQuery the floating and accordion are write separately, so you can disable a feature easily.

Download Demo

Javascript Common Escape Sequences

Midhun Devasia — Sat, 19 Jun 2010 18:16:49 +0000

It’s better coding practice to use escape sequences, because they make your code easier to read. Escape sequences are also useful for situations where you want to use characters that can’t be typed using a keyboard.

Escape Sequences	Character Represented
\b	Backspace.
\f	Form feed.
\n	Newline.
\t	Tab.
\’	Single quote.
\”	Double quote.
\\	Backslash.
\xNN	NN is a hexadecimal number that identifies a character in the Latin-1 character set (the Latin-1 character is the norm for English-speaking countries). document.write( "\x40 is @" );
\uDDDD	DDDD is a hexadecimal number identifying a Unicode character. document.write( "\u00AE is ®" );

JavaScript: The Good Parts – Speaker: Douglas Crockford

Midhun Devasia — Thu, 06 May 2010 11:44:25 +0000

JavaScript is a language with more than its share of bad parts. It went from non-existence to global adoption in an alarmingly short period of time. It never had an interval in the lab when it could be tried out and polished. JavaScript has some extraordinarily good parts. In JavaScript there is a beautiful, highly expressive language that is buried under a steaming pile of good intentions and blunders. The best nature of JavaScript was so effectively hidden that for many years the prevailing opinion of JavaScript was that it was an unsightly, incompetent abomination. This session will expose the goodness in JavaScript, an outstanding dynamic programming language. Within the language is an elegant subset that is vastly superior to the language as a whole, being more reliable, readable and maintainable.

Speaker: Douglas Crockford
Douglas Crockford is a product of our public education system. A registered voter, he owns his own car. He has developed office automation systems. He did research in games and music at Atari. He was Director of Technology at Lucasfilm. He was Director of New Media at Paramount. He was the founder and CEO of Electric Communities/Communities.com. He was founder and CTO of State Software, where he discovered JSON. He is interested in Blissymbolics, a graphical, symbolic language. He is developing a secure programming language. He is now an architect at Yahoo! and the world’s foremost living authority on JavaScript.

The PDF version is available in http://www.amazon.com/dp/0596517742

MooTools as a General Purpose Application Framework

midhund — Mon, 03 May 2010 06:36:52 +0000

Common methods for indicating important comments

Midhun Devasia — Sat, 24 Apr 2010 13:27:49 +0000

Some common methods for indicating important comments are TODO, BUG, KLUDGE and TRICKY. You can try this in any language, I’m using this in Action Script, PHP, Flex and Javascript and CSS also .

1 . // :TODO: Description
Indicates that there is more to do here.
2. // :BUG: [bugid] Description
Shows a known issue here. The comment should also explain the issue and optionally give a bug ID if applicable.
3. // :KLUDGE: Description
Indicates that the following code is not elegant or does not conform to best practices. This comment alerts others to provide suggestions about how to code it differently next time.
4. // :TRICKY: Description
Notifies developers that the subsequent code has a lot of interactions. Also advises developers that they should think twice before trying to modify it.

Orkut Style Profile Picture Upload Using jQuery and Ajaxupload

Midhun Devasia — Wed, 31 Mar 2010 19:42:40 +0000

We can’t apply any style over the html file element. But with the help of jQuery and Ajaxupload plugins we can style the file element. And another alternative solution is to create a file button in Flash. I prefer JavaScript method because its more efficient than flash. Orkut implemented such things in picture uploading section. So I tried to adopt the same style of photo upload from Orkut’s new theme.

Vew Demo Download

In my example, I used the JQuery and Ajaxupload plugin for the development. You can customize this easily. Image replacement with out refreshing your page.

Download the jQuery & Ajaxupload Js files from the site.

1. Put the jQuery and Ajaxupload into a folder called js or something, and include that in the HTML page.

HTML:

2. Create the image container and other related div and style. Here I have one main DIV called profile_pic and inside that a div with img element having the spinner icon, which is invisible at the first and will active while uploading. Then one more image element for the profile picture. Next is the “change my photo” button div.

HTML:


 
 
 
 
 
 
 
 
 
 
 
 Change my photo

3. Next is to style the container and other img tags for the better effect with the help of jQuery. Put the following css codes inside the tag.

CSS:

4. Write the JavaScript to enable file element activities. There is no physical existence for the file element. But we create this with the help of Ajaxupload plugin.

JS for fadein fadeout effect

5. From the above AjaxUplaod function you can see the action file path “upload.php” and “myfile” is the file element name. You will get the in php by $_FILES['myfile']. The php file should return the image path of the uploaded image. and the javascipt will receive the name in response variable.

Upload.php

Now its ready to use.

View Demo Download

Creating a simple fade over effect – JQuery

Sreejith Sreedharan — Tue, 09 Mar 2010 12:48:20 +0000

Here , i will tell you how to add a fade over /fade in effect to image button in jquery. its very simple……………………………

1. Import jquery

2. Add a div tag with image in it

3 . Add script Jquery on load

$(document).ready(function(){
 $("img").hover(
 function() {
 $(this).animate({"opacity": "0"}, "slow");
 },
 function() {
 $(this).animate({"opacity": "1"}, "slow");
 }
 );
});

That’s it . you can now see the fade in and fade out effect on mouse over the button
you can change the js to add more functionalites.

document.all vs document.getElementById

Midhun Devasia — Tue, 09 Mar 2010 11:16:40 +0000

document.all() - is a non-standard way of accessing DOM elements. It was introduced in Internet Explorer 4, because the W3C DOM hadn’t yet standardised a way of grabbing references to elements using their ID. By the time IE 5 came out, document.getElementById() had been standardised and as a result, IE 5 included support for it.
document.getElementById() - is a standard and fully supported. Each element have a unique id on the document. It is supported by every Javascript supporting browser released since 1998.

Or you can use:

JavaScript

if(document.getElementById){  //DOM
  element = document.getElementById(id);
}
else if (document.all) {  //IE
  element = document.all[id];
}
else if (document.layers){  //Netscape < 6
  element = document.layers[id];
}