API tools faq
paste
ayand04

using enquire.js

ayand04
May 9th, 2016
59
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 9.06 KB | None | 0 0
raw download clone embed print report
  1. HTML
  2.  
  3. <div>
  4.    <div id="actions_container">
  5.         <button id="google" type="button"><i class="fa fa-google fa-lg fa-fw" aria-hidden="true">&nbsp;</i>CONNECT WITH GOOGLE</button>
  6.         <button id="signup" class="reg-link" type="button">SIGN UP</button>
  7.         <button id="signin" class="reg-link" type="button">SIGN IN</button>
  8.     </div>
  9. </div>
  10.  
  11.    
  12. <div id="signup_container">
  13.     <input type="text" placeholder="First Name">
  14.     <input type="text" placeholder="Last Name">
  15.     <input type="email" placeholder="Email">
  16.     <input type="password" placeholder="Create Password">
  17.     <button id="join" type="button">JOIN YUM YUM</button>
  18. </div>
  19.  
  20. <div id="login_container">
  21.     <input type="email" placeholder="Email">
  22.     <input type="password" placeholder="Password">
  23.     <div id="forgot">Forgot Your Password?</div>
  24.     <button id="login" type="button">SIGN INTO YUM YUM</button>
  25. </div>
  26.  
  27.  
  28.  
  29. CSS
  30.  
  31. @charset "utf-8";
  32. /* CSS Document */
  33.     html, body
  34.     {
  35.         width:100%;
  36.         height: 100%;
  37.     }
  38.     body
  39.     {
  40.         background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url(../images/bg.jpg);
  41.         background-attachment: fixed;
  42.         background-position: center center;
  43.         background-repeat: no-repeat;
  44.         background-size: cover;
  45.     }
  46.     /*---Login Page---*/
  47.     h7
  48.     {
  49.         font-family: 'Roboto', sans-serif;
  50.         font-size:70px;
  51.         color:#DDDDDD;
  52.     }
  53.     #container
  54.     {
  55.         margin-left:25%;
  56.         margin-right:25%;
  57.     }
  58.     #greeting
  59.     {
  60.         width:100%;
  61.         margin-top:15%;
  62.         margin-bottom:15%;
  63.     }
  64.     #first_part, #second_part
  65.     {
  66.         text-align:center;
  67.     }
  68.     #first_part
  69.     {
  70.         font-size:52px;
  71.         line-height:0.8;
  72.         margin-bottom:30px;
  73.     }
  74.     #second_part
  75.     {
  76.         font-size:30px;
  77.     }
  78.     #google
  79.     {
  80.         background-color: #D34836;
  81.         width:70%;
  82.         height:35px;
  83.         margin-bottom:20px;
  84.         margin-left:15%;
  85.         margin-right:15%;
  86.         border:none;
  87.         color:#FFFFFF;
  88.         font-family:'Source Sans Pro', sans serif;
  89.         font-size:15px;
  90.         border-radius:5px;
  91.         -moz-border-radius: 5px;
  92.         -webkit-border-radius:5px;
  93.     }
  94.     #signup, #signin
  95.     {
  96.         font-family:'Source Sans Pro', sans serif;
  97.         font-size:15px;
  98.         background-color:transparent;
  99.         border: solid 1px;
  100.         border-color:#FFFFFF;
  101.         border-radius:5px;
  102.         -moz-border-radius: 5px;
  103.         -webkit-border-radius:5px;
  104.         color:#FFFFFF;
  105.         width:33.6%;
  106.         height:35px;
  107.     }
  108.     #signup
  109.     {
  110.         margin-left: 15%;
  111.         margin-right:1%;
  112.     }
  113.     #signin
  114.     {
  115.         margin-right: 15%;
  116.         margin-left:1%;
  117.     }
  118.    
  119.    
  120.    
  121.     #signup_container, #login_container
  122.     {
  123.         overflow:hidden;
  124.         text-align:center;
  125.         border-top: 1px solid #D1D1D1;
  126.         box-shadow:0px -1px 2px #888888;
  127.         -webkit-box-shadow:0px -1px 2px #888888;
  128.         -moz-box-shadow:0px -1px 2px #888888;
  129.         opacity:0.9;
  130.         position:absolute;
  131.         bottom:0px;
  132.         display:none;
  133.         background-color:#FFFFFF;
  134.         margin:25%;
  135.         width:50%;
  136.     }
  137. /*  .wideActive
  138.     {
  139.         margin:25%;
  140.         width:50%;
  141.     }
  142.     .narrowActive
  143.     {
  144.         margin:0;
  145.         width:100%;
  146.     }*/
  147.     #forgot
  148.     {
  149.         font-size:14px;
  150.         margin-top:4%;
  151.     }
  152.     input[type=text], input[type=email], input[type=password]
  153.     {
  154.         width:100%;
  155.         padding-bottom:20px;
  156.         padding-top:10px;
  157.         padding-left:10px;
  158.         padding-right:10px;
  159.         -webkit-box-sizing: border-box;
  160.         -moz-box-sizing: border-box;
  161.         box-sizing: border-box;
  162.         border:none;
  163.         border-bottom: 1px solid #D1D1D1;
  164.         color:#2A2929;
  165.     }
  166.     #join, #login
  167.     {
  168.         font-family:'Source Sans Pro', sans serif;
  169.         font-size:15px;
  170.         background-color:#111111;
  171.         border: solid 1px;
  172.         border-color:#111111;
  173.         border-radius:5px;
  174.         -moz-border-radius: 5px;
  175.         -webkit-border-radius:5px;
  176.         color:#FFFFFF;
  177.         width:94%;
  178.         height:35px;
  179.         margin-left:3%;
  180.         margin-right:3%;
  181.         margin-top:2%;
  182.         margin-bottom:5%;
  183.     }
  184.  
  185.    
  186. @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait)
  187. {
  188.     /*---Login Page---*/
  189.     h7
  190.     {
  191.         font-family: 'Roboto', sans-serif;
  192.         font-size:52px;
  193.         color:#DDDDDD;
  194.     }
  195.     #container
  196.     {
  197.         margin-left:8%;
  198.         margin-right:8%;
  199.     }
  200.     #greeting
  201.     {
  202.         width:100%;
  203.         margin-top:28%;
  204.         margin-bottom:32%;
  205.     }
  206.     #first_part
  207.     {
  208.         font-size:38px;
  209.         line-height:0.8;
  210.         margin-bottom:30px;
  211.     }
  212.     #second_part
  213.     {
  214.         font-size:22px;
  215.     }
  216.     #google
  217.     {
  218.         margin:0px;
  219.         width:100%;
  220.         margin-bottom:20px;
  221.     }
  222.     #signup, #signin
  223.     {
  224.         font-family:'Source Sans Pro', sans serif;
  225.         font-size:15px;
  226.         background-color:transparent;
  227.         border: solid 1px;
  228.         border-color:#FFFFFF;
  229.         border-radius:5px;
  230.         -moz-border-radius: 5px;
  231.         -webkit-border-radius:5px;
  232.         color:#FFFFFF;
  233.         width:48%;
  234.         height:35px;
  235.         margin:0px;
  236.     }
  237.     #signin
  238.     {
  239.         margin-left: 3%;
  240.     }
  241.  
  242.     input[type=text], input[type=email], input[type=password]
  243.     {
  244.         width:100%;
  245.         padding-bottom:20px;
  246.         padding-top:10px;
  247.         padding-left:10px;
  248.         padding-right:10px;
  249.         -webkit-box-sizing: border-box;
  250.         -moz-box-sizing: border-box;
  251.         box-sizing: border-box;
  252.         border:none;
  253.         border-bottom: 1px solid #D1D1D1;
  254.         color:#2A2929;
  255.     }
  256.     #join, #login
  257.     {
  258.         font-family:'Source Sans Pro', sans serif;
  259.         font-size:15px;
  260.         background-color:#111111;
  261.         border: solid 1px;
  262.         border-color:#111111;
  263.         border-radius:5px;
  264.         -moz-border-radius: 5px;
  265.         -webkit-border-radius:5px;
  266.         color:#FFFFFF;
  267.         width:94%;
  268.         height:35px;
  269.         margin-left:3%;
  270.         margin-right:3%;
  271.         margin-top:2%;
  272.         margin-bottom:5%;
  273.     }
  274.     #signup_container, #login_container
  275.     {
  276.         overflow:hidden;
  277.         text-align:center;
  278.         border-top: 1px solid #D1D1D1;
  279.         box-shadow:0px -1px 2px #888888;
  280.         -webkit-box-shadow:0px -1px 2px #888888;
  281.         -moz-box-shadow:0px -1px 2px #888888;
  282.         opacity:0.9;
  283.         position:absolute;
  284.         bottom:0px;
  285.         display:none;
  286.         background-color:#FFFFFF;
  287.         margin:0;
  288.         width:100%;
  289.     }
  290. }
  291.  
  292.  
  293.  
  294.  
  295.  
  296. JS (changed the effect on mobile width)
  297.  
  298. // Use enquirejs to listen for a media query match with matchMedia
  299. enquire
  300. .register('screen and (max-width: 480px)', {
  301.         match: function() {
  302.             // remove any namespaced click event then create
  303.             // a new listener to handle max-width: 480px clicky behaviour.
  304.             jQuery('.reg-link').off('click.userReg');
  305.             jQuery('.reg-link').on('click.userReg', function() {
  306.                 // create a context to the clicked link so we can reference it later
  307.                 var self = this;
  308.                 // check if the form is already open if not show it
  309.                 if (!jQuery(this).data('isOpen')) {
  310.                     // set the isOpen flag to true
  311.                     jQuery(this).data('isOpen', true);
  312.                     jQuery('#' + this.id + '_container').show("slide",{direction:'down'}, function() {
  313.                             // after the animation has fired register an event handler on the body
  314.                             // to listen for all clicks.
  315.                             jQuery('body').on('click.closeOutside', function(event) {
  316.                                 // if the event target isn't inside the 'open' container then we close
  317.                                 // it by removing the style attribute, then we remove the body click
  318.                                 if (!jQuery(event.target).closest('#' + self.id + '_container').length) {
  319.                                     // hide open form.
  320.                                     jQuery('#' + self.id + '_container').removeAttr('style');
  321.                                     // unbind event and remove the data flag so subsequent clicks
  322.                                     jQuery('body').off('click.closeOutside');
  323.                                     jQuery(self).data('isOpen', false);
  324.                                 }
  325.                             });
  326.                     });
  327.                 }
  328.  
  329.             });
  330.             // visual aids!
  331.             jQuery('.reg-link').css('color', 'red');
  332.         }
  333. })
  334. // Use enquirejs to listen for another media query match with matchMedia
  335. .register('screen and (min-width: 481px)', {
  336.         match: function() {
  337.             // remove any namespaced click event then create
  338.             // a new listener to handle min-width: 481px clicky behaviour.
  339.             jQuery('.reg-link').off('click.userReg');
  340.             jQuery('.reg-link').on('click.userReg', function() {
  341.                 // create a context to the clicked link so we can reference it later
  342.                 var self = this;
  343.                 // check if the form is already open if not show it
  344.                 if (!jQuery(this).data('isOpen')) {
  345.                     // set the isOpen flag to true
  346.                     jQuery(this).data('isOpen', true);
  347.                     jQuery('#' + this.id + '_container').fadeIn("fast", function() {
  348.                         // after the animation has fired register an event handler on the body
  349.                         // to listen for all clicks.
  350.                         jQuery('body').on('click.closeOutside', function(event) {
  351.                             // if the event target isn't inside the 'open' container then we close
  352.                             // it by removing the style attribute, then we remove the body click
  353.                             if (!jQuery(event.target).closest('#' + self.id + '_container').length) {
  354.                                 // hide open form.
  355.                                 jQuery('#' + self.id + '_container').removeAttr('style');
  356.                                 // unbind event and remove the data flag so subsequent clicks
  357.                                 jQuery('body').off('click.closeOutside');
  358.                                 jQuery(self).data('isOpen', false);
  359.                             }
  360.                         });
  361.                     });
  362.                 }
  363.             });
  364.             // visual aids!
  365.             jQuery('.reg-link').css('color', 'blue');
  366.         }
  367. });
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!