Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
mostly stylistic updates, jQ 1.8
  • Loading branch information
chriscoyier committed Aug 17, 2012
1 parent fe0d6fb commit a394d3d
Show file tree
Hide file tree
Showing 7 changed files with 244 additions and 221 deletions.
131 changes: 68 additions & 63 deletions basic.html
@@ -1,26 +1,31 @@
<!DOCTYPE html>
<html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Moving Boxes</title>

<!-- Required CSS -->
<link href="css/movingboxes.css" media="screen" rel="stylesheet">
<link href="css/movingboxes.css" rel="stylesheet">
<!--[if lt IE 9]>
<link href="css/movingboxes-ie.css" rel="stylesheet" media="screen" />
<![endif]-->

<!-- Required script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="js/jquery.movingboxes.js"></script>

<!-- Demo only -->
<link href="demo/demo.css" media="screen" rel="stylesheet">
<link href="demo/demo.css" rel="stylesheet">

<style>
/* Dimensions set via css in MovingBoxes version 2.2.2+ */
#slider { width: 500px; }
#slider li { width: 250px; }
</style>

<script>
$(function(){

Expand All @@ -37,67 +42,67 @@

});
</script>

</head>

<body>

<div id="wrapper">

<div id="title">
<a href="http://github.com/CSS-Tricks/MovingBoxes"><img src="demo/movingboxes.png" alt="moving boxes"></a>
</div>

<div id="nav">
<a href="index.html">Main Demo</a>
<a class="current" href="basic.html">Basic Demo</a>
<a class="play" href="http://jsfiddle.net/Mottie/acV4n/">Playground</a>
<a class="git" href="https://github.com/CSS-Tricks/MovingBoxes/wiki">Documentation</a>
<a class="git" href="https://github.com/CSS-Tricks/MovingBoxes/downloads">Download</a>
<a class="issue" href="https://github.com/CSS-Tricks/MovingBoxes/issues">Issues</a>
</div>
<br>

<!-- MovingBoxes Slider -->
<ul id="slider">

<li>
<img src="demo/1.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
</li>

<li>
<img src="demo/2.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
</li>

<li>
<img src="demo/3.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
</li>

<li>
<img src="demo/4.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
</li>

<li>
<img src="demo/5.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
</li>

<li>
<img src="demo/6.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="#">more</a></p>
</li>

</ul> <!-- end Slider #1 -->

</div> <!-- end wrapper -->
<div id="wrapper">

<h1 class="demo-title">Moving Boxes</h1>

<nav class="main-nav">
<a class="current" href="index.html">Main Demo</a>
<a href="basic.html">Basic Demo</a>
<a class="play" href="http://jsfiddle.net/Mottie/acV4n/">Playground</a>
<a class="git" href="https://github.com/CSS-Tricks/MovingBoxes/wiki">Documentation</a>
<a class="git" href="https://github.com/CSS-Tricks/MovingBoxes/downloads">Download</a>
<a class="issue" href="https://github.com/CSS-Tricks/MovingBoxes/issues">Issues</a>
</nav>

<!-- MovingBoxes Slider -->
<ul id="slider">

<li>
<img src="demo/1.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
</li>

<li>
<img src="demo/2.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
</li>

<li>
<img src="demo/3.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
</li>

<li>
<img src="demo/4.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
</li>

<li>
<img src="demo/5.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
</li>

<li>
<img src="demo/6.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... <a href="#">more</a></p>
</li>

</ul><!-- end Slider #1 -->

</div><!-- end wrapper -->

</body>
</html>

</html>
37 changes: 12 additions & 25 deletions css/movingboxes.css
@@ -1,27 +1,12 @@
/* Default MovingBoxes wrapper size */
#movingboxes {
width: 900px;
min-height: 200px;
}

/* Default MovingBoxes panel size */
#movingboxes > li {
width: 350px;
}

/*** Overall MovingBoxes Slider ***/
.mb-wrapper {
border: 5px solid #ccc;
margin: 0 auto;
margin: 0 auto 20px;
position: relative;
left: 0;
top: 0;
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 10px;
box-shadow: inset 0 0 10px #888;
-moz-box-shadow: inset 0 0 10px #888;
-webkit-box-shadow: inset 0 0 10px #888;
}

/* Panel Wrapper */
Expand All @@ -41,13 +26,13 @@

/* active slider border highlight */
.mb-active-slider {
border-color: #999bff;
border-color: #333;
}

/*** Slider panel ***/
.mb-slider .mb-panel {
margin: 0;
padding: 5px;
padding: 20px;
display: block;
cursor: pointer;
float: left;
Expand Down Expand Up @@ -111,19 +96,21 @@ a.mb-scrollButtons.disabled {
z-index: 100;
}
.mb-controls a {
color: #444;
font: 12px Georgia, Serif;
color: #666;
font: 18px/2.2 Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px;
height: 18px;
margin: 0 5px 0 0;
text-align: center;
outline: 0;
}
.mb-controls a.current, .mb-controls a:hover {
color: #fff;
.mb-controls a:hover {
color: black;
}
.mb-controls a.current {
color: white;
}
.mb-active-slider .mb-controls {
background: #999bff;
background: #333;
}
69 changes: 53 additions & 16 deletions demo/demo.css
@@ -1,21 +1,53 @@
/* Moving Boxes demo CSS */
* { margin: 0; padding: 0; }
body { font: 11px Helvetica, Arial, sans-serif; }
#wrapper {}

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);

* {
margin: 0;
padding: 0;
}

body {
font: 16px/1.4 'PT Sans', sans-serif;
}

.demo-title {
text-align: center;
color: #a71700;
text-transform: uppercase;
padding: 30px 0 0;
font-size: 60px;
}

/* Navigation bar */
#nav { display: block; width: auto; margin: 10px auto; text-align: center; white-space: nowrap; line-height: 3em; }
#nav a { text-align: center; background: black; color: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; text-decoration: none; font-size: 14px; }
#nav a.git { background: #006; }
#nav a.play { background: #060; }
#nav a.issue { background: #600; }
#nav a:hover, #nav a.current { background: #666; }
.main-nav {
display: block;
text-align: center;
border-bottom: 2px solid #a71700;
margin: 0 0 20px 0;
padding: 0 0 10px 0;
}

.main-nav a {
text-decoration: none;
color: #3e63ec;
font-size: 18px;
margin: 0 8px;
}
.main-nav a:hover {
color: black;
border-bottom: 2px solid black;
}

/* Moving Boxes title image wrapper */
#title { text-align: center; }
#title img { border: 0; }
#title {
text-align: center;
}
#title img {
border: 0;
}

/* panel images */
/* Panel images */
.mb-inside img { width: 100%; }

/* height of the placeholder until image completely loads - needed for
Expand All @@ -24,13 +56,18 @@ body { font: 11px Helvetica, Arial, sans-serif; }
*/
#slider-two .current img { /* height: 326px; */ }

/* panel links */
/* Panel links */
.mb-inside a { color: #333; text-decoration: none; border-bottom: 1px dotted #ccc; }
.mb-inside a:hover { border-bottom: 1px solid #999; }

/* Add/remove panels buttons */
.buttons { padding: 5px 10px; text-align: center; }

/* direct link styling */
.dlinks { text-align: center; font-size: 20px; }

/* Direct link styling */
.dlinks {
text-align: center;
margin: 0 0 20px 0;
}
.dlinks * {
vertical-align: middle;
}
4 changes: 2 additions & 2 deletions demo/demo.js
Expand Up @@ -84,9 +84,9 @@ $(function(){
return false;
});

// Report events to firebug console
// Report events to console
$('.mb-slider').bind('initialized.movingBoxes initChange.movingBoxes beforeAnimation.movingBoxes completed.movingBoxes',function(e, slider, tar){
// show object ID + event in the firebug console
// show object ID + event in the console
// namespaced events: e.g. e.type = "completed", e.namespace = "movingBoxes"
if (window.console && window.console.log){
var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.curPanel + ', targeted panel is ' + tar;
Expand Down
Binary file removed demo/movingboxes.png
Binary file not shown.
Binary file removed design/mockup.psd
Binary file not shown.

0 comments on commit a394d3d

Please sign in to comment.