Log in

View Full Version : 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/dynamicindex17/stickynote.htm

DHTML Modal window: http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/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):



<!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:


<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:


<!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:


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