/An-Anonymous-Pen.markdown

## An-Anonymous-Pen.markdown

      
    Raw
  

              An-Anonymous-Pen.markdown
            
          
    An Anonymous Pen

This combination of javascript and CSS will redirect tablet users from the mobile version of your Blackbaud NetCommunity website to the desktop version of the site.  See notes inline for more information.
Updated: This update allows developers to test the site in a desktop browser by appending "&DeliveryChannelID=3F6B7EA0-73E8-462B-A075-DE89431816A4" (for PID= URLs) and "?DeliveryChannelID=3F6B7EA0-73E8-462B-A075-DE89431816A4" (for friendly URLs) to the current page's URL.  Before, doing so triggered the redirect.  Happy mobile BBNCing!
I'd be remiss without mentioning that the kind folks in Blackbaud NetCommunity Support do not officially support this approach, and may not be able to help you resolve potential or future issues related to this script.
Special thanks to Daniel Buzzell, J. Schultz and Matthew Cira for pair-programming this solution.
A Pen by Secret Sam on CodePen.
License.

  
## index.html
<!-- ABOUT THIS CODE:
Blackbaud NetCommunity (and BBIS) v6.50 detect tablets as mobile devices by default, which means that the phone version of your site will appear on tablets for non-responsive, out-of-the-box mobile sites.

STEP 1:
First, we wrap our <script>s in a <div> because Blackbaud NetCommunity will wrap them in a <p> otherwise.

STEP 2:
Next, we use a @media query (Line 19) to hide the site from tablets with * { display: none; }

STEP 3:
With the site hidden, we use javascript to detect iPad tablet users (Line 27) (Note: A future fork here may include Android and others too, but for now, just iPad since it is killing most other tablets in terms of traffic…and other tablets will come and go w/little impact)

STEP 4:
Next, we use Blackbaud NetCommunity's built in "ViewAsDesktop" capability/function (Line 29) to send these users to the desktop version of the site
-->
<!-- BEGIN Scripts -->
<div class="wrapScript">
<style type="text/css">
@media only screen and (device-width: 768px) {
/* Hide site from general iPad layouts
to avoid mobile site temporarily loading */
* { display: none; }
}
</style>
<!-- BEGIN Redirect -->
<script type="text/javascript">
var iPad = (/ipad/i.test(navigator.userAgent.toLowerCase()));
if (iPad) {
document.location = "javascript:BLACKBAUD.netcommunity.ViewAsDesktop();";
}
</script>
</div>
<!-- END Scripts -->
<!-- BEGIN Page -->
	<!-- ABOUT THIS CODE:
	Blackbaud NetCommunity (and BBIS) v6.50 detect tablets as mobile devices by default, which means that the phone version of your site will appear on tablets for non-responsive, out-of-the-box mobile sites.

	STEP 1:
	First, we wrap our <script>s in a <div> because Blackbaud NetCommunity will wrap them in a <p> otherwise.

	STEP 2:
	Next, we use a @media query (Line 19) to hide the site from tablets with * { display: none; }

	STEP 3:
	With the site hidden, we use javascript to detect iPad tablet users (Line 27) (Note: A future fork here may include Android and others too, but for now, just iPad since it is killing most other tablets in terms of traffic…and other tablets will come and go w/little impact)

	STEP 4:
	Next, we use Blackbaud NetCommunity's built in "ViewAsDesktop" capability/function (Line 29) to send these users to the desktop version of the site
	-->
	<!-- BEGIN Scripts -->
	<div class="wrapScript">
	<style type="text/css">
	@media only screen and (device-width: 768px) {
	/* Hide site from general iPad layouts
	to avoid mobile site temporarily loading */
	* { display: none; }
	}
	</style>
	<!-- BEGIN Redirect -->
	<script type="text/javascript">
	var iPad = (/ipad/i.test(navigator.userAgent.toLowerCase()));
	if (iPad) {
	document.location = "javascript:BLACKBAUD.netcommunity.ViewAsDesktop();";
	}
	</script>
	</div>
	<!-- END Scripts -->
	<!-- BEGIN Page -->