This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I'm trying to make a calender in php, i have done the first part and have the layout and information, i am trying to add a previous and next month now and the css has gone for some reason. I am following a tutorial
The only info that shows is the previous and next month button and the current month. I have all three files in the htdocs folder of xampp. I dont know whats wrong :(
here is the file to view everything
show_calendar.php
<!DOCTYPE html>
<html>
<head>
<link href="calCss.css" rel="stylesheet" type="text/css" media="all" />
<script language="JavaScript" type="text/javascript">
function initialCalendar(){
var hr = new XMLHttpRequest();
var url = "calendar_start.php";
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var year = currentTime.getFullYear();
showmonth = month;
showyear = year;
var vars = "showmonth="+showmonth+"&showyear="+showyear;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("showCalendar").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("showCalendar").innerHTML = "processing...";
}
</script>
<script language="JavaScript" type="text/javascript">
function next_month(){
var nextmonth = showmonth + 1;
if (nextmonth > 12) {
nextmonth = 1;
showyear = showyear + 1;
}
showmonth = nextmonth;
var hr = new XMLHttpRequest();
var url = "calendar_start.php";
var vars = "showmonth="+showmonth+"&showyear="+showyear;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("showCalendar").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("showCalendar").innerHTML = "processing...";
}
</script>
<script language="JavaScript" type="text/javascript">
function last_month(){
var lastmonth = showmonth - 1;
if (lastmonth < 1) {
lastmonth = 12;
showyear = showyear - 1;
}
showmonth = lastmonth;
var hr = new XMLHttpRequest();
var url = "calendar_start.php";
var vars = "showmonth="+showmonth+"&showyear="+showyear;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("showCalendar").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("showCalendar").innerHTML = "processing...";
}
</script>
</head>
<body onLoad="initialCalendar();">
<div id="showCalendar"></div>
</body>
</html>
calendar_start.php
<?php
$showmonth = $_POST['showmonth'];
$showyear = $_POST['showyear'];
$showmonth = preg_replace('#[^0-9]#i', '', $showmonth);
$showyear = preg_replace('#[^0-9]#i', '', $showyear);
$day_count = cal_days_in_month(CAL_GREGORIAN, $showmonth, $showyear);
$pre_days = date('w', mktime(0,0,0, $showmonth, 1, $showyear));
$post_days = (6 - (date('w', mktime(0,0,0, $showmonth, $day_count,$showyear))));
echo '<div id="calendar_wrap">';
echo '<div class="title_bar">';
echo '<div class="previous_month"><input name="myBtn" type="submit"
value="Previous Month" onClick="javascript:last_month();"></div';
echo '<div class="show_month">' . $showmonth . '/' . $showyear . '</div>';
echo '<div class="next_month"><input name="myBtn" type="submit"
value="Next Month" onClick="javascript:next_month();"></div';
echo '</div>';
echo '<div class="week_days">';
echo '<div class="days_of_the_week">Mon</div>';
echo '<div class="days_of_the_week">Tue</div>';
echo '<div class="days_of_the_week">Wed</div>';
echo '<div class="days_of_the_week">Thur</div>';
echo '<div class="days_of_the_week">Fri</div>';
echo '<div class="days_of_the_week">Sat</div>';
echo '<div class="days_of_the_week">Sun</div>';
echo '<div class="clear"></div>';
echo '</div>';
/* Previous Month Filler Days */
if ($pre_days != 0) {
for($i = 1 ; $i<=$pre_days;$i++) {
echo '<div class="non_cal_day"></div>';
}
}
/* Current Month */
for($i=1; $i<= $day_count; $i++) {
echo '<div class="cal_day">';
echo '<div class="day_heading">' . $i . '</div>';
echo '</div>';
}
/* Next Month Filler Days */
if ($post_days != 0) {
for ($i=1; $i<=$post_days; $i++) {
echo '<div class="non_cal_day"></div>';
}
}
echo '</div>';
?>
here is the css
calCss.css
#calendar_wrap {
width: 924px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.title_bar {
width: 100%;
height: 30px;
}
.previous_month {
float: left;
width: 308px;
height: 30px;
text-align: left;
}
.show_month {
float: left;
width: 308px;
height: 30px;
text-align: center;
}
.next_month {
float: left;
width: 308px;
height: 30px;
text-align: right;
}
.week_days {
width: 100%;
}
.days_of_the_week {
float: left;
width: 14%;
text-align: center;
}
.cal_day {
position: relative;
float: left;
margin-right: 4px;
margin-bottom: 4px;
width: 128px;
height: 95px;
background-color: #9C9;
}
.day_heading {
position: relative;
float: left;
width: 40px;
height: 16px;
padding: 6px;
color: #000;
font-family: Arial;
font-size: 14px;
}
.openings {
width: 100%;
clear:left;
text-align: center;
}
.non_cal_day {
position: relative;
float: left;
margin-right: 4px;
margin-bottom: 4px;
width: 128px;
height: 95px;
background-color: #CCC;
}
.clear {
clear: both;
}
Can anyone see anything? any help would be great, what errors do i need to show in the google developer tools?
In your file calendar_start.php Line 14 and Line 17, you did not close div correctly
you write . So your Echo block will be like this
echo '<div id="calendar_wrap">';
echo '<div class="title_bar">';
echo '<div class="previous_month"><input name="myBtn" type="submit"
value="Previous Month" onClick="javascript:last_month();"></div>';
echo '<div class="show_month">' . $showmonth . '/' . $showyear . '</div>';
echo '<div class="next_month"><input name="myBtn" type="submit"
value="Next Month" onClick="javascript:next_month();"></div>';
echo '</div>';
echo '<div class="week_days">';
echo '<div class="days_of_the_week">Mon</div>';
echo '<div class="days_of_the_week">Tue</div>';
echo '<div class="days_of_the_week">Wed</div>';
echo '<div class="days_of_the_week">Thur</div>';
echo '<div class="days_of_the_week">Fri</div>';
echo '<div class="days_of_the_week">Sat</div>';
echo '<div class="days_of_the_week">Sun</div>';
echo '<div class="clear"></div>';
echo '</div>';
hope this will help
Related
So I have made a calendar using a php class and it works fine except when the first day of the month lands on a Saturday (two examples being February 1, 2020 or August 1, 2020). I believe the issue is in the PHP class, but I will include the CSS, along with a couple screenshots of what is happening.
PHP
error_reporting(E_ALL);
ini_set('display_errors', 1);
class Calendar{
private $month;
private $year;
private $days_of_week;
private $num_days;
private $date_info;
private $day_of_week;
public function __construct($month, $year, $days_of_week = array('Sun','Mon','Tue','Wed','Thu','Fri','Sat')){
// server info would be here.
require_once(CONN_DB);
require_once(SESH);
$this->month = $month;
$this->year = $year;
$this->days_of_week = $days_of_week;
$this->num_days = cal_days_in_month(CAL_GREGORIAN, $this->month, $this->year);
$this->date_info = getdate(strtotime('first day of', mktime(0,0,0,$this->month,1,$this->year)));
$this->day_of_week = $this->date_info['wday'];
}
public function show($conn){
$output = '<div class="calRow">';
foreach($this->days_of_week as $day){
$output .= '<div class="calCol-1 header">'.$day.'</div>';
}
$output .= '</div>';
$output .= '<div class="calRow dayRow">';
if($this->day_of_week > 0){
$output .= '<div class="calCol-'.$this->day_of_week.' empty"></div>';
}
//This is where I think the issue is...
$current_day = 1;
while($current_day <= $this->num_days){
if($this->day_of_week == 7){
$this->day_of_week = 0;
$output .= '</div><div class="calRow dayRow">';
}
$day_date = str_pad($current_day,2,'0',STR_PAD_LEFT);
$mnth_w_zero = str_pad($this->month,2,'0',STR_PAD_LEFT);
$event_date = $this->year . '-' . $mnth_w_zero . '-' . $day_date;
$output .= '<div class="calCol-1 day">';
$output .= '<div class="date">'.$day_date.'</div>';
$output .= '<div class="slots" id="'.$event_date.'"></div>';
$output .= '</div>';
$current_day++;
$this->day_of_week++;
}
// bottom of issue spot...
if($this->day_of_week != 7){
$remaining_days = 7 - $this->day_of_week;
$output .= '<div class="calCol-'.$remaining_days.' empty"></div>';
}
$output .= '</div>';
echo $output;
}
}
CSS
.cal_selector {
width: 100%;
text-align: center;
margin-bottom: 5px;
}
#calendar_div {
width: 100%;
height: 95%;
border-right: 1px solid var(--mainnav-background-color);
}
.dayRow {
height: 15.8%;
}
div.header {
text-align: center;
background-color: var(--mainnav-background-color);
}
div.empty {
height: 100%;
background-color: grey;
}
div.day {
height: 100%;
padding: 0px;
}
div.date {
padding: 2px;
}
span.event {
text-align: left;
background-color: var(--main-front-color);
color: white;
font-size: 12px;
padding: 2px;
height: 20px;
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spread {
position: absolute;
z-index: 2;
}
.eventSlot {
padding: 0;
background-color: var(--main-front-color);
margin-bottom: 1px;
border-radius: 4px;
}
.eventSlot:hover .infopane {
display: block;
}
.infopane {
display: none;
position: absolute;
z-index: 3;
background-color: var(--mainnav-background-color);
border: 1px solid var(--main-front-color);
border-radius: 4px;
padding: 10px;
}
.optionPane {
text-align: center;
}
.calOpts {
padding: 2px;
}
.calCol-1 {
width: 14.28%;
}
.calCol-2 {
width: 28.57%;
}
.calCol-3 {
width: 42.86%;
}
.calCol-4 {
width: 57.15%;
}
.calCol-5 {
width: 71.44%;
}
.calCol-6 {
width: 85.73%;
}
.calCol-7 {
width: 99.99%;
}
[class*="calCol-"] {
border-left: 1px solid var(--mainnav-background-color);
float: left;
padding: 10px;
}
.calRow {
border-bottom: 1px solid var(--mainnav-background-color);
}
.calRow::after {
content: "";
clear: both;
display: table;
}
Top PHP on myCalendar.php (calls myCalendar_class.php)
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
//server info here
require_once(CONN_DB);
require_once(SESH);
require_once(CALENDAR_CLASS);
?>
HTML on myCalendar.php
<script src="Scripts/Calendar/scripts_calendar.js"></script>
<span class="pageTitle">My Calendar</span>
<div class="cal_selector">
<div class="cal_selector_center">
<select id="month_select" name="month_select" style="width:150px">
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
<select id='year_select' name="year_select" style="width:75px;">
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
</div>
</div>
<div id="calendar_div"></div>
JQuery
function create_event_slots() {
$('.slots').each(function() {
var id = $(this).attr('id');
var d = new Date(id + 'T01:00:00');
var ms = d.getTime();
var div = "";
for (i = 0; i <= 20; i++) {
div += '<div class="eventSlot" id="' + ms + '_' + i + '"></div>';
}
$(this).html(div);
});
}
function change_calendar(mnth, year) {
var str = 'month=' + mnth + '&year=' + year;
$.ajax({
type: 'GET',
data: str,
url: 'Functions/load_calendar.php',
success: function(result) {
$('#calendar_div').html(result);
create_event_slots();
update_events(mnth, year);
}
});
}
function set_selects_to_current_month() {
var d = new Date();
var m = d.getMonth() + 1;
var y = d.getFullYear();
var m_sel = $('#month_select');
var y_sel = $('#year_select');
m_sel.val(m);
y_sel.val(y);
}
$(document).ready(function() {
set_selects_to_current_month();
change_calendar($('#month_select').val(), $('#year_select').val());
$('#month_select').change(function() {
change_calendar($(this).val(), $('#year_select').val());
});
$('#year_select').change(function() {
change_calendar($('#month_select').val(), $(this).val());
});
});
Correct Result
a correctly rendered calendar
Incorrect result
enter image description here
The problem was actually in the CSS.
New CSS snippet
.calCol-1 {
width: 14.27%;
}
.calCol-2 {
width: 28.56%;
}
.calCol-3 {
width: 42.85%;
}
.calCol-4 {
width: 57.14%;
}
.calCol-5 {
width: 71.43%;
}
.calCol-6 {
width: 85.72%;
}
.calCol-7 {
width: 99.98%;
}
Old CSS Snippet
.calCol-1 {
width: 14.28%;
}
.calCol-2 {
width: 28.57%;
}
.calCol-3 {
width: 42.86%;
}
.calCol-4 {
width: 57.15%;
}
.calCol-5 {
width: 71.44%;
}
.calCol-6 {
width: 85.73%;
}
.calCol-7 {
width: 99.99%;
}
Essentially, for whatever reason in this situation the container was .01 percent too big to fit in the appropriate row.
I am doing an e-commerce website. Just want to implement lazy load. I can fetch the data at first load but again if I scroll down no data can be fetched.
**HTML CODE**
<div class="row" id="fetchedprodducts">
<div class="row" id="load_data_message"></div>
<div id="load_data"></div>
</div>
**CSS**
#-webkit-keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
#keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.content-placeholder {
display: inline-block;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background: #f6f7f8;
background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
-webkit-background-size: 800px 104px;
background-size: 800px 104px;
height: inherit;
position: relative;
}
.post_data
{
padding:24px;
border:1px solid #f9f9f9;
border-radius: 5px;
margin-bottom: 24px;
box-shadow: 0px 0px 5px #eeeeee;
}
**AJAX**
<script>
$(document).ready(function(){
var url = window.location.href;
var idx = url.indexOf("product");
var slugx = url.indexOf("product");
var slug = url.substring(idx).split("/")[1];
var line = url.substring(slugx).split("/")[2];
var limit = 8;
var start = 0;
var action = 'inactive';
function lazy_load(limit){
var output = '';
for(var count = 0; count < limit; count++)
{
output += '<div class="post_data col-md-4 col-12">';
output += '<p><span class="content-placeholder" style="width:90%; height: 30px;"> </span></p>';
output += '<p><span class="content-placeholder" style="width:90%; height: 80px;"> </span></p>';
output += '</div>';
}
$('#load_data_msg').html(output);
}
lazy_load(limit,slug,line);
function load_data(limit,start,slug,line)
{
$.ajax({
url:BASE_URL+'front/Products/fetch',
method:"POST",
data:{limit:limit,start:start,slug:slug,line:line},
cache: false,
success:function(data)
{
if(data == '')
{
$('load_data_msg').html('<h3> No Product is available </h3>');
}
else{
$('#fetchedprodducts').append(data);
$('#load_data_msg').html("");
action = 'inactive';
}
}
});
}
if(action == 'inactive')
{
action = 'active';
load_data(limit, start,line,slug);
}
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
{
lazy_load(limit);
action = 'active';
start = start + limit;
setTimeout(function(){
load_data(limit, start);
}, 1000);
}
});
});
</script>
**Controller**
public function fetch(){
$output ='';
$limit = $this->input->post('limit');
$start = $this->input->post('start');
$line = $this->input->post('line');
$slug = $this->input->post('slug');
$data = $this->Userfront_model->fetch_data($limit,$start ,$line,$slug);
if($data->num_rows() > 0){
foreach($data->result() as $row)
{
$output .= "<div class='post_data col-md-3 col-6'>
<a class='all-link--pro' href='" . site_url('product_view/' . $row->id . "/" . $row->slug ) . "'>
<img style='box-shadow: 0px 0px 22px 0px #616161' class='img-fluid img-size' src='" . base_url('assets/img/posts/' . $row->main_img) . " '>
<p>" . $row->title . "</p>
<p> <b>" . $row->uniquecode. "</b> </p>
<p>Rs " . $row->price. "</p>
</a>
</div>";
}
}
echo $output;
}
MODEL
function fetch_data($limit, $start,$line,$slug)
{
$this->db->order_by('cv_products.id', 'DESC');
$this->db->select('cv_products.*, cv_category.name as categoryname,product_line.id as lineid, product_line.name as linename,cv_category.id as category_id,delivery_time.id as deliverid, delivery_time.name as timingname' );
$this->db->join('cv_category','cv_category.id = cv_products.category', 'left');
$this->db->join('product_line','product_line.id = cv_products.product_line', 'left');
$this->db->join('delivery_time','delivery_time.id = cv_products.timing', 'left');
$this->db->from('cv_products');
$this->db->where('cv_products.product_line' , $line);
$this->db->where('product_line.slug' , $slug);
$this->db->limit($limit, $start);
$query = $this->db->get();
return $query;
}
I am able to fetch the first 8 products but unable to get the rest of the products while scrolling.
NOTE:
if i remove the where clause from model it work perfectly
You haven't passed the values line and slug to the function call load_data inside scroll method.
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
{
lazy_load(limit);
action = 'active';
start = start + limit;
setTimeout(function(){
load_data(limit, start, line, slug); // pass missing parameters here
}, 1000);
}
});
I'm sure this is a simple css question but I'm stumped? - My H3 tag is producing bold text and I want in normal. page source is not indicating <B> tag present, but the text is clearly BOLD. I do want my H2 tag to be bold but currently not set in css since results are already bold.
<?php
include_once ( "/home/miemss5/public_html/wp-blog-header.php" );
global $current_user;
$FName = $current_user->user_firstname;
$LName = $current_user->user_lastname;
$FullName = $current_user->display_name;
?>
<HTML>
<HEAD>
<TITLE>Certificate</TITLE>
<SCRIPT>
var strTitle = "MDERS Test";
var g_arrMonths = new Array()
// Enter the month names below
try
{
g_arrMonths[0] = __MONTH_JAN__;
g_arrMonths[1] = __MONTH_FEB__;
g_arrMonths[2] = __MONTH_MAR__;
g_arrMonths[3] = __MONTH_APR__;
g_arrMonths[4] = __MONTH_MAY__;
g_arrMonths[5] = __MONTH_JUN__;
g_arrMonths[6] = __MONTH_JUL__;
g_arrMonths[7] = __MONTH_AUG__;
g_arrMonths[8] = __MONTH_SEP__;
g_arrMonths[9] = __MONTH_OCT__;
g_arrMonths[10] = __MONTH_NOV__;
g_arrMonths[11] = __MONTH_DEC__;
// Enter the column headers
var g_strDateTime = __DATE_TIME__;
var g_strStudentScore = __STUDENT_SCORE__;
var g_strPassingScore = __PASSING_SCORE__;
var g_strResult1 = __RESULT__;
var g_strQuestion = __QUESTION__;
var g_strCorrectAns = __CORRECT_ANS__;
var g_strResult2 = __RESULT__;
var g_strStudentAns = __STUDENT_ANS__;
var g_strPointsAwarded = __POINTS_AWARD__;
var g_strNeutral = __NEUTRAL__;
var g_strCorrect = __CORRECT__;
var g_strIncorrect = __INCORRECT__;
}
catch(e)
{
g_arrMonths[0] = "January";
g_arrMonths[1] = "February";
g_arrMonths[2] = "March";
g_arrMonths[3] = "April";
g_arrMonths[4] = "May";
g_arrMonths[5] = "June";
g_arrMonths[6] = "July";
g_arrMonths[7] = "August";
g_arrMonths[8] = "September";
g_arrMonths[9] = "October";
g_arrMonths[10] = "November";
g_arrMonths[11] = "December";
// Enter the column headers
var g_strDateTime = "Date / Time";
var g_strStudentScore = "Student Score";
var g_strPassingScore = "Passing Score";
var g_strResult1 = "Result";
var g_strQuestion = "Question";
var g_strCorrectAns = "Correct Answer";
var g_strResult2 = "Result";
var g_strStudentAns = "Student Answer";
var g_strPointsAwarded = "Points Awarded";
var g_strNeutral = "Neutral";
var g_strCorrect = "Correct";
var g_strIncorrect = "Incorrect";
}
</SCRIPT>
<STYLE>
TD {
font-size:10pt;
font-family:arial;
text-align: center;
width: 12.5%;
}
.CORRECT {
font-size:10pt;
font-family:arial;
color: #008800;
}
.INCORRECT {
font-size:10pt;
font-family:arial;
color: #880000;
}
.NEUTRAL {
font-size:10pt;
font-family:arial;
color: #000088;
}
.QUESTION {
font-size:10pt;
font-family:arial;
text-align: left;
width: 46.25%;
}
.NUMBER {
font-size:10pt;
font-family:arial;
text-align: center;
width: 3.75%;
}
.DATE {
font-size:10pt;
font-family:arial;
text-align: center;
}
.DATETIME {
font-size:10pt;
font-family:arial;
margin-top: 0;
margin-bottom: 0;
}
.SUMMARY {
font-size:10pt;
font-family:arial;
text-align: center;
}
H1 {
font-size:14pt;
font-family:arial;
text-align: center;
}
TH {
font-size:12pt;
font-family:arial;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
H2 {
font-size:40pt;
font-family:Trebuchet MS;
text-align: center;
position: absolute;
top: 150px;
left: 0;
width: 100%;
}
H3 {
font-size:32pt;
font-family:Trebuchet MS;
text-align: center;
position: absolute;
top: 210px;
left: 0;
width: 100%;
}
</STYLE>
<SCRIPT>
var g_oContentResults = window.opener.g_oContentResults;
var g_listQuizzes = window.opener.g_listQuizzes;
var g_oPrintOptions = window.opener.g_oPrintOptions;
function FormatDate(dtmDate)
{
var strResult = "";
var nHours = dtmDate.getHours();
var strAM = "am";
var nMinutes = dtmDate.getMinutes();
var strMinutes = "" + nMinutes;
if (nMinutes < 10)
{
strMinutes = "0" + nMinutes;
}
if (nHours == 12)
{
strAM = "pm";
}
if (nHours > 12)
{
nHours -= 12;
strAM = "pm";
}
strResult += "<P>"
strResult += g_arrMonths[dtmDate.getMonth()] + " ";
strResult += dtmDate.getDate() + ", ";
strResult += dtmDate.getFullYear() + " ";
strResult += nHours + ":";
strResult += strMinutes + " ";
strResult += strAM;
strResult += "</P>"
return strResult;
}
</SCRIPT>
</HEAD>
<BODY>
<center>
<img src="../quizimages/cert.jpg">
</center>
<p>
<SCRIPT>
var namedata = <?php echo json_encode($current_user->user_firstname . ' ' . $current_user->user_lastname); ?>;
document.write("<H2>Certificate of Completion</H2></br></br>");
document.write("<H3>This Certifies That</br>");
document.write("" + "John Doe" + "</br>");
//document.write("" + namedata + "</br>");
document.write("Has Successfully Completed The</br>");
//document.write("" + strTitle + "</br></br>");
document.write("<I>" + "Maryland Triage System Course" + "</I></H3></br>");
document.write("</br></br>");
document.write( FormatDate(g_oContentResults.dtmFinished));
document.write("Score: " + g_listQuizzes[g_oPrintOptions.strMainQuizId].nPtScore + "</br></br>" );
document.write('<center> <input type=button onClick="window.print()" value="Print This Page"/> </center>');
</SCRIPT>
</BODY>
</HTML>
Heading tags are bold by default...just override it.
.normal {
font-weight:normal;
}
<h3>DEFAULT</h3>
<h3 class="normal">NORMAL</h3>
I have been following a very annoying tutorial on how to make a php calender. I have got to the final bit but where i have a button to display the information from the database on certain dates when i click it nothing happens. It is supposed to bring up a box displaying the information. There is no error message or anything just nothing happens when you click it. Maybe ive made a simple mistake? Does anyone have any ideas? I need to finish this tonight :(
Thanks
events.php
<?php
$deets = $_POST['deets'];
$deets = preg_replace('#[^0-9/]#i', '', $deets);
include ("connect.php");
$events = '';
$query = mysql_query('SELECT description FROM events WHERE evdate = "'.$deets.'"');
$num_rows = mysql_num_rows($query);
if($num_rows > 0) {
$events .= '<div id="eventsControl"><button onMouseDown="overlay()">Close</button><br /><br /><b> ' . $deets . '</b><br /><br /></div>';
while($row = mysql_fetch_array($query)){
$desc = $row['description'];
$events .= '<div id="eventsBody">'. $desc . '<br /><hr><br / ></div>';
}
}
echo $events;
?>
connect.php
<?php
$db_host = "localhost";
$db_username = "root";
$db_pass = "heyman";
$db_name = "ecalandar";
$conn = mysql_connect("$db_host", "$db_username","$db_pass") or die ("could not connect
to mysql");
mysql_select_db("$db_name") or die ("no database");
?>
calCSS.css
#calendar_wrap {
width: 924px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.title_bar {
width: 100%;
height: 30px;
}
.previous_month {
float: left;
width: 308px;
height: 30px;
text-align: left;
}
.show_month {
float: left;
width: 308px;
height: 30px;
text-align: center;
}
.next_month {
float: left;
width: 308px;
height: 30px;
text-align: right;
}
.week_days {
width: 100%;
}
.days_of_the_week {
float: left;
width: 14%;
text-align: center;
}
.cal_day {
position: relative;
float: left;
margin-right: 4px;
margin-bottom: 4px;
width: 128px;
height: 95px;
background-color: #9C9;
}
.day_heading {
position: relative;
float: left;
width: 40px;
height: 16px;
padding: 6px;
color: #000;
font-family: Arial;
font-size: 14px;
}
.openings {
width: 100%;
clear:left;
text-align: center;
}
.non_cal_day {
position: relative;
float: left;
margin-right: 4px;
margin-bottom: 4px;
width: 128px;
height: 95px;
background-color: #CCC;
}
.clear {
clear: both;
}
<!-- overlay --!>
body {
height:100%;
margin:0;
padding:0;
}
#overlay {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 2000;
background: #000;
opacity: .9;
}
#events {
display: none;
width:500px;
border:4px solid #9C9;
padding:15px;
z-index: 3000;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
height: 400px;
overflow: scroll;
}
#eventControl {
display: none;
width: 100%;
height:30px;
z-index: 3000;
}
#eventBody {
display: none;
width: 100%;
z-index: 3000;
}
calendar_start.php
<?php
$showmonth = $_POST['showmonth'];
$showyear = $_POST['showyear'];
$showmonth = preg_replace('#[^0-9]#i', '', $showmonth);
$showyear = preg_replace('#[^0-9]#i', '', $showyear);
$day_count = cal_days_in_month(CAL_GREGORIAN, $showmonth, $showyear);
$pre_days = date('w', mktime(0,0,0, $showmonth, 1, $showyear));
$post_days = (6 - (date('w', mktime(0,0,0, $showmonth, $day_count,$showyear))));
echo '<div id="calendar_wrap">';
echo '<div class="title_bar">';
echo '<div class="previous_month"><input name="myBtn" type="submit" value="Previous
Month" onClick="javascript:last_month();"></div>';
echo '<div class="show_month">' . $showmonth . '/' . $showyear . '</div>';
echo '<div class="next_month"><input name="myBtn" type="submit" value="Next Month"
onClick="javascript:next_month();"></div>';
echo '</div>';
echo '<div class="week_days">';
echo '<div class="days_of_the_week">Mon</div>';
echo '<div class="days_of_the_week">Tue</div>';
echo '<div class="days_of_the_week">Wed</div>';
echo '<div class="days_of_the_week">Thur</div>';
echo '<div class="days_of_the_week">Fri</div>';
echo '<div class="days_of_the_week">Sat</div>';
echo '<div class="days_of_the_week">Sun</div>';
echo '<div class="clear"></div>';
echo '</div>';
/* Previous Month Filler Days */
if ($pre_days != 0) {
for($i = 1 ; $i<=$pre_days;$i++) {
echo '<div class="non_cal_day"></div>';
}
}
/* Current Month */
//connect to mysql
include ("connect.php");
//
for($i=1; $i<= $day_count; $i++) {
//get events logic
$date = $showmonth.'/'.$i.'/'.$showyear;
$query = mysql_query('SELECT id FROM events WHERE evdate = "'.$date.'"');
$num_rows = mysql_num_rows($query);
if($num_rows > 0) {
$event = "<input name = '$date' type = 'submit' value='Details' id='$date' onClick =
'javascript:show_details(this);'>";
}
//end get events
echo '<div class="cal_day">';
echo '<div class="day_heading">' . $i . '</div>';
//show events button
if($num_rows != 0) { echo "<div class='openings'><br />".$event."</div>";
}
//end button
echo '</div>';
}
/* Next Month Filler Days */
if ($post_days != 0) {
for ($i=1; $i<=$post_days; $i++) {
echo '<div class="non_cal_day"></div>';
}
}
echo '</div>';
?>
show_calendar.php
<!DOCTYPE html>
<html>
<head>
<link href="calCss.css" rel="stylesheet" type="text/css" media="all" />
<script language="JavaScript" type="text/javascript">
function initialCalendar(){
var hr = new XMLHttpRequest();
var url = "calendar_start.php";
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var year = currentTime.getFullYear();
showmonth = month;
showyear = year;
var vars = "showmonth="+showmonth+"&showyear="+showyear;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("showCalendar").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("showCalendar").innerHTML = "processing...";
}
</script>
<script language="JavaScript" type="text/javascript">
function next_month(){
var nextmonth = showmonth + 1;
if (nextmonth > 12) {
nextmonth = 1;
showyear = showyear + 1;
}
showmonth = nextmonth;
var hr = new XMLHttpRequest();
var url = "calendar_start.php";
var vars = "showmonth="+showmonth+"&showyear="+showyear;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("showCalendar").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("showCalendar").innerHTML = "processing...";
}
</script>
<script language="JavaScript" type="text/javascript">
function last_month(){
var lastmonth = showmonth - 1;
if (lastmonth < 1) {
lastmonth = 12;
showyear = showyear - 1;
}
showmonth = lastmonth;
var hr = new XMLHttpRequest();
var url = "calendar_start.php";
var vars = "showmonth="+showmonth+"&showyear="+showyear;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("showCalendar").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("showCalendar").innerHTML = "processing...";
}
</script>
<script type="text/javascrip">
function overlay() {
el = document.getElementById("overlay");
el.style.display = (el.style.display == "block") ? "none" : "block";
el = document.getElementById("events");
el.style.display = (el.style.display == "block") ? "none" : "block";
el = document.getElementById("eventsBody");
el.style.display = (el.style.display == "block") ? "none" : "block";
}
</script>
<script language="JavaScript" type="text/javascript">
function show_details(theId){
var deets = (theId);
el = document.getElementById("overlay");
el.style.display = (el.style.display == "block") ? "none" : "block";
el = document.getElementById("events");
el.style.display = (el.style.display == "block") ? "none" : "block";
var hr = new XMLHttpRequest();
var url = "events.php";
var vars = "deets="+deets;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState ==4 && hr.status == 200 {
var return_data = hr.responseText;
document.getElementById("events").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("events").innerHTML = "processing...";
}
</script>
</head>
<body onLoad="initialCalendar();">
<div id="showCalendar"></div>
<div id="overlay"></div>
<div id="events"></div>
</div>
</body>
</html>
without looking too closely at your code i noticed you are passing strings to your (outdated and dangerous) mysql functions
$db_host = "localhost";
$db_username = "root";
$db_pass = "heyman";
$db_name = "ecalandar";
$conn = mysql_connect($db_host, $db_username,$db_pass) or die ("could not connect to mysql");
mysql_select_db($db_name) or die ("no database");
you should do some reading on pdo/mysqli
So im trying to have an upload with a progress bar, i installed uploadprogress pecl, and the upload worked perfectly if the action in the form leads to upload.php, any other name, and it stops working.
If the name is not upload.php the output is simply "100" (which can be seen why below with the getprogress.php file)
this is the form: (this versions works, as the file is upload.php)
<form method="post" action="/test/upload.php" enctype="multipart/form-data" id="upload-form" target="upload-frame">
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="submit" name="submit" value="Upload!">
</form>
</div>
<div style="float:left;width:100%;">
<div id="progress-bar"></div>
</div>
<iframe id="upload-frame" name="upload-frame"></iframe>
this is the jquery:
<script>
(function ($) {
var pbar;
var started = false;
$(function () {
$('#upload-form').submit(function() {
pbar = $('#progress-bar');
pbar.show().progressbar();
$('#upload-frame').load(function () {
started = true;
});
setTimeout(function () {
updateProgress($('#uid').val());
}, 1000);
});
});
function updateProgress(id) {
var time = new Date().getTime();
$.get('../uploadprogress/getprogress.php', { uid: id, t: time }, function (data) {
var progress = parseInt(data, 10);
if (progress < 100 || !started) {
started = progress < 100;
updateProgress(id);
}
started && pbar.progressbar('value', progress);
});
}
}(jQuery));
</script>
this is the file getprogress.php
<?php
if (isset($_GET['uid'])) {
// Fetch the upload progress data
$status = uploadprogress_get_info($_GET['uid']);
if ($status) {
// Calculate the current percentage
echo round($status['bytes_uploaded']/$status['bytes_total']*100, 1);
}
else {
// If there is no data, assume it's done
echo 100;
}
}
?>
ive spent about 5 hours on this trying to figure out why, and i cant. help would be greatly appreciated.
You can use this class, without using jquery:
<?php
/**
* Progress bar for a lengthy PHP process
* http://spidgorny.blogspot.com/2012/02/progress-bar-for-lengthy-php-process.html
*/
class ProgressBar {
var $percentDone = 0;
var $pbid;
var $pbarid;
var $tbarid;
var $textid;
var $decimals = 1;
function __construct($percentDone = 0) {
$this->pbid = 'pb';
$this->pbarid = 'progress-bar';
$this->tbarid = 'transparent-bar';
$this->textid = 'pb_text';
$this->percentDone = $percentDone;
}
function render() {
//print ($GLOBALS['CONTENT']);
//$GLOBALS['CONTENT'] = '';
print($this->getContent());
$this->flush();
//$this->setProgressBarProgress(0);
}
function getContent() {
$this->percentDone = floatval($this->percentDone);
$percentDone = number_format($this->percentDone, $this->decimals, '.', '') .'%';
$content .= '<div id="'.$this->pbid.'" class="pb_container">
<div id="'.$this->textid.'" class="'.$this->textid.'">'.$percentDone.'</div>
<div class="pb_bar">
<div id="'.$this->pbarid.'" class="pb_before"
style="width: '.$percentDone.';"></div>
<div id="'.$this->tbarid.'" class="pb_after"></div>
</div>
<br style="height: 1px; font-size: 1px;"/>
</div>
<style>
.pb_container {
position: relative;
}
.pb_bar {
width: 100%;
height: 1.3em;
border: 1px solid silver;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
.pb_before {
float: left;
height: 1.3em;
background-color: #43b6df;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.pb_after {
float: left;
background-color: #FEFEFE;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
.pb_text {
padding-top: 0.1em;
position: absolute;
left: 48%;
}
</style>'."\r\n";
return $content;
}
function setProgressBarProgress($percentDone, $text = '') {
$this->percentDone = $percentDone;
$text = $text ? $text : number_format($this->percentDone, $this->decimals, '.', '').'%';
print('
<script type="text/javascript">
if (document.getElementById("'.$this->pbarid.'")) {
document.getElementById("'.$this->pbarid.'").style.width = "'.$percentDone.'%";');
if ($percentDone == 100) {
print('document.getElementById("'.$this->pbid.'").style.display = "none";');
} else {
print('document.getElementById("'.$this->tbarid.'").style.width = "'.(100-$percentDone).'%";');
}
if ($text) {
print('document.getElementById("'.$this->textid.'").innerHTML = "'.htmlspecialchars($text).'";');
}
print('}</script>'."\n");
$this->flush();
}
function flush() {
print str_pad('', intval(ini_get('output_buffering')))."\n";
//ob_end_flush();
flush();
}
}
echo 'Starting…<br />';
$p = new ProgressBar();
echo '<div style="width: 300px;">';
$p->render();
echo '</div>';
for ($i = 0; $i < ($size = 100); $i++) {
$p->setProgressBarProgress($i*100/$size);
usleep(1000000*0.1);
}
$p->setProgressBarProgress(100);
echo 'Done.<br />';
?>
You can call the setProgressBarProgress function inside a while process, depending on your needs!!! It's great!.