Mobile Ready Site Addition

Printed From: openElement Website
Category:

openElement

Forum Name: openElement General Discussion
Forum Description: A place for general discussion and questions about the software.
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=1826
Printed Date: Apr 19 2024 at 12:52pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Mobile Ready Site Addition

Posted By: chartman
Subject: Mobile Ready Site Addition
Date Posted: Apr 28 2021 at 12:01am

Hi Hobby001,

I left a request for help on the support forum because I could not get my dynamic webpages to display on a mobile device. I have deliberately not made the website responsive due to the format of the site, plus the fact that there are only several page to the entire site. Therefore I have made mobile designed pages for each of the full screen pages. In order to display these mobile pages, I used the method from one of your posts (media redirect issues) in which you suggest using a small javascript routine to redirect to the mobile page according to a media query match as follows;

function myFunction(x) {

if (x.matches) {

document.location = "https://www.fxchartdata.com/mobile/m_Home.htm";

}

var x = window.matchMedia("(max-width: 700px)")

myFunction(x) // Call listener function at run time

x.addListener(myFunction) // Attach listener function on state changes

</script>

I have inserted this method in the header area of my index.htm page. However it does not appear to be having any effect. Can you try to access the site (fxchartdata.com) with a mobile device and see why it might not work ? The redirection location is fxchartdata.com/mobile/m_home.htm.

-------------
Chartman

Replies:

Posted By: Hobby001
Date Posted: Apr 28 2021 at 1:05am

This code works fine

The error is somewhere else, the two following lines have nothing to do with javascript. Removing them should solve the issue.

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://fxchartdata.com/mobile/m_Home.htm" >
<link rel="canonical" href="https://fxchartdata.com/index.htm">

If you want them into your page add them into an html code block.

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video

Posted By: chartman
Date Posted: May 04 2021 at 6:55pm

When you say "this code works", I would think you mean yes your webpage is working correctly and I see the mobile page on a mobile device. But I have tried to access the page on several mobile devices using chrome and opera and it doesn't work even after taking out the other two lines. Unless you mean that the code I have shown on the post should work but we don't know why it doesn't.

-------------
Chartman

Posted By: Hobby001
Date Posted: May 04 2021 at 7:33pm

It does not work on your site because you did it wrong

chrome console wrote:

(index):24 Uncaught SyntaxError: Unexpected token '<'

<script>
function myFunction(x) {
if (x.matches) { // If media query matches
if (x.matches) {
document.location = "https://www.fxchartdata.com/mobile/m_Home.htm";
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}	
}
}
   
var x = window.matchMedia("(max-width: 500px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
</script>

Remove what's in red

Posted By: Hobby001
Date Posted: May 05 2021 at 12:00am

OpenElement generates the <script></script> tags for you

<script type="text/javascript">
   <script>
   function myFunction(x) {
     if (x.matches) { // If media query matches
       if (x.matches) {
   		document.location = "https://www.fxchartdata.com/mobile/m_Home.htm";
   		 document.body.style.backgroundColor = "yellow";
   	} else {
       document.body.style.backgroundColor = "pink";
     }	
   		
     }
   }
   
   var x = window.matchMedia("(max-width: 500px)")
   myFunction(x) // Call listener function at run time
   x.addListener(myFunction) // Attach listener function on state changes
   </script>
  </script>

Therefore the ones you added to the script are misinterpreted by the browswers

Posted By: Hobby001
Date Posted: May 06 2021 at 12:51pm

Now you have another issue

  var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
   		var element = document.getElementById('text');
   		if (isMobile) {
     			element.innerHTML = "You are using Mobile";
   		} else {
   			element.innerHTML = "You are using Desktop";
   		}

this codes generates: (index):48 Uncaught TypeError: Cannot set property 'innerHTML' of null

at (index):48

You can use:

$("#WEcbad572bfa").text("You are using Mobile");

To change the text block value where WEcbad572bfa is an openElement text block.