WACA_programs_news

by Koubenec

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>World Affairs Council of Austin</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="http://www.wacaustin.org/news.js"></script>
    <link href='http://www.wacaustin.org/sitecss.css' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,900italic,700,900,400' rel='stylesheet' type='text/css'>
        <!--<script type="text/javascript" src="http://www.wacaustin.org/backstretch.js"></script>-->
        <script>
    $(function(){

      /* Here is the slider using default settings */
      $('#slider-id').codaSlider();
      /* If you want to adjust the settings, you set an option
         as follows:

          $('#slider-id').codaSlider({
            autoSlide:true,
            autoHeight:false
          });
      
      */
    });

    </script>
</head>

<body>
    <!-- Grid 2/3 and 1/3-->
    
		<div class="padone grid grid-pad">
			<div class="col-1-1" id="logocontainer">
                <a id="wacalogo" href="http://www.wacaustin.org/home.html">
<img id="wacalogo" src="http://www.wacaustin.org/homeimg.jpg"/>
                </a>
			</div>
            <div id="navcontainer" class="col-1-1">
                <!--Nav HTML-->
  <div id="pattern" class="pattern">
    <!--Begin Pattern HTML-->
    <a href="#menu" class="menu-link">Menu</a>
    <nav id="menu" class="menu" role="navigation">
  		<ul class="level-1">
				<!--Parent #1-->
				<li class="has-subnav">
                    <a href="http://www.wacaustin.org/about.html">About Us</a>
					<ul class="level-2">
						<li class="has-subnav">
   ...

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*end css reset*/

/*
  Simple Grid
  Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - dallasbass.com
*/

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0px;
    margin-top: 10px;
    background-image: url('http://www.wacaustin.org/pat1.png');
    background-repeat: repeat-x repeat-y;
}

[class*='col-'] {
	float: left;
	padding-right: 0px;
}

[class*='col-']:last-of-type {
	padding-right: 0px;
}

.grid {
	width: 100%;
	max-width: 1000px;
	min-width: 755px;
	margin: 0 auto;
	overflow: hidden;
    /*-webkit-box-shadow: -1px 1px 4px rgba(0, 0, 0, 1);
    -moz-box-shadow:    -1px 1px 4px rgba(0, 0, 0, 1);
    box-shadow:         -1px 1px 4px rgba(0, 0, 0, 1);*/
}

.grid:after {
	content:...

JavaScript

$(document).ready(function() {
      $('body').addClass('js');
      var $menu = $('#menu'),
  	  	  $menulink = $('.menu-link'),
		  	  $menuTrigger = $('.has-subnav > a');
		
		$menulink.click(function(e) {
			$menulink.toggleClass('active');
			$menu.toggleClass('active');
		});
});

/***********************************************************************
*
*  Coda Slider 3
*  Kevin Batdorf
*
*  http://kevinbatdorf.github.com/codaslider
*
*  GPL license & MIT license
*
************************************************************************/

// Utility for creating objects in older browsers
if ( typeof Object.create !== 'function' ) {
	Object.create = function( obj ) {
		function F() {}
		F.prototype = obj;
		return new F();
	};
}

(function( $, window, document, undefined ) {
	var Slider = {
		//initialize
		init: function( options, elem ) {
			var self = this;

			//remove no JavaScript warning
			$("body").removeClass("coda-slider-no-js");

			//add preloader class (backwards compatible)
			$('.coda-slider').prepend('<p class="loading">Loading...<br /><img src="./img/ajax-loader.gif" width="220" height="19" alt="loading..." /></p>');

			// Cache the element
			self.elem = elem;
			self.$elem = $( elem );

			// Cache the ID and class. This allows for multiple instances with any ID name supplied
			self.sliderId = '#' + ( self.$elem ).attr('id');
			
			// Set the options
			self.options = $.extend( {}, $.fn.codaSlider.options, options );
			
			// Cache the ID and class. This allows for multiple instances with any ID name supplied
			self.sliderId = '#' + ( self.$elem ).attr('id');
			
			// Build the tabs and navigation
			self.build();

			// Start auto slider
			if (self.options.autoSlide) {self.autoSlide();}

			self.events();

			// Test the preloader (image doesn't load)
			//alert("Testing preloader");

			// Kill the preloader
			$("p.loading").remove();

		},
		build: function() {
			var self = this;

			// Wrap the entire slider (backwards...