hide one div on show of other continuously

Question

I have two divs in my html page and I want to show one div on hide of other and show other on hide of first automatically after each 5 seconds. I am writing this in my document.ready but it is not working. It only hides first div and shows it and then it does nothing.

  $("#free-trial-link").show().delay(5000).queue(function(n) {
      $(this).hide(); n();
  });


  $('#free-trial-link').fadeIn(function() {
        $('#record-call-link').fadeIn();   
  });

  $('#record-call-link').fadeIn(function() {
        $('#free-trial-link').fadeIn();   
  });

Markup is:

   <div class="container_content" style="padding-top: 10px;">
                                                    <p class="date_day" id="p-free-trial-link" style="display: none">
                                                        <img id="free-trial-link" style="cursor: pointer;" src="images/tial-icon.png" width="32"
                                                            height="32"><br>
                                                        Free Trial
                                                    </p>
                                                    <p class="date_day" style="text-align: right; margin-top: 25px;" id="p-record-call-link">
                                                        <img id="record-call-link" style="position: inherit; cursor: pointer;" src="images/record-icon.png"
                                                            width="32" height="32"><br>
                                                        Record a Call
                                                    </p>
                                                    <div class="clear-n">
                                                    </div>
                                                </div>

Please check this [link][1]. Hope this is what you want [1]: http://stackoverflow.com/questions/914951/show-and-hide-divs-at-a-specific-time-interval-using-jquery — Roger, Apr 20 '13 at 11:43

Arun P Johny · Accepted Answer · 2013-04-20T12:08:38.663

1

Try

<div class="container_content" style="padding-top: 10px;">
    <p class="date_day" id="p-free-trial-link" style="display: none">
        <img id="free-trial-link" style="cursor: pointer;" src="images/tial-icon.png" width="32"
        height="32" /><br />
        Free Trial
    </p>
    <p class="date_day" style="text-align: right; margin-top: 25px; display: none" id="p-record-call-link">
        <img id="record-call-link" style="position: inherit; cursor: pointer;" src="images/record-icon.png"
        width="32" height="32" /><br />
        Record a Call
    </p>
    <div class="clear-n">
    </div>
</div>

And

$(function(){
    function showTrial(){
        $("#p-free-trial-link").show().delay(5000).hide(function(){
            showCall();
        });
    }

    function showCall(){
        $("#p-record-call-link").show().delay(5000).hide(function(){
            showTrial()
        });
    }

    showTrial()
});

Demo: Fiddle

edited Apr 20 '13 at 12:08

answered Apr 20 '13 at 11:42

Arun P Johny

384,651
66
527
531

It is hiding only free-trial-link and nothing happens after this. – DotnetSparrow Apr 20 '13 at 11:55
what do you want to happen? the text also should change – Arun P Johny Apr 20 '13 at 12:05
yes, p-free-trial-link should hide and p-record-call-link should display and vise versa but right now free-trial-link hides and nothing happens after it – DotnetSparrow Apr 20 '13 at 12:08
functions will also be inside $(function() ? – DotnetSparrow Apr 20 '13 at 12:10
@DotnetSparrow need not be – Arun P Johny Apr 20 '13 at 12:11
same thing, p-free-trial-link hides and then nothing happens after it – DotnetSparrow Apr 20 '13 at 12:13
@DotnetSparrow did you check the demo link, is it working fine – Arun P Johny Apr 20 '13 at 12:14
yes it is fine. It can be issue because i am using jquery from – DotnetSparrow Apr 20 '13 at 12:27
I downloaded and used 1.9.1 but same problem. I see this error in console: – DotnetSparrow Apr 20 '13 at 12:31
Invalid 'X-Frame-Options' header encountered when loading 'https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Lahore,+Punjab…akistan&t=m&ll=31.756196,74.362335&spn=0.437885,0.822601&z=10&output=embed': 'ALLOWALL' is not a recognized directive. The header will be ignored. about:blank:1 84 – DotnetSparrow Apr 20 '13 at 12:32
Unsafe JavaScript attempt to access frame with URL file:///D:/index.html from frame with URL https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Lahore,+Punjab…akistan&t=m&ll=31.756196,74.362335&spn=0.437885,0.822601&z=10&output=embed. The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'file'. Protocols must match. – DotnetSparrow Apr 20 '13 at 12:33
sorry for late reply. I used latest version of jquery UI and jquery on my page and code worked. Thanks – DotnetSparrow Apr 21 '13 at 14:39

score 0 · Answer 2 · answered Apr 20 '13 at 11:42

0

you can use .toggle() in jQuery

answered Apr 20 '13 at 11:42

PSR

39,804
41
111
151

hide one div on show of other continuously

2 Answers2