Permalink
Browse files

Added first files commit. v1.1. Fixed Readme

  • Loading branch information...
1 parent dfdc542 commit f788ea14077d4d576b465eb59311c32e2b29c17b @nicolasembleton committed May 4, 2012
View
@@ -0,0 +1,171 @@
+/**
+ * Created with JetBrains WebStorm.
+ * Date: 5/3/12
+ *
+ * Copyright © 2012 Nicolas Embleton
+ *
+ * v1.1
+ *
+ * Change log:
+ * 1.1: Better detector of currently active bullet ( Todo 4 ). Might cause problems in some cases.
+ * You can disable it by initializing with auto_detect_active_bullet:false
+ * 1.0: Initial release. Stable. Tested with most browsers on Mac OS X
+ *
+ * Todo:
+ * 1. More flexible line changing
+ * 2. Customizable separators
+ * 3. More shapes for bullets and left/right ends
+ * 4. Detector for currently active bullet ( shouldn't be too hard )
+ * 5. Better hash option ( auto-detection or better customization? )
+ * 6. Vertical version ( should be neat but lot of work for this one )
+ * 7. Better "responsivitiy" ( working but up to some extents )
+ */
+
+.color_hover { color: #ed145b; }
+.color_normal { color: #58595B; }
+.invisible { display:none; }
+.selected {}
+span.selected { color: #ed145b !important; }
+a.selected { background-color:#ed145b !important; }
+.odd_row {}
+span.odd_row { margin-top:-36px !important; }
+
+/** To make the timeline responsive: */
+#timeline_container {
+ width: 800px;
+ height: 150px;
+ border: 1px solid black;
+}
+
+/** Serves as a container */
+#timeline {
+ width: 100%;
+ height: 100%;
+ display:inline-table;
+ max-height: 150px;
+ min-height: 50px;
+ padding: 21px 10px;
+ border: 1px solid red;
+ margin: 0;
+}
+
+#timeline ul {
+ width:100%;
+ height:100%;
+ display:inline-table;
+ border: 1px solid blue;
+ margin: 0;
+ padding:30px 15px 0;
+ list-style: none;
+}
+
+#timeline ul li {
+ float: left;
+ background:url('images/timeline_line.png') 0 -4px repeat-x;
+ width: 10px;
+}
+
+#timeline ul li.separator {
+ float: left;
+ width:1px;
+ border-left: black 1px solid;
+ display:inline-block;
+ margin-left: 25px;
+}
+
+#timeline ul li.separator span {
+ margin-top:-40px;
+ margin-left: 0px;
+ text-align: left;
+}
+
+#timeline ul li.empty {
+ float: left;
+ width:50px;
+ display:inline-block;
+ background:url('images/timeline_line.png') -10px repeat-x;
+}
+
+/** Last element in the timeline has to be only 1/2 the normal size
+to shift from the first being directly stick with a bullet */
+#timeline ul li.empty_last {
+ float: left;
+ width:25px;
+ display:inline-block;
+ background:url('images/timeline_line.png') -10px repeat-x;
+}
+
+/** Sorry, but + and - are not "exactly" similar so I just duplicated them both */
+#timeline ul li#plus {
+ width: 31px;
+}
+
+#timeline ul li#plus a {
+ width: 18px;
+ height: 18px;
+ background-color: #58595b;
+ color: white;
+ padding: 3px 3px 10px 10px;
+ display:inline-block;
+ margin-top: -7px;
+ border-radius: 0;
+ font-size: 20px;
+ font-weight: bold;
+}
+
+#timeline ul li#minus {
+ width:30px;
+}
+
+#timeline ul li#minus a {
+ width: 18px;
+ height: 18px;
+ background-color: #58595b;
+ color: white;
+ padding: 2px 0px 10px 13px;
+ display:inline-block;
+ margin-top: -7px;
+ border-radius: 0;
+ font-size: 20px;
+ font-weight: bold;
+}
+
+#timeline ul li a {
+ width:10px;
+ height:10px;
+ text-decoration: none;
+ background-color: #58595b;
+ display:inline-block;
+ float:left;
+ margin-top:4px;
+ border-radius: 10px;
+
+ -webkit-transition: background 0.2s ease;
+ -moz-transition: background 0.2s ease;
+ -ms-transition: background 0.2s ease;
+ -o-transition: background 0.2s ease;
+ transition: background 0.2s ease;
+}
+
+#timeline ul li span {
+ margin-top: 12px;
+ margin-left: -20px;
+ float: left;
+ font-family: arial,sans-serif;
+ font-weight: 100;
+ font-size: 0.75em;
+ width: 50px;
+ text-align: center;
+ color: #58595b;
+
+ -webkit-transition: color 0.2s ease;
+ -moz-transition: color 0.2s ease;
+ -ms-transition: color 0.2s ease;
+ -o-transition: color 0.2s ease;
+ transition: color 0.2s ease;
+}
+
+/** Hover Color */
+#timeline ul li a#plus:hover, #timeline ul li a#minus:hover, #timeline ul li a:hover {
+ background-color: #ed145b;
+}
@@ -0,0 +1,126 @@
+/**
+ * Created with JetBrains WebStorm.
+ * Date: 5/3/12
+ *
+ * Copyright © 2012 Nicolas Embleton
+ *
+ * v1.1
+ *
+ * Change log:
+ * 1.1: Better detector of currently active bullet ( Todo 4 ). Might cause problems in some cases.
+ * You can disable it by initializing with auto_detect_active_bullet:false
+ * 1.0: Initial release. Stable. Tested with most browsers on Mac OS X
+ *
+ * Todo:
+ * 1. More flexible line changing
+ * 2. Customizable separators
+ * 3. More shapes for bullets and left/right ends
+ * 4. Detector for currently active bullet ( shouldn't be too hard )
+ * 5. Better hash option ( auto-detection or better customization? )
+ * 6. Vertical version ( should be neat but lot of work for this one )
+ * 7. Better "responsivitiy" ( working but up to some extents )
+ */
+
+(function( $ ){
+
+ $.fn.timeline = function( options ) {
+
+ // Create some defaults, extending them with any options that were provided
+ var settings = $.extend( {
+ left_action: "", // url for + sign
+ left_symbol: "+", // Symbol for + sign
+ right_action: "", // url for - sign
+ right_symbol: "-", // Symbol for - sign
+ use_alternative_position: false,
+ link_is_hash: true, // If set to true, the links will be treated as a hash ( thus not reloading )
+ normal_color: "#58595b",
+ hover_color: "#ed145b",
+ auto_detect_active_bullet: true // If set to false, it will disable the pattern matching, if set to true, it will try to guess which page is currently enabled
+ }, options);
+
+ return this.each(function() {
+
+ var normal_color = settings.normal_color;
+ var hover_color = settings.hover_color;
+
+ /** ensure symbols are 1 char long */
+ settings.left_symbol = settings.left_symbol.substr(0,1);
+ settings.right_symbol = settings.right_symbol.substr(0,1);
+
+ var timeline = settings.times;
+ var item_counter = 0; // Will count items that are not separator ( because they don't use actual space )
+ $(timeline).each(function(i,el) {
+ if(el.type && el.type == "separator") {
+ $("#timeline ul").append("<li class='separator'>&nbsp;<span>"+el.text +"</span></li>");
+ } else {
+ var add_class = [];
+ if((!settings.auto_detect_active_bullet && el.selected) ||
+ (settings.auto_detect_active_bullet && (
+ el.link && el.link.match(/^#[0-9a-zA-Z\-_:]+$/) && window.location.hash == el.link || // Checking if the link is a hash then checking if the current hash is somehow matching
+ el.link && !el.link.match(/^#[0-9a-zA-Z\-_:]$/) && window.location.href == el.link ))) {
+ add_class.push("selected");
+ }
+ if(i % 2 && settings.use_alternative_position) add_class.push("odd_row");
+ var classes_list = "";
+ $(add_class).each(function(i2, el2) {
+ classes_list += " " + el2;
+ });
+
+ $("#timeline ul").append("<li class='empty'>&nbsp;</li>");
+ $("#timeline ul").append("<li><a "+(classes_list!=""?"class='"+classes_list+"'":"") +" href='"+el.link+"'>&nbsp;</a><span "+(classes_list!=""?"class='"+classes_list+"'":"") +" >" +el.text +"</span></li>");
+ }
+ });
+ $("#timeline ul").prepend("<li id='plus'><a href='"+settings.left_action+"'>"+settings.left_symbol+"</a></li>");
+ $("#timeline ul").append("<li class='empty'>&nbsp;</li>");
+ $("#timeline ul").append("<li id='minus'><a href='"+settings.right_action+"'>"+settings.right_symbol+"</a></li>");
+
+ var width = $("#timeline").width(); // Container width
+ var plus_width = $("#plus").width(); // Plus sign width
+ var minus_width = $("#minus").width(); // Minus sign width
+ // Here it becomes a little bit tricky. We find an anchor ( the bubble is an anchor )
+ // We look for the 2nd one ( first one is actually the left and right anchors )
+ // And we get its parent width() to get the actual size of a bubble
+ var bubble_width = $($("#timeline ul li").find("a")[1]).parent().width(); // Bubble
+
+ var edge_count = timeline.length+1;
+/*
+ console.log(width);
+ console.log(plus_width);
+ console.log(minus_width);
+ console.log(bubble_width);
+ console.log(edge_count);
+ */
+ var efficient_width = width - ( plus_width + minus_width + bubble_width*timeline.length ); // 30 for Padding
+// console.log(efficient_width);
+ var best_border_width = ( efficient_width - 40 )/ edge_count;
+// console.log(best_border_width);
+ var best_border_width_ratio = (best_border_width / width)*100;
+// console.log(best_border_width_ratio);
+
+ $(".empty").css("width", best_border_width_ratio +"%");
+// $(".empty").attr("style", "width: " +best_border_width_ratio +"% !important;");
+
+ $("#timeline ul li a, #timeline ul li span").bind({
+ mouseover: function(e) {
+ $($(e.target).parent().find("a")).css("background-color", hover_color);
+ $($(e.target).parent().find("span")).css("color",hover_color);
+ },
+ mouseout: function(e) {
+ $($(e.target).parent().find("a")).css("background-color", normal_color);
+ $($(e.target).parent().find("span")).css("color",normal_color);
+ },
+ click: function(e) {
+// console.log($($(e.target).parent().find("a")).attr("href"));
+ if(settings.link_is_hash) {
+ window.location.hash = $($(e.target).parent().find("a")).attr("href");
+ } else {
+ window.location.href = $($(e.target).parent().find("a")).attr("href");
+ }
+ }
+ });
+
+// console.log($("#color_hover_helper").css("color"));
+ });
+
+ };
+})( jQuery );
View
@@ -18,8 +18,10 @@ A few CSS 3 transitions are enabled for color fading.
## Screenshots
+Alternate position ( use_alternative_position: true )
![A small screenshot of the alternate way](https://github.com/nicolasembleton/jQuery-Timeline-Plugin/raw/master/Screenshots/jquery.timeline.js.alternate.png)
+Straight position ( use_alternative_position: false )
![A small screenshot of the plain way](https://github.com/nicolasembleton/jQuery-Timeline-Plugin/raw/master/Screenshots/jquery.timeline.js.plain.png)
## Setup
@@ -80,7 +82,18 @@ Remember to include the scripts in the header:
<link href="jquery.timeline.css" rel="stylesheet" type="text/css" />
```
-## License
-
+## License
+
Copyright (c) 2012 Nicolas Embleton
-Licensed under the [MIT license](https://github.com/nicolasembleton/jQuery-Timeline-Plugin/blob/master/MIT-license.txt)
+Licensed under the [MIT license](https://github.com/nicolasembleton/jQuery-Timeline-Plugin/blob/master/MIT-license.txt)
+
+## Changelog
+
+### 1.1
+
+- Better detector of currently active bullet ( Todo 4 ). Might cause problems in some cases.
+ You can disable it by initializing with auto_detect_active_bullet:false
+
+### 1.0
+
+- Initial release. Stable. Tested with most browsers on Mac OS X
View
@@ -0,0 +1,52 @@
+<html>
+ <head>
+ <title></title>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script src="jquery.timeline.js"></script>
+ <link href="jquery.timeline.css" rel="stylesheet" type="text/css" />
+ </head>
+ <body>
+ <!-- minimum markup -->
+ <div id="timeline_container">
+ <div id="timeline">
+ <ul>
+ </ul>
+ </div>
+ </div>
+ <!-- end jquery timline minimum markup -->
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $("#timeline_container").timeline({
+ left_symbol:"+",
+ left_action:"", // Needs to be a URL or a Hash
+ right_symbol: "-",
+ right_action: "", // Needs to be a URL or a Hash
+ use_alternative_position: false, // Use odds and even positioning for labels ( bottom and top )
+ link_is_hash: false, // If the link is a hash, it will update the location.hash, otherwise open a new window
+ normal_color: "#58595b", // Overwrites the normal color
+ hover_color: "#ed145b", // Overwrites the hovered color
+ auto_detect_active_bullet: true,
+ times: [
+ { text: "2011", type: "separator" },
+ { link: "#open-me", text: "05"},
+ { link: "#2", text: "06"},
+ { link: "#4", text: "08" },
+ { link: "#5", text: "12" },
+ { text: "2012", type: "separator" },
+ { link: "#6", text: "01" },
+ { link: "#7", text: "03" },
+ { link: "#8", text: "05" },
+ { link: "#9", text: "06" },
+ { link: "#10", text: "07" },
+ { link: "#11", text: "08" },
+ { link: "#12", text: "09" },
+ { link: "#13", text: "10" },
+ { link: "http://localhost/~nembleton/Timeline2/Timeline.html", text: "12" },
+ { text: "2013", type: "separator" }
+ ]
+ });
+ });
+ </script>
+
+ </body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit f788ea1

Please sign in to comment.