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 -380px;
 +
}
 +
.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]-->
 
-
    <!-- jQuery Tools (slider) -->
+
/*--TagLine Begins Here--*/
-
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
+
#sponsors { /*--Goes with textboxes class--*/
-
    <script>
+
margin-left:0px;
-
        $(function() {
+
margin-right:0px;
-
        // initialize scrollable
+
}
-
        $(".scrollable").scrollable().navigator();
+
#sponsorsbox { /*--Goes with textboxes class--*/
-
        });
+
margin: 10px;
-
    </script>
+
-webkit-border-radius: 10px;
 +
-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;}
-
    <!-- Navigation scroll follow -->
+
</style>
-
    <script type="text/javascript">
+
</html>
-
        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";
 
-
            }
 
-
 
 
-
            var toc_margin_from_top = $(".navigation").height() + 35;
+
<html>
-
            var scroll_pos_above_start_of_article = scrollPos < $(".whitebox.article").offset().top - 68;
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
-
            var toc_end_reached_bottom_of_article = scrollPos + toc_margin_from_top + $(".toc").height() > $(".whitebox.article").offset().top + $(".whitebox.article").height() - 35;
+
<script type="text/javascript">
-
            var toc_margin_from_title = scrollPos < ($(".whitebox.article").offset().top );
+
$(document).ready(function() {
-
           
+
//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;
-
            if(scroll_pos_above_start_of_article){
+
//Adjust the image reel to its new size
-
                  $(".toc").offset({top: $(".whitebox.article").offset().top + 68});
+
$(".image_reel").css({'width' : imageReelWidth});
-
            } 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) -->
+
-
            var scroll_pos_above_menubar = scrollPos < 250;
+
//Paging  and Slider Function
 +
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)
-
            if(scroll_pos_above_menubar){
+
//Slider Animation
-
                  $(".navigation").offset({top: 250 });
+
$(".image_reel").animate({
-
            } else {
+
left: -image_reelPosition
-
                  $(".navigation").offset({top: scrollPos});
+
}, 500 );
-
            }
+
};  
-
            //if (scroll_pos_below_start_of_article){ //&& (scrollPos < $(document).height() - $(".navigation")[0].height() - 70)) {
+
//Rotation  and Timing Event
-
            //   $(".toc").addClass("stickBelowNavigation");
+
rotateSwitch = function(){
-
            //} else {
+
play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
-
            //  $(".toc").removeClass("stickBelowNavigation");
+
$active = $('.paging a.active').next(); //Move to the next paging
-
            //}
+
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)
 +
};
-
    <!-- MathJax (LaTeX for the web) -->
+
rotateSwitch(); //Run function on launch
-
    <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;
-
</hmtl>
+
}) .hover(function(){ //Hover effects on list-item
 +
    $(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"