• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 179
  • Last Modified:

Aotofit screen with this

Hi!

Have this php page:

<?php
error_reporting(E_ALL);
require_once('RAY_EE_config.php');
$table1 = 'Spm_Lokasjon';
// ACCESS TO THIS PAGE IS TESTED BUT NOT CONTROLLED
if ($uid = access_control(TRUE))
{
   $brukerID = brukerident('xxx');
   $kundeid = kundeid();
   $lokk = 71234567891023;
   $spid = 20;
   $navn = 'TEST AV SCALING';
}
else
{
        header("location: login.php");
	    exit;
}
?>
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Test system</title>

</head>

<body>
<link rel="stylesheet" href="default.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<br><br>
<table summary="Services, or Links box template" class="servicesT" cellspacing="1" border="0">
<tr><td width='100%' class="servHd" height="40"><?php echo $navn;?></td></tr>
</table>
<br>
<table>
<tr>
<?php
    for ($i = 1; $i <=7; $i++) { ?>
        
		  <td width='100%'><Div id="SCALKN"><?php echo $i;?></Div></td>
		
		<?php }?>		
</tr>
</table>


</body>
</html>

Open in new window



***************CSS*************

html, body
{
    height: 100%;
}

body
{
    font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;    
    margin: 0;
    background-color: #614912; 
	width:100%;
}

/*--------------------*/
a:link    {
  /* Applies to all unvisited links */
  text-decoration:  none;
  } 
#login
{
    background-color: #614912;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    position: absolute;
	width: 100%;
    top: 50%;
    left: 50%;
    z-index: 0;
    -webkit-border-radius:0px;
	webkit-appearance: none;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-appearance: none;
}

#GULKN
{
    background-color: #e4ab15;
	font: 30px Arial, Helvetica;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    max-width: 50px;
	color: #ffffff;
	cursor: pointer;
	position: left;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-appearance: none;
}

/*--------------------*/

h1
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}

h1:after, h1:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;   
}

h1:after
{ 
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);      
    right: 0;
}

h1:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}

h1:after2
{ 
    background: #614912;    
    right: 0;
}

h1:before2
{
    background: #614912;
    left: 0;
}

/*--------------------*/

fieldset
{
    border: 0;
    padding: 0;
    margin: 0;
}

/*--------------------*/

#inputs input
{
    padding-right: 5px;
    margin: 0 0 10px 0;
	font: 20px Arial;
	height: 45px;
	color:#ffffff; 
	background-color: #96825a;
	border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	width: 100%;
}

#uid
{
	height:20px;
	padding:10px 25px;
}

#pwd
{
    height:20px;
	 padding:10px 25px;
}
#username
{
background-repeat:no-repeat;
background-position:right; 
text-align:center;
background-origin:content-box;
}

#tekstsvar
{
background-repeat:no-repeat;
background-position:right; 
background-color: #d1c5b0;
text-align:center;
font: 20px Arial;
width:100%;
background-origin:content-box;
}

#password
{
background-repeat:no-repeat;
background-position:right; 
text-align:center;
background-origin:content-box;
}
#inputs input:focus
{
    background-color: #96825a;
    outline: none;
	width: 100%;
}

/*--------------------*/

#LOGIN
{		
    background-color: #e4ab15;
    float: center;
    height: 70px;
    width: 100%;
    cursor: pointer;
    font: 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    -webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-appearance: none;
}

#JAKNAPP
{		
    background-color: #e4ab15;
    float: center;
    height: 55px;
    width: 100%;
    cursor: pointer;
    font: 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-appearance: none;
}

#NEIKNAPP
{		
    background-color: #880051;
    float: center;
    height: 55px;
    width: 100%;
    cursor: pointer;
    font: 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-appearance: none;
}

#LOGGUT
{		
    background-color: #d1c5b0;
    float: center;
    height: 55px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font: 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
	border-radius:10px;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-appearance: none;
}

#submit2
{		
    background-color: #96825a;
    float: center;
    height: 40px;
    width: 100%;
	margin:0;
    cursor: pointer;
    font: 20px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    -webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-appearance: none;
}

table.hoved
{
    background-color: #614912;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    margin: -150px 0 0 -230px;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
	width: 100%;
}
table.servicesT
{ font-family: Verdana;
font-weight: normal;
font-size: 20px;
color: #404040;
background-color: #fafafa;
border: 0px #614912 solid;
border-collapse: collapse;
border-spacing: 0px;
margin-top: 0px;
width: 100%;
}


table.servicesT td.servHd
{ border-bottom: 1px solid #614912;
background-color: #96825a;
text-align: center;
font-family: Verdana;
font-size: 20px;
text-align: center;
color: #ffffff;
width: 100%;
}

table.servicesT td.header1
{ 
border-bottom: 1px solid #614912;
background-color: #614912;
font-family: Verdana;
font-size: 20px;
text-align: left;
color: #614912;
hight: 50px;
width: 100%;
}




table.servicesT td
{ border-bottom: 0px solid #614912;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
color: #404040;
background-color: #d1c5b0;
text-align: center;
padding-left: 3px;
width: 100%;
}

able.servicesJN td
{ 
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
color: #404040;
background-color: #ffffff;
text-align: center;
padding-left: 3px;
width: 100%;
}

table.TESTE td
{
  color: #ffffff;
}
.servBodL 
{ 
background-color: #d1c5b0;
border-left: 0px solid #614912; 
} 
.servBodL_medborder
{ 
background-color: #d1c5b0;
border-left: 0px solid #614912; 
border-bottom: 1px solid #ffffff;
} 

Open in new window


How do I automatically scaled these buttons to fill the whole screen?

If the user select a number, example 1. I must store this value in a variable
and the selected button/square must change background color.
How can i do this ?
0
team2005
Asked:
team2005
  • 4
  • 3
1 Solution
 
team2005Author Commented:
Hi!

Have done part of this:

<?php
error_reporting(E_ALL);
require_once('RAY_EE_config.php');
$table1 = 'Spm_Lokasjon';
// ACCESS TO THIS PAGE IS TESTED BUT NOT CONTROLLED
if ($uid = access_control(TRUE))
{
   $brukerID = brukerident('xxx');
   $kundeid = kundeid();
   $lokk = 71234567891023;
   $spid = 20;
   $navn = 'TEST AV SCALING';
}
else
{
        header("location: login.php");
	    exit;
}
?>
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Test system</title>
<script type="text/javascript">
// Specify the normal table row background color
//   and the background color for when the mouse 
//   hovers over the table row.

var TableBackgroundNormalColor = "#d1c5b0";
var TableBackgroundMouseoverColor = "#e4ab15";
var test1;
// These two functions need no customization.
function ChangeBackgroundColor(row) { row.style.backgroundColor = TableBackgroundMouseoverColor; }
function RestoreBackgroundColor(row) 
{ 
  row.style.backgroundColor = TableBackgroundNormalColor; 
  $test1 = row;
}
</script>

</head>

<body>
<link rel="stylesheet" href="default.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<br><br>
<table summary="Services, or Links box template" class="servicesT" cellspacing="1" border="0">
<tr><td width='100%' class="servHd" height="40"><?php echo $navn;?></td></tr>
</table>
<br>
<table width="100%" border="0"  border-right: "blank" style="ChangeBackgroundColor(this)">
<tr>
<fieldset id="actions" width="100%">
<?php
    for ($i = 1; $i <=5; $i++) { ?>
        
		  <td onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)" width="16%"><Div id="SCALKN"><?php echo $i;?></Div></td>
		
		<?php }?>		
</fieldset>
</tr>
</table>

<br><br><br>
<table width="100%">
<tr>

<fieldset id="actions" width="100%">

<td width="50%"><a href="http://www.softkey.no/webtest/neisvar.php?lokk=<?php echo $lokk; ?>&Kunde=<?php echo $kundeid; ?>&Navn=<?php echo $navn; ?>&Svar=Videre&spid=<?php echo $spid; ?>"><input type="submit" id="JAKNAPP" value="Videre"></a></td>
<td width="50%"><a href="http://www.softkey.no/webtest/hovedside.php"><input type="submit" id="NEIKNAPP" value="Avslutt"></a></td>
</fieldset>
</tr>
</table>
</body>
</html>

My problems remaining is:

1. Must set defalut background color on my Table, how ?
2. When user select a square, the backcolor change ok. But how to keep this color
    when table colum is loosing his focus.
3. How to store the value of the table to a variable ?

Open in new window

0
 
Slick812Commented:
greetings  team2005, , I looked at your question and all the code you posted above,  however, there are so many HTML errors, and Style errors and javascript errors, I almost did not respond to this question. but you seem to need help, I have NOT tried to use your codes in a browser to see what they look like, mostly because you give so MUCH CSS that is NOT used in ANY of the HTML you have, and I can not take time to try and sort out the used from the un-used CSS, looks like most of it is a copy and paste from some other source that you did not write, and you may not know what it means or how to do things in that CSS.

You ask - "How do I automatically scaled these buttons to fill the whole screen?" , This makes no sense to me, as I can not determine what you may mean by "button" , and  " fill the whole screen" seems like non-sense to me.

also you say - "select a number, example 1", but you do NOT say where this number is in your code, I have to guess that it's in this TABLE -
<table width="100%" border="0"  border-right: "blank" style="ChangeBackgroundColor(this)">
   ++for your INFO this style="ChangeBackgroundColor(this)"  is completely WRONG, the ChangeBackgroundColor(this) is javascript NOT CSS
   ++ you can try  style="background:#e88;" to have a Background color for the TABLE, which may answer -"set default background color on my Table, how ?"

although you have the <td> in this table as being a "mouseOver" event, there is NO Click or touch event to designate this "number" as "Selected",

you say - "I must store this value in a variable", I guess the "number value" so , , ,  the <td> does NOT have any <input> type of "value", but it does have an innerHTML  value you can read in a javascript "onclick" event,
I can do the HTML and CSS and javascript for this kind of thing, but the way you have your HTML and CSS and javascript now needs some corrections and improvements.

   ++for your INFO, almost ALL web pages use CSS and not javascript for mouse-Over background color change, as far as your design goes, I would change the border color on a mouse-Over, since you want to change the "Selected" background color with each TD that is selected .

Maybe take this one step at a time? since you seem to be learning the whole web page design thing?
0
 
Slick812Commented:
to start, here is some HTML just to do some CSS on your Number Table and it's <td>.
Please see if you can get to understand the CSS here, like text-align: center; and especially the  :hover ,
and change the Colors to have a different Look.
<style>
.numtable {
width: 100%;
background:#e88;
border:0;
}

.numtable td {
text-align: center;
border:2px solid #000;
}

.numtable td:hover {
color:#fff;
border-color:#fff;
}
</style>
<br>
<table id="numSelect" class="numtable">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>

Open in new window

this does NOT do any javascript yet for "Select", can be added later.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
team2005Author Commented:
Hi Slick812

Have fix this now, exept to store the value of what is selected

Have tryed to find out how to store this value to a variable but no luck ?

Hope you can help me figer out how to store the selected coulum...

Here is my code:

<table width="100%" border="0" id="ABC">
<tr>
<fieldset id="actions" width="100%">
<?php
    for ($i = 1; $i <=$typsp; $i++) { ?>
        
		  <td onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)" onclick="teste(this)" onmouseup="teste(this)" onload="ChangeBackgroundColor(this)" width="16%"><Div id="SCALKN"><?php echo $i;?></Div></td>
		
		<?php }?>		
</fieldset>
</tr>
</table>

Open in new window


***********JAVASCRIP**************

<script type="text/javascript">
// Specify the normal table row background color
//   and the background color for when the mouse 
//   hovers over the table row.

var TableBackgroundNormalColor = "#d1c5b0";
var TableBackgroundMouseoverColor = "#d1c5b0";
var Testfarge = "#e4ab15";
// These two functions need no customization.
function ChangeBackgroundColor(row) { row.style.backgroundColor = TableBackgroundMouseoverColor; }
function RestoreBackgroundColor(row) { row.style.backgroundColor = TableBackgroundNormalColor; }
function teste(row)
{ 
  // STORE row to variable ?
}
</script>

Open in new window


I must be able to use variable in my html code, after i have stored the value.
0
 
Slick812Commented:
???, I really can not help you here with the  <td> creation code you have supplied as
<table width="100%" border="0" id="ABC">
<tr>
<fieldset id="actions" width="100%">
<?php
    for ($i = 1; $i <=$typsp; $i++) { ?>
        
		  <td onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)" onclick="teste(this)" onmouseup="teste(this)" onload="ChangeBackgroundColor(this)" width="16%"><Div id="SCALKN"><?php echo $i;?></Div></td>
		
		<?php }?>		
</fieldset>
</tr>
</table>

Open in new window

first your HTML for the Table is WRONG! ! You should have used some in my example code,
You CAN NOT at any time or way, , place Other TAGS like <fieldset> between the Table elements Like <tr><td>, So you need to eliminate the <fieldset> from between the table elements,  NEXT the <fieldset> only works on FORM Input Elements, and does not work on a table <td> elements, so you do not need it here at all.
next you have this width="16%", , WHY? ? it is useless and incorrect for the LOOP <td> additions you use.

As far as getting and storing a Value such as 1, 2 or 3, from the :<td> you make this difficult with this -
<Div id="SCALKN"><?php echo $i;?></Div>
having  the <div> in the innerHTML of the <td>, makes it difficult, and your code is wrong in that ALL HTML  IDS HAVE TO BE Unique, and yet you set all the ID to "SCALKN", , and I can not see where this  <Div id="SCALKN"> ever does anything or makes any diffetence in display or javascript?
0
 
Slick812Commented:
ok , you seem to be having trouble understanding what I say, and the correct way to do this sort of thing, so you may try my code below, and see if it works for you, I took out the <fieldset> and left in the <Div id="SCALKN">, even though you may not know what it does if anything, but I have added  <div id="SCALKN<?php echo $i;?>"><?php echo $i;?></div>  the PHP $i to the ID so it will be unique. This uses some CSS in the <style> to set the background color of <td> , the javascript way you had before was just a bad way.
I redid your rather useless javascript, which you do not seem to understand, an used just the  teste(this)  function, which is more useful now -
<style>
.numtable {
width: 100%;
border:0;
}

.numtable td {
background:#d1c5b0;
}
</style>

<script>/* <![CDATA[ */
var selNumber=0;//Global variable selNumber, has the current Select starting at 1, if is 0 NO SELECTION

function teste(row, numberS) {
if (numberS == selNumber) {
     return; // if click current select do nothing
    }
selNumber = numberS;// set Global variable selNumber to the new number in numberS
var tbl = document.getElementById("ABC");// get the TABLE DOM
var tds = tbl.getElementsByTagName("td");// get all <td> elements
for(var i=0;i< tds.length;i++) {
    tds[i].style.backgroundColor = #d1c5b0;// change all <td> background to default
    }
row.style.backgroundColor = #e4ab15;// change SELECTED <td> background to new color

// Below is just for testing, remove alert( ) once you see the corrct Select Number here
alert("The Select Number is now= "+selNumber);
}
/* ]]> */</script>

<table class="numtable" id="ABC">
<tr>
<?php
for ($i = 1; $i <=$typsp; $i++) { ?>
    <td onclick="teste(this,<?php echo $i;?>)"><div id="SCALKN<?php echo $i;?>"><?php echo $i;?></div></td>
<?php }?>		
</tr>
</table>

Open in new window

this may or may not work for you, but does have things in it that seem more correct and useful to me
0
 
team2005Author Commented:
thanks
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now