Jump to content

Archived

This topic is now archived and is closed to further replies.

AV1611

Need a Critique and some suggestions

Recommended Posts

I always wanted to create an "SPREADSHEET" looking display from queries returns. I created this using HTML/PHP/CSS. It does not contain any JS.

A. I would like to know about the general asthetics of the display
B. I would like any suggesitons for improvements.

Please keep in mind, this is created dynamically, as the post below shows.

Things I don't know how to do (yet) would be:

How to center text in an <input type="text"> cell
User Resizable Cells
User Resizable Table
Ability to select specific cells
and the big one:
It would be really cool if the ENTIRE contents of the cell would display in a popup/balloon when you hover (or perhaps click) over a cell.

Here is the link:
[a href=\"http://baptistrevival.com:8081/test/divtable.php\" target=\"_blank\"]http://baptistrevival.com:8081/test/divtable.php[/a]
Here is the code:
[code]
<style>
table, tr, th, td {
border-collapse: collapse;
text-align:center;
margin:0;
padding:0;
width: 100%;
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
}
INPUT{
  MARGIN:0PX;
  PADDING:0PX;
  font-family:TrebuchetMS;
  font-size:10pt;
  font-weight:bold;
  background-color:#ffffff;
  border-color:#C0C0C0;
  border-style:RIDGE;
  border-width:1px;
}
INPUT.label{
    background-color:#e0e0e0;
    }
body
  {
   scrollbar-base-color: #FFFFFF;
   scrollbar-arrow-color: #808080;
   scrollbar-darkshadow-color: #c0c0c0;
   scrollbar-face-color: #FFFFFF;
   scrollbar-highlight-color: #c0c0c0;
   scrollbar-shadow-color: #c0c0c0;
   scrollbar-3dlight-color: #ffffff;
background-color: #ffffff;}
</style>
<body>
<?
function col2str($a) {
    return ($a-->26?chr(($a/26+25)%26+ord('A')):'').chr($a%26+ord('A'));
    }
$i=1;
$n=1;
?>
<div style="border : solid 1px #000000; background : #c0c0c0; color : #ff0000; padding : 1px; width : 770px; height : 400px; overflow : auto; ">
<table WIDTH="100%">
<tr>
<TD><br/></TD>
<?php
while($i<9){
    $colname = col2str($i);
    echo '<TD WIDTH="10"><INPUT class="label"  SIZE="10"  TYPE="TEXT" VALUE="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'.$colname.'" readonly></TD>';
    $i++;
    }
?>
</TR>
<?php
$user="";
$host="localhost";
$password="";
$database = "bible";
mysql_connect($host,$user,$password);
mysql_select_db($database);
$result = mysql_query("SELECT * FROM Bible where book like 'Genesis' order by `key`");
while ($row=mysql_fetch_array($result)){
    echo '<tr>';
    echo '<TD WIDTH="10"><INPUT  SIZE="3"  TYPE="TEXT" VALUE="'.$n.'" class="label" readonly></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[0].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[1].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[2].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[3].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[4].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[5].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[6].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[7].'"></TD>';
    echo '</tr>';
    $n++;
    }
?>
</table>
</div>
</body>
[/code]

Share this post


Link to post
Share on other sites
Looks okay, maybe you could use some graphics to give it the look and feel of a program like Excel.

You could use some js to allow resizing of cells and other features like that.

Share this post


Link to post
Share on other sites
I don't know JS at all...

If someone could give me a hint of how to make the cells resizable... that would be Great!

[!--quoteo(post=349815:date=Feb 27 2006, 08:29 AM:name=Javizy)--][div class=\'quotetop\']QUOTE(Javizy @ Feb 27 2006, 08:29 AM) [snapback]349815[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Looks okay, maybe you could use some graphics to give it the look and feel of a program like Excel.

You could use some js to allow resizing of cells and other features like that.
[/quote]

Share this post


Link to post
Share on other sites
Hi,

Well all it seems that you have done is to output some data in table format with css - Nothing major new to me.
If you are going to make a spreadsheet online application - then you are going to HAVE to use javascript. And for which there are many javascript spreadsheets out there you could easily use and integrate with php etc.

For example a search in google for "javascript spreadsheet". The first result:
[a href=\"http://www.blueshoes.org/en/javascript/spreadsheet/\" target=\"_blank\"]http://www.blueshoes.org/en/javascript/spreadsheet/[/a]

Cells can be resized etc.

Best of Luck,
-steve

P.S. if you want to know how to resize cells in javascript - look at the above one and study their code.

Share this post


Link to post
Share on other sites
Thanks,

This is as much a Learning exercise as anything. I'll take your suggestion and pick their example apart.



[!--quoteo(post=349828:date=Feb 27 2006, 09:22 AM:name=steviewdr)--][div class=\'quotetop\']QUOTE(steviewdr @ Feb 27 2006, 09:22 AM) [snapback]349828[/snapback][/div][div class=\'quotemain\'][!--quotec--]

Hi,

Well all it seems that you have done is to output some data in table format with css - Nothing major new to me.
If you are going to make a spreadsheet online application - then you are going to HAVE to use javascript. And for which there are many javascript spreadsheets out there you could easily use and integrate with php etc.

For example a search in google for "javascript spreadsheet". The first result:
[a href=\"http://www.blueshoes.org/en/javascript/spreadsheet/\" target=\"_blank\"]http://www.blueshoes.org/en/javascript/spreadsheet/[/a]

Cells can be resized etc.

Best of Luck,
-steve

P.S. if you want to know how to resize cells in javascript - look at the above one and study their code.
[/quote]

Share this post


Link to post
Share on other sites
Why did you put the contents of the ENTIRE BIBLE on a demonstration page? It takes an eternity and a half to load! Put a limit statement in your query or something!

Share this post


Link to post
Share on other sites
I'm sorry, I didn't realize I didn't add the limit ... I was going to...
[!--quoteo(post=350029:date=Feb 27 2006, 05:42 PM:name=moberemk)--][div class=\'quotetop\']QUOTE(moberemk @ Feb 27 2006, 05:42 PM) [snapback]350029[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Why did you put the contents of the ENTIRE BIBLE on a demonstration page? It takes an eternity and a half to load! Put a limit statement in your query or something!
[/quote]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.