Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Viewport size for mobiles etc

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,131
    Thanks
    158
    Thanked 3 Times in 3 Posts

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

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,609
    Thanks
    1
    Thanked 247 Times in 242 Posts

    Default

    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
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,131
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    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.

  4. #4
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,131
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    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>

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,609
    Thanks
    1
    Thanked 247 Times in 242 Posts

    Default

    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
    ~ the original bald headed old fart ~

  6. #6
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,131
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    Morning,

    I have now done as advised.

    Many thanks for your time / advice.

    Have a nice day

  7. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,609
    Thanks
    1
    Thanked 247 Times in 242 Posts

    Default


    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~

  8. #8
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,131
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    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>

  9. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,609
    Thanks
    1
    Thanked 247 Times in 242 Posts

    Default

    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
    ~ the original bald headed old fart ~

  10. #10
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,131
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    Thanks very much, it works a treat

Similar Threads

  1. [help] Size content to viewport
    By Nimuel in forum CSS
    Replies: 1
    Last Post: 12-08-2016, 04:42 PM
  2. Slimbox to work with mobiles
    By Mejse78 in forum Looking for such a script or service
    Replies: 4
    Last Post: 04-29-2013, 12:42 PM
  3. Replies: 1
    Last Post: 06-21-2011, 01:46 PM
  4. How to adapt websites for mobiles?
    By robertsaunders in forum Looking for such a script or service
    Replies: 0
    Last Post: 07-24-2009, 06:09 PM
  5. A .mobi webSite for pdas & mobiles, is appropriate for a rent-a-car company: direct b
    By leonidassavvides in forum Computer hardware and software
    Replies: 0
    Last Post: 10-17-2008, 10:02 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •