Solved

Aotofit screen with this

Posted on 2013-06-20
7
172 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
ID: 39262193
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
ID: 39266609
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
ID: 39267004
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Author Comment

by:team2005
ID: 39270441
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
ID: 39272240
???, 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
ID: 39272492
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
ID: 39354255
thanks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

947 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

22 Experts available now in Live!

Get 1:1 Help Now