SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Atlanta
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with a popover (in the same window) without onClick

    I have created newsletter signup forms that I would like to display on (within) the page as a popover.

    Ex.: Visitor goes to a page of recipes, I would like to offer them more recipes in exchange for email signup. So, on that same page, a popover (or lightbox, perhaps) shows this offer.

    All examples of code that I can find include an "onClick" function (or have been deprecated). I do not want my visitor to have to click anything for the popover to show. Just a delay of X seconds.

    Again, I have coded the forms. I just need help with the script of the popover.


    ***I have used the term 'popover' instead of popup, as I do not care for the traditional 'popups'. Maybe this terminology is incorrect.

    Any and all help is appreciated!

    Thanks!

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    setTimeout is what you are looking for.

    Example:
    Code HTML4Strict:
    <div id="notice"></div>
    <script>
    	var notice = document.getElementById('notice'),
    		t = setTimeout("showMsg()",2000);
     
    	var showMsg = function() {
    		notice.innerHTML = '<p>Hello World</p>';
    	}			
    </script>

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Atlanta
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Indeed, and thank you! Can't believe I didn't think of that.

    Enjoy your weekend.

  4. #4
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Atlanta
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    setTimeout is what you are looking for. ...

    Hey, thanks again with this. I am still having trouble accomplishing this goal, however. I cannot get the <div> information to show up. There are several errors due to the markup.

    To explain: I don't need a single line of text, I need an entire signup form.

    Ex.: I need all of #pop_form_wrapper to show in the popover where "<p>This is your popover!</p>" is. (see below)


    Code HTML4Strict:
    <div id="pop_form_wrapper">
      <div class="pagecopy">
      <p class="bigfont">Want to get all of our recipes in a handy <span>eBook?</span><br/>
      Just signup for our newsletter and they're yours.
      <span class="biggerfont">FREE!</span></p>
      <img src="images/pop_form_crescent.png" class="crescent" width="99" height="25" />
      <p>At Domain.com we have collected the best of our family recipes, and even created some new palate pleasers, and would like to offer them to you...FREE!  Just signup for our newsletter using the form below, and we'll email it right to you.</p>
      <p class="mediumfont"><span>But, wait.  There's more!</span></p>
      <p>By subscribing to our newsletter, you'll also receive coupons and other offers to use here on our site!  It doesn't get any better than that.</p>
      </div><!-- end .pagecopy  -->  
     
      <!--  Pop Form -->
    Sign up FORM GOES HERE
      <!-- / Pop Form -->
    </div><!-- end #pop_form_wrapper -->
     
     
     
    <div id="notice"></div>
    <script type="text/javascript">
           var notice = document.getElementById('notice'),
                   t = setTimeout("showMsg()",5000);
     
           var showMsg = function() {
                   notice.innerHTML = '<p>This is your popover!</p>';
           }
    </script>




    I have tried tinkering with it, but to no avail.

    Any ideas, or suggestions, with this is greatly appreciated! Thanks!

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here is another example to try. Here I used the display.style none/block and I wrapped the pop_form_wrapper within a top div
    Code:
    <!DOCTYPE html>
    <html>
    	<body>
    		<div id="notice">
    			<div id="pop_form_wrapper">
    				<div class="pagecopy">
    					<p class="bigfont">Want to get all of our recipes in a handy <span>eBook?</span><br/>
    					Just signup for our newsletter and they're yours.
    					<span class="biggerfont">FREE!</span></p>
    					<img src="images/pop_form_crescent.png" class="crescent" width="99" height="25" />
    					<p>At Domain.com we have collected the best of our family recipes, and even created some new palate pleasers, and would like to offer them to you...FREE!  Just signup for our newsletter using the form below, and we'll email it right to you.</p>
    					<p class="mediumfont"><span>But, wait.  There's more!</span></p>
    					<p>By subscribing to our newsletter, you'll also receive coupons and other offers to use here on our site!  It doesn't get any better than that.</p>
    				</div>  
    				
    				<!--  Pop Form -->
    				Sign up FORM GOES HERE
    				<!-- / Pop Form -->
    			</div>		
    		</div>
    		<script>
    			var pop_form_wrapper = document.getElementById('pop_form_wrapper'),
    				t = setTimeout("showMsg()",5000);
    			
    			pop_form_wrapper.style.display = 'none';
    			
    			var showMsg = function() {
    				pop_form_wrapper.style.display = 'block';
    			}
    		</script>
    	</body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Atlanta
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    Here is another example to try.
    Hey, thanks! A little tinkering to get the CSS exact, and this should be fine.

    Many thanks!!


Tags for this Thread

Bookmarks

Posting Permissions

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