BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement 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: 23 Dec 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: 28 Avr 2021 at 01:01
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5527
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 28 Avr 2021 at 02:05
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: 23 Dec 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: 04 Mai 2021 at 19:55
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5527
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 04 Mai 2021 at 20:33
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5527
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 05 Mai 2021 at 01:00
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 - 05 Mai 2021 at 03:14
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5527
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 06 Mai 2021 at 13:51
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 - 06 Mai 2021 at 13:54
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,063 seconds.