JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
<link rel="stylesheet" href="//dev.gpcontent.com/global-includes/css/bootstrap.css">
<link rel="stylesheet" href="//dev.graphicproducts.com/styles/older-styles.css">
<div id="mobileApp">
	<div class="position">
	<img id="mobilePhone" src="//dev.graphicproducts.com/images/mobile-app.png" alt="Labeling Assistant Mobile App" />
	<div id="contentBox">
		<h2 class="modern">Your Mobile Labeling Assistant is Here!<a href="#"><i class="icon-chevron-up pull-right" style="margin-left:7px;"></i></a></h2>
		<p class="mZero">Graphic Product's free mobile app allows you to:</p>
		<ul style="margin-bottom: 5px;">
			<li>Add and track projects</li>
			<li>Get quick, expert advice</li>
			<li>Access a huge library of reference tools</li>
		</ul>
		<button class="btn btn-primary noIcon pull-left" href="#">Start your project today!</button><span class="small pull-right mTop mLeft"><a class="underL" href="#" id="mobileCl">close window</a></span>
	</div>
	</div>
</div>

CSS

#mobileApp {position:fixed;bottom:0;left:40px;}
#mobileApp h2 {margin:0 0 5px;font-size:1.7em;cursor:pointer;}
#mobileApp p {line-height:16px;margin-bottom:4px;}
#mobileApp .position {width:475px;}
#mobilePhone, #contentBox {position:absolute;bottom:-158px;}
#mobilePhone {z-index:9999;left:0;bottom:-158px;cursor:pointer;}
#contentBox {left:102px;padding:1.5% 2% 2% 4.5%;background-color:#fff;border-top:5px solid #fd7800;border-right:5px solid #fd7800;z-index:8888;box-shadow:0px 4px 6px 1px #666;border-radius:0 17px 0 0;}

JavaScript

$(document).ready(function() {
    var $mobileAppContainer = $("#mobilePhone, #contentBox"),
		$mobilePhone = $("#mobilePhone"),
        $arrowIcon = $("#mobileApp i"),
        $contentBox = $('#contentBox'),
		$mobileCl = $("#mobileCl"),
        $mobileAppToggles = $('#mobilePhone, #contentBox h2');//$("#mobileApp i, #mobilePhone, #contentBox h2");
		
        
        
    // check for presence of gpMobileApp cookie
    // if the cookie is present, then show full expansion
    // otherwise, show short expansion
    function mobileAppCookie() {
        $.cookie.json = true;
        console.log('cookie json enabled',$.cookie.json);
        if (typeof $.cookie('gpMobileApp') !== 'undefined') {
            console.log('gpMobileApp cookie is set', $.cookie('gpMobileApp'));
            $.cookie('gpMobileApp', 'return visitor', { expires: 365, path: '/'});
            
            
            
        } else {
            console.log('gpMobileApp cookie not set');
            $.cookie('gpMobileApp', 'new', { expires: 365, path: '/'});
        }
        
        
    }
        
        
    // mobile app function
    function mobileApp(visitorStatus) {

        

        if (visitorStatus === 'new') {
            $mobileAppContainer.delay(1000).animate({bottom: 0}, 300, "linear", function() {
                if (!Modernizr.csstransforms) {
                    $arrowIcon.removeClass('icon-chevron-up').addClass('icon-chevron-down');
                } else {
                    $arrowIcon.animate({transform: 'rotate(-180deg)'}, 100, "linear");
                }
            });
        } else if (visitorStatus === 'return') {
            $mobilePhone.delay(1000).animate({bottom: -90}, 400, "linear");
			$contentBox.delay(1200).animate({bottom: -113}, 300, "linear");
        }
    }

    // insite.js is a dependency for this script
    // may need a counter to gracefully timeout should insite.js be unreachable
            mobileApp('new');


   ...