Hi People.
I'm a newbie to javascript.
I have a small issue.
I have a table where I have 5 columns.. I mean 5 <td>
In each <td> there are 7 links.
When I click a link, a container is popped up... Its hidden at first, Now inside the container there is some content and a Close link to close the container.
Different links pop up different sized containers with the respective data...
I managed to get it working.
But the problem is when I click on say first link, the container does get displayed but the links below, get shifted downwards so as the new container gets adjusted.
Its like, say if i have these links:
Character Design
Animation
Layout Design
Now when I click on Character Design link, the container will get displayed, but the below 2 links, Animation and Layout Design will move downwards.
What I wanted was, all parent links to remain fixed. The new popped up container should get displayed on top of others. I guess this can be achieved throught some z-index property of CSS, I've tried it but still the below links shift downward when I click a particular parent link.
Is there any way to fix this...?? Thanks.
Below is my code..
<html>
<head>
<title>my javascript show script</title>
<script type="text/javascript">
function showStuff(id)
{
document.getElementById(id).style.display = 'block';
}
function hideStuff(id)
{
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<style type="text/css">
.cont a { text-decoration:none; font-family: Calibri, Arial, sans-serif; font-size: 14px; color:#000; }
#answer1 { border: 1px solid black; color: grey; width: 300px; display:none; margin-left: 115px; margin-top: -15px; padding: 10px; font-size: 12px; font-family: Calibri, Arial, sans-serif; height: 135px; position:relative; z-index: 150; }
#answer1 a { text-decoration:none; color: red; font-weight:bold; }
#answer2 { border: 1px solid black; color: grey; width: 300px; display:none; margin-left: 115px; margin-top: -15px; padding: 10px; font-size: 12px; font-family: Calibri, Arial, sans-serif; height: 70px; }
#answer2 a { text-decoration:none; color: red; font-weight:bold; }
</style>
<body>
<div class="cont">
<p><a href="#" onclick="showStuff('answer1'); return false;">Character Design </a><br>
<span id="answer1" style="display: none;">
Every Production, be it Live action film making or an Animation Film production, it all begins with Design stage. Design is the most important factor that integrates all elements to give the production a defined look. This is essentially one of the first steps that is involved in film making where a decision is made from the look of the character to the elements that exist in the environment including the various assets that will be used by the character.
<br/><a href="#" style="float:right;" onclick="hideStuff('answer1'); return false;"> Close</a>
</span>
</p>
<p>
<a href="#" onclick="showStuff('answer2'); return false;">Modeling </a><br>
<span id="answer2" style="display: none;">
This is plain text....
<br/><a href="#" style="float:right;" onclick="hideStuff('answer2'); return false;"> Close</a>
</span>
</p>
</div>
</body>
</html>
