tabbit

Wed May 09 2018
Copied to clipboard! Copy reply
<style>
        .pushdown {
            display: table;
            height: 200px;
            width: 100%;
            
        }

        .pushdown > div {
            display: table-cell;
            vertical-align: middle;
        }

        .pushdown > .pushdown-left {
            width: 40%;
            background: url('https://www.rosettastone.com/lp/globals/img/get-on-the-list/logo-desktop.png')  no-repeat #ecc200 right center;
            background-size: 50%;
    
        }

        .pushdown-divider {
            width: 25px;
            background: url('https://www.rosettastone.com/lp/globals/img/get-on-the-list/divider.jpg') no-repeat #262626;
            background-size: contain;
        }

        .pushdown > .pushdown-right {
            background: url('https://www.rosettastone.com/lp/globals/img/get-on-the-list/bg-desktop.jpg') #262626;
            padding-left: 2em;
            background-size: contain;
        }
        .pushdown > .pushdown-right h3 {
            font-size: 1.5em;
            color: #fff;
            margin-top:0;
        }

        .pushdown > .pushdown-right p {
            color: #ecc200;
        }

        .pushdown-actions {
            position: relative;
            margin-top: 1em;
        }
        .pushdown > .pushdown-right input[type=email] {
            display: inline-block;
            padding: 8px;
            box-sizing: border-box;
            width: 200px;
            border: 1px solid transparent;
        }

        .pushdown > .pushdown-right input[type=submit] {
            background: transparent;
            border: 2px solid white;
            color: white;
            padding: 8px 20px;
            display: inline-block;
            transition: background-color 0.3s, color 0.3s;
        }

        .pushdown-right input[type=submit]:hover {
            background-color: #fff;
            color: #262626
        }

        .email-error {
            position: absolute;
            bottom: -25px;
            color: red;
            display: none;
        }

        @media (max-width: 600px) {
            .pushdown {
                height: auto;
                padding: 0.5em 0.5em 2em 0.5em;
                box-sizing: border-box;
                display:  block;
                background: url('https://www.rosettastone.com/lp/globals/img/get-on-the-list/bg-mobile.png')  #262626;
                background-size: contain;
            }
            .pushdown, .pushdown > div {
                display:  block;
                margin: 0 auto;
            }

            .pushdown > .pushdown-left {
                width: 100%;               

                
            }
            .pushdown > .pushdown-right {
                padding-left: 0;
                background: url('https://www.rosettastone.com/lp/globals/img/get-on-the-list/logo-mobile.png') no-repeat;
                background-position: top right;
                background-size: 35%;
            }

            .pushdown > .pushdown-right h3 {
                width: 50%;
                padding-top: 20px;
                line-height:  32px;
                font-size: 2em;
            }

            .pushdown > .pushdown-right p {
                margin-top: 15px;
                width: 70%;
                line-height: 25px;
            }
            
            .pushdown-actions {
                text-align: center;                
                position: relative;
            }
            .pushdown > .pushdown-right input[type=email],
            .pushdown > .pushdown-right input[type=submit] {
                display: block;
                width: 100%;
                margin: 0 auto;
                padding: 15px 10px;
            }

            .pushdown > .pushdown-right input[type=submit] {
                margin-top: 1em;
                border-radius: 4px;
            }            
        }
        
    </style>

    <div class="pushdown">
        <div class="pushdown-left"></div>
        <div class="pushdown-divider"></div>
        <div class="pushdown-right">
            <h3>Be the first to know</h3>
            <p>Sign up for a first look at our best Black Friday and Cyber Monday deals.</p>

            <form class="pushdown-actions">
                <input type="email" placeholder="EMAIL ADDRESS" class="pushdown-email">
                <input type="submit" value="GET ON THE LIST">
                <div class="email-error">Email is invalid</div>
            </form>
        </div>
    </div>

    <script>
      console.log('---------------------')
        $(function(){ // added for doc-ready and removing global interference
            /*
             * So i started doing it jqueryless, then used jquery
             * for some dom stuff because we still use jquery everywhere
             * and they want this launched asap.
             * ps: rip viserion
             */
            var isDesktop = (function() {
                if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) 
                {
                    return false
                }
                else
                {
                    return true
                }
            })();

            var qs = document.querySelector.bind(document)

            // Append pushdown to top, then make it visible
            var $pushdown = $('.pushdown').detach()
            $('body').prepend($pushdown)
            $pushdown.slideDown()

            var $form = qs('form.pushdown-actions')
            $form.addEventListener('submit', function(e) {
              e.preventDefault()
              var email = qs('.pushdown-email').value

              if (! validateEmail(email))
              {
                  showErrorMessage()
              }
              else
              {
                verify_real_email_pushdown(email, emailAcceptedPushdown, emailRejectedPushdown)
              }
            })

            function submitEmailToEC(email)
            {
                var defer = jQuery.Deferred()
                var data = {
                    email : email,
                    cis_name : 'GetOnTheList',
                    website: 'US_WEBSITE',
                    demo_type : isDesktop ? 'Specialoffer_Desktop' : 'Specialoffer_Mobile',
                    form_url : window.location.pathname,
                    newsletter_type : "Bottom_Landing_GOTL",
                    cid : _satellite.getVar("mostrecentcampaign")
                }

                var url = (window.location.href.search(/(\.stg\.)|(\.local)/i)>-1 ?'//www.stg' :'//www')
                + '.rosettastone.com/?p_p_id=rosettaajaxsubmit_WAR_rosettaajaxsubmitportlet&p_p_lifecycle=2&redirect2mobile=no';

                var request = $.ajax({
                    url: url,
                    type: "POST",
                    data: data
                });

                request.done(function(msg) {
                if (JSON.parse(msg)[0]['cisFlag']  == 'true') {
                    defer.resolve('success')
                } else {
                    defer.resolve('fail')
                }
                })

                return defer.promise()  
            }

            function validateEmail(email)
            {
                var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            }

            function showErrorMessage()
            {
                qs('.email-error').style.display = 'block'
            }

            function emailAcceptedPushdown(email)
            {         
              $.when( submitEmailToEC(email)).then(
                // Success
                function() {
                  $(document).trigger('demo_events_version', {version: 1})
                  $(document).trigger('special_offer')
                  window.setTimeout(function() {
                    window.location.href = '//rosettastone.com/lp/sbsr/listagi'
                  },1000)
                  
                },
                // Rejected
                function() {
                  showErrorMessage()
                }
              )
            }

            function emailRejectedPushdown()
            {
              showErrorMessage()
            }

            function verify_real_email_pushdown(email, success_cb, failure_cb)
            {        


              if(window.briteverifyToken)
              {

                var token = window.briteverifyToken;
                var url = 'https://forms-api-v1.briteverify.com/api/submissions/verify.json?callback=briteverify&form_token=4047df1c-5078-4e96-b335-f61aa2b92891&token='+token+'&email='+email+'&_='+Date.now();

                var script = document.createElement('script');
                script.src = url;
                document.body.appendChild(script);


                // if the script url doesn't work (maybe they changed the api)
                script.onerror = function(e)
                {
                  // ignore verification and move on
                  success_cb(email);
                };

                window.briteverify = function(data)
                {
                  try
                  {

                    if(data.status!=='invalid')
                    {
                      success_cb(email);
                    }
                    else
                    {
                      failure_cb();
                    }
                    document.body.removeChild(script);
                }
                catch(e)
                {
                  // if error, ignore verification and move on
                  success_cb(email);
                }
                  delete window.briteverify;
                }
              }
            }
        });
    </script>