Log in

View Full Version : 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



<!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...



.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...



<!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...



<!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.




<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...


<!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




<!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...



<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
theremotedr
08-07-2020, 07:34 PM
Thanks very much, it works a treat
coothead
08-07-2020, 07:38 PM
Blow me down, I seem be getting rather good at this stuff. :D


coothead
theremotedr
08-07-2020, 07:45 PM
Dont let anybody say a bad word against you.....

Did you happen to see my other post ?
coothead
08-07-2020, 07:52 PM
No I missed it. :eek:

I will go and have a look for it :D


coothead
theremotedr
08-07-2020, 07:53 PM
Here

http://www.dynamicdrive.com/forums/showthread.php?85271-Viewport-size-issue