Solved

Why dosent the picture show up on my mobile phone (iphone 5) or on my ipad ?

Posted on 2013-06-17
5
170 Views
Last Modified: 2013-07-25
Hi!

Have this webpage:

<?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');
   $navn = '';
   $navn = $_GET['Navn'];
   $lokk = $_GET['lokk'];
   $svar = $_GET['Svar'];   
   $teksten = $_GET['Teksten'];
   $kundeid = kundeid();
   
   if ($svar=='reg')   
   {
      $test=oppdaterlokasjonen($lokk,$kundeid);
   }
    if ($svar=='Videre')   
   {
	   $stat_trans = transaksjoner('TEST123',10,'DETTE ER EN TEST',$lokk,'Nei',$teksten,'','2013-05-05',$kundeid,$brukerID);
	   $sjekkomfleresp = sjekk_om_flere_sposmal($lokasjon,$kundeid);
	   if ($sjekkomfleresp=='0')
	   {
	      $sjekkst = oppdaterkontroller_status($lokk,$kundeid,$brukerID,0);
	      $lokk = hent_neste_kontroller($kundeid,$brukerID);
		  if ($lokk==0)
		  {
		    $oppdst=oppdaterkontroller_status($lokk,$kundeid,$brukerID,1); 
			oppdater_spmorsmal($lokk,$kundeid,1);
		    header("location: http://www.softkey.no/webtest/hovedside.php");
	      }
		  else
		  {
		     header("location: http://www.softkey.no/webtest/hovedside.php");
		  }
		  exit;
	   }
   }   
}
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>
<table summary="Services, or Links box template" class="servicesT" cellspacing="1" border="0">
<tr><td colspan="2" class="servHd" height="40"><?php echo $navn;?></td></tr>
<br>

<tr>
<td class="servBodL" width="100%">
	<textarea id="tekstsvar" name="Teksten" width="100%" rows="10" style="background-image: url(images/penn.png"></textarea>
</td>
</tr>
<br>
<tr>
<td class="servBodL" width="100%">
<input id="file-input" type="file" name="image" accept="image/*" capture="camera" />
</td>
</tr>
<br><br>
</table>
<br><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"><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>

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



My problem is that this code:
<td class="servBodL" width="100%">
	<textarea id="tekstsvar" name="Teksten" width="100%" rows="10" style="background-image: url(images/penn.png"></textarea>
</td>

The picture is not shown on my mobile phone or ipad. But are shown on my PC using firefox.

What do i do to autosize this <textare , so the picture will be shown on my mobile or ipad ?

Open in new window

0
Comment
Question by:team2005
  • 3
  • 2
5 Comments
 
LVL 13

Expert Comment

by:Gabriel Clifton
ID: 39254289
It doesn't look like TextArea honors the backgroundImage property. A workaround is to create a view with a background image and then add the TextArea to the view:
var textAreaWrap = Ti.UI.createView({
    backgroundImage:'/path/to/image.png'
});
var myTextArea = Ti.UI.createTextArea({
    background:'transparent'
});
textAreaWrap.add(myTextArea);
You'll have to finesse the dimensions of the TextArea so it fits inside the view, and potentially turn off any default styles on the TextArea.
0
 
LVL 2

Author Comment

by:team2005
ID: 39254334
Hi!

Can you please show me how to use the view inside my code ?
0
 
LVL 13

Accepted Solution

by:
Gabriel Clifton earned 500 total points
ID: 39254401
var textAreaWrap = Ti.UI.createView({
    backgroundImage:'/images/penn.png'
});
var myTextArea = Ti.UI.createTextArea({
    background:'transparent'
});
textAreaWrap.add(myTextArea);
0
 
LVL 2

Author Comment

by:team2005
ID: 39254447
Hi!

Where do i put that code ?
0
 
LVL 2

Author Closing Comment

by:team2005
ID: 39354259
thanks
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Joomla 2.5 shopping cart 7 31
Why a span is lower 2 26
Hide un-named HTML Label with CSS 14 36
Powershell output to email works, but readability is low 5 39
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

828 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