Read, With the Name of Your Lord Who Created

Posts Tagged ‘Javascript’

Error “‘Sys’ is undefined” in Asp.Net Ajax

Posted by triaslama on November 29, 2008

When I try ASP.NET Ajax in my development server I get this Javascript error: “‘Sys’ is undefined“. This error occur because I place <asp:ScriptManager runat=”server” /> element in my page.

Wondering why, I search in internet and hope that I will find one of the solution. After several trial and error finally I can find the solution and it work just fine for me.

To solve the error we need to modify web.config file, add the following under <system.web />

<httpHandlers>
<add  verb=”GET,HEAD” path=”ScriptResource.axd” type=”System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ />
</httpHandlers>

Nothing more I can say, but if you get the same error when you work with ASP.NET Ajax try the above solution, and I hope this help.

Posted in ASP.NET, Javascript | Tagged: , , , , , , , | 14 Comments »

Cursor Positions, Selected Text, and A Simple HTML Editor

Posted by triaslama on June 6, 2008

It would be nice if we have a HTML text editor that doing a simple task of HTML editor for us. It works just like HTML view of WordPress admin page when we write a post. We select the text press specific button and then the selected text will be enclosed with appropriate format. I Test the code in Mozilla Firefox and Internet Explorer, so in both browsers this code should works fine. Here the screenshoots:

Screenshoots page.

We need to prepare the prerequisites.

As prerequisites, at least we need two things. First, we need to know how to define the cursor position inside a <textarea> element, second we need to know how to retrieve a selected text inside a <textarea> element. So, for the first step, I will talk about the both things shortly.

Every browser brings the different behaviour. The browser quirk will make our code a little bit longer because we need to specify different code for different browser. Defining cursor position (current position) is trivial in Mozilla Firefox, but we need a little trick in Internet Explorer. If we want to retrieve selected text in a <textarea> element, both (Forefox and IE) has their own way too.

Defining Cursor Position Inside a <textarea> Element
In Firefox we just need the following code to determine the current position of cursor in a <textarea> element:

var currentPosition = txtArea.selectionStart;

txtArea is a <textarea> element.
Internet Explorer (I use IE 6) doesn’t have selectionStart and selectionEnd property, so we need a little more effort to determine start and end position of the cursor (this is a tricky way).

var range = document.selection.createRange();
var drange = range.duplicate();
drange.moveToElementText(txtArea);
drange.setEndPoint("EndToEnd", range);

var currentPosition = drange.text.length - range.text.length;
var endPosition = drange.text.length - currentPosition;

Read the rest of this entry »

Posted in HTML / CSS, Javascript | Tagged: , , , , , , , | 15 Comments »

Calling Client Script Events in ASP.NET Server Controls

Posted by triaslama on April 25, 2008

ASP.NET has its own controls (WebControls or HtmlControls) that rendered as elements in a page. ASP.NET server controls declared with ‘asp’ tag (<asp:[control_type] />) and contains runat=”server” attribute. ASP.NET server controls has its own attribute related to a specific control (such as onclick and text for click event and button text respectively).

For example: if we want a click event associated with a button of ASP.NET server control we use this script in our ASP.NET page:

<asp:Button id="btn" onclick="btn_Click" text="Test" runat="server" />

The click event received in onclick attribute and will be handled by btn_Click method. btn_Click is a method that will be called everytime a click occurs in this button control. We can write btn_Click method with any languages that supported by .NET framework.

But how if we want to call client script within ASP.NET server controls? Fortunately it can be accomplished to. Suppose that I have a button of ASP.NET server control but I want a click event of this button handled by Javascript function (in client side) rather than any of .NET languages (in server side).

In this example I use two buttons of ASP.NET server controls. The first button will have click event handled using server script and click event of second button handled via client script. I embed the javascript code inline inside the page, but we can pull it out and place it in separate *.js file then this file is referenced inside our ASP.NET page (expage.aspx):

Read the rest of this entry »

Posted in .NET, ASP.NET, Javascript | Tagged: , , , , , , | 20 Comments »

DOM & HTML Revisited

Posted by triaslama on April 18, 2008

What can I say about DOM (Document Object Model)? Its lightweight, its everywhere, its some kind useful. How about HTML? its everywhere and its easy. But, I think, the most important about them both is because both doesn’t suck!
I don’t know how about you. I just doing a simple (and I think interesting enough) exploration about HTML & DOM. Let’s check it out!

Suppose I want to make an element enabled & disabled when I select an item from a dropdownlist (combo box). With HTML it can be accomplished easily! How about if I want to make a new <select> element when I have choose something from previous <select> element?? With mix blend of DOM & HTML it can be accomplished easily too!

This page consist of two parts, each of them separated by horizontal lin. This is the screenshots of my simple page:
init
Initial condition, first part and second part separated by horizontal line.

Read the rest of this entry »

Posted in DOM, HTML / CSS, Javascript | Tagged: , , , , , | 1 Comment »

Retrieving Query String Values in ASP.NET and Javascript

Posted by triaslama on April 12, 2008

In World Wide Web, a query string is a part of a URL that contains data to be passed to web applications (http://en.wikipedia.org/wiki/Query_string).
The query string is composed of a series of field – value pair. Below is the pattern of query string:
field1=value1&field2=value2&field3=value3

An URL that contains query string can be depicted as follow:
http://test.com/tag?name=alma&role=user
The URL and query string separated by a question mark (?). Query string consist of two parts (field and value), and each of pair separated by ampersand (&). So the example above consists of two query strings which are name and type with value of each field ‘alma’ and ‘user’ respectively.

We can retrieve the query string values programmatically and used that values. Now we will learn how to get the query string values in ASP.NET and Javascript.

Read the rest of this entry »

Posted in ASP.NET, Javascript | Tagged: , , , , | 38 Comments »

Dynamic DropDownList, Just Fill It With Array

Posted by triaslama on April 1, 2008

How to change the content of dropdownlist (combo box) dynamically? want the value of a dropdownlist changes when we change the selected item of another dropdownlist? Is there exist a simple solution for this? Get ready, because the answer is yes!

What we need to create a dynamic dropdownlist in client side is just a little knowledge of HTML and Javascript, two dropdownlist (combo box) element, and an array variable, no more! Well, because I want this will become a very simple solution eventhough the more complex and better solutions exists somewhere out there.

I will show you the HTML code, this code consist of two dropdownlist / combo box (two <select> element) with the second <select> element disabled and will be enabled if we choose something from the first <select> element. Here the HTML code (dnmddl.htm):

<html>
<head>
<title>Dynamic DropDownList, A Simple Solution</title>
<script lang=”javascript” type=”text/javascript” src=”dynamicddl.js”>
</script>
</head>
<body>
<select id=”slc_source” onchange=”srcChange(this.value)”>
<option value=””>—-</option>
<option value=”Asian”>Asian</option>
<option value=”Europe”>Europe</option>
<option value=”African”>African</option>
</select><select id=”slc_target” disabled=”true”>
</select>
</body>
</html>

Don’t be afraid, eventhough the Javascript code look a bit large but what is done by this code only initialize the array with specified value and fill it to the second dropdownlist element (slc_target). This is the Javascript code (dynamicddl.js):


var arr;
var option;


function srcChange(val)
{
var slc_target = document.getElementById("slc_target");


switch (val)
{
case "Asian":
arr = new Array("Indonesia","India","Malaysia","Japan","Pakistan","UEA");
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}
break;


case "African":
arr = new Array("Egypt","Marocco","Senegal","Tunisia","Sudan");
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}
break;


case "Europe":
arr = new Array("England","France","Germany","Italy","Spain","Swiss");
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}
break;


default:
slc_target.disabled = false;
slc_target.options.length = 0;
break;
}
}

HTML code without the Javascript code will only become a static page, so HTML file above (dnmddl.htm) refers to a Javascript file named dynamicddl.js to make a dynamic dropdownlist.Dnmddl.htm has two <select> element contained within it (slc_source & slc_target). One thing that you must aware in slc_source is onchange attribute. This attribute receives srcChange(param) function as an event handler. Change event will be executed in every selected value changes in slc_source, so srcChange(param) will be called in every changes of slc_source value.

What is done by srcChange is receives a parameter, evaluates that parameter, and fills slc_target according to that parameter. We create an option will be used to fill slc_target with the following sample of code:

for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}

First parameter of Option object will be the text of dropdownlist and second parameter will be the value. The rest of code should works as is, and if we run our code and select a value from first dropdownlist we should get the same result as this screenshots:

Dynamic DropDownList

Try to change the value of first dropdownlist (slc_source) and you will get the second dropdownlist (slc_target) populated with different values. See you…

Posted in Javascript | Tagged: , , , , | 21 Comments »

CRUD Operations Using DOM

Posted by triaslama on March 21, 2008

CRUD (Create, Read, Update, Delete) is common operations in data storage, but now I will try to use DOM (Document Object Model) doing CRUD operations toward document content (and I think that is one of DOM objective). DOM can be used for doing CRUD operations easily and effectively. OK that’s enough for the buzz words let’s make the job done!

1. Create an Element
To create an element use document.createElement(<elmName>) method. This method receives one parameter that is the name of element that will be created. DOM method document.createTextNode(<text>) is similar to document.createElement but will create a text node instead of an element. The parameter received by document.createTextNode is text that will be created. The other DOM method that important in creating an element is appendChild(<elem>), this method will append the element specified as parameter to an element. Below is an example of add a <li> element to a <ul> element:

var ul = document.getElementsByTagName("ul")[0];
var li = document.createElement("li");
var text = document.createTextNode("'li' element.");

li.appendChild(text);
ul.appendChild(li);

2. Read Text of an Element
Please pay a special attention that a text in DOM is considered as a node, so we have to navigate to its text node first before we retrieve / read the node value. So, if ‘elm’ is a variable that point to a <li> element the following code:
var text = elm.firstChild.nodeValue;

will retrieve the text inside a <li> element and store the value to a variable named ‘text’.

3. Update an Element Content
Update operation really similar to read operation, except updating an element means we change the node value with the new one. If ‘elm’ point to a <li> element, the following code:

var newValue = "New text node value";
elm.firstChild.nodeValue = newValue;

will change the node value inside <li> element with the content of ‘newValue’ variable.

4. Delete an Element
Here, delete an element has two meanings. First delete the text node inside an element, second delete the element itself. Deleting an element can be accomplished using removeChild(<elm>) method. This method receives one parameter, that is child element that will be deleted.
This line of code:
elm.parentNode.removeChild(elm);
will remove ‘elm’ element.

I have write a simple code that demonstrate how to create, read, update, and delete (CRUD) the document content using DOM. I use the Javascript events and blend it with DOM to accomplished CRUD operations, so basic understanding of Javascript events will really helpful.

The code consists of two portions, first portion is html code (crud.htm):

<html>
<head>
<title>CRUD Operations: Complete</title>
<script lang=”javascript” type=”text/javascript” src=”crud.js” >
</script>
</head>
<body>
Want to know why DOM is awesome??
One of the possible answer is: with DOM we can create, read (retrieve), update, and delete document content quickly and easily.
<p/>
<b>Try the following example!</b>
<br/>
<b>
1. Press ‘Add’ button to add a new <li> element.<br>
2. Move the mouse cursor over a <li> element below.<br>
3. Click desired <li> element to read the node value.<br>
4. Hold down ‘Shift’ key and click desired <li> element to update the node value.<br>
5. Hold down ‘Ctrl’ key and click desired <li> element to delete the <li> element.<br>
</b>
<p>
<form id=”frm” name=”frm” style=”background-color:yellow; border:solid 2px; border-color:goldenrod;”>
<ul><b> And here is the list of <li> element:</b>
<li>First li element.</li>
<li>Second li element.</li>
<li>Third li element.</li>
<li>Fourth li element.</li>
<li>Fifth li element.</li>
</ul>
<p>
<input type=”button” id=”btnCreate” onclick=”addLiElement()” value=”Add New <li> Element” />
<p>
</form>
</body>
</html>

The other one is Javascript code (crud.js, this code is referred by html code), and this is the Javascript code:


window.onload = handleCRUD;


function addLiElement()
{
// ask input text for new <li> element
var txt = window.prompt("Text: ");
var text = document.createTextNode(txt);
// create <li> element
var elm = document.createElement("li");
/* retrieve the first <ul> element (and the only one). */
var ul = document.getElementsByTagName("ul")[0]; elm.appendChild(text);
ul.appendChild(elm);

handleCRUD();
}


function handleCRUD()
{
var lis = document.getElementsByTagName("li");
for (var i=0;i<lis.length;i++) {
lis[i].onmouseover = function()
{
this.style.backgroundColor = "gainsboro";
};


lis[i].onmouseout = function()
{
this.style.backgroundColor = "yellow";
};

/* ‘click’ event handles read, update, or delete operation */

lis[i].onclick = function(e)
{
// IE handles event through window.event property
e = e||window.event;
/* again IE handles target (source) element as srcElement */
var elm = e.target||e.srcElement;
if (e.ctrlKey) {
/* because 'ctrl' key is pressed, it will be delete operation */
var txtNode = elm.firstChild;
// first, delete the text node
txtNode.parentNode.removeChild(txtNode);
// second, delete the <li> element
elm.parentNode.removeChild(elm);
return;
}
if (e.shiftKey) {
/* because 'shift' key is pressed, it will be update operation */
var newValue = window.prompt("Enter new value: ");
elm.firstChild.nodeValue = newValue;
return;
}
else {
/* neither 'ctrl' nor 'shift' key is pressed, it will be read
operation */
/* now, here we retrieve the content (text) of an element */
var content = elm.firstChild.nodeValue;
window.alert(content);
return;
}
};

}
};

The javascript code started with window.onload that executed after the document is loaded, and passed handleCRUD() function to it. Inside handleCRUD we install mouseover, mouseout, and click events foreach <li> element exist in document.

What is done by each event can be explained as follow:

  • ‘Add’ button onclick: adds an li element to the document.
  • onmouseover: changes the background color of a <li> element to ‘gainsboro’ when mouse cursor enters it.
  • onmouseout: restores the background color of a <li> element to ‘yellow’ when mouse cursor leaves it.
  • onclick, this event has three meanings:
    1. when we click an <li> element along with ‘Ctrl’ key pressed, then the specified <li> element will be deleted.
    2. when we click an <li> element along with ‘Shift’ key pressed, then the node value of specified <li> element will be updated.
    3. when we click an <li> element and neither ‘Ctrl’ key nor ‘Shift’ key is pressed then we simply read the specified <li> element.
  • onclick event handler receive one parameter that is event object (‘e’ in this code), but event object in Internet Explorer (IE) available through window.event property. So we need a regular checking ‘e’ will be still ‘e’ or if the browser is IE e will be filled with window.event.

    e = e||window.event;

    The target (non IE browser) / srcElement (IE) are properties of event object contains a reference to the element that fired to the event. We get target / source element with the following code:

    var elm = e.target||e.srcElement;

    This is screenshot output produced by crud.htm & crud.js:

    CRUD using DOM

    To make the same output as screenshot above puts crud.htm & crud.js in the same directory, type the location in address bar of your browser and you should see the same result.

    Thanks for your attentions, see you next time…

    Posted in DOM, Javascript | Tagged: , , , , , , , , | Leave a Comment »

    When Spaces Does Matter

    Posted by triaslama on March 12, 2008

    In this post I just want to talk about spaces, why spaces? Because it could be a matter especially when working with DOM (Document Object Model). Look at the following HTML code:

    <html>
    <head>
    <title>Test Spaces</title>
    <script lang=”javascript” type=”text/javascript”>
    var ul;
    var children;
    window.onload = function()
    {
    ul = document.getElementsByTagName(“ul”)[0];
    children = ul.childNodes;
    };
    document.onclick = function()
    {
    window.alert(“The number of ul’s children: “+children.length);
    };
    </script>
    </head>
    <body>
    <ul>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    </ul>
    </body>
    </html>

    Now guess, when I run the code and click the document how many child belongs to ul in the code above? The answer may vary, if you run the code in Firefox 2 or Opera 9.01 browser the answer is 7, but in Internet Explorer 6 (IE6) the answer is 3! Why does it differ? The difference of answers because of spaces!

    As you’ll notice, between <ul> and first <li> element there is actually an end line which is considered as a white space. Also between first <li> and second <li>, between second <li> and third <li>, and the last between third <li> and close tag </ul> there is exist end line which considered as white spaces.

    White spaces become a matter because its representation in XML. Either Firefox or Opera represent a white space as a node but not in IE. So when we run the code in Firefox or Opera <li> element has 7 childs (four white spaces and three <li> elements).

    So far I found two solutions toward spaces problem. First we can skip it, so we need to change document.onclick function into the following:

    document.onclick = function()
    {
    var temp = 0;
    for (var i=0;i<children.length;i++) {
    if (children[i].nodeType == 1) {
    // do some interesting stuffs here…
    temp += 1;
    }
    }
    window.alert(“The number of ul’s children: “+temp);
    };

    Second we can remove it, so change the script into the following:

    var ul;
    var children;
    window.onload = function()
    {
    ul = document.getElementsByTagName(“ul”)[0];
    removeSpaces(ul);
    children = ul.childNodes;
    };
    function removeSpaces(elm)
    {
    for (var i=0;i<elm.childNodes.length;i++) {
    var child = elm.childNodes[i];
    if (child.nodeType==3 && /\s/.test(child.nodeValue))
    child.parentNode.removeChild(child);
    }
    }
    document.onclick = function()
    {
    window.alert(“The number of ul’s children: “+children.length);
    };

    Note: the code above only removes spaces at its current child element, so if <li> element has a child node another than text node, the spaces problem will still remain. We can skip it using first solution although it may impractical especially when our document tree quite large. The better solution I think using a recursive function that traverses the document tree and removes all spaces in document.

    Here I listed the nodeType property number and its corresponding type that I used in the preceding code:

    nodeType Number

    Type

    1

    Element

    2

    Attribute

    3

    Text

    4

    CDATA Section

    5

    Entity Reference

    6

    Entity

    7

    Processing Instruction

    8

    Comments

    9

    Document

    10

    Document Type

    11

    Document Fragment

    12

    Notation

    Posted in DOM, Javascript | Tagged: , , , | Leave a Comment »

    Javascript And CSS Animations: The Difference Between Display And Visibility

    Posted by triaslama on March 8, 2008

    Display and visibility are two properties of style attribute which determine whether an element should appear or disappear. Although both share the same functionality but, display and visibility has important distinctions. In this post I will unveil one of the difference between display and visibility.

    Here is the scenario:

    Display and Visibility

    The above picture produced by HTML and Javascript code, here HTML code (dv.htm):

    <html>
    <head>
    <title>The Difference Between Display and Visibility</title>
    <script lang=”javascript” type=”text/javascript” src=”dv2.js” src=”dv2.js”>
    </script>
    </head>
    <body>
    Select Mode: <p>
    <input type=”radio” id=”rad1″ name=”rdChoice” checked=”true” value=”display”>Display</input>
    <br>
    <input type=”radio” id=”rad2″ name=”rdChoice” value=”visibility”>Visibility</input>
    <p>
    <b>To see the difference between display and visibility:</b><br> select desired mode>>move mouse cursor over the text below>>hold down ‘Ctrl’ key>>click the element
    <p>
    <div id=”content” style=”border:2px solid black; width:400px;font-family:arial;font-size:17px”>
    <b>
    <span id=”firstSpan”>The Difference </span><span id=”secondSpan”>Between </span><span id=”thirdDiv”>Display and </span><span id=”fourthSpan”>Visibility.</span>
    </b>
    </div>
    </body>
    </html>

    and this is Javascript code:


    window.onload = selectSpan;


    function selectSpan()
    {
    var spans = document.getElementsByTagName("span");
    for (var i=0;i
    spans[i].onmouseover = function()
    {
    this.style.backgroundColor = "lavender";
    };
    spans[i].onmouseout = function()
    {
    this.style.backgroundColor = "white";
    };
    spans[i].onclick = function(e)
    {
    // event in IE acessible through window.event property
    e = e||window.event;
    var rad1 = document.getElementById("rad1");
    var rad2 = document.getElementById("rad2");


    if (e.ctrlKey) {
    if (rad1.checked) {
    //window.alert(rad1.value);
    this.style.display = "none";
    }
    else if (rad2.checked) {
    //window.alert(rad2.value);
    this.style.visibility = "hidden";
    }
    else {
    window.alert("something else selected.");
    }
    }
    };
    }
    }

    Display mode has several possible values such as none, inline, and block. Visibility has two possible values that is visible and hidden. Setting visibility property of an element to hidden will make that element disappear but still leaving that element in document. Setting the display property of an element to none will make that element looks like just removed from the document / pulled out from the document.

    To prove this concept, run the code in browser select a mode (display or visibility), move your mouse over an element inside the block then hold down ‘Ctrl’ key and click element that you want to make it disappear / invisible from document.

    Posted in HTML / CSS, Javascript | Tagged: , , , , , | 1 Comment »

    Javascript and CSS Animations: The Difference of Element Positioning.

    Posted by triaslama on March 5, 2008

    Element positioning defines how an element will be positioned in the document. We adjust the element positioning through Cascading Style Sheets (CSS) property named position. In the following example we set div element’s position to its absolute location (external CSS):

    div
    {
    position:absolute;
    top:0px;
    left:100px;
    }

    Position property can hold static, relative, absolute, or fixed value. Below simple explanation and example of each positioning:

    1. Static positioning:
    Static positioning is the default positioning of an element, it just flow one after another like what is appear in HTML source. Top and left properties doesn’t affect the document appearance. Consider the following HTML code (positions.htm):

    <html>
    <head>
    <title>Element Positioning</title>
    <link rel=”stylesheet” type=”text/css” href=”positions.css” />
    <script lang=”javascript” type=”text/javascript” >
    </script>
    </head>
    <body>
    <div id=”firstDiv”>
    Bunda pernah berkata kurang lebih… (I cut some contents here).
    </div>
    <div id=”secondDiv”>
    Setelah ayahku meninggal maka ibuku harus menjadi ‘Single Parent’ bagiku…
    </div>
    <div id=”thirdDiv”>
    Pada saat aku sudah bekerja di Jakarta…
    </div>
    <div id=”fourthDiv”>
    Bunda sering berpesan agar aku tidak membedakan perlakuan…
    </div>
    </body>
    </html>

    Positions.htm refers to a CSS file named positions.css, here the external CSS file:

    div
    {
    font-family:verdana;
    font-size:12pt;
    border:2px solid goldenrod;
    background-color:lavender;
    position:static;
    width:450px;
    }

    The couple of code will give the following result:

    positions1_all.jpg
    With static positioning the document just flow as what is appear in HTML code.

    2. Relative Positioning
    Relative positioning behaves much like static positioning, but top and left properties affect the document appearance. The position for this positioning relative to its preceding element.
    Add the following to our CSS file:

    div.specialized
    {
    position:relative;
    top:-40px;
    left:-35px;
    }

    After that add a class attribute to the ‘secondDiv’ div element:

    <div id=”secondDiv” class=”specialized”>

    Refresh our page now you will see a page that look like this:

    positions1_relative.jpg
    Relative positioning, the element position relative to its preceding element.

    3. Absolute Positioning
    If an element’s positioning specified to absolute that element will be pulled out from document flow and precisely placed in the specific position relative to its current parent element that has non static position. If no such exist the element will be placed in specified position toward entire document.
    Lets change the CSS file into the following:


    div.specialized
    {
    position:absolute;
    top:0px;
    left:0px;
    }

    Then we should get the following result:

    Absolute Positioning
    Absolute positioning, the element placed absolute to its entire document, if there is exist an element than it will overlap.

    4. Fixed Positioning
    Fixed positioning places an element relative to browser window (viewport), so if we scroll the browser element with fixed positioning will remain in such position.
    Change our CSS file into the following:

    div.specialized
    {
    position:fixed;
    top:0px;
    left:250px;
    }

    Refresh our page and try to scroll down the window, and the ‘secondDiv’ element will remain
    in the top of viewport!

    Fixed Positioning
    Fixed positioning. Even though we scroll down / up the window, an element with fixed position will remain in its position toward viewport.

    Note: I try fixed positioning in Internet Explorer (IE) 6 and it doesn’t work
    well. We need IE7 or higher to make it work!

    Element positioning can make sense in some situations! I hope this useful & thanks.

    Posted in HTML / CSS, Javascript | Tagged: , , , , | Leave a Comment »

     
    Follow

    Get every new post delivered to your Inbox.