JS Calendar with Div Popup and Form

mattboyguy · 12-07-2010, 07:57 AM

Hello All,

I have created a calendar that works with JS. Click the arrow a new month loads without a refresh to the page. All works well. I have also added a popup div (not a new window) to display some information and request the user fill out a form also. The trouble I am running in to is that I can not pass the day variable correctly to the popup when the user selects a day - it always displays 1 as the day.

I would like to know how I can pass the day selected by the user to the popup. So if the user selects the 15th, I want the popup to print "The day you selected is the 15th!"

This is what I have so far:

playball.php

<script type="text/javascript" src="ajax/ajax.js"></script>
<script language="javascript" src="ajax/popup.js"></script>
<script type="text/javascript">
showMonthViewCalender('hello');
</script>
<link href="css/calendar.css" rel="stylesheet" type="text/css" />

</head>
<body>

<?php
echo "<div class=content>";
include("menu.php");
?>

<div id="month_view_calender"></div>

<?php
include("bottom.php");
echo "</div>";
?>

calendar.php

echo "
<div id=\"blanket\" style=\"display:none;\"></div>
<div id=\"popUpDiv\" style=\"display:none;\">
<a href=\"#\" onclick=\"popup('popUpDiv')\">

<div class='popupclose'>Close | X</div></a>
<div class='popupinclude'>
";

include("popup.php");

echo "
</div>
</div>";

while( $day_num <= $day_in_month )
{
echo "<td><a href='#' onclick=\"popup('popUpDiv') \"> $day_num </a></td>";
$_SESSION['day_tran'] = $day_num;
$day_num++;
$day_count++;

if( $day_count > 7 )
{
echo "</tr><tr>";
$day_count = 1;
}

}

popup.js

// JavaScript Document

function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block'; }
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-150;//150 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-150;//150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname)
window_pos(windowname)
toggle('blanket')
toggle(windowname)

}

Any help is appreciated. Thank You!!!

Matt

12-07-2010, 07:57 AM	#1
mattboyguy New Member Join Date: Dec 2010 Posts: 1	JS Calendar with Div Popup and Form Hello All, I have created a calendar that works with JS. Click the arrow a new month loads without a refresh to the page. All works well. I have also added a popup div (not a new window) to display some information and request the user fill out a form also. The trouble I am running in to is that I can not pass the day variable correctly to the popup when the user selects a day - it always displays 1 as the day. I would like to know how I can pass the day selected by the user to the popup. So if the user selects the 15th, I want the popup to print "The day you selected is the 15th!" This is what I have so far: playball.php <script type="text/javascript" src="ajax/ajax.js"></script> <script language="javascript" src="ajax/popup.js"></script> <script type="text/javascript"> showMonthViewCalender('hello'); </script> <link href="css/calendar.css" rel="stylesheet" type="text/css" /> </head> <body> <?php echo "<div class=content>"; include("menu.php"); ?> <div id="month_view_calender"></div> <?php include("bottom.php"); echo "</div>"; ?> calendar.php echo " <div id=\"blanket\" style=\"display:none;\"></div> <div id=\"popUpDiv\" style=\"display:none;\"> <a href=\"#\" onclick=\"popup('popUpDiv')\"> <div class='popupclose'>Close \| X</div></a> <div class='popupinclude'> "; include("popup.php"); echo " </div> </div>"; while( $day_num <= $day_in_month ) { echo "<td><a href='#' onclick=\"popup('popUpDiv') \"> $day_num </a></td>"; $_SESSION['day_tran'] = $day_num; $day_num++; $day_count++; if( $day_count > 7 ) { echo "</tr><tr>"; $day_count = 1; } } popup.js // JavaScript Document function toggle(div_id) { var el = document.getElementById(div_id); if ( el.style.display == 'none' ) { el.style.display = 'block'; } else {el.style.display = 'none';} } function blanket_size(popUpDivVar) { if (typeof window.innerWidth != 'undefined') { viewportheight = window.innerHeight; } else { viewportheight = document.documentElement.clientHeight; } if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) { blanket_height = viewportheight; } else { if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) { blanket_height = document.body.parentNode.clientHeight; } else { blanket_height = document.body.parentNode.scrollHeight; } } var blanket = document.getElementById('blanket'); blanket.style.height = blanket_height + 'px'; var popUpDiv = document.getElementById(popUpDivVar); popUpDiv_height=blanket_height/2-150;//150 is half popup's height popUpDiv.style.top = popUpDiv_height + 'px'; } function window_pos(popUpDivVar) { if (typeof window.innerWidth != 'undefined') { viewportwidth = window.innerHeight; } else { viewportwidth = document.documentElement.clientHeight; } if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) { window_width = viewportwidth; } else { if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) { window_width = document.body.parentNode.clientWidth; } else { window_width = document.body.parentNode.scrollWidth; } } var popUpDiv = document.getElementById(popUpDivVar); window_width=window_width/2-150;//150 is half popup's width popUpDiv.style.left = window_width + 'px'; } function popup(windowname) { blanket_size(windowname) window_pos(windowname) toggle('blanket') toggle(windowname) } Any help is appreciated. Thank You!!! Matt

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode