Category: JavaScript

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.

Rich Text Editor in Rails Application

Many times you need normal CMS for your application. You want to need some pages data need to handle through CMS.

It is really very easy to Install any RTE in the Rails. There are many open source RTE available.

I used the Cross-Browser Rich Text Editor for my project.
I downloaded files from there and uploaded to my public folder. I added required CSS and JS file to my layout.

You need to add following lines to your application.html.erb file.(you will find this file in view/layout/ folder)

1. You can add that files on conditional base also. Means for that particular page.
2. Add following lines to your form
:html => { :name => ‘BlogRTE’, :onsubmit => “submitForm();”}

In to add following lines to your form;

<script language=”JavaScript” type=”text/javascript”>
<!–
function submitForm() {
updateRTEs();
return false;
}
initRTE(“/cbrte/images/”, “/cbrte/”, “”, true);
//–>
</script>
<noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
<script language=”JavaScript” type=”text/javascript”>
<!–
//build new richTextEditor
var rte1 = new richTextEditor(‘text_content’);
rte1.html = ‘Write your thoughts here.’;
rte1.toggleSrc = true;
rte1.width = 500;
rte1.build();
//–>
</script>

You will get the text_content params in Rails.

For Edit page functionality i got error in form. So you need to this default code for all languages.
rte1.html =””;

When i used this i got an error.

But i solved this issue after some R&D and modification in code.

Use following code for Rails(Edit functionality)
rte1.html =”<%=text_content.gsub(/”/, “‘”).gsub(/\n/, ”).gsub(/\r/, ”) %>”;

this will solve your problem.

Full code: (IF YOUR CODE NOT WORKS THAN USE MY FULL CODE)

<script language=”JavaScript” type=”text/javascript”>
<!–
function submitForm() {
updateRTEs();
return false;
}
initRTE(“/cbrte/images/”, “/cbrte/”, “”, true);
//–>
</script>
<noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
<script language=”JavaScript” type=”text/javascript”>
<!–
//build new richTextEditor
var rte1 = new richTextEditor(‘text_content’);
rte1.html = ‘Write your thoughts here.’;
rte1.toggleSrc = true;
rte1.width = 500;
rte1.build();
//–>
</script>

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/