BullGuard Antivirus Sale - 60% Off with openElement !
openElement Website Homepage
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - Mobile Ready Site Addition
  FAQ FAQ  Forum Search   Register Register  Login Login

Mobile Ready Site Addition

 Post Reply Post Reply
Author
Message
chartman View Drop Down
Newbie
Newbie
Avatar

Joined: Dec 23 2020
Location: NY,USA
Status: Offline
Points: 5
Post Options Post Options   Thanks (0) Thanks(0)   Quote chartman Quote  Post ReplyReply Direct Link To This Post Topic: Mobile Ready Site Addition
    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;
<script>
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
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 5598
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post 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.


Back to Top
chartman View Drop Down
Newbie
Newbie
Avatar

Joined: Dec 23 2020
Location: NY,USA
Status: Offline
Points: 5
Post Options Post Options   Thanks (0) Thanks(0)   Quote chartman Quote  Post ReplyReply Direct Link To This Post 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
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 5598
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: May 04 2021 at 7:33pm
It does not work on your site because you did it wrong

Originally posted by chrome console 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


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 5598
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post 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



Edited by Hobby001 - May 05 2021 at 2:14am
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 5598
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post 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.




Edited by Hobby001 - May 06 2021 at 12:54pm
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,031 seconds.