4

To elaborate more on my question, I designed a website specifically to be viewed on a desktop. It does not look good if being tested on a mobile device. Therefore, I made a complete different layout for my website (containing all of the same content) by using jQuery mobile (due to its simplicity).

I realize now that there were probably better ways in doing this, such as implementing the mobile view in my CSS file, based on media queries, but this is the way that I chose to do it and would prefer to stick with it.

So here's my problem:

I want to use my JavaScript file to detect the different screen sizes, in order to display the desktop view or mobile view, based on their specified screen width and height. As of now, my desktop view and mobile view are in two different html files, and I know that is not good.

I don't want two html files, I want to combine the two! That's the only way I would be able to call the two different codes in my .js file, correct? Does anyone know how to do this?

In my mobile view file, I needed to include the jQuery libraries. Without those, it will not work. But when I tried including that in my desktop view file (since I am now trying to combine the files), I tested it alone with just that and it completely messed up the view on my desktop. How do I solve this?? Other than that, I'm assuming I would just separate the codes with two different 's as far as combining the rest of the code, yeah?

For example,

    <div id="desktop"> ..... </div>  <!-- this is for desktop view -->

and

    <div id="mobile"> ..... </div> <!-- this is for mobile view -->

Please, any help would be so appreciated. I've tried researching this, but I can't find anything specific enough to answer my questions.

Here is the beginning of my desktop view file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="hwk5.css">
    <script type="text/javascript" src="hwk5.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>

And here is the beginning of my mobile view file:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    
    <style>
        img.fullscreen {
            max-height:50%;
            max-width:50%;
        }
    </style>
</head>
<body>
Community
  • 1
  • 1
natlotzy
  • 97
  • 1
  • 3
  • 11

2 Answers2

1

As I said in my comment, you could just detect mobile browsing with PHP and redirect the user to the desktop or mobile site accordingly, but if you really want to do this with jQuery, it is possible.

You would want to check the page width onReady and onResize:

$(document).ready(function(){resize();});
$(window).resize(function(){resize();});

function resize()
{
    var mobileMaxWidth = 640; //Define this to whatever size you want
    if($(window).width() > mobileMaxWidth)
    {
        $("div#desktop").show();
        $("div#mobile").hide();
    }
    else
    {
        $("div#desktop").hide();
        $("div#mobile").show();
    }
}

JSFiddle

As far as jQuery messing up your desktop site, you must be using another DOM. Are you importing MooTools or another popular DOM that uses $? If so, you would need to explicitly mark jQuery code as jQuery("selector")... instead of $ or use jQuery.noConflict.

For more information, see this post.

Community
  • 1
  • 1
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • Thank you so much, the PHP advice is very helpful and I will apply that. Am I able to just add that in my .js file? And if so, how would I reference it in my html file? – natlotzy Mar 28 '14 at 05:05
  • And in response to the second part regarding MooTools, I have never heard of that. Is that something I would just add the section of my file? I will look it further to figure out more about it. Thanks again – natlotzy Mar 28 '14 at 05:07
  • Oh, I'm sorry, I thought the example you were giving me was PHP for some reason, never mind! – natlotzy Mar 28 '14 at 05:08
  • @mamimi Basically $ is a prototype and it is used in a lot of JS libraries because it is very easy to call a shorthand method with `$.someMethod()` rather than having to type in `someLibraryName.someMethod()`. If you are importing more than one library (jQuery is one) that uses this prototype, it can cause conflicts. My guess would be that you are importing two libraries that use it, because simply importing jQuery into your page shouldn't cause any problems. – Liftoff Mar 28 '14 at 05:10
  • @mamimi No problem. The code that I linked to [here](https://code.google.com/p/php-mobile-detect/) was a PHP library. The code that I wrote in my answer is jQuery. – Liftoff Mar 28 '14 at 05:12
  • @mamimi You could possibly check the Developer Console for any errors that your page may be giving. Oftentimes there is a broken link or something that is causing Javascript to break at runtime causing **all** of the succeeding Javascript to not run. And great question by the way. You must have read the FAQ! :) – Liftoff Mar 28 '14 at 05:17
  • haha, thank you! And, yes possibly... I should check that. I want to use the noConflict method I found in the more info link you gave me: var $jq = jQuery.noConflict(true); – natlotzy Mar 28 '14 at 05:21
  • sorry I'm asking so many questions, but is this method intended to resolve the issue if I were to copy and past the from my mobile file to the desktop file? I need to do more research on this so I can fully understand, but my time is crunched! – natlotzy Mar 28 '14 at 05:24
  • jQuery.noConflict is used if you are importing more than one JS library that prototypes $. If you are only using jQuery, then you don't even need to worry about jQuery.noConflict. I would check your console for errors if you are getting visual/code errors. – Liftoff Mar 28 '14 at 05:26
  • I can help you troubleshoot if you give me the URL. – Liftoff Mar 28 '14 at 05:28
  • Ah, okay thank you so much, I just need to add my files to the server real quick. then I'll paste the url. (its a stupid website, just warning you). – natlotzy Mar 28 '14 at 05:30
  • @mamimi Hahaha no problem. I'm sure it's fine ;) – Liftoff Mar 28 '14 at 05:31
  • the damn server is broken or something :( I've just spent this entire time trying to upload my files. Something is definitely wrong with the server though, guess I need to email my professor about it. Otherwise, I don't know how to get you a url :( – natlotzy Mar 28 '14 at 05:52
  • You could use 000webhost.com – Liftoff Mar 28 '14 at 05:59
  • its not how my website is supposed to look. but that doesn't matter, the source code is there if you hit ctrl+u. my main file is hwk6.html – natlotzy Mar 28 '14 at 06:20
1

I Suggest You To Write Two Seperate CSS Files... One For Desktop And Other For Mobile. And According to the current screen size change the css files using javascript.

To achieve this You Can Use this script

<script type="text/javascript">
    $(document).ready(function () {
        changecss();
    });
    $(window).resize(function () { changecss(); });
    function changecss() {
        var windowwidth = $(window).width();
        var windowheight = $(window).height();

        if (windowwidth >= 1024 && windowheight >= 768) {
            //alert('Screen size: 1024x768 or larger');
            $("link[rel=stylesheet]:not(:first)").attr({ href: "Style2.css" });
        }
        else {
            $("link[rel=stylesheet]:not(:first)").attr({ href: "Style1.css" });
        }
    }
</script>

HTML

<div>
The colour of this text will change.
</div>
Kiranramchandran
  • 2,094
  • 16
  • 30
  • That is extremely helpful, thank you so much. I should have used this method from the beginning, but I have already spent so much time implementing with jQuery mobile. If I cannot figure it out, I will definitely just switch to CSS and use your example. – natlotzy Mar 28 '14 at 05:11