Skip to content

Instantly share code, notes, and snippets.

@sido
Created June 17, 2011 18:28

Revisions

  1. sido revised this gist Jun 19, 2011. 2 changed files with 1 addition and 7 deletions.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
    <script src="ui.flashcard.js"></script>
    <script>
    $("#myFlashcard").flashcard({ time: 10 });
    $("#myFlashcard").flashcard();
    </script>
    </body>
    </html>
    6 changes: 0 additions & 6 deletions ui.flashcard.js
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,6 @@
    (function($, undefined) {

    $.widget("ui.flashcard", {
    options: {
    time: 5
    },
    _create: function() {
    var widget = this;
    this.element
    @@ -19,9 +16,6 @@ $.widget("ui.flashcard", {
    widget.element.trigger("show");
    })
    ;
    var t = setTimeout(function() {
    widget.show();
    }, this.options.time * 1000);
    },
    show: function() {
    this.element.find("dt").fadeOut("slow");
  2. sido revised this gist Jun 19, 2011. 2 changed files with 7 additions and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
    <script src="ui.flashcard.js"></script>
    <script>
    $("#myFlashcard").flashcard();
    $("#myFlashcard").flashcard({ time: 10 });
    </script>
    </body>
    </html>
    6 changes: 6 additions & 0 deletions ui.flashcard.js
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,9 @@
    (function($, undefined) {

    $.widget("ui.flashcard", {
    options: {
    time: 5
    },
    _create: function() {
    var widget = this;
    this.element
    @@ -16,6 +19,9 @@ $.widget("ui.flashcard", {
    widget.element.trigger("show");
    })
    ;
    var t = setTimeout(function() {
    widget.show();
    }, this.options.time * 1000);
    },
    show: function() {
    this.element.find("dt").fadeOut("slow");
  3. sido revised this gist Jun 17, 2011. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ui.flashcard.css
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    .ui-flashcard {
    font-size: 1.6em;
    height: 150px;
    position: relative;
    width: 350px;
  4. sido created this gist Jun 17, 2011.
    28 changes: 28 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>ui.Flashcard</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/pepper-grinder/jquery-ui.css">
    <link rel="stylesheet" href="ui.flashcard.css">
    <style>
    body { font-family: sans-serif; }
    #myFlashcard { margin: 2em auto; }
    </style>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.4/modernizr.min.js"></script>
    </head>
    <body>

    <dl id="myFlashcard">
    <dt>Who ya gonna call?</dt>
    <dd>GHOSTBUSTERS!</dd>
    </dl>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
    <script src="ui.flashcard.js"></script>
    <script>
    $("#myFlashcard").flashcard();
    </script>
    </body>
    </html>
    24 changes: 24 additions & 0 deletions ui.flashcard.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    .ui-flashcard {
    height: 150px;
    position: relative;
    width: 350px;
    }
    .ui-flashcard dt,
    .ui-flashcard dd {
    height: 100%;
    left: 0;
    line-height: 150px; /* vertical align text */
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    }
    .ui-flashcard dt {
    cursor: pointer;
    font-style: italic;
    }
    .ui-flashcard dd {
    z-index: -1;
    }
    32 changes: 32 additions & 0 deletions ui.flashcard.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    (function($, undefined) {

    $.widget("ui.flashcard", {
    _create: function() {
    var widget = this;
    this.element
    .addClass("ui-flashcard ui-widget")
    .find("dt, dd")
    .addClass("ui-widget-content ui-corner-all")
    .end()
    .bind("show", function() {
    widget.show();
    })
    .find("dt")
    .click(function() {
    widget.element.trigger("show");
    })
    ;
    },
    show: function() {
    this.element.find("dt").fadeOut("slow");
    },
    _destroy: function() {
    this.element
    .removeClass("ui-flashcard ui-widget ui-corner-all")
    .find("dt, dd")
    .addClass("ui-widget-content")
    ;
    }
    });

    })(jQuery);