Created
January 20, 2010 17:59
-
-
Save jonahlyn/282053 to your computer and use it in GitHub Desktop.
Test loading a gist into jsbin. http://jsbin.com/gist/282053
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
| <head> | |
| <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> | |
| <title></title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta> | |
| <style type="text/css"> | |
| #system-message { | |
| background-color: rgb(254, 255, 170); | |
| border: 2px solid rgb(153, 3, 0); | |
| margin: 5px 0pt; | |
| padding: 0pt; | |
| } | |
| #system-message h2 { | |
| color: rgb(153, 0, 0); | |
| display: inline-block; | |
| font-size: 14px; | |
| font-weight: bold; | |
| margin: 0; | |
| padding: 5px; | |
| } | |
| #system-message p { | |
| color: rgb(0, 0, 0); | |
| font-size: 12px; | |
| margin: 0; | |
| padding: 5px; | |
| } | |
| #system-message a.readmore { | |
| border-bottom: 1px solid rgb(153, 0, 0); | |
| color: rgb(153, 0, 0); | |
| margin-left: 5px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="system-message"> | |
| <h2>The system will be undergoing an upgrade Wednesday, February 10th to Sunday February 14th, 2010.</h2> | |
| <p>This is a bunch of text that will describe the upgrade in much detail.</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Function: Anonymous jQuery Document.Ready | |
| * Displays a message heading with a 'Read More' link | |
| * that slides message details into view onclick. | |
| */ | |
| $(function(){ | |
| /* Hide the message details on load */ | |
| $("div#system-message p").hide(); | |
| /* Generate a 'Read More' link */ | |
| var $sysmsglink = $('<a class="readmore" href="#">Read More</a>'); | |
| $sysmsglink.attr({'title':'Details about the upcoming upgrade'}); | |
| /* Append the 'Read More' link to the message header */ | |
| $("div#system-message h2").append($sysmsglink); | |
| /* On click, slide the message details into view and change the 'Read More' link to 'Read Less' */ | |
| $sysmsglink.click(function(l){ | |
| $("div#system-message p").slideToggle(); | |
| if ( $(this).text() == 'Read More' ){ | |
| $(this).text('Read Less'); | |
| } else { | |
| $(this).text('Read More'); | |
| } | |
| return false; | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment