Archive for the ‘Designing’ Category

What is JQuery?

  • It is a new kind of JavaScript Library.
  • It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
  • It designed to change the way that you write JavaScript.
  • Light Weight Component
  • Support CSS 1-3 selectors
  • Support cross-browser

Popularity: 1% [?]

Animation in Photoshop

Here we can see how to create an animated GIF file, using Photoshop CS4.

1. Create a new Photoshop document.

2. Create a new Layers using the shortcut key Shift+Ctrl+N Or using the menu as shown below.

3. Use the text tool write “ForDevs” text on stage. Just like below or draw a symbol as per custom requirement.

4. Similarly write some other text. Now the Layer Panel contains two text layer and one background layer.

5. Change the Photoshop Workspace Mode From “ESSENTIALS” to “VIDEO”.

6. Animation Panel has been shown at the bottom.
Time Line Animation

Frame Animation

7. Based on Time Line Animation, by changing the Green Bar size we set the visible state of the layers at specific time line.

8. Based on Frame Animation, Set the Frame Seconds use the popup menu on each frame. For example set the Time as 0.17 sec.

9. Create a two new duplicate frame for each layer and set the time as 0.1 sec. In Animation Panel use the Top Right corner icon, select the “Tween…”

10. For second and fourth frame we set the Tween with “Next Frame” and “First Frame” respectively. Set the “Frame to Add” as 5. Now Click Ok button. Now the Tween Frames are created.

11. Now Change the “Once” option to “Forever” option for continues playing.

12. From File Menu, select the “Save for Web & Device…”

13. Change the GIF format and Save it.

14. The Final Output has shown like below.

Popularity: 2% [?]

How to Get the Base URL in Flash ActionScript 2 and ActionScript 3?

Step 1

Create a flash project and set the Publish Settings’ ActionScript version as 2.

Step 2

Create two dynamic texts, named as txtFullUrl and txtBaseUrl.

baseurl01

Step 3

Create another layer; in first frame of that layer write the following ActionScript code.

Action Script 2 Code

baseurl02

function GetTheBaseUrl() {
var RootFullUrl = _root._url;
txtFullUrl.text = RootFullUrl;
var lastSlashIndex:Number = RootFullUrl.lastIndexOf("/");
var DriveIndex:Number = RootFullUrl.indexOf("|");
 
if (DriveIndex>=0) {
baseUrl = RootFullUrl.substring(0, DriveIndex);
baseUrl += ":";
} else {
baseUrl = "";
}
baseUrl += RootFullUrl.substring(DriveIndex+1, lastSlashIndex+1);
txtBaseUrl.text = baseUrl;
return baseUrl;
}
 
var BaseURL:String= GetTheBaseUrl();

Action Script 3 Code

baseurl03

txtFullUrl.text = this.loaderInfo.url;
 
var FullUrl:String = this.root.loaderInfo.url;
var lastSlashIndex:Number = FullUrl.lastIndexOf("/");
var DriveSepIndex:Number = FullUrl.indexOf("|");
 
var baseUrl:String;
if (DriveSepIndex >= 0) {
baseUrl = FullUrl.substring(0, DriveSepIndex);
baseUrl += ":";
} else {
baseUrl = "";
}
baseUrl += FullUrl.substring(DriveSepIndex + 1, lastSlashIndex + 1);
txtBaseUrl.text = baseUrl;

Step 4

Press Ctrl + Enter to run the application.

Popularity: 15% [?]

How to view source of a show modal dialog page

We can view a page source normally from the menu view->source in mozilla or ie.But how would we view a page source of a showmodal page.

we can achieve it by the following code.

function viewSource() 
{
d=window.open();
d.document.open('text/plain').write(document.documentElement.outerHTML);
return false;
}

Popularity: 4% [?]

How to read XML using Javascript?

The Document Object Model (DOM) as implemented in MSXML provides a programmatic representation of XML documents, fragments, nodes, or node-sets. It also provides an application programming interface for working with XML data.

The following JScript fragments outline the basic process of programming with XML DOM.

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

Example:

function loadXML(xmlFilePath)
{
  try //Internet Explorer
  {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
  catch(e)
  {
    try //Firefox, Mozilla, Opera, etc.
    {
      xmlDoc=document.implementation.createDocument("","",null);
    }
    catch(e)
    {
      alert(e.message)
    }
  }
 
  try
  {
    xmlDoc.async=false;
    xmlDoc.load(xmlFilePath); // xmlFilePath - xml file path Ex: test.xml
    return(xmlDoc);
  }
  catch(e)
  {
    alert(e.message)
  }
  return(null);
}

Popularity: 3% [?]

setInterval Method in Javascript

The setInterval() method evaluates a function or an expression repeatedly for the specified number of milliseconds and it returns an interval reference.

Syntax:

variable = setInterval(expression, milliseconds)

or

variable = setInterval(function, milliseconds)

variable holds the interval reference returned by seInterval method.

Example:
Below example display the current time information using setInterval method call the date object.

<html>
<head>
<title> setInterval Method Example </title>
<script language="javascript">
  function startSetInt()
  {
    ref=setInterval("init()",100);
  } 
 
  function init()
  {
    dt = new Date();
    document.getElementById("lbl").innerText = "Timer : " + dt;
    document.getElementById("btnStart").disabled = true;
    document.getElementById("btnStop").disabled  = false;
  }
 
  function stopSetInt()
  {
    clearInterval(ref)
    document.getElementById("lbl").innerText = "Timer : ";
    document.getElementById("btnStart").disabled = false;
    document.getElementById("btnStop").disabled = true;
  }
</script>
</head>
 
<body onload="startSetInt()">
<label id="lbl" name="lbl"></label>
</br>
</br>
 
<input type="button" id="btnStart" value="Start" onclick="startSetInt()" />
<input type="button" id="btnStop" value="Stop" onclick="stopSetInt()" />
 
</body>
</html>

Demo : Click here

Popularity: 7% [?]

JSON Data types and Example

The following are the Basic JSON Data types,

  • Number : integer, real, or floating point
  • String : double-quoted Unicode with backslash escaping
  • Boolean : true and false
  • Array : an ordered sequence of values, comma-separated and enclosed in square brackets
  • Object : collection of key:value pairs, comma-separated and enclosed in curly braces
  • null

Example

{
"firstName": "Praveen",
"lastName": "C",
"address": {
"streetAddress": "KK Nagar",
"city": "Chennai",
"state": "TN",
"postalCode": 6310102
},
"phoneNumbers": [
"091 98943 37266"
]
}

Popularity: 3% [?]

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others.

Popularity: 1% [?]

Click Label to Access Form Control

1.Using the label element allows the user to click on the text associated with the form control instead of having to click the radio button, check box, select box, etc.

2.To associate a label with another control implicitly, the control element must be within the contents of the Label element. In this case, the Label may only contain one control element. The label itself may be positioned before or after the associated control.

Example:-

<html>
<body>
// For Radio Button
<label for=”radio1″>Radio Button – Click this Label</label>
<input type=”radio” value=”Selected” name=”Radio” id=”radio1″>
// For CheckBox
<label for=”check”>Checkbox – Click this Label</label>
<input type=”checkbox” value=”Selected” name=”check” id=”check”>
</body>
</html>

Demo Link

Popularity: 8% [?]

Split Function in Javascript

Split Function: Delimiter :-
The space character ” ” we mentioned will be our delimiter and it is used by the split function as a way of breaking up the string. Every time it sees the delimiter we specified, it will create a new element in an array. The first argument of the split function is the delimiter.

Split() Function:-
The split() function splits text and puts the pieces into an array, with each piece taking up one slot in the array. For example, if you were to split “This is some text”,the split() function would create an array with four slots (zero to 3). The first slot in the array would contain “This”, the second slot would contain “is”, the third “some” and the fourth “text”.

Example:-

 

var stringdata= "1$2$3$4";
var splitdata = stringdata.split("$");
for(i = 0; i < splitdata.length; i++)
{
   document.write("Element " + i + " = " + splitdata [i]);
}


Output
=====
Element 0 = 1
Element 1 = 2
Element 2 = 3
Element 3 = 4

Popularity: 3% [?]

Designed by: Business Web Hosting | Thanks to Buy Icons, travel tips and Used Cars