Grow your CSS skills. Land your dream job.

Stop the mobile browser from downloading an html element?

  • # February 5, 2012 at 6:35 pm

    Hey all,
    I was going to post this in the javascript forum, but I have been told already(in another forum) that this won’t be able to be done with javascript.
    I did however post my original question so that you can see what I was asking. I would like to start a discussion on if there is any way possible out there to stop mobile browsers from downloading an html element.

    “So, I have been searching forever now on if there’s a way to use something like yepnope.js or something similar to block a mobile browser from downloading an HTML element.

    Before this becomes a “mobile first” debate, please know that I actually am doing this for the most part, but some things do popup that I will need only on the desktop version.

    So my first question is this: Would something like this work:

    yepnope({
    test: document.getElementsByClassName('.desktop-div').length &&otherThingYouWantToCheckFor(),
    yep: 'whatever you want to show on desktop goes here',
    nope:
    });

    Two: if that would work, how would I make that basically say,” If the browser window is 480px wide or less, then do not download ‘desktop-div’ “

    Three, and most important: If this does work, do any of you know if the mobile browser will still download that “desktop-div”?”

    # February 5, 2012 at 6:47 pm

    The HTML will be downloaded, unless it’s inside an iframe that’s set to display:none; with css. If you set the element you want hide to display:none; in css, then any images/resources inside of it won’t be downloaded. Unless there’s something I don’t know about here.

    # February 5, 2012 at 10:36 pm

    Hmmm, well the iframe thing is news to me. I will have to try that out. I know, normally, elements that are set to display:none; do still get downloaded by the browser. Thanks, I will look into this. Although, it would suck to have to use an iframe, but hey if it works…..

    # February 5, 2012 at 11:38 pm

    Is there a reason for not doing that in php? Do a mobile browser detection and serve the sections of content conditionally. I know it’s not flavor of the month as far as serving specifically for mobile is frowned on, but if you have stuff that just can’t really work on mobile, like I have a lot of in a couple of sites, then condition it out and provide a link for those that dare. It’s got to be php or other server side code to avoid the actual download though, unless you use the iframe trick.

    # February 5, 2012 at 11:52 pm

    Awesome, thank you for your comment bungle! I basically would like to just get a conversation started on this. I think it will end up helping others as well. Can you help me out on this a bit more though? I don’t know how to write my own php yet, but I’m pretty good at grabbing snippets and getting them to work with what I have.

    Plus, what exactly do you mean here: “provide a link for those that dare”

    So, for example. I have a div or two with some html content in them that I do not want to be downloaded if the user is on a mobile phone or just any browser at around 480px or less. In my opinion, the amount of content that I need hid, does not warrant a whole separate mobile site, but I still would like to save the user on a mobile phone, the bandwidth from not having to download the few unneeded items.

    So, this was recommended to me:



    < ?php if(!preg_match('/(symbian|smartphone|phone|android)/i', strtolower($_SERVER))) : ?>

    NonMobile Content



    < ?php endif; ?>


    Is this what you are talking about? I think it’s little off though? We should be saying that if the browser is on a mobile phone, then DO NOT show the content within those h1 tags, right? And we are positive that the mobile browser won’t download that content at all?

    Thanks again, I hope I can get this figured out!

    # February 6, 2012 at 12:05 am

    Yeah exactly, look at the user agent and skip the code if it matches the mobile browsers. I often put a variable on the page like page.php?show=all

    And then I can put a link in that links back to the page to defeat the condition

    So rephrase the condition to



    < ?php

    if (strpos(strtolower($_SERVER),'iphone') && isset($_GET)) {
    echo ('
    Mobile unfriendly div
    ');
    }
    else {
    echo ('Some content has been hidden for various reasons blah blah. Show me everything instead.');
    }

    ?>

    # February 6, 2012 at 12:08 am

    Damn why is this boards stripping my tags? How do you force it to leave code alone?

    # February 6, 2012 at 12:10 am

    Oh, I haven’t had problems with this forum, as far as the code goes. It’s the markdown, that I usually have problems with. What did it take out?

    # February 6, 2012 at 12:11 am

    fixed it

    # February 6, 2012 at 12:13 am

    Now, not to be annoying, but have you tested this to see if the mobile browsers really don’t download? I know it won’t show the content, but I’m just curious if it’s the same as display:none in css. The browser still downloads the content, even though it’s not shown. I’m going to look into some kind of way to test this.

    # February 6, 2012 at 12:14 am

    Awesome! Thank you for this. I’m going to try this out!

    # February 6, 2012 at 12:14 am

    They can’t download it, if PHP doesn’t echo the code, then it doesn’t exist in the HTML to be downloaded in the first place. PHP happens before the HTML even exists. That’s the beauty of a preprocessing language.

    # February 6, 2012 at 12:15 am

    Fantastic! Thanks again! I honestly keep meaning to learn both php and jquery. I just have to make the time!

    # February 6, 2012 at 12:22 am

    Oops i just walked away and realized i messed up the condition

    it needs to be



    < ?php

    if (strpos(strtolower($_SERVER),'iphone') && !isset($_GET)) {
    echo ('Some content has been hidden for various reasons blah blah. Show me everything instead.');
    }
    else {
    echo ('
    Mobile unfriendly div
    ');
    }

    ?>

    # February 6, 2012 at 12:23 am

    Ok, great! I’m going to start experimenting with this in a bit!

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".