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

Forum Login

The META Shop

Download Purchased Files
Your Cart is empty.
Show Cart

buy for Joomla 1.7-3.8
buy for Joomla 1.5

buy for Joomla 2.5-3.8
buy for Joomla 1.5

Welcome to the MetaMod and Chameleon Support Forums.

Before posting, please check out the FAQs.

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

Index
» Chameleon / ChameleonLite
» Chameleon
» Change header or put a javascript...

Page: 1

The Permalink allows you to share this Post with Friends and other Users. To use, click the Permalink and then copy the URL from your Browsers Adress Bar.#1 Permalink

09-Jan-14 10:50:14

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; 24 Posts

Administrator has disabled public posting

The Permalink allows you to share this Post with Friends and other Users. To use, click the Permalink and then copy the URL from your Browsers Adress Bar.#2 Permalink

13-Jan-14 03:14:16

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; 24 Posts

Administrator has disabled public posting

The Permalink allows you to share this Post with Friends and other Users. To use, click the Permalink and then copy the URL from your Browsers Adress Bar.#3 Permalink

13-Jan-14 08:03:23

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