alskhda

css/structure.css

@@ -26,9 +26,7 @@
     z-index: -1;
 }
 
-#wrapper {
-    z-index:100;
-}
+
 
 body {
     background: url(img/bg_texture.png) repeat-x repeat-y;
@@ -42,14 +40,14 @@ body {
     overflow: hidden;
 }*/
 
-   #bx-wrapper {
-    margin: 0 auto !important;
-    width: 100% !important;
-   }
 
 .arrow {
 }
 
+#wrapper {
+    margin-top: 2em;
+}
+
 #go-next, #go-prev {
     transition: opacity 0.5s;
     -moz-transition: opacity 0.5s; /* Firefox 4 */

js/javascript.js

@@ -1,13 +1,13 @@
 function load_slides() {
     var filelist = [
-        "What is the world made of",
         "The strong interaction",
-        "The electromagnetic interaction",
-        "The weak interaction",
-        "Three Generations",
-        "Antimatter",
-        "The Higgs"
-    ];
+    "The weak interaction",
+    "What is the world made of",
+    "The electromagnetic interaction",
+    "Three Generations",
+    "Antimatter",
+    "The Higgs"
+        ];
 
     //$(filelist).each(function(){alert($(this).html());});
     var last = false;
@@ -21,14 +21,12 @@ function load_slides() {
         var filename = to_filename(filelist[i]);
         // get 
         var chapter = get_html(filename, "chapter", "html", last);
-        //var readmore = get_html(filelist[i], "readmore", "html");
+        var readmore = get_html(filelist[i], "readmore", "html");
         // here we just need the URL
         //var icon = get_html(filelist[i], "img", "png");
         //
         //alert (chapter);
 
-
-
     }
 
 }
@@ -41,11 +39,13 @@ function get_html(file, prefix, extension, last ){
 
     $.ajax( {
         url :"./" + prefix + "/" + file  + "." + extension,
-        dataType: "html" 
+    dataType: "html" 
     }
-        ).done( function(data) {
+    ).done( function(data) {
         //alert('<li class="slide"><div>' + data + "</div></li>");
-        $("#slider").append('<li class="slide"><div class="span12">' + data + "</div></li>");
+        if (prefix == "chapter") {
+            $("#slider").append('<li class="slide"><div class="span12">' + data + "</div></li>");
+        }
         //$("ul.nav-pills").append('<li><a href="#">' + $(data).find('h1').text() + '</a></li>');
         if (last) {
             set_sliders();
@@ -59,6 +59,6 @@ function get_html(file, prefix, extension, last ){
 
 function fill_menu() {
     $($(".slide").get()).each(function() {
-        $("ul.nav-pills").append('<li><a href="#">' + $(this).find('h1').html() + '</a></li>');
+        $("ul.nav-pills").append('<li><img style="width:3em;height:3em;"><a href="#">' + $(this).find('h1').html() + '</a></li>');
     });
 }

main.html

@@ -17,7 +17,7 @@
         <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
         <link href="css/structure.css" rel="stylesheet">
         <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
-				<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" type="text/css" media="all" />
+        <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" type="text/css" media="all" />
         <script src="bootstrap/js/bootstrap.js"></script>
 
     </head>
@@ -36,14 +36,23 @@
             <div id="right-hidden">
             </div>-->
         </div>
+        <div class="modal hide fade" id="readmore">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">x</button>
+            </div>
+            <div class="modal-body">
+
+            </div>
+        </div>
         <div id="topbar">
             <div class="navigation">
                 <ul class="nav nav-pills" >
-                    
+
                 </ul>
             </div>
             <a id="nav-button" class="pull-right" href="#">Nav me!! <i class="icon-chevron-down
                     icon-white"></i> </a> 
+            <a class="btn" data-toggle="modal" href="#readmore" >Read more</a>
         </div>
 
         <script>
@@ -57,7 +66,7 @@
                 // set them sliding
                 var original_height =  100;//$(".navigation").height();
 
-                
+
 
                 $(".navigation").height('0em');