Skip to content

Instantly share code, notes, and snippets.

@jonahlyn

jonahlyn/Better Announcements Example

Created March 19, 2010 15:49
Show Gist options
  • Save jonahlyn/337658 to your computer and use it in GitHub Desktop.
Save jonahlyn/337658 to your computer and use it in GitHub Desktop.
Download ZIP
Better Announcements Example. http://jsbin.com/gist/337658
Raw
Better Announcements Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta charset=utf-8 />
<title>Better Announcements</title>
<style>
ul.announcements {
padding: 0;
}
ul.announcements li{
list-style-type: none;
}
ul.announcements h2{
font-size: 1em;
font-weight: bold;
}
ul.announcements a.readmore{
padding-left: 5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div>
<ul class="announcements">
<li>
<h2>Planned Electrical Outage 04/09/10 4:30am-6:00am</h2>
<p>An Electrical Power Outage is planned for April 09, 2010 from 4:30am-6:00am in the Economics building #57 and Social Sciences building #78. This is required for Safety Equipment testing for lighting and automatic power transfer switches. Please remember to power off all computer and sensitive electrical equipment prior to the outage.</p>
<p>Please note that elevators in these buildings will also be affected.</p>
<p>Please <a href="https://unm.custhelp.com/cgi-bin/unm.cfg/php/enduser/std_adp.php?p_faqid=1681">contact the IT Support Center</a> at 277-5757 if you have further questions.</p>
</li>
<li>
<h2>Planned Power Outage Saturday 4/03/10 5:00 A.M. to 12-Noon</h2>
<p>The Student Health and University Honors Program division (Building 73) will undergo a planned power outage on Saturday, April 3rd from 5:00am to 12:00noon. This is a required outage to test the emergency lighting systems and building electrical systems. It is recommended that computers and sensitive equipment should be turned off prior to the outage.</p>
<p>Please note that elevators will not be functional during the outage.</p>
<p>Please <a href="https://unm.custhelp.com/cgi-bin/unm.cfg/php/enduser/std_adp.php?p_faqid=1681">contact the IT Support Center</a> at 277-5757 if you have further questions.</p>
</li>
<li>
<h2>Planned Electrical Outage 3/26/10 5:00am - 6:30am</h2>
<p>The Technology and Education building (number 64 on the UNM Campus Map) will undergo a planned power outage on Friday, March 26th from 5:00am to 6:30am. This is a required outage to test the emergency lighting systems. It is recommended that computers and sensitive equipment should be turned off prior to the outage.</p>
<p>Please note that elevators will not be functional during the outage, and there will be a loss of data and VoIP service for tenants of this building.</p>
<p>Please <a href="https://unm.custhelp.com/cgi-bin/unm.cfg/php/enduser/std_adp.php?p_faqid=1681">contact the IT Support Center</a> at 277-5757 if you have further questions.</p>
</li>
</ul>
</div>
</body>
</html>
Raw
gistfile2.js
/* Function: Anonymous jQuery Document.Ready
* Displays announcement heading with a 'Read More' link
* that slides message details into view onclick.
*/
$(function(){
/* Hide the announcement details on load */
$("ul.announcements p").hide();
/* Generate a 'Read More' link */
var $readmorelink = $('<a class="readmore" href="#">Read More</a>');
$readmorelink.attr({'title':'Click to view the full announcement'});
/* Append the 'Read More' link to the announcement header */
$("ul.announcements li h2").append($readmorelink);
/* On click, slide the message details in or out of view.
* change the 'Read More' link to 'Read Less'
*/
$("ul.announcements a.readmore").click(function(l){
$(this).parents("li").children("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