Dave Dave - 1 month ago 5
Javascript Question

JavaScript/Jquery in BlogSpot does not work in mobile browsers

My page in BlogSpot works fine except in the mobile browsers I've tried (only an old iPod touch and my Windows 8 Phone, so I'm not sure about others).

The page is here.

Basically, after pressing a button object, JQuery populates a DIV with an .html() function, making the DIV grow in size, and I think that's the problem.

I was wondering if there is any way to fix this.

Answer

The problem here is that blogger loads different templates for mobile device and a PC. The PC version of your blog has all the necessary codes to run the function but the mobile template don't seem to have them.

Your script and the jQuery library doesn't load up in the mobile template, so you need to make some changes in your template to make it load on mobile browsers too. It's very simple, all you have to do is wrap the codes between

<b:if cond='data:blog.isMobile'></b:if>

And the scripts will be loaded in mobile templates too.

It must look like this

<b:if cond='data:blog.isMobile'>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script>
// your script
</script>
</b:if>

Place this anywhere template (best if near the original scripts) and save the template. And first check it on your PC by loading the mobile template of your blog, to do that just add ?m=1 at the end of your blog's URL.