Solved

Aotofit screen with this

Posted on 2013-06-20
7
170 Views
Last Modified: 2013-07-25
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
Comment
Question by:team2005
  • 4
  • 3
7 Comments
 
LVL 2

Author Comment

by:team2005
Comment Utility
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
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
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
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 2

Author Comment

by:team2005
Comment Utility
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
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
???, 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
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
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
 
LVL 2

Author Closing Comment

by:team2005
Comment Utility
thanks
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now