Viewport size for mobiles etc

**theremotedr** · 08-03-2020, 02:50 PM

Afternoon.
On all my pages i have the code in place to resize images etc for when customers look on phone / tablets etc.

I need to also apply this for when i see the relevent photos in my emailref folder.
This example below shows what the cosde is at present.
Its either correct but not working or im missing something,im just trying to get the pages the same for viewing purposes like all the others.
Thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>AUDI 001</title>
<style type="text/css">
.auto-style1 {
	text-align: center;
}
.auto-style2 {
	color: #000066;
	font-size: x-large;
}
</style>

</head>

<body>
<div class="auto-style1"> <a href="../../karaudi.html"><img src="../photos/AUDI001.png" border="0" /></a>
<p class="auto-style2"><strong> £40.00</a></strong></p>
<br/>
<p class="auto-style2"><strong><a href="https://www.theremotedoctor.co.uk/">WWW.THEREMOTEDOCTOR.CO.UK</a></strong></p>
</div>
</body>

</html>

**coothead** · 08-03-2020, 05:48 PM

Hi there theremotedr,

add this CSS to each page...

Code:


.auto-style1 img {
	width: 100%;
	max-width: 40em;
	height: auto;
 }

...assuming that they are all similar.

Note 1:

All this code on the page is outdated...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>AUDI 001</title>
<style type="text/css">

You should use...

Code:


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>AUDI 001</title> <!-- change this value accordingly -->

<style media="screen">

Note 2:

I cannot get this page to work...

https://www.theremotedoctor.co.uk/m-images/emailref/

...using Honda006 as before.

Have made changes to the file names?

coothead

**theremotedr** · 08-03-2020, 05:54 PM

Hi,
A reply to the last line of text whilst i look at it.

NOW the part number is capitals as this makes sense as each photo shows the part number in capitals & also a space like shown below.

So Honda006 becomes HONDA 006

I am looking for some code so that the text entered into the part number form field is forced to CAPITALs,can you advise please.

**theremotedr** · 08-03-2020, 06:42 PM

I believe ive now sorted the Capital code by using the below.

Code:

<input type="text" id="part" onkeyup="this.value = this.value.toUpperCase();"><br>

**coothead** · 08-03-2020, 08:18 PM

Hi there theremotedr,

It is bad practise to name files with a space like this HONDA 006.html
I would suggest that you rename them like this HONDA-006.html

Then use this new index.html...

Code:


<!DOCTYPE HTML>
<html lang="en">
<head>
<base href="https://www.theremotedoctor.co.uk/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Part Peeper</title>

<link rel="shortcut icon" href="favicon-logo/favicon.ico"  type="image/x-icon" >
<link rel="stylesheet" href="css/latestChanges.css" media="screen">

<style media="screen">
body {
    background-image: url( m-images/background.png );
    text-align:center;	
 }
h1, p {
    color: #009;
 }
form { 
    display: inline-block; 
    padding: 2em 1em 1em;
    border: 1px solid #009;
    background-color: #fff;
    font-size: 1.25em;
 }
input {
	width:90%;
    margin: 1em 0;
    font-size: 1em;
    text-align: center;
}
</style>

</head>
<body>

<h1>PART IDENTIFIER</h1>

<form action="#">
 <label for="part">ENTER PIN</label><br>
 <input type="text" id="part" ><br>
 <input type="button" value="CLICK TO SHOW">
</form>


<script>
(function( d ) {
   'use strict'; 
   d.querySelector('form').reset();
   d.querySelector('input[type="button"]').addEventListener( 'click', 
   	function() {
      var pattern = /[^0-9](?=[0-9])/g,
             part = d.querySelector( '#part' );
             part.value = part.value.replace( pattern, '$& ').toUpperCase();

      setTimeout(
        function(){
   	       location.href = '/m-images/emailref/' + part.value .replace(/\s/,'-') + '.html';
          },1000 );
   	            } , false );
}( document ));
</script>

</body>
</html>

This has the added advantage of allowing you type
in a wide variety of text like these...

HONDA 006
honda 006
honda006
HoNdA 006
hOnDa006

..and they would all take you to HONDA-006.html

coothead

**theremotedr** · 08-04-2020, 10:52 AM

Morning,

I have now done as advised.

Many thanks for your time / advice.

Have a nice day

**coothead** · 08-04-2020, 01:02 PM

No problem, you're very welcome.

coothead

**theremotedr** · 08-07-2020, 03:39 PM

Afternoon,

Just a thought.

When i arrive at this page https://www.theremotedoctor.co.uk/m-images/emailref
What would i need to do so the field has automatic focus on it,i mean the flashing cursor is allready there.

This is the code i have as ive changed some colors etc.

Thanks

Code:

<!DOCTYPE HTML>
<html lang="en">
<head>
<base href="https://www.theremotedoctor.co.uk/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Part Peeper</title>

<link rel="shortcut icon" href="favicon-logo/favicon.ico"  type="image/x-icon" >
<link rel="stylesheet" href="css/latestChanges.css" media="screen">

<style media="screen">
body {
    background-image: url( m-images/background.png );
    text-align:center;	
	color:#009;
	font-weight: bold;
 }
h1, p {
    color: #009;
 }
form { 
    display: inline-block; 
    padding: 2em 1em 1em;
    border: 2px solid #009;
    background-color: #70C8EE;
    font-size: 1.25em;
	
}
input {
	width:90%;
    margin: 1em 0;
    font-size: 1em;
    text-align: center;
	border: 1px solid #009;
	color:#009;
}
</style>

</head>
<body>

<h1>PART IDENTIFIER</h1>

<form action="#">
 <label for="part">Enter Part Number</label><br>
 <input type="text" id="part" ><br>
 <input type="button" value="Click To Show">
</form>


<script>
(function( d ) {
   'use strict'; 
   d.querySelector('form').reset();
   d.querySelector('input[type="button"]').addEventListener( 'click', 
   	function() {
      var pattern = /[^0-9](?=[0-9])/g,
             part = d.querySelector( '#part' );
             part.value = part.value.replace( pattern, '$& ').toUpperCase();

      setTimeout(
        function(){
   	       location.href = '/m-images/emailref/' + part.value .replace(/\s/,'-') + '.html';
          },1000 );
   	            } , false );
}( document ));
</script>

</body>
</html>

**coothead** · 08-07-2020, 07:05 PM

Hi there theremotedr,

replace the existing script with this...

Code:


<script>
(function( d ) {
   'use strict'; 
   
   var pattern, part = d.querySelector( '#part' );

   d.querySelector('form').reset();
   d.querySelector('input[type="button"]').addEventListener( 'click', 
   	function() {
      pattern = /[^0-9](?=[0-9])/g,
      part.value = part.value.replace( pattern, '$& ').toUpperCase();

      setTimeout(
        function(){
   	       location.href = '/m-images/emailref/' + part.value .replace(/\s+/,'-') + '.html';
          },1000 );
   	            } , false );

   window.onload = function() {
                     part.focus();
                    };
}( document ));
</script>

coothead