asking the impossible?

by **Morrile** » Sat Oct 08, 2011 11:17 am

Hello,

I maybe asking the impossible here, but cannot seem to find an answer anywhere, but I may also be asking the wrong question. I am creating a website in HTML5, but due to a long left-hand navigation menu it doesn’t look so great for mobile devices.

Question: Can I create a jqury site just for mobile devices, and somehow link that to the existing website as one website?

So far:

1: I have created a subfolder called mobile for the jquery mobile website, and created a jquery mobile website.
2: Set the Media Query for phone only to the jquery css file, all other settings are set to the main websites css files
3: Screen and tablet view are not an issue.
4: setting a script within the main index page;

<script type=”text/javascript”>
if (screen.width<321) }
windows.location=http://mywebsite.com/mobile/
{
</script>
5: Using Dreamweaver CS5.5

would this solve my problem? Or can anyone suggest anything better?

Morrile

by **JAB Creations** » Sun Oct 09, 2011 12:48 am

That is impossible if you're trying to construct a mobile friendly site the correct way. You shouldn't use frameworks as they introduce hordes of overhead, waste tons of bandwidth and you end up robbing yourself of learning how to program with real code. Additionally you're stuck with versioning as jQuery has a long list of bugs. Using real JavaScript you can use simple object detection and cut off 75 kilobytes of overhead immediately as well as all the hassles of dealing with a framework.

Another downfall of using a framework is you haven't thought of looking up the available methods and properties. You have only mentioned the screen.width property though there is another. With your current code you would not be able to determine if it's a desktop user with a window that has been resized (e.g. a virus that resizes a person's browser screen).

So the best piece of advice whether you choose to follow it or not is to learn real code and program using real code.

Note: I removed the duplicate message.

by **Morrile** » Mon Oct 17, 2011 9:39 pm

Many thanks. I think I may have to pay someone as I am not into IT languages. The whole idea needs a rethink

by **JAB Creations** » Sat Oct 22, 2011 8:53 am

Are you simply trying to detect the screen resolution to redirect users to an existing mobile version of your site?

by **Morrile** » Sat Oct 22, 2011 11:19 am

Hello JAB Creations,

Yes! My idea was to have an existing website controlled via Viewport with dedicated CSS files. That part works very well for screen and tablet, but not ideal for mobile phones. I was hoping to create (within a subfolder on the main site) a mobile website in jQuery mobile and somehow direct devices <320 to the jQuery mobile webpages rather than the main website pages.

Sounds all very easy, but for someone with little knowledge of these things, it's very hard; but I am still learning by trying.

Morrile

by **JAB Creations** » Sun Oct 23, 2011 2:01 pm

Here is a basic starting point...

Code: Select all: alert(screen.width+'x'+screen.height)

You can redirect as so...

Code: Select all: if (condition) {window.location.href=path+'/m/';}

Just an example of a test, you should be able to mix the code together...

Code: Select all: if (screen.width>1024) {alert('likely not mobile, possible netbook or tablet.');}

You'll want to keep your scripting in two separate files, index.js and onload.js...

Code: Select all: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Example</title> <script type="text/javascript" src="scripts/index.js> <script type="text/javascript" src="scripts/onload.js> </head> <body> </body> </html>

Keep only global variables and your anonymous onload function in onload.js...

onload.js

Code: Select all: var path = '';//your site path, used in redirects and ajax for example window.onload = function() { // put all your // onload events // in here since you // can only trigger // window.onload once // per page load if (screen.width>1024) {alert('likely not mobile, possible netbook or tablet.');} }

You'll want to update your path file and only check the screen resolution if it's (greater && path!='http://www.m.example.com/'). You should not set the path to include anything beyond the '.com/' part of the URL and concatenate on to it when you need to in your scripting (e.g. path+'sub-directory1/sub-directory2/';).

No huge excessive and bulky frameworks necessary.

The grey between what defines a desktop and what defines a mobile device (e.g. a tablet) is increasing so you'll likely want to fine-tune what exactly numbers you'll settle on based on what devices you see people visiting your site with.

Here is a list of screen resolutions (screen.width, not screen.availWidth) from my site thus far this month alone ascending by number of sessions...

1024x768
1366x768
1920x1080
1440x900
1280x800
1280x1024
1680x1050
1920x1200
1600x900
1024x600
2560x1440
1360x768
1280x768
1600x1200
320x480
1280x720
800x600
1152x864
1280x960
768x1024
2560x1600
1536x864
122x133
320x240
1400x1050
1680x945
1350x844
1344x840
234x282
234x280
176x208
240x272
1284x910
800x391
1229x983
1024x819
1360x1024
1229x922
480x360
360x480
1344x756
2048x1152
1017x572
1140x641
1503x845
1311x737
1093x614
2025x1266
1843x1152
1875x1172
1024x640
1152x720
1536x960
360x640
800x1241
800x1138
800x1118
234x302
240x301
320x396
122x146
170x202
231x268
240x274
240x203
1143x857
314x202
1024x614
320x188
314x180
1856x1036
1280x640
800x390
800x351

by **Morrile** » Sat Oct 29, 2011 5:01 pm

WOW, I wasn't expecting that, many thanks

Now I just need to understand the code you wrote LOL, and what you have given me looks fantastic.

One question, can I use this with Viewport?

I have

/* iphone */
@import url ("phone.css") only screen and (max-width:320px) ;

I think your code replaces all this, but I need to learn how.

by **JAB Creations** » Sat Oct 29, 2011 8:55 pm

I gave you everything you need without putting it directly together, what you should do is start testing the code out. Gecko/Firefox, KHTML/Konqueror, Presto/Opera, Trident/Internet Explorer and WebKit/Safari and Chrome are the engines/browsers to test with. They all have JavaScript debugging tools to work with. I may not be able to reply for a few days though that should be more than ample time for you to take the code, follow the directions and get it working. I highly recommend saving a file to your desktop or a project folder with a .xhtml extension which will serve your page as application/xhtml+xml; the only error that will get by you using this are duplicate id's (since they must be unique). You'll want to do initial testing in Gecko/Firefox and Presto/Opera as they actually tell you what the problem with the XHTML is if you have one. For Firefox I highly recommend getting a copy of the Console2 extension to create a white list of domains that can list errors in the error console (in example: * block, localhost allow). There are small technical concerns about older browsers though they can be easily deal with, for the time being though concentrate on taking those pieces and putting them together, everything you need is in last post I made before this one.

by **Morrile** » Sun Oct 30, 2011 8:11 am

Many thanks. Obviously I have a lot to learn :lol:

asking the impossible?

asking the impossible?

Re: asking the impossible?

Re: asking the impossible?

Re: asking the impossible?

Re: asking the impossible?

Re: asking the impossible?

Re: asking the impossible?

Re: asking the impossible?

Re: asking the impossible?

Who is online

Who is online