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

openElement

> User Tutorials
  New Posts New Posts RSS Feed - How To Auto Switch To Mobile Site
  FAQ FAQ  Forum Search   Register Register  Login Login

How To Auto Switch To Mobile Site

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

Joined: Apr 17 2015
Location: Arizona
Status: Offline
Points: 42
Post Options Post Options   Thanks (0) Thanks(0)   Quote insaneman12 Quote  Post ReplyReply Direct Link To This Post Topic: How To Auto Switch To Mobile Site
    Posted: Apr 17 2015 at 8:11am
Hey Everyone I just wanted to write this tutorial on how to have the website redirect to the mobile page automatically if someone is using a cell phone. I spent hours trying to figure this out and finally got it to work.

First - Build your main and mobile sites. I did it in the same file.

Second - Open the source code. Should below the page tabs.

Third - Add a New Codeblock. I named it Mobile, creative I know, name it what you want then
type - javascript
position - header

Fourth - Type in or copy and paste:
  if (screen.width <= 800) {
    window.location = "mobile.htm";
  }

Choose the screen width you want. You can even change it to a range if you want.
Change mobile.htm to what your mobile page name is.

Fifth - Save the page and upload with complete selected in the middle

What this does is find out the screen width in px, not the resolution but the size, <= smaller than or equil to 800px wide. window.location = "mobile.htm": sends the user to either the mobile or the destop sites based off the screen width. Hope this helps.
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Apr 17 2015 at 9:21am
Hi, and thank you.

There are preferred ways of redirection, via htaccess for example, but this one is sometimes sufficient enough.

To make it more cross-browser (I am not sure whether screen is supported in all browsers):


var width = ((typeof screen !== 'undefined') ? screen.width : null)
  || window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
if (width <= 800) {
    window.location = "mobile.htm";
}



Edited by Dmit OE - Apr 17 2015 at 9:22am
Back to Top
insaneman12 View Drop Down
Newbie
Newbie
Avatar

Joined: Apr 17 2015
Location: Arizona
Status: Offline
Points: 42
Post Options Post Options   Thanks (0) Thanks(0)   Quote insaneman12 Quote  Post ReplyReply Direct Link To This Post Posted: Apr 17 2015 at 5:35pm
I have only used this program for about a month and I have very little programing experience. The most I was able to do is have a window open saying hello using javascript. I spent a few hours trying to figure out how to word it right. This was the first way I got it to work. I was tring to get only the people on cell phones and some tablets to rediect to the mobile ver of the site while letting people on desktops and laptops stay on the normal site.
The script below is that an error code or what I would write into htaccess via free script? Witch by the way thanks for showing me that I never hit that botton yet.
I have not completed the mobile web site yet but it should be done within the next 2 days its www.thevacdoctor.com and if anyone has a problem with it not redirecting please let me know. That way I can try and figure out how to get it to work properly. Hopefully without listing every mobile device lol.
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Apr 17 2015 at 11:10pm
"The script below" - what do you mean? The script I gave above is for JavaScript, for a Code Block.
Back to Top
insaneman12 View Drop Down
Newbie
Newbie
Avatar

Joined: Apr 17 2015
Location: Arizona
Status: Offline
Points: 42
Post Options Post Options   Thanks (0) Thanks(0)   Quote insaneman12 Quote  Post ReplyReply Direct Link To This Post Posted: Apr 17 2015 at 11:17pm
Ok like I said I am very new to scripting and am teaching myself java and html/css. That way I can use this program better and do some of the things I want the site to do.Thankyou for your help and ill try it in the program when I get home.
Back to Top
Blaster View Drop Down
Newbie
Newbie
Avatar

Joined: May 12 2016
Location: Australia
Status: Offline
Points: 4
Post Options Post Options   Thanks (0) Thanks(0)   Quote Blaster Quote  Post ReplyReply Direct Link To This Post Posted: May 27 2016 at 8:31am
how do I redirect using htaccess, I know I need to input a script but where in the htaccess do I insert it and what do I insert to redirect from my desktop website (/public_html) to my mobile site (/publi_html/mobile.1stchoicefire.com.au) ?
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: May 27 2016 at 10:06am
There are solutions like this one (URLs need to be modified)
http://stackoverflow.com/a/4208300

Use Project->Htaccess, Add a command of type "Free Script" and post the code inside.
Back to Top
BSS View Drop Down
Newbie
Newbie
Avatar

Joined: Sep 02 2018
Status: Offline
Points: 7
Post Options Post Options   Thanks (0) Thanks(0)   Quote BSS Quote  Post ReplyReply Direct Link To This Post Posted: Sep 04 2018 at 8:52am
Hi Dmit,

var width = ((typeof screen !== 'undefined') ? screen.width : null)
  || window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
if (width <= 800) {
    window.location = "mobile.htm";
}

I have applied the code that you provided as above into htaccess via Project --> htaccess --> Add a commend of type "Free Script" and post the code. But I got the error message from the MAIN WEBSITE as below:

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator at webmaster@beenleighstorage.com.au to inform them of the time this error occurred, and the actions you performed just before this error.

More information about this error may be available in the server error log.

Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.


Did I miss something or have wrong procedure?


Edited by BSS - Sep 04 2018 at 9:07am
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Sep 04 2018 at 12:57pm
This code was not at all intended for .htaccess! It's a Javascript code to be inserted into a Code Block (Source) type Javascript position StartBody (for example). The code for .htaccess you shoudl compose yourself based on http://stackoverflow.com/a/4208300
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.078 seconds.