What’s the difference between display: none and visibility: hidden?

Question: What’s the difference between display: none and visibility: hidden?
The display: none and visibility: hidden CSS properties appear to be the same thing, but they aren’t.

Answer:
These two style properties do two different things.

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

You can see the effect of these style properties on this page. I created three identical swatches of code, and then set the display and visibility properties on two so you can see how they look.

Source: http://webdesign.about.com/od/css/f/blfaqhidden.htm

How to get old Value with onchange() event in text box

You’ll need to store the old value manually. You could store it a lot of different ways. You could use a javascript object to store values for each textbox, or you could use a hidden field (I wouldn’t recommend it – too html heavy), or you could use an expando property on the textbox itself, like this:

<input type="text" onfocus="this.oldvalue = this.value;" 
onchange="onChangeTest(this);this.oldvalue = this.value;" />

Then your javascript function to handle the change looks like this:


function onChangeTest(textbox) {
alert("Value is " + textbox.value + "n" + "Old Value is " + textbox.oldvalue);
}

Source : http://stackoverflow.com/questions/1909992/how-to-get-old-value-with-onchange-event-in-text-box

Dynamically generate HTML elements using javascript and save them on server

Dynamically generate HTML elements using javascript and save them on server

Today while working in office, I had a requirement where I was required to generate dynamic elements in HTML form and then later on submit the form to a server and save the filled in data.

Though it was not very difficult to generate dynamic elements using javascript, but when I tried to save the data by submitting the form, i got an message from the server that the fields I had submitted are not provided.

But I had provided the fields, I was able to see the HTML elements on screen.

I tried to look on internet, might be possible that as disabled fields are not sent to server, similarly there is a chance that dynamically generated fields are also not sent to the server.
And unfortunately I found a link which was supporting my above statement. Here is the link

Actually, I converted a text box to a drop down which got populated using an ajax call. I kept the same ID for the already present textbox and the newly created drop down.
But the values of newly created dropdown were not submitted to the server. So what went wrong???

The mistake I was doing in my project was that I had set the ID of the dynamically generated dropdown, but I forgot to set the name. and in struts if you remember, Action form elements are synched with the elements of the same name in HTML form.

How to align the value in a text box using javascript?

How to align the value in a text box using javascript?

I found various methods to do it on google, but only one of them worked for me. Hence I decided to write a post on this.




function mytest3() {
// This works in both IE and chrome.
document.getElementById("y1").style.textAlign="right";

// Not working.
// document.getElementById("y1").style="text-align:right";

// Following works in Chrome (But not in IE)
// document.getElementById("y1").setAttribute("style", "text-align:right");

}








Well, for more information why the other two options were not working.
Please have a look at the following URL under section Text Properties
http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

Another good link to study is

http://www.webdeveloper.com/forum/showthread.php?t=81111

Well, if you like to use jquery and achive the same thing.




<title&gtjQuery demo
<script type="text/javascript" src="jquery.js" language="javascript"&gt


$(document).ready(function(){
$('#mydiv').attr("style","text-align:right");

});







Another very good website for learning javascript is http://jsbin.com/#javascript,html,live

How to access embedded iframe’s internal elements?

How do I access internal form elements of iframe which is embedded in an HTML page.

Ofcourse document.forms[0] will give me the first form in the parent document. But what I need is the form of the iframe.

Here is the solution

Example:
Test.html
==========


Dynamic Content

function testFun()

{
var doc = document.getElementById('myframe').contentWindow.document;
alert(doc.forms[0].textbox.value);
}




http://b.html




b.html
=======









How to reload an iframe from within its source

Hi,

Today I had a requirement where it was desired that on click of a button an iframe should get re-loaded and that button was within the source of that iframe.

I tried everything else on google, but nothing worked.

Finally I found this and it worked

self.location.reload();

Here is the complete code…

abc.html
=========





http://def.html




def.html
=========




http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

$(document).ready(function()
{
var d = new Date();
// set the HTML content of the element with id=time
$("#time").html(d.getTime());

// define what happens on click of the element with id="download"
$("#download").click(function()
{
// Simply re-load myself 🙂
self.location.reload();
});

});







Download


Add zooming effect to images on your website

You must have wondered, how to add zooming effect to an image.
Its pretty simple to do….

A simple attribute of has the capbility of doing it

<img src="http://www.celebrity-pictures.ca/Celebrities/Katrina-Kaif/Katrina-Kaif-i105058.jpg" 

onmousedown="this.height=450;this.width=600"

onmouseup="this.height=150;this.width=200" width=200 height=150>

Output :

Here are few of the event handlers :

Attribute Description
onabort Script to be run when loading of an image is interrupted
onclick Script to be run on a mouse click
ondblclick Script to be run on a mouse double-click
onmousedown Script to be run when mouse button is pressed
onmousemove Script to be run when mouse pointer moves
onmouseout Script to be run when mouse pointer moves out of an element
onmouseover Script to be run when mouse pointer moves over an
element
onmouseup Script to be run when mouse button is released
onkeydown Script to be run when a key is pressed
onkeypress Script to be run when a key is pressed and released
onkeyup Script to be run when a key is released

If you want a effect that gradually grows the image, you can refer to the link : http://javascript.internet.com/image-effects/growing-image.html