Skip to content

Commit

Permalink
Fixed the default dimensions from being overridden in javascript
Browse files Browse the repository at this point in the history
  • Loading branch information
unknown committed Jul 26, 2010
1 parent f395263 commit 41878f0
Show file tree
Hide file tree
Showing 4 changed files with 305 additions and 193 deletions.
36 changes: 24 additions & 12 deletions README.textile
View file
Expand Up @@ -19,18 +19,22 @@ h2. Features
h2. Usage & Options (defaults)

<pre>$('.anythingSlider').anythingSlider({
easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALITY, not just if it starts running or not
startStopped: false, // If autoPlay is on, this can force it to start stopped
delay: 3000, // How long between slide transitions in AutoPlay mode
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Start", // Start text
stopText: "Stop", // Stop text
stopAtEnd: false, // If true, and autoPlay is on autoPlay will stop on the last page
navigationFormatter: null // Advanced Use: details below
easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALITY, not just if it starts running or not
startStopped: false, // If autoPlay is on, this can force it to start stopped
delay: 3000, // How long between slide transitions in AutoPlay mode
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Start", // Start text
stopText: "Stop", // Stop text
stopAtEnd: false, // If true, and autoPlay is on autoPlay will stop on the last page
navigationFormatter: null // Advanced Use: details below
forwardText: "&raquo;", // Link text used to move the slider forward
backText: "&laquo;", // Link text used to move the slider back
width: null, // Override the default CSS width
height: null, // Override the default CSS height
});</pre>

To use the navigationFormatter function, you must have a function that accepts two parameters, and returns a string of HTML text.
Expand All @@ -47,6 +51,14 @@ Here is a sample formatter:

h2. Changelog

h3. Version 1.3.2

* Greatly refactored CSS for a more fluid resizing behavior
* Dimensions can be passed via javascript or modified at the top of the css file
* Merged all Github forks
* Wrapper DIVs are no longer needed in the source html
* Improved CSS scope, Javascript degredation is handled differently now however

h3. Version 1.3.1

* Markup improvements by Dean Sofer
Expand Down
121 changes: 97 additions & 24 deletions css/anythingslider.css
View file
@@ -1,34 +1,107 @@
/*
anythingSlider v1.3.1
anythingSlider v1.3.2
By Chris Coyier: http://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
*/
div.anythingSlider { width: 760px; height: 360px; position: relative; margin: 0 auto 15px; }
div.anythingSlider .anythingWindow { width: 680px; overflow: auto; height: 324px; margin: 0 40px; position: absolute; top: 0; left: 0; }

/* Width below is max for Opera */
div.anythingSlider .anythingWindow ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; }
div.anythingSlider .anythingWindow ul li { display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
div.anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: -250px; cursor: pointer; }
div.anythingSlider .forward { background-position: 0 0; right: -20px; }
div.anythingSlider .back { background-position: -67px 0; left: -20px; }
div.anythingSlider .forward:hover { background-position: 0 -200px; }
div.anythingSlider .back:hover { background-position: -67px -200px; }
/******* SET DIMENSIONS HERE ********/
div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingWindow ul li {
width: 500px;
height: 300px;
}
/****** SET COLORS HERE *******/
div.anythingSlider .thumbNav a.cur, div.anythingSlider .thumbNav a {
background: #7C9127;
}
div.anythingSlider .anythingWindow {
border-top: 3px solid #7C9127;
border-bottom: 3px solid #7C9127;

div.anythingSlider .thumbNav { position: relative; top: 323px; text-align: center; }
div.anythingSlider .thumbNav li { display: inline; }
div.anythingSlider .thumbNav a { color: black; font: 11px/18px Georgia, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(../images/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; text-decoration: none; }
div.anythingSlider .thumbNav a:hover { background-image: none; }
div.anythingSlider .thumbNav a.cur { background: #e0a213; }

/**** DO NOT CHANGE BELOW THIS LINE ****/

div.anythingSlider .start-stop { z-index: 10; background: green; background-image: url(../images/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; text-decoration: none; }
div.anythingSlider .start-stop.playing { background-color: red; }
div.anythingSlider .start-stop:hover { background-image: none; }
overflow: hidden;
position: relative;
}
div.anythingSlider {
position: relative;
padding: 0 45px 28px 45px;
}
div.anythingSlider .anythingWindow ul {
/* Width below is max for Opera */
width: 32700px;
list-style: none;
position: absolute;
top: 0; left: 0;
background: #eee;
margin: 0;
}
div.anythingSlider .anythingWindow ul li {
display: block;
float: left;
padding: 0;
margin: 0;
}
div.anythingSlider .anythingWindow ul ul {
position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
div.anythingSlider .anythingWindow ul ul li { float: none; height: auto; width: auto; background: none; }
div.anythingSlider .arrow {
top: 50%;
position: absolute;
display: block;
}
div.anythingSlider .arrow a {
display: block;
height: 120px;
margin-top: -60px;
width: 45px;
text-align: center;
background: url(../images/arrows.png) no-repeat;
text-indent: -9999px;
}
div.anythingSlider .forward { right: 0; }
div.anythingSlider .back { left: 0; }
div.anythingSlider .forward a { background-position: 0 -40px; }
div.anythingSlider .back a { background-position: -88px -40px; }
div.anythingSlider .forward a:hover { background-position: 0 -240px; }
div.anythingSlider .back a:hover { background-position: -88px -240px; }

/*
Prevents
*/
div.anythingSlider .anythingWindow ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
div.anythingSlider .anythingWindow ul ul li { float: none; height: auto; width: auto; background: none; }
div.anythingSlider .thumbNav { margin: 0; }
div.anythingSlider .thumbNav li { display: inline; }
div.anythingSlider .thumbNav a {
color: black;
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
background-image: url(../images/cellshade.png);
background-repeat: repeat-x;
text-align: center;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
div.anythingSlider .thumbNav a:hover { background-image: none; }

div.anythingSlider .start-stop {
z-index: 10;
background: green url(../images/cellshade.png) repeat-x center top;
color: white;
padding: 2px 5px;
width: 40px;
text-align: center;
position: absolute;
text-decoration: none;
right: 45px; bottom: 4px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
div.anythingSlider .start-stop.playing { background-color: red; }
div.anythingSlider .start-stop:hover { background-image: none; }

0 comments on commit 41878f0

Please sign in to comment.