Easter eggs jQuery plugin

I decided that a project I was working in needed more monsters so I created a quick jQuery plugin to add them, have fun.

//Change image
//<div data-swapcss-value='url("imageurl.png")'>

//Full options
//<div data-swapcss-property='background-color' data-swapcss-value='red'  data-swapcss-count="3">
var swapCssConfig = {}
var swapCssConfig.currentCount = 0;
(function ($) {
    $.fn.swapCSS = function (options) {

        var settings = jQuery.extend({
            clickCount: 6,
            property: 'background-image'
        }, options);

        var currentElement = this;

        currentElement.click(function () {
            warningClickCount++;
            if (swapCssConfig.currentCount > (settings.clickCount - 1)) {
                currentElement.css(settings.property, settings.value);
                currentElement.unbind('click');
            }
        });
    };

    $(document).ready(function () {
        $('[data-swapcss-value]').each(function (index) {
            var item = $(this);
            var options = { value: item.attr('data-swapcss-value') };

            if (item.attr('data-swapcss-count') !== undefined)
                options.clickCount = item.attr('data-swapcss-count');   

            if (item.attr('data-swapcss-property') !== undefined)
                options.property = item.attr('data-swapcss-property');

            item.swapCSS(options);
        });
    });

})(jQuery);

Markdown and Javascript

When I created my demo site I wanted to use markdown for all the text so that I can have the same text in github as when the site is displayed. After searching the internet io found showdown but there was a problem it is not very well maintained. There however is an offshoot that the guys at stackoverflow are using called pagedown.

Notice: There is a jQuery plugin I created the details on how to use it are further down this page.

To get pagedown working get the code from the pagedown repo (if you can’t be bothered with hg you can grab it here), then use the following code:

<html>
    <head>
      <title>Example</title>
    </head>
    <body>
        <button id="load">Load Markdown</button>
        <div id="content"></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="pathto/Markdown.Converter.js"></script>
        <script>
            $(document).ready(function () {
                $('#load').click(function(e) {
                    e.preventDefault();
                    //Get the markdown
                    $.ajax({
                        url: 'yourfile.md',
                        dataType: 'html',

                        success: function(data) {
                            //do the markdown replace
                            var converter = new Markdown.Converter();
                            var result = converter.makeHtml(data);

                            $('#content').replaceWith(result);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

jQuery Plugin

I have also created a jquery plugin to simplify the process that I use for this site to get it working download the plugin then do the following:

<html>
    <head>
      <title>Example</title>
    </head>
    <body>
        <button id="load">Load Markdown</button>
        <div id="content"></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="pathto/Markdown.Converter.js"></script>
        <script src="pathto/jquery.markdown.js"></script>
        <script>
            $(document).ready(function () {
                $('#load').click(function(e) {
                    $('#content').loadMarkdown({
                         url: "yourfile.md",
                         replaceWith: true, //true use replaceWith ELSE appendTo when adding
                         preAdd: function(result) {
                            //Replace some of the generated text
                         },
                         postAdd: function() {
                             //Do anything you want to after the content is added
                         }
                    });
                });
            });
        </script>
    </body>
</html>

Working with the Twitter Bootstrap modal

Twitter Bootstrap Modal

I have been playing with the Twitter Bootstrap but one thing seemed to be missing, there is no javascript libraries to do the fancy stuff like modals and drop downs. After a little looking around I found the people who made the twitter bootstrap are actually creating a bunch of javascript to do all the fancy stuff.

But there are two problems:

  1. To use the JS you need to use the work in progress build of the CSS,
  2. There is no way to make the popup a proper modal that you cannot close without selecting something.

So I figured that it was time to hack together a solution, heres what I managed.

To get the twitter modal work for you, download and include my hacked modal JS. Then do the following:

<html>
<head>
  <title>Example</title>
  <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css">
  <style>
  /*Fixes the positioning of the modal*/
 .modal {
    top: 0px;
    margin-top: 60px;
    z-index: 10002; /*Make the modal display over the toolbar*/
 }
  /*From the 1.3 work in progress build*/
 .modal-backdrop {
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001; /*Make the modal display over the toolbar*/
 }
 .modal-backdrop.fade {
    opacity: 0;
 }
 .modal-backdrop, .modal-backdrop.fade.in {
    filter: alpha(opacity=50);
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;
 }
 .hide {
    display: none;
 }
 .fade {
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -ms-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    opacity: 0;
 }
 .fade.in {
    opacity: 1;
 }
 </style>
</head>
<body>
  <!-- The Modal Dialog  -->
  <div id="modal-from-dom" class="modal hide fade">
    <div class="modal-header">
      <h3>Modal Heading</h3>
     <a href="#" class="close">&times;</a>
    </div>
    <div class="modal-body">
      <p>One fine body…</p>
    </div>
    <div class="modal-footer">
     <a id="btnPrimary" href="#" class="btn primary">Primary</a>
     <a id="btnSecondary" href="#" class="btn secondary">Secondary</a>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="span16 columns">
        <div class="span4 columns">
      </div>
    </div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="[pathto]/mc-bootstrap-modal.js"></script>
  <script>
    $(function () {
      //Sets up the modal
      var domModal = $("#modal-from-dom").modal({
        backdrop: true, //Show a grey back drop
        //closeOnEscape: true, //Can close on escape
        modal: true //display it as a modal
      });

      $('#modal-from-element').click(function () {
        domModal.toggle(); //Show the modal
      });

      $('#btnPrimary').live('click', function(){
        alert('btnPrimary clicked!');
        domModal.close(); //Close the modal
      });

      $('#btnSecondary').live('click', function(){
        alert('btnSecondary clicked!');
        domModal.close(); //Close the modal
      });
  })
  </script>
</body>

jQuery a Quick Start

I “volunteered” to do a developer session/presentation on jQuery for work I made the slides on Slide Rocket and showed the examples the javascript using Cloud9 IDE. 

If anyone is interested or wants to steal it and get some brownie points where they work, the slides are here and examples are hosted on my github repo called jQueryExample.

Update: The links seem to be a little buggered on the final slide so here they are: