Results 1 to 7 of 7

Thread: Show/hide DIV with timeout and redirection

  1. #1
    Join Date
    May 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Show/hide DIV with timeout and redirection

    Hi

    I'm looking allover for a script I need:

    I need to show a div for a certain amount of seconds, and when it hides redirect to another (or not) page. Also need to change the content of the div dynamically.

    Can anyone help me getting a script like this?

    Thank You

    Virginio Reis

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,939
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    I seriously doubt that you're going to find a script that does all that "right out of the box". You might, but I think we are going to have to take something that's close and tweak it.

    Four scripts pop into mind:

    Sticky Note: http://www.dynamicdrive.com/dynamici...stickynote.htm

    DHTML Modal window: http://www.dynamicdrive.com/dynamici...dhtmlmodal.htm

    EasyBox: http://code.google.com/p/easybox/

    FancyBox: http://fancybox.net/

    I'm sure there must be others. Each of these scripts allows for showing content as a popup div on a page. Some allow this content to come from many sources, but all allow for it to come from an unseen div already on the page. Timing, redirection on close, and dynamically changing the content would be doable in all of them. Some of these things would be accomplished via their script's configuration, others by tweaking. Which is which and for which scripts would vary depending upon the script you decide upon.

    If you could pick one of these, or some other script that comes close and set it up the best that you can for your purposes, I'm pretty sure I can get it to do the rest once I can see what you have done.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank You

    I found pieces of code and put this code together. The only thing missing is redirect to another page(index.php or other page):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
        <script type="text/javascript"> 
          $(document).ready(function () {
            setTimeout(function () {
                $('#msg').hide();
            }, 3000);
          });
        </script> 
        <style>
          .hide { 
              display:none; 
          } 
          
          .show { 
              display:block; 
          } 
    
      .infobox{
      position: absolute;
      top:50%;
      bottom: 0;
      margin-left: 30%;
      margin-right: 30%;
      width: 40%;
      height:50px;
      padding-top: 5px;
      border:solid 1px #008800;
      background:#D5FFC6;
      color:#48A41C; 
      font-family:Arial, Helvetica, sans-serif; 
      font-size:14px; 
      font-weight:normal;
      text-align:center;
    }
    
    /* Error */
    .errorbox{
      position: absolute;
      top:50%;
      bottom: 0;
      margin-left: 30%;
      margin-right: 30%;
      width: 40%;
      height:50px;
      padding-top: 5px;
      border:solid 1px #880000;
      background:#FDE4E1;
      color:#CB4721; 
      font-family:Arial, Helvetica, sans-serif; 
      font-size:14px;
      font-weight:normal;
      text-align:center;
    }
        </style>
      </head>
      <body>
          <div id="msg" class = "infobox">You have selected The Info Box</div>  </body>
    </html>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,939
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    If that does what you want except redirect on close, that's easy enough to add:

    Code:
        <script type="text/javascript"> 
          $(document).ready(function () {
            setTimeout(function () {
                $('#msg').hide();
                window.location.href = 'index.php';
            }, 3000);
          });
        </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ThankYou Very Much. Exactelly what I was looking for. May I ask you a question (would say a favor): I'm not at all a javascript guy. I have few jQuery scripts (including the one you helped me out with) I use and they all are in the header of the page. I would like to simplify them, if possible and load them from na external file. Can you help me to do that? Each time I try to arranje them, they quit to work.

    Here are the scripts in the header:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <title><?php echo $title['title']; ?></title>
      <base href="http://root.com/divdev/">
      <meta http-equiv="Content-Type" content="text/html; charset=Western (ISO-8895-1)" />
      <link rel="stylesheet" type="text/css" href="css/frontend.css">
    
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    
      <script>
      // When the browser is ready...
      $(function() {
      
        // Setup form validation on the #addcat element
        $("#addlinkform").validate({
        
            // Specify the validation rules
            rules: {
                category: "required",
                company: "required",
                link: "required",
                description: "required",
                address: "required",
                county: "required",
                city: "required",
                state: "required",
                country: "required",
                phone: "required",
                duration: "required"
              },
    
            // Specify the validation error messages
            messages: {
                category: "<?php echo $addlinkinfo['category']; ?>",
                company: "<?php echo $addlinkinfo['company']; ?>",
                link: "<?php echo $addlinkinfo['link']; ?>",
                description: "<?php echo $addlinkinfo['description']; ?>",
                address: "<?php echo $addlinkinfo['address']; ?>",
                county: "<?php echo $addlinkinfo['county']; ?>",
                city: "<?php echo $addlinkinfo['city']; ?>",
                state: "<?php echo $addlinkinfo['state']; ?>",
                country: "<?php echo $addlinkinfo['country']; ?>",
                duration: "<?php echo $addlinkinfo['duration']; ?>"
            },
            
            submitHandler: function(form) {
                form.submit();
            }
        });
      });
      </script>
    
      <script>
      // When the browser is ready...
      $(function() {
      
        // Setup form validation on the #registerform element
        $("#registerform").validate({
        
            // Specify the validation rules
            rules: {
                fname: "required",
                lname: "required",
                email: {
                    required: true,
                    email: true,
                },
                user: {
                    required: true,
                },
                pass1: {
                    required: true,
                },
                pass2: {
                      required: true, equalTo: "#pass1",
                }
              },
    
            // Specify the validation error messages
            messages: {
                fname: "<?php echo $regerror['fname']; ?>",
                lname: "<?php echo $regerror['lname']; ?>",
                email: {
                    required: "<?php echo $regerror['email']; ?>",
                    email: "<?php echo $regerror['valemail']; ?>",
                },
                user: {
                    required: "<?php echo $regerror['user']; ?>",
                },
                pass1: {
                    required: "<?php echo $regerror['pass1']; ?>",
                },
                pass2: {
                    required: "<?php echo $regerror['pass2']; ?>",
                    equalTo: "<?php echo $regerror['difpass']; ?>",
                },
            },
            
            submitHandler: function(form) {
                form.submit();
            }
        });
    
            // Setup form validation on the #loginform element
        $("#loginform").validate({
        
            // Specify the validation rules
            rules: {
                user: "required",
                pass: "required"
              },
    
            // Specify the validation error messages
            messages: {
                user: "<?php echo $logerror['user']; ?>",
                pass: "<?php echo $logerror['pass']; ?>"
            },
            
            submitHandler: function(form) {
                form.submit();
            }
        });
    
      });
      
      $(document).ready(function () {
        setTimeout(function () {
          $('#msg').hide();
          window.location.href = 'index.php';
        }, 3000);
      });
    </script> 
    <style>
      .hide { 
          display:none; 
      } 
      
      .show { 
          display:block; 
      } 
    
      </script>
      </head>
      <body>  
      </script>
      </head>
      <body>
    I would like them to be so simple as the "addlinkform"; tide and organised. Reading the documentation for jQuery did not help at all.

    Thank You again
    Last edited by reisve; 05-27-2013 at 04:25 PM.

  6. #6
    Join Date
    May 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    @jscheuer1

    One last thing (I hope) How can I change the redirection location in the script from the DIV? This is how I will setup the DIV:

    Code:
    <div id="msg" class = "errorbox"><?php echo $error['dbselect'] . mysqli_error($link); ?></div>
    From within the line (or before) how can I setup the redirection location?

    Thank You again
    Last edited by reisve; 05-27-2013 at 04:50 PM.

  7. #7
    Join Date
    May 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    @jscheuer1

    Well, the way it is , the main page keeps loading, timing out, and loading. How can I call the function only when I want to display the DIV?. After all it seams more complicated than it looks like...

Similar Threads

  1. Show hide div from xml row id
    By ajsfullhouse in forum JavaScript
    Replies: 6
    Last Post: 12-15-2010, 06:32 PM
  2. How to hide link after redirection
    By zalim_prince in forum Looking for such a script or service
    Replies: 0
    Last Post: 09-04-2010, 07:00 PM
  3. show and hide div
    By creative creator in forum JavaScript
    Replies: 4
    Last Post: 05-06-2010, 09:10 AM
  4. Show and Hide in php
    By MSK7 in forum PHP
    Replies: 5
    Last Post: 02-04-2009, 10:58 AM
  5. show hide div (hide last open div)
    By flash in forum JavaScript
    Replies: 5
    Last Post: 12-24-2007, 07:57 PM

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
  •