-4

I have a directory site with an amazing homepage map, but unfortunately it doesn't load so well on mobile devices. The WordPress theme was setup to use a slider or map, but I'd like to display the slider on mobile devices and maps on desktops. I think this is the code to manipulate this:

 <?php

        ////////////////////////////////////////
        //// WHAT SLIDER ARE WE USING
        ////////////////////////////////////////

        if(ddp('home_slider') == 'Map') {

            get_template_part('includes/slider/markup', 'map');

        } else {

            if(function_exists('putRevSlider')) { putRevSlider(ddp('home_slider_alias')); }  ?>

            <script type="text/javascript">

                jQuery(document).ready(function() { _sf_send_user_to_listings = true; });

            </script>

        <?php  }

    ?>

I understand PHP has no concept of screen size. I also read once JavaScript or jQuery is mixed with the PHP, the server side stops all together and no more PHP can be processed. Perhaps my question - if I used CSS to display a slider on mobile devices, will the device still load the map behind the scenes? And vice versa, will the desktop load both a map and slider but only display one to the user? If the mobile devices are forced to load both, the crash will still occur from the map issue. (By the way, the developer wrote the map to process pins and clustering on the client side, so that's why it crashes apparently.)

If I can accomplish this using CSS, how would I go about changing the above PHP? I'm very new to PHP and server side programming all together. I'm assuming the ddp has something to do with the theme settings, because I'm currently able to select a map or slider (not both).

Giacomo1968
  • 25,759
  • 11
  • 71
  • 103
user3696333
  • 9
  • 1
  • 2
  • 3
    Php is server side, meaning you can't detect things like that. There are maybe a few hacks you could do to serve different css based on the headers but trust me, best bet is min width selectors. – ScottMcGready Jun 15 '14 at 02:38
  • 1
    CSS @media is worth looking into. – Travis Pessetto Jun 15 '14 at 02:53
  • But if I used min width selectors, does it still load both behind the scenes? I can't load the map at all on mobile devices, because it crashes the browser. – user3696333 Jun 15 '14 at 03:12
  • http://stackoverflow.com/questions/15070248/grabbing-screen-resolution-and-displaying-results-based-on-the-size google search – Emilio Gort Jun 15 '14 at 03:14
  • The only thing I can think of would require a heavy reliance on JavaScript being allowed to run. Get that to figure out what the screen size is (somehow) and AJAX each "module". Serious hack if I'm frank, but if you could fix the map crashing, you wouldn't need to bother. Why does it crash anyway? – ScottMcGready Jun 15 '14 at 03:37
  • The map uses the client side to load pins and clustering. Crashed on iPad. I have a site using this theme with 400+ pins loading... The theme developer was planning to rewrite this to use the server side, but he has disappeared and stopped communication. I estimate it's a $1k project hire somebody, which is over budget. See here, try filtering with drop downs and you'll quickly see slowness: http://findingpoker.com/. You're right though, the map should be fixed, so this was simply my quick fix. Any better ideas? – user3696333 Jun 15 '14 at 03:45
  • Reduce the scope of the map firstly, scale it up from a low number and test on all devices as a temporary fix. From there figure out if you can use media queries for the map scope (size & number of pins). If you can't, hire a dev or try and work it out yourself but my recommendation is to reduce the pins anyway. 500 is a lot, regardless of what you're showing. – ScottMcGready Jun 15 '14 at 04:00
  • Perhaps if you're doing a locator script, focus on current location or a central point showing fewer pins. I appreciate you might have fibre, broadband or a few dedicated pipes - the clients might be only in GPRS, 56k or 3G therefore it would be painful to load that many pins – ScottMcGready Jun 15 '14 at 04:01
  • Absolutely not. Sorry but I'm far too busy to help and I use facebook for strictly friends only. Go with my suggestion though of reducing the pins. It'll be a good starting point you can work up from. Start small and expand. – ScottMcGready Jun 15 '14 at 04:53

1 Answers1

0

First Option: One way this could be achieved would be using Ajax to detect with Javascript the screen size before asking the server for the content. You can use screen.availWidth or screen.availHeight to detect the screen sizes, and like you would with @media queries in css, base your course of action to take.

Here's a link to the standard screen sizes you would check for: CSS Tricks = Media Queries for Standard devices

After your Javascript uses the proper logic, you would use Ajax to load your content.

If AJAX isn't your thing or your content is too heavy for Ajax exchanges - Second option: have an intermediary html page with Javascript script that does the same logic prescribed above, and then redirects the user to a respective page: the full map page or a mobile version. This method would probably be the better option since your users wouldn't have to wait for Ajax actions. Here's a link for redirecting with Javascript: Redirecting with Javascript

Community
  • 1
  • 1
user3718546
  • 323
  • 4
  • 12
  • For the second option, you could also pass url parameters that indicate the proper screen sizes, so that your php uses that to serve the proper content. This is useful if you want to have only one php file instead of two different ones. – user3718546 Jun 15 '14 at 03:56
  • Alternatively you could also use css with media screen size and call a specific url by loading a one pixel image into the background. – Gellweiler Nov 10 '14 at 10:24