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...
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
12-Jan-14 20:58:44
- rowby
- Junior Modder
-
-
-
- 24 Posts
-
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
-
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
- metamodguy
-
-
- 3329 Posts
-
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
-
-
-
- 24 Posts
-
- Index
- » Chameleon / ChameleonLite
- » Chameleon
- » Change header or put a javascript...
Board Info
- Board Stats:
- Total Topics:
- 1682
- Total Polls:
- 6
- Total Posts:
- 5938
- Dormant:
- User Info:
- Total Users:
- 5873
- Newest User:
- david44x48
- Members Online:
- 0
- Guests Online:
- 95
- Online:
- There are no members online
Forum Legend:
Topic
- New
- Locked
- Sticky
- Active
- New/Active
- New/Locked
- New Sticky
- Locked/Active
- Active/Sticky
- Sticky/Locked
- Sticky/Active/Locked