Hi any one know how Anchor tags are becoming input boxes

[takn25]

Hi Could any one tell me how are websites using anchor tags the most used example is I guess when you click the wall icon on facebook it turns in to an input box could some one guide me how can i achieve this or point me to a tutorial.

[Adam]

You should define the input within/as a hidden element, then display when you capture the click event on the anchor. You should always provide a non-JavaScript version though, so you would either use JavaScript to hide the element as the page loads, or ensure that the anchor's href works to provide non-JavaScript support. I'll give you some example code for the first solution...

 

In the HEAD:

<script type="text/javascript">
window.onload = function() {
    document.getElementById('target_anchor').onclick = function() {
        document.getElementById('input_block').style.display = 'block';
    }
}
</script>

 

This will wait for the page to finish loading, then assign a function to the click event of the #target_anchor element - that function will handle displaying the element. Assigning the events this way is part of what unobtrusive JavaScript is all about, as you split the JavaScript logic from the HTML.

 

Note that you can only have one window.onload declaration, so if you already have one, or add one later, you'll need to merge them.

 

In the BODY:

<a id="target_anchor">Click me</a>

<div id="input_block">
    Some input: <input type="text" />
</div>

<script type="text/javascript">
    document.getElementById('input_block').style.display = 'none';
</script>

 

This second block of JavaScript is placed within the body so that it hides the element as the page is loading, not when it's finished (so you don't see it suddenly disappear at the end). Doing it this way means that when you reload the page with JS disabled, the input will already be visible.

 

Hope this helps.