PDA

View Full Version : Giving Two names to one DIV



tp4f
09-10-2007, 10:41 AM
Hi. I was swondering if it is possible to give a DIV 2 Names (For example "MyDiv1" and "MyDiv2"), and for it to dod what both divs are supposed to do (for example, one to make it pagnated, and one to make it Draggable). I have the scripts, I'm just having trouble seeing if it is possible for one Div to have 2 functions.

codeexploiter
09-10-2007, 11:20 AM
Using some JavaScript code you can achieve what you are trying to do. Here is one example but in this case I've changed the div Id rather than div name.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.changed {
background-color: gray;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
border: 1px solid #ff0000;
}
#three {
background-color: #000;
color: #fff;
font-size: large;
border: 1px solid yellow;
width: 200px;
height: 200px;
padding: 5px 5px 5px 5px;
}
</style>
<script type="text/javascript">
function assignNewAttributes() {
document.getElementsByName('click1')[0].style.display = "inline";
var div = document.getElementById('one');
div.id = "two";
anotherOne();
}
function anotherOne() {
document.getElementsByName('click')[0].style.display = "none";
var elem = document.getElementById('two');
elem.innerHTML = "Changed content";
elem.className = 'changed';
}

function changeAttributes() {
var div = document.getElementById('two');
div.id = "three";
div.innerHTML = "Again changed the content.....";
document.getElementsByName('click1')[0].style.display = "none";
}
</script>
</head>
<body>
<div id="one" name="oneDiv">This is a test</div>
<input type="button" name="click" onclick="assignNewAttributes();" value="Assign New Properties" />
<input type="button" name="click1" onclick="changeAttributes();" value="Change It Again" style="display:none;" />
</body>
</html>


First click on Assign New Properties button after some time when you can view the changes in the above placed div block click on the second button.

* You can use a fully DOM based method for inputting the contents in the div element.