Jquery + Jquery UI + display:none;
Ситуация:
1. есть <div> контейнер с формой редактирования контента 2. в форме есть textarea с повешенным на него авторесайзом
$(document).ready(function(){
$("#my_content").resizable();
});
3. Есть задание, что изначально этот div должен быть скрытым. Т.е. по клику "редактировать" он открывается и появляется наша форма редактирования. И вот теперь проблема. - если div изначально скрыт, то при открытие его , textarea отсутствует, т.е. не видна.
$('#editText').click(function() {
$('#blockEditForm').toggle();
});
Но... если изначально не скрывать, то последующие "скрыть / показать" textarea не теряют, все работает корректно. Начальное скрытие пробовал делать и через style="display:none;" , и через вызов $('#blockEditForm').toggle(); , и через $('#blockEditForm').hide(); ... но результат всегда одинаков, если див скрыт изначально, то текстареа не показывается, если же не скрыт изначально, то потом скрывай сколько хочешь, все показывается хорошо. Чувствую, что где то надо что то инициализировать, что бы выполнить в скрытом диве, но вот где и что - не понимаю. Хелп плиз :) |
Неужели никто не знает ? Вот полный пример такого
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
<style type="text/css">
#content { width: 300px; height: 100px; background: silver; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#show').click(function() {
$('#myForm').toggle();
});
// I need have this div hidden after page load
//$('#myForm').toggle();
$("#content").resizable();
});
</script>
</head>
<body style="font-size:62.5%;">
<a id="show" href="#">Show / Hide</a> <br /> <br /> <br />
<div id="myForm">
<form><textarea id="content">Example text area</textarea></form>
</div>
</body>
</html>
Достаточно убрать комментарий со строки скрытия дива, и получим уже не отображаемое окно формы. |
Вот так надо:
<script type="text/javascript">
$(document).ready(function(){
$('#show').click(function() {
$('#myForm').toggle();
});
$("#content").resizable();
$('#myForm').toggle();
});
</script>
|
Спасибо большое.
|
| Часовой пояс GMT +3, время: 14:30. |