Stop the mobile browser from downloading an html element?

[Preeminent]

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”?”

[Preeminent]

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…..

[bungle]

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.

[Preeminent]

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:

NonMobile Content

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!

[bungle]

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

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.');

}



?>

[bungle]

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

[Preeminent]

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?

[bungle]

fixed it

[Preeminent]

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.

[Preeminent]

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

[bungle]

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.

[Preeminent]

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

[bungle]

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

it needs to be

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
');

}



?>

[Preeminent]

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

[Author]

Posts