|
|
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> | + | |