www.webdeveloper.com
Results 1 to 3 of 3

Thread: Help Required!! Unable to call the function second time....

  1. #1
    Join Date
    Jan 2013
    Posts
    2

    Help Required!! Unable to call the function second time....

    Hi,

    I'm a newbie in the world of javascript and wanted to share a problem which I had.
    I'm unable to understand the cause & resolve the peculiar problem I have. So please do help...

    here are the java functions I'm using to show and hide main DIV - faqback
    ************************************************************************

    <script type="text/javascript">
    function ShowDiv(Q, A){
    var Query;
    var Response;
    Query =Q;
    Response = A;
    Question.firstChild.nodeValue="";
    Answer.firstChild.nodeValue="";
    Question.firstChild.nodeValue=Query;
    Answer.firstChild.nodeValue=Response;
    $('#faqback').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 0.9});
    }

    function HideDiv(){
    $("#faqback").fadeOut("slow");
    }
    </script>

    here's the html piece of code
    ************************************************************************
    <div id="faqback" class="faqback">
    <div class="QnA">
    <div onclick="HideDiv()" ><img src="images/close.png"/> </div>
    <p id="Question" > My question goes here? </p>
    <p id="Answer"> My answer Goes here </p>
    </div>
    </div>
    </div>

    <a href="javascript:void(0);" onclick="ShowDiv('Question1','Answer1')" > Question 1 <br/> </a>
    <a href="javascript:void(0);" onclick="ShowDiv('Question2','Answer2')" > Question 2 <br/> </a>
    <a href="javascript:void(0);" onclick="ShowDiv('Question3','Answer3')" > Question 3 <br/> </a>
    <a href="javascript:void(0);" onclick="ShowDiv('Question4','Answer4')" > Question 4 <br/> </a>
    <a href="javascript:void(0);" onclick="ShowDiv('Question5','Answer5')" > Question 5 <br/> </a>

    ********************************************************************************

    The ShowDiv and HideDiv works only once and then it doesn't. But if the HideDiv function is altered to
    $("#faqback").fadeOut("slow",function(){location.reload(true);});
    then it works but it reloads the entire page causing a delay in loading and visually there's a
    disconnected feel.

    Thanks in advance

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    The reason faqback doesn't show after you've called HideDiv() is because faqback's CSS display property becomes "none" when fadeOut() has completed. Change
    .css({opacity: 0.0, visibility: "visible"})
    to
    .css({opacity: 0.0, display: ""})
    to reset the display property before the animation begins.

  3. #3
    Join Date
    Jan 2013
    Posts
    2
    Thanks for the help ReFreezed!
    I got it working..... hooray!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles