Viewport size for mobiles etc

Printable View

08-03-2020, 02:50 PM
theremotedr

Viewport size for mobiles etc

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>
08-03-2020, 05:48 PM
coothead

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>  <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
08-03-2020, 05:54 PM
theremotedr

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.
08-03-2020, 06:42 PM
theremotedr

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>
08-03-2020, 08:18 PM
coothead
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
08-04-2020, 10:52 AM
theremotedr

Morning,

I have now done as advised.

Many thanks for your time / advice.

Have a nice day
08-04-2020, 01:02 PM
coothead

No problem, you're very welcome. ;)

coothead
08-07-2020, 03:39 PM
theremotedr

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>
08-07-2020, 07:05 PM
coothead

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
08-07-2020, 07:34 PM
theremotedr

Thanks very much, it works a treat
08-07-2020, 07:38 PM
coothead

Blow me down, I seem be getting rather good at this stuff. :D

coothead
08-07-2020, 07:45 PM
theremotedr

Dont let anybody say a bad word against you.....

Did you happen to see my other post ?
08-07-2020, 07:52 PM
coothead

No I missed it. :eek:

I will go and have a look for it :D

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

Here

http://www.dynamicdrive.com/forums/s...ort-size-issue