I want to change a panel size to look like an auto collapse at a specific time::
This is my code:
<html>
<head runat="server">
<title></title>
</head>
<body onLoad = "StartClock()" onunload = "KillClock()">
<script language="JavaScript">
<!--
var ftext ;
var clockID = 0;
var g;
function UpdateClock() {
if (clockID) {
clearTimeout(clockID);
clockID = 0;
}
var tDate = new Date();
g = ""
+ tDate.getHours() + ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();
if (ftext == null) {
ftext = prompt("message time:", "");
}
if (g == ftext) {
<%--*here i want the panel to be collapse*--%>
g = 0;
}
if (g == 0)
{ null }
else{
clockID = setTimeout("UpdateClock()", 1000);
}
}
function StartClock() {
if (g == 0)
{ null }
else{
clockID = setTimeout("UpdateClock()", 500);
}
}
function KillClock() {
if (clockID) {
clearTimeout(clockID);
clockID = 0;
}
}
//-->
</script>
<asp:Panel ID="Panel1" runat="server" Height="96px" Width="195px">
<table style="height: 96px; width: 194px">
<tr><td></td></tr>
<tr><td>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td></tr>
</table>
</asp:Panel>
</form>
</body>
</html>
I have the clock but I want to collapse the panel where I’ve marked with <%-- *here i want the panel to be collapse* --%>. I want it to be hidden when the page loads then, when the time comes, appear with a collapse, move or fade effect if that’s possible.
The jQuery JavaScript framework is useful for this sort of thing. It includes loads of effects for displaying your panel, like fading, sliding or animating.