HTML/JS/CSS issue getting bigger by itself

Posted by Azzyh on Stack Overflow See other posts from Stack Overflow or by Azzyh
Published on 2010-06-15T23:14:13Z Indexed on 2010/06/15 23:32 UTC
Read the original article Hit count: 212

Filed under:
|
|

http://img175.imageshack.us/img175/4295/tableissue.png

Here's the picture to begin with.

I have this check box, that when you check, then with jQuery toggle(); it hides that you see in first half of the picture (#writeComment) and shows #SCtryVOTE (what you see in the other half picture, to the right).

Now i dont know why but of some reason it expands when its checked, why i dont know, is it because it needs more place than it have or? how do i make this work without having problems when its checked.

Here's coding:

$('#tryout').click(function () {

    $('#writeComment').toggle(!$(this).attr('checked'));

    $('#SCtryVOTE').toggle($(this).attr('checked'));
});

the js jquery script part, heres the table and divs HTML part:

<input type="checkbox" id="tryout">
<table  align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer">
<tr style="background: #686868;">
<td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td>
<td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td>
</td>
</tr>
<tr>
<td align="left" valign="top" width="70" height="112" style="">
TEST
</td>
<td align="left" valign="top" width="70" height="112" style="">
<div id="writeComment">
Smid en kommentar:<br>
<form action="javascript:DoInsert()" method="post">
<textarea id="kommentar" name="kommentar"></textarea><br />
<input type="hidden" name="fID" id="fID" value="<? echo $_GET["id"]; ?>">
<input type="submit" name="Submit" value="Sæt ind!"> 
</form>
</div>

<div id="SCtryVOTE"  style="display: none;">
<form onsubmit="if (!this.comment.cleared) clearContents( document.getElementById('comment') ); return true;" action="javascript:DoSCInsert()" method="post">
<textarea onfocus=" javascript:clearContents(this); this.cleared=true;" rows="5" cols="40" id="comment" name="comment" <?php if($vis["username"] == $pusername) { echo "DISABLED"; } ?>>Tryk for at skrive. Skal være detaljeret og grundet.</textarea>
<br>Ja: <input type="radio" value="Y" id="SCvoteY" name="vote"></input>  Nej: <input type="radio" id="SCvoteN" value="N" name="vote"> </input>
<input type="submit" id="SCstem" name="Submit" value="Stem!"> 
</form>
</div>

Maybe you need the CSS part too for these two boxes:

#writeComment{
position: relative;
left: 5px; 
top: 10px;
}
#SCtryVOTE{
position: relative;
left: 5px; 
top: 10px;
}

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about html