1

I have a textarea in a div that I need to call a jquery function on to activate my rich textbox. The div is initially hidden and becomes visible through a button click on the server side:

<div id="RichTextDiv" style="display:none">
 <textarea id="RichText" />
</div>

<script type="text/javascript" language="javascript">
  $(document).ready(function () {
    $("#RichText").markItUp(mySettings);
  }
</script>

The above code doesn't work because RichTextDiv is not visible during page load. I need to perform the markItUp() action on RichText as soon as it becomes visible. How can this be achieved in jquery?

Thanks...

Prabhu
  • 12,995
  • 33
  • 127
  • 210
  • What do you mean by "button click on the server side"? How is the element added to the page, is it an AJAX call, etc.? – James Montagne Aug 02 '11 at 20:36
  • Try: http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible – Jasper Aug 02 '11 at 20:36

2 Answers2

2

You could just leave it visible initially

<div id="RichTextDiv">
    <textarea id="RichText" />
</div>

and MarkItUp and hide on ready

$(document).ready(function () {
    $("#RichText").markItUp(mySettings).hide();
}

or wire it up once your button is clicked:

$("input:button")click(function(){
    $("#RichText").show().markItUp(mySettings);
});

all this said, I don't know why MarkItUp would only work on visible elements, seems odd

hunter
  • 62,308
  • 19
  • 113
  • 113
  • Thanks. Ok, I lied. I was using Visible="False" on my asp.net page. I thought that was the same as style="display:none", but apparently not. The div was not on the dom. Thanks again... – Prabhu Aug 02 '11 at 20:51
2

sjQuery selectors work on hidden divs. They don't work if the element in not in the DOM, but that doesn't seem do be the case here.

Could it be that the div's ID is RichTextDiv and your selector is RichText?

Steve Mallory
  • 4,245
  • 1
  • 28
  • 31