Full-Screen Bootstrap Modal

If you’re anything like I am then let me apologize for that right now.  That said, if you’re anything like I am then you probably like Bootstrap a lot.  It’s clean, easy to use, looks good and saves an assload of time.

I also really like Bootstrap’s modals.  I am a big fan of being able to present information or forms without having to redirect the user to another page.  One request I frequently get is the ability to view the modal in ‘full-screen’ mode.  Obviously, as of Bootstrap 3, that is not a built-in option.  So I made it one.

The basic concept is pretty simple:

  1. We create a CSS class called .modal-fs (following the Bootstrap class naming structure: modal-lg, modal-dialog, etc).
  2. We make a button in the header of the modal using Bootstraps Glyphicons to trigger the Full-Screen function.
  3. We add the jQuery function.
  4. Done.

You can download the source files here.
You can view a demo here.
Check out Bootstrap here
See a JS Fiddle of this demo here

Here’s our HTML:

<!DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     
     <title>Bootstrap FS Modal Example</title>

     <!-- Bootstrap CSS and Custom style sheet-->
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
     <link href="FSmodal.css" rel="stylesheet">
 </head>

 <body>
     <!-- Button trigger modal -->
     <div class="row" style="text-align:center;">
         <button type="button" class="btn btn-primary btn-lg launchModalBtn" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
     </div>

     <!-- Modal -->
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                 </div>
                 <div class="modal-body">
                     <p style="text-indent:1em;">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat gravida eleifend. Duis dui lacus, ullamcorper eu finibus nec, scelerisque in metus. Quisque imperdiet porttitor nisi, vel tempus ex. Duis nec enim tortor. Aliquam et sapien vitae
 enim egestas ornare eget in elit. Fusce vitae risus at sem congue iaculis at sit amet nibh. Nulla quis elementum tortor. Curabitur sed scelerisque lectus. Morbi quis turpis dolor. Morbi porttitor auctor nisi, vitae cursus tortor. Proin molestie
 congue blandit. Praesent pulvinar, ante eu commodo gravida, ante orci maximus diam, sit amet viverra enim ex a orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst.
                   </p>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                   <button type="button" class="btn btn-primary">Save changes</button>
              </div>
          </div>
      </div>
  </div>

     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

 
</body>
</html>

As you can see, we just create a simple Bootstrap page with a modal trigger button and a modal and link our various CSS / JS files.

Here’s the CSS:
(this is referenced as FSmodal.css in the header of our HTML)

html,
body {
 width: 100%;
 height: 100%;
}

.launchModalBtn {
 margin: 20% auto;
}

.linklessA {
 cursor: pointer;
 text-decoration: none;
}

.modal-fs {
 margin: 0;
 position: fixed;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 width: 100%;
 height: 100%;
 padding: 0;
}

div.modal-fs > div.modal-content {
 margin: 0;
 width: 100%;
 height: 100%;
 overflow: scroll;
 min-height: 100%;
 padding: 0;
}

div.modal-fs > div.modal-content > div.modal-footer {
 width: 100%;
 position: absolute;
 bottom: 0;
}

Pretty straight-forward.  You can delete the html, body and .launchModalBtn classes if you want, they’re just for the spacing of the modal trigger button. The class .modal-fs is the one that we’ll be applying to the modal itself.  The function for this is incredibly simple.  Segue to…

The jQuery:

<script>
$(document).ready(function(e) {
   //replace the 'close' button with an 'expand' button- I'm using Bootstraps glyphicons but use whatever you want
   $('<a class="linklessA FSModal" style="float:right;"><span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span></a>').insertBefore("div.modal-header button.close");
   $("div.modal-header button.close").remove();

 //apply the on click function
 $(".FSModal").on('click', function() {
   $(this).find('span').toggleClass('glyphicon-resize-full glyphicon-resize-small')
   $(this).closest("div.modal-dialog").toggleClass('modal-fs');
   });//end on .FSModal click
 });//end on doc ready
</script>

Here we remove the ‘close’ button from the top right of the modal window and replace with a full-size toggle button.  The reason I did this programmatically instead of just deleting the button and replacing it in my HTML is that this is a quick way to apply this FS functionality to ALL modals across ALL your pages by just saving this script in a js file called something like ‘fsmodal.js’ and linking it on your pages.  Alternatively, you can copy-paste it below your jQuery and Bootstrap JS calls at the bottom of your document.
Next, we add the function that simply toggles the modal-fs class and toggles the icon from the ‘full-size’ icon to the ‘resize’ icon.

And that’s about it.  You can go crazy with it and if you modify to do some cool stuff please let me know so I can see what people are doing with it.

Thanks for reading.

Simple Password Generator

Update: 3/23/2015- Added special characters.  Look for orange text to designate new lines in code.

A while back I became incredibly frustrated with my passwords.  Nothing seemed safe enough and I had a hard time coming up with ‘random’ passwords on my own.  So I wrote this.  It’s nothing complex and you can get this up and running in about 5-10 minutes.

The only real functionality is contained in the index.php file and the php/generator.php file.  The CSS and JS are mostly for show and for Bootstrapping and, obviously, can easily be modified for your own needs.

Please note that this is using an out-dated version of Bootstrap.  You may need to modify the code slightly if you are using Bootstrap v > 3

HERE’S THE WORKING DEMO IF’N YOU WANT TO SEE IT

  1. To start, DOWNLOAD THE SOURCE FILES HERE
  2. So, let’s get started with the index.php file.  You can either reference the downloaded version or write up your own interface but the important areas are the input field wherein you specify how many characters you want your password to be:

    <label for=”lengthfield”>NUMBER OF CHARACTERS:</label>
    <input type=”number” name=”lengthfield” id=”lengthfield” placeholder=”10″ /><br />
    <label>
    <input type=”checkbox” class=”checkbox” id=”inclSpecChar” name=”inclSpecChar” value=”yes” checked> <span class=”specCharSpan”>INCLUDE SPECIAL CHARACTERS (&, #, $, *, %, !, @)</span></label>
    <div id=”passwordBlock” class=”alert alert-block alert-success fade in hide”>
    <button class=”close” type=”button” data-dismiss=”alert”>×</button>
    <h3 class=”alert-heading”>HERE IS YOUR AWESOME NEW PASSWORD</h3>
    <h2 id=”passHere”></h2>
    <p id=”copyArea”><a id=”copyToClipBtn” class=”btn”></a>COPY PASSWORD TO CLIPBOARD</p>
    </div>

  3. Some sort of a ‘submit’ button and the area wherein the password is displayed. Here’s mine:

     <a class=”btn btn-warning btn-large btn-success” id=”submitBtn” href=”#”>GENERATE PASSWORD</a>

    And here’s the corresponding code:

         $(“#submitBtn”).click(event, function(){
              $.ajax({
                   url: ‘php/generator.php’,
                   type: ‘POST’,
                   data: {charlength:$(“#lengthfield”).val(), $(“inclSpecChar”).val()},
                        success: function( msg ) {
                             $(“#passHere”).text( msg );
                             $(“#passwordBlock”).fadeIn(‘fast’);
                        },  //end on success
                        error: function( msg ){
                             alert(‘Failed to generate password. Please try again.\r\nError: ‘+msg);
                       }//end on fail
                  });//end ajax call
    });//end on submit click

  4. Lastly, here’s the PHP that generates the password:


    $length = $_POST['charlength'];
    if(!$length){
    $length = 10;
    }
    if($_POST['inclSpecChar']=='yes'){
    $vowels = htmlspecialchars('aeuyAEUY&$#*%@!');
    } else {
    $vowels = 'aeuyAEUY';
    }
    $consonants = 'bdghjmnpqrstvzBDGHJLMNPQRSTVWXZ23456789';
    $addon = '';
    $alt = time() % 2;
    for ($i = 0; $i < $length; $i++) {
    if ($alt == 1) {
    $addon .= $consonants[(rand() % strlen($consonants))];
    $alt = 0;
    } else {
    $addon .= $vowels[(rand() % strlen($vowels))];
    $alt = 1;
    }
    }
    echo $addon;

Continue reading Simple Password Generator

hello world!

i keep kicking around the idea of starting an electro-punk group called hello world!

our first song would be titled if( !youLoveMe ){ return: false; }”

the next song is a love song titled “01001001 00100000 01101100 01101111 01110110 01100101 00100000 01111001 01101111 01110101 (is how robots say I love you)”

i have a lot of these little gems tucked away inside my head.  maybe someday the world will be graced with my genius wit.