Template:Demos sifuentes

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<style type="text/css">
 
-
/*--Slideshow Begins Here--*/
 
-
#slideshow {
 
-
display: block;
 
-
vertical-align: middle;
 
-
position: relative;
 
-
}
 
-
/*--Main Container--*/
 
-
#main_view {
 
-
margin-left:auto;
 
-
margin-right:auto;
 
-
position: relative;
 
-
height:250px; width: 975px;
 
-
}
 
-
.window {
 
-
height:250px; width: 975px;
 
-
overflow: hidden; /*--Hides anything outside of the set width/height--*/
 
-
position: absolute;
 
-
display: block;
 
-
top:50%;
 
-
left:50%;
 
-
margin: -140px 0 0 -490px;
 
-
}
 
-
.image_reel {
 
-
position: absolute;
 
-
top: 0; left: 0;
 
-
}
 
-
.image_reel img {float: left;}
 
-
.paging {
 
-
position: absolute;
 
-
bottom: 10px; right: 50px;
 
-
width: 250px; height:47px;
 
-
z-index: 100; /*--Assures the paging stays on the top layer--*/
 
-
text-align: right;
 
-
line-height: 40px;
 
-
font-weight: bold;
 
-
background: url(paging_bg2.png) no-repeat;
 
-
display: none; /*--Hidden by default, will be later shown with jQuery--*/
 
-
}
 
-
.paging a {
 
-
padding: 5px;
 
-
text-decoration: none;
 
-
color: #fff; text-shadow: #333 1px 1px 1px;
 
-
}
 
-
.pause {
 
-
position: absolute;
 
-
bottom: 10px; right: 20px;
 
-
width: 25px; height:47px;
 
-
z-index: 200; /*--Assures the paging stays on the top layer--*/
 
-
text-align: center;
 
-
line-height: 40px;
 
-
font-weight: bold;
 
-
display: block; /*--Hidden by default, will be later shown with jQuery--*/
 
-
}
 
-
.pause a {
 
-
padding: 5px;
 
-
text-decoration: none;
 
-
letter-spacing:1px;
 
-
font-weight: thick;
 
-
color: #f0f0f0; text-shadow: #333 1px 1px 1px;
 
-
border: 2px solid #ccc;
 
-
-moz-border-radius: 3px;
 
-
-khtml-border-radius: 3px;
 
-
-webkit-border-radius: 3px;
 
-
}
 
-
.paging a.active {
 
-
font-weight: bold;
 
-
border: 2px solid #fff;
 
-
-moz-border-radius: 3px;
 
-
-khtml-border-radius: 3px;
 
-
-webkit-border-radius: 3px;
 
-
}
 
-
.paging a:hover {font-weight: bold;}
 
-
/*--Slideshow Ends Here--*/
 
 +
   
 +
<!-- JAVASCRIPTS -->
 +
<!-- *********** -->
 +
    <!-- ie9.js (fixes all Internet Explorer browsers older than ie9) -->
 +
    <!--[if lt IE 9]>
 +
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
 +
    <![endif]-->
-
/*--TagLine Begins Here--*/
+
    <!-- jQuery Tools (slider) -->
-
#sponsors { /*--Goes with textboxes class--*/
+
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
-
margin-left:0px;
+
    <script>
-
margin-right:0px;
+
        $(function() {
-
}
+
        // initialize scrollable
-
#sponsorsbox { /*--Goes with textboxes class--*/
+
        $(".scrollable").scrollable().navigator();
-
margin: 10px;
+
        });
-
-webkit-border-radius: 10px;
+
    </script>
-
-moz-border-radius: 10px;
+
-
border-radius: 10px;
+
-
background: #fff;
+
-
text-align:center;
+
-
}
+
-
#sponsorsbox img {padding: 10px; }
+
-
#happeningnow {height: 284px; margin-top:15px; margin-bottom:10px; width: 975px; border: 1px solid #000;}
+
-
#happeningnow .widget {
+
-
width: 305px;  
+
-
height: 100%;
+
-
display: block;
+
-
position: relative;
+
-
border: 1px solid #f0f0f0;
+
-
background: #f0f0f0;
+
-
border-bottom: 2px solid #ccc; 
+
-
-webkit-border-radius: 10px;
+
-
-moz-border-radius: 10px;
+
-
border-radius: 10px;
+
-
margin-left: auto;
+
-
margin-right: auto;}
+
-
</style>
+
    <!-- Navigation scroll follow -->
-
</html>
+
    <script type="text/javascript">
 +
        var prevScrollPos = -1000;
 +
        $(window).scroll(function () {
 +
           
 +
            <!-- here is added table of content fixing to screen : was all 35 with Title OutsideWhitebox-->
 +
            var scrollPos = Math.floor($(window).scrollTop());
 +
            if(Math.abs(prevScrollPos - scrollPos) <= 1){
 +
                  return "nuthin";
 +
            }
 +
 
-
<html>
+
            var toc_margin_from_top = $(".navigation").height() + 35;
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
+
            var scroll_pos_above_start_of_article = scrollPos < $(".whitebox.article").offset().top - 68;
-
<script type="text/javascript">
+
            var toc_end_reached_bottom_of_article = scrollPos + toc_margin_from_top + $(".toc").height() > $(".whitebox.article").offset().top + $(".whitebox.article").height() - 35;
-
$(document).ready(function() {
+
            var toc_margin_from_title = scrollPos < ($(".whitebox.article").offset().top );
-
//Show the paging and activate its first link
+
           
-
$(".paging").show();
+
-
$(".paging a:first").addClass("active");
+
-
//Get size of the image, how many images there are, then determin the size of the image reel.
 
-
var imageWidth = $(".window").width();
 
-
var imageSum = $(".image_reel img").size();
 
-
var imageReelWidth = imageWidth * imageSum;
 
-
//Adjust the image reel to its new size
+
            if(scroll_pos_above_start_of_article){
-
$(".image_reel").css({'width' : imageReelWidth});
+
                  $(".toc").offset({top: $(".whitebox.article").offset().top + 68});
 +
            } else if(toc_end_reached_bottom_of_article){
 +
                  $(".toc").offset({top: $(".whitebox.article").offset().top + $(".whitebox.article").height() - $(".toc").height() - 35});
 +
            } else if(toc_margin_from_title){
 +
                  $(".toc").offset({top: $(".whitebox.article").offset().top + 68});
 +
            } else {
 +
                  $(".toc").offset({top: scrollPos + toc_margin_from_top});
 +
            }
 +
<!-- new attempt to fix menubar (jakob) -->
-
//Paging  and Slider Function
+
            var scroll_pos_above_menubar = scrollPos < 250;
-
rotate = function(){
+
-
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
+
-
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
+
-
$(".paging a").removeClass('active'); //Remove all active class
+
-
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
+
-
//Slider Animation
+
            if(scroll_pos_above_menubar){
-
$(".image_reel").animate({
+
                  $(".navigation").offset({top: 250 });
-
left: -image_reelPosition
+
            } else {
-
}, 500 );
+
                  $(".navigation").offset({top: scrollPos});
-
};  
+
            }
-
//Rotation  and Timing Event
+
            //if (scroll_pos_below_start_of_article){ //&& (scrollPos < $(document).height() - $(".navigation")[0].height() - 70)) {
-
rotateSwitch = function(){
+
            //   $(".toc").addClass("stickBelowNavigation");
-
play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
+
            //} else {
-
$active = $('.paging a.active').next(); //Move to the next paging
+
            //  $(".toc").removeClass("stickBelowNavigation");
-
if ( $active.length === 0) { //If paging reaches the end...
+
            //}
-
$active = $('.paging a:first'); //go back to first
+
        });
-
}
+
    </script>
-
rotate(); //Trigger the paging and slider function
+
-
}, 6000); //Timer speed in milliseconds (6 seconds)
+
-
};
+
-
rotateSwitch(); //Run function on launch
+
    <!-- MathJax (LaTeX for the web) -->
 +
    <script type="text/x-mathjax-config">
 +
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
 +
        MathJax.Hub.Config({
 +
            TeX: {
 +
                equationNumbers: {  autoNumber: "AMS"  }
 +
            }
 +
        });
 +
    </script>
 +
    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-
//On Hover
 
-
//$(".image_reel a").hover(function() {
 
-
//clearInterval(play); //Stop the rotation
 
-
//}, function() {
 
-
//rotateSwitch(); //Resume rotation timer
 
-
//});
 
-
//On Click
 
-
$(".pause a").click(function() {
 
-
clearInterval(play); //Stop the rotation
 
-
});
 
-
 
-
 
-
//On Click
 
-
$(".paging a").click(function() {
 
-
$active = $(this); //Activate the clicked paging
 
-
//Reset Timer
 
-
clearInterval(play); //Stop the rotation
 
-
rotate(); //Trigger rotation immediately
 
-
rotateSwitch(); // Resume rotation timer
 
-
return false; //Prevent browser jump to link anchor
 
-
});
 
-
});
 
-
</script>
 
-
 
-
<script type="text/javascript">
 
-
$(document).ready(function() {
 
-
 
-
$(".main_image .desc").show(); //Show Banner
 
-
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
 
-
$(".image_thumb ul li:first").addClass('active'); //Add the active class (highlights the very first list item by default)
 
-
$(".image_thumb ul li").click(function(){
 
-
    //Set Variables
 
-
    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
 
-
    var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
 
-
    var imgDesc = $(this).find('.block').html();  //Get HTML of the "block" container
 
-
    var imgDescHeight = $(".main_image").find('.block').height(); //Find the height of the "block"
 
-
 
-
    if ($(this).is(".active")) {  //If the list item is active/selected, then...
 
-
        return false; // Don't click through - Prevents repetitive animations on active/selected list-item
 
-
    } else { //If not active then...
 
-
        //Animate the Description
 
-
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { //Pull the block down (negative bottom margin of its own height)
 
-
            $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 ); //swap the html of the block, then pull the block container back up and set opacity
 
-
            $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)
 
-
        });
 
-
    }
 
-
    //Show active list-item
 
-
    $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all list-items
 
-
    $(this).addClass('active');  //Add class of 'active' on the selected list
 
-
    return false;
 
-
}) .hover(function(){ //Hover effects on list-item
+
</hmtl>
-
    $(this).addClass('hover'); //Add class "hover" on hover
+
-
    }, function() {
+
-
    $(this).removeClass('hover'); //Remove class "hover" on hover out
+
-
});
+
-
$("a.collapse").click(function(){
+
-
    $(".main_banner .block").slideToggle(); //Toggle the description (slide up and down)
+
-
    $("a.collapse").toggleClass("show"); //Toggle the class name of "show" (the hide/show tab)
+
-
});
+
-
});//Close Function
+
-
</script>
+
-
</html>
+

Revision as of 21:20, 1 December 2014

Retrieved from "http://2014.igem.org/Template:Demos_sifuentes"