Show/hide DIV with timeout and redirection

**reisve** · 05-26-2013, 10:52 PM

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

**jscheuer1** · 05-27-2013, 02:12 AM

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.

**reisve** · 05-27-2013, 09:35 AM

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>

**jscheuer1** · 05-27-2013, 01:19 PM

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>

**reisve** · 05-27-2013, 04:19 PM

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

**reisve** · 05-27-2013, 04:37 PM

@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

**reisve** · 05-27-2013, 05:05 PM

@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...

Thread: Show/hide DIV with timeout and redirection

Thread Tools

Search Thread

Show/hide DIV with timeout and redirection

Similar Threads

Show hide div from xml row id

How to hide link after redirection

show and hide div

Show and Hide in php

show hide div (hide last open div)

Bookmarks

Bookmarks

Posting Permissions