RottenApple is a useful stack to use if you have run into problems with a website and found that certain parts of your page fail to work as expected; especially on handled devices like iOS, Android, Blackberry and Windows Phones. RottenApple is similar (in some ways) to the free Conditionals Stack for Internet Explorer, but instead it can be setup to hide or show content on handheld devices. Options for iOS, Android and Blackberry detection are included.

For example, if you have a lightbox effect on your website you know doesn't work on iOS devices, you can set it to hide using the RottenApple stack, and display the lightbox content normally within the page flow. This ensures your desktop visitors can continue to experience the full glory of your website, and iOS users can receive alternative content.


If you view this webpage on a normal desktop web browser, you should see a message displayed in a green box. If you view this webpage on a mobile device or you temporarily change the user agent in your web browser developer tools, you should see a red box displayed and a different message.
Hello World!
You are viewing this content on either an iOS device, or a device running Blackberry or the Android operating system.
Hello World!
You are viewing this content on a normal desktop web browser.


Using RottenApple is pretty straightforward. Drag and drop a RottenApple stack into your stacks page. Two placeholders are shown, one marked iOS, Android and Blackberry Browsers and another marked Normal Web Browsers. Any stacks placed in the first box will only get shown on devices you tick and choose from in the RottenApple Settings. Stacks placed in the Normal Web Browser box will get shown on the normal web browsers.

The RottenApple stack uses jQuery code to check something called the user agent of the device, viewing your website. If one of iPod, iPhone, iPad, Android or Blackberry is detected, then your iOS content will get loaded. Otherwise the normal website content is displayed instead.

At the bottom of the RottenApple Settings is an input box marked Custom Selectors. Into this box, you can optionally type the HTML, ID or class of other page elements you wish to disable on iOS or mobile devices. You can either enter a single element like #subHeading or a string of element names, separated by commas, like #banner, #bookBlock, .imageFrame, .lightbox, table, video, iframe. If no custom selector is required, leave the box as it is.

Other Information

As well as being useful for sniffing out web browsers which might potentially have problems accessing parts of your website, RottenApple can be used to serve-up information useful for mobile users. For example, if your website provides an 'app' or a special optimised website for mobile devices, you could display a message about this. Likewise you could use it to display additional instructions on how a person could navigate the website.

Detecting web browsers based on their user agent is not 100% reliable. At times, some web browsers may have a user agent that is not recognised, or a person viewing your website might have changed their user agent in their browser settings, and forgot to turn it back to the default again.

RottenApple is compatible with most stacks, although those which have complicated scripting or append content to other parts of the page may not work as expected. This is provided as a free stack.


If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.