Tag: JavaScript

How to Add or Remove the javascript file using javascript function

We can use following functions for adding the Javascript file dynamically.

function AddJsFile(file) {
var script  = document.createElement('script');
script.src  = file;
script.type = 'text/javascript';
script.defer = true;

document.getElementsByTagName('head').item(0).appendChild(script);
}

Or We can use this also, both will work:
function AddJsFile(file)
{
document.write('');
}

We can use following functions for adding the CSS file dynamically.


function AddCssFile(file) {
var stylesheet  = document.createElement('link');
stylesheet.href  = file;
stylesheet.type = 'text/css';
stylesheet.defer = true;

document.getElementsByTagName('head').item(0).appendChild(stylesheet);
}

Or We can use this also, both will work:

function AddCssFile(file)
{
document.write('');
}

We can use the following code for remving the JS the files.


function RemoveJsFile(file) {
var alljs = document.getElementsByTagName("js")
for (var i = alljs.length; i >= 0; i--) {
if (alljs[i] && alljs[i].getAttribute("src")!= null && alljs[i].getAttribute("src").indexOf(file)!=-1)

alljs[i].parentNode.removeChild(alljs[i])
}

}

We can use the following code for remving the CSS the files.

function RemoveCssFile(file) {
var allcss = document.getElementsByTagName("css")
for (var i = alljs.length; i >= 0; i--) {
if (allcss[i] && allcss[i].getAttribute("href")!= null && allcss[i].getAttribute("href").indexOf(file)!=-1)

allcss[i].parentNode.removeChild(allcss[i])
}

}

Creating the multiple namespace JS library with classes

When I started the creating new namespace JS library I got very useful artile to read.

http://pietschsoft.com/post/2007/07/Creating-Namespaces-in-JavaScript-is-actually-rather-simple.aspx

In this article they covered lot of things ( namespace protection objective )

Here I am using the namespace manager code:


// Create the Namespace Manager that we'll use to
/// make creating namespaces a little easier.

if (typeof Namespace == 'undefined') var Namespace = {};
if (!Namespace.Manager) Namespace.Manager = {};

Namespace.Manager = {
Register:function(namespace){
namespace = namespace.split('.');

if(!window[namespace[0]]) window[namespace[0]] = {};

var strFullNamespace = namespace[0];
for(var i = 1; i < namespace.length; i++)
{
strFullNamespace += "." + namespace[i];
eval("if(!window." + strFullNamespace + ")window." + strFullNamespace + "={};");
}
}

};

// Register our Namespace
Namespace.Manager.Register("Dummy.Utility.Class");

Here I regestered the namspace.

Dummy.Utility.Class.dunnyClass = function() {

this.test= function(){alert("test");}

this.test2= function(){alert("test2");}

}

Using this namaspace JS class in HTML.


var dumdum = new Dummy.Utility.Class.dunnyClass();

dumdum.test();

dumdum.test2();

get time difference in minutes in javascript

we created java-script function named “getTheDiffTime” using that function you will be able to fetch the time difference in various format.

javascript get time difference in minutes


function getTheDiffTime(dateone, datetwo,format){
//format = "Days", Hours, Minutes, Seconds
if(dateone > datetwo) {
var seconds = dateone.getTime() - datetwo.getTime();
} else {
var seconds = datetwo.getTime() - dateone.getTime();
}
var second = 1000, minute = 60 * second, hour = 60 * minute, day = 24 * hour;
if(format=="Days"){
var rformat = Math.floor(seconds / day);
seconds -= rformat * day;
//alert("days: "+rformat);
}else if(format=="Hours"){
// find the hours
rformat = translate(seconds / hour);
//alert("hours: "+rformat);
}else if (format=="Minutes"){
//find the mintues
rformat= translate(seconds / minute);
//alert("minutes: "+ rformat);
}else if(format=="Seconds"){
//find the seconds
rformat = translate(seconds / second);
//alert("seconds: "+rformat);
}

return rformat
//alert(rformat);

}

How to use this function here I am giving you the one good example.

I am going to get the current months minutes using this function.


//for calculating the current month in mintue -script
currentMonth = new Date();
plus_oneMonth = new Date();
plus_oneMonth.setMonth(plus_oneMonth.getMonth()+1);

getTheDiffTime(plus_oneMonth,currentMonth,"Minutes");

You will get return the minutes.

Some accordion JS scripts samples

we collected some unique of accordion JS scripts samples. we personally tested the scripts. All scripts are based on jquery. Jquery accordion used by everyone.

I am suggesting following accordions:

Some accordion JS scripts samples

jQuery Accordion examples:
http://www.stemkoski.com/downloads/jquery-accordion-menu/example.htm
http://www.i-marco.nl/weblog/jquery-accordion-menu/
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html
http://jqueryfordesigners.com/demo/simple-slide-demo.html
this has single ‘jquery-1.js’ (79KB) un-compressed version with first visible accordion, onclick backgroud color change

MooTools Accordion example:
http://davidwalsh.name/dw-content/accordion.php
this has single ‘moo1.js’ (133KB) un-compressed version with first visible accordion, onclick backgroud color change

YUI Accordion example:
http://www.hedgerwow.com/360/mwd/accordion/demo.php?page=3

Other:
http://www.switchonthecode.com/tutorials/javascript-tutorial-inline-sliding-panels

Page scroll up and down in javascript

Document or web-page scrolling is very easy through javascript. In this article we given code for Page scroll up and down in javascript. We used JS methods.

 Page scroll up and down in javascript

window.scrollBy(10,20); // horizontal and vertical scroll increments or decrements.

Using scrollBy function you can create custom event or function based on project requirement.

Here I am giving you the sample code: Up scrolling and down scrolling


//For Upscrolling:

function ScrollUp() {
window.scrollBy(0,100);
}

//For Down scrolling:
function ScrollDown() {
window.scrollBy(0,-100);
}

In same way you can create your own functions.

send a variable value from an Iframe back to its parent

We have javascript code for how to send a variable value from an Iframe back to its parent? If you want fetch the variable value or send variable to parent page.

how to send a variable value from an Iframe back to its parent?

Use following code:
In Parent page use this copy paste folliwing javascript.


function showValue(testval)
{
alert(testval);
//here in parent page you call any other function as per your need.
}

In Iframe page use following code. In Iframe page use this copy paste folliwing javascript.


// Calls the function showValue in the parent object
// and passes the value of 't' to it
function passToParent(val)
{
var testval;
if ( (testval = window.parent) && (testval = testval.showValue) && ('function' == typeof testval || 'object' == typeof testval) ){
testval(val);
}
}

This will solve your problem.

in page popup javascript or modalbox

in page popup javascript or modalbox, we got requirement to create in-page pop up in my project. we got many open source javascripts and CSS libraries.

in page popup javascript or modalbox

I got many open source javascripts and CSS libraries. I found some of them are useful. Here i given the list of libraries:

1.  lightbox2.04

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

URL: http://www.lokeshdhakar.com/projects/lightbox2/

My comments: useful for image slideshow.  Not useful for custom requirements.

2. modalbox_1.5.5

My comments: Very nice and simple, You can use this JS for multiple requirements.

URL : http://okonet.ru/projects/modalbox/

3. tinybox

My comments: simple and good, really tiny JS, you can modify and create custom events and effects.

URL: http://www.leigeber.com/2009/05/javascript-popup-box/

4. Good URL for Reference

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

AJAX Login Demo

Here’s a demo of a login system built using Ajax. This is a cool implementation which allows a user to login, without having to refresh the page. Here are some advantages of the noted by author of the code:

  • User does not need to refresh the page to login.
  • User is notified instantly on incorrect username/password combination.
  • Overall user experience is more seamless.
  • Password is not sent in plain text ever (more secure than traditional system).
  • Javascript convenience with server-side security (uses PHP/MySQL).
  • Uses one-time use random seed to hash the password before sending (making interceptions useless)

Source code for the login form is also available on the site.

Link: JamesDam.com ≈ AJAX Login System Demo

Usability for Rich Internet Applications

Here’s a good article on design patterns for RIA.
“Rich Internet applications (RIAs) can provide opportunities to design much better user experiences. They can be faster, more engaging and much more usable. However, this improvement is not without its downside—RIAs are much more difficult to design than the previous generation of page-based applications. The richer interaction requires a better understanding of users and of human-computer interaction (HCI). Although there is a lot of HCI material and research available, it can be difficult to determine how it applies to this new environment.”

Link: Usability for Rich Internet Applications