Welcome to the MetaMod and Chameleon Support Forums.

Before posting, please check out the FAQs.

helpme

 

Need extra help with your Joomla site? Consider paid Joomla support by the developer of Chameleon and MetaMod.

 

Change header or put a javascript snippet in the header IF Mobile

Change header or put a javascript snippet in the header IF Mobile

UPDATE.  I see in Chameleon's Environment tab that I can select broswers -- and it includes all kinds of mobile/tablet selections.  So I think that will solve my issue. Apparently no PHP needs to be included. I'll try it and report back here!

Rowby


Hello

Using Joomla 3.1.5 and Chameleon v3.15

I want the header to include a snippet of Javascript ONLY IF Chameleon detects a NON MOBILE browser.

My site has a bandwidth intensive background that I don't want to use for mobile devices.  Especially cell phones. I would like the following code to disappear in the header IF Chameleon detects the visitor is on a mobile device.

Code:

script type="text/javascript"><!--//--><![CDATA[//><!--

  sfHover = function() {
     var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
           this.className+="sfhover";
        }
        sfEls[i].onmouseout=function() {
           this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
     }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>




<script language="JavaScript">

var randnum = Math.random();
var inum = 6;
// Change this number to the number of images you are using.
var rand1 = Math.round(randnum * (inum-1)) + 1;
classes = new Array;
classes[1] = "bg0";
classes[2] = "bg1";
classes[3] = "bg2";
classes[4] = "bg3";
classes[5] = "bg4";
classes[6] = "bg5";


// Ensure you have an array item for every image you are using.
var classy= classes[rand1];

function setBackground() {
  if (document.body) {

    document.body.className = classy;
  }
}
</script>

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js" type="text/javascript"></script>
<![endif]-->

Can I do this?  The above code generates background images that I do NOT want to show in mobile devices -- especially mobile phones (android /iphone).  Using Twitter Bootstrap.

Thanks

Rowby

Edited By: rowby
12-Jan-14 19:58:44

rowby
Junior Modder
ranks
useravatar
Offline
24 Posts
User info in posts
Administrator has disabled public posting

Re: Change header or put a javascript snippet in the header IF Mobile

Hello

I have run into some confusion.

I have two rules.  Both are URL based.   

Rule 1  In Environment  URL is www.bananas.com   No browsers are selected.

Rule 2  In Environment  URL is www.bananas.com   Every type of mobile and tablet selection is selected (Android, Ipod, Ipad, Iphone Blackberry, etc.)

In Rule #1 in the Actions tab, in "HTML head include 1" I include some Raw HTML for the header.  It is javascript etc for a background image slideshow. 
For Set TemplateStyle it is selecting my normal template.



In Rule #2 in the Actions tab, I don't have anything in the "HTML head Include 1". (Actually I added some debugging words... see below)
For Set TemplateStyle it is selecting my mobile version of the template.

However when I view the page in an Android tablet or cell I still see the background slideshow -- because the RAW HTML Header from Rule #1 is being inserted into Rule #2. 

I have a utility that lets me view source code on my Android tablet I see the slide show javascript code, even though it is not in Rule #2.   I know it is running Rule #2 because I added some raw temporary debugging words in HTML Head 1 "This is the Mobile Rule"

Just to be sure, I went to Rule #1 and removed the RAW HTML from the HTML Head 1 field -- and refreshed the tablet and cell and the slideshow code is removed -- and is still showing me my debugging words "This is Mobile Rule".

To be doubly sure, I added a Third rule for the same domain.  This time I did not select any mobile options.   I also included no RAW HTML in the "HTML Head 1".  In other words, there is no slide show rule set.  It is set for a specific Article #.  When I go to that article in a non-mobile browser, it shows the slideshow.  So again, the HTML for header is inserted into that rule because it has the same url as rule #1 -- which is the only rule that has the slide show code in the header.

So it seems to be there is a possible bug in the url detection so far as the HTML Head code is concerned.  If it is the same URL it will put the Header HTML into any rule that has the same URL.

All caching is turned off, including joomla's System - Cache.

???

Rowby

rowby
Junior Modder
ranks
useravatar
Offline
24 Posts
User info in posts
Administrator has disabled public posting

Re: Change header or put a javascript snippet in the header IF Mobile

Hi Rowby,

First of all, have you tried turning on Chameleon's Debugging mode? It's in the Config panel you can find on the Rule Chain page. With that turned on you'll see all the rules that are being tried, and the results in each case.

That should be your first port of call in a situation like this when you are not sure why particular rules are being used and actions performed.

However I think that what is happening here is "expected behaviour" with the way that you have the rules set up:

Bear in mind that with Chameleon, each rule is tried in turn. There's an important control in the Succeed and Fail actions that determines what happens *next*. Either it quits the rule chain, or continues to the next rule, or does a redirect.

Another thing to bear in mind is that the "HTML head Include" boxes are cumulative. If you add something in rule 1, then it continues to rule 2 which adds some more, then both will be added. Adding something in a later rule does NOT replace something you added in an earlier rule.

So I think that in your case you probably want your slideshow to appear for non-mobile browsers, and a mobile template set for mobile devices.

You could do this with just 1 rule:
- detect "mobile" and "tablet" devices (that should catch everything, no need to get more specific than that)
- in the Succeed action, set your mobile templatestyle
- in the Fail action, paste the JS code for your slideshow into the HTML Head code box.

Is that what you're after?

Best regards,
Stephen

Stephen Brandon
MetaMod / Chameleon developer
If you use MetaMod or Chameleon, please post a rating and a review at the Joomla! Extensions Directory: Chameleon | MetaMod

metamodguy
useravatar
Offline
3319 Posts
User info in posts
Administrator has disabled public posting

Re: Change header or put a javascript snippet in the header IF Mobile

Hi Stephen,

Perfect!  It worked great!  (Genius!)

Thanks!

Rowby

rowby
Junior Modder
ranks
useravatar
Offline
24 Posts
User info in posts
Administrator has disabled public posting

Board Info

Board Stats:
 
Total Topics:
1674
Total Polls:
6
Total Posts:
5917
Total Posts Today:
5
User Info:
 
Total Users:
11536
Newest User:
lucero1247
Members Online:
4
Guests Online:
139


Forum Legend:

 Topic
 New
 Locked
 Sticky
 Active
 New/Active
 New/Locked
 New Sticky
 Locked/Active
 Active/Sticky
 Sticky/Locked
 Sticky/Active/Locked