Team:Newcastle/script/javascript.js

From 2013.igem.org

(Difference between revisions)
 
(41 intermediate revisions not shown)
Line 1: Line 1:
var toggleSpeed = 150;
var toggleSpeed = 150;
-
var msg = "~~MESSAGE FROM MATT (Updates)~~\n\n\nUpdate:22/05/2013 (05:00)\nAdded another display type, if you click \"Change Display\" at the top of the page you should see the display underneath the image carousel change.\n\nUpdate:21/05/2013 (22:00)\nAdded in a main display page, the interactive elements you see on this page would generaly only be used on the front page of the wiki, but of course we can use them where-ever we want. Colors can be made different instead of all the blocks being the same very easily as well.\nThe twitter feed bug has been fixed and should now work perfectly :)\n\nUpdate:20/05/2013 (04:30)\nThe twitter feed is currently linked to my account but this can easily be changed. I think having a twitter will be a good tool to use as marketing.\nThe drop down functionality on tweets is also a little buggy but I'll sort it out before the meeting on wednesday hopefully.";
+
 
var current_display = 'main';
var current_display = 'main';
Line 12: Line 12:
var mode = "temp";
var mode = "temp";
 +
 +
var tocLeft = "";
 +
 +
var tocTopPerm = "";
$(function(){
$(function(){
      
      
     //alert(msg);
     //alert(msg);
-
     //YOUTUBER.loadUpdates();
+
     /*
-
+
    var loop1,        
-
var loop1,
+
     c1 = 0;
     c1 = 0;
-
var loop2,
+
    var loop2,
     c2 = 0;
     c2 = 0;
-
var loop3,
+
    var loop3,
     c3 = 0;
     c3 = 0;
-
var loop4,
+
    var loop4,
     c4 = 0;
     c4 = 0;
     /*
     /*
-
$('.box_2').on('mouseenter mouseleave', function( e ){
+
    $('.box_2').on('mouseenter mouseleave', function( e ){
-
  if( e.type=='mouseleave' ){
+
      if( e.type=='mouseleave' ){
-
clearInterval( loop1 );
+
        clearInterval( loop1 );
-
  }else{
+
      }else{
-
loop1 = setInterval(function(){         
+
        loop1 = setInterval(function(){         
-
$('.box_2 .slice').css({transform: "rotate("+ ( (++c1) % 360 ) +"deg)"});                 
+
            $('.box_2 .slice').css({transform: "rotate("+ ( (++c1) % 360 ) +"deg)"});                 
-
},30);   
+
        },30);   
-
  }
+
       }
-
});
+
    });
-
+
-
$('.box_3').on('mouseenter mouseleave', function( e ){
+
-
  if( e.type=='mouseleave' ){
+
-
clearInterval( loop2 );
+
-
  }else{
+
-
loop2 = setInterval(function(){        
+
-
$('.box_3 .slice').css({transform: "rotate("+ ( (++c2 * -1) % 360 ) +"deg)"});               
+
-
},30)
+
-
  }
+
-
});
+
-
+
-
$('.box_4').on('mouseenter mouseleave', function( e ){
+
-
  if( e.type=='mouseleave' ){
+
-
clearInterval( loop3 );
+
-
  }else{
+
-
loop3 = setInterval(function(){       
+
-
$('.box_4 .slice').css({transform: "rotate("+ ( (++c3 * 1) % 360 ) +"deg)"});               
+
-
},30); 
+
-
  }
+
-
});
+
-
+
-
$('.box_5').on('mouseenter mouseleave', function( e ){
+
-
  if( e.type=='mouseleave' ){
+
-
clearInterval( loop4 );
+
-
  }else{
+
-
loop4 = setInterval(function(){       
+
-
$('.box_5 .slice').css({transform: "rotate("+ ( (++c4 * -1) % 360 ) +"deg)"});               
+
-
},30); 
+
-
  }
+
-
});*/
+
-
+
-
var agentStr = navigator.userAgent;
+
-
if (agentStr.indexOf("Trident/5.0") > -1) {
+
-
if (agentStr.indexOf("MSIE 7.0") > -1)
+
-
mode = "Compatibility View";
+
-
else
+
-
mode = "IE9";
+
-
}
+
-
else if (agentStr.indexOf("Trident/4.0") > -1) {
+
-
if (agentStr.indexOf("MSIE 7.0") > -1)
+
-
mode = "Compatibility View";
+
-
else
+
-
mode = "IE8";
+
-
}
+
-
else
+
-
mode = "IE7";
+
      
      
 +
    $('.box_3').on('mouseenter mouseleave', function( e ){
 +
      if( e.type=='mouseleave' ){
 +
        clearInterval( loop2 );
 +
      }else{
 +
        loop2 = setInterval(function(){       
 +
            $('.box_3 .slice').css({transform: "rotate("+ ( (++c2 * -1) % 360 ) +"deg)"});               
 +
        },30); 
 +
      }
 +
    });
 +
   
 +
    $('.box_4').on('mouseenter mouseleave', function( e ){
 +
      if( e.type=='mouseleave' ){
 +
        clearInterval( loop3 );
 +
      }else{
 +
        loop3 = setInterval(function(){       
 +
            $('.box_4 .slice').css({transform: "rotate("+ ( (++c3 * 1) % 360 ) +"deg)"});               
 +
        },30); 
 +
      }
 +
    });
 +
   
 +
    $('.box_5').on('mouseenter mouseleave', function( e ){
 +
      if( e.type=='mouseleave' ){
 +
        clearInterval( loop4 );
 +
      }else{
 +
        loop4 = setInterval(function(){       
 +
            $('.box_5 .slice').css({transform: "rotate("+ ( (++c4 * -1) % 360 ) +"deg)"});               
 +
        },30); 
 +
      }
 +
    });
 +
    */
 +
    /*
 +
    var agentStr = navigator.userAgent;
 +
    if (agentStr.indexOf("Trident/5.0") > -1) {
 +
        if (agentStr.indexOf("MSIE 7.0") > -1)
 +
            mode = "Compatibility View";
 +
        else
 +
            mode = "IE9";
 +
    }
 +
    else if (agentStr.indexOf("Trident/4.0") > -1) {
 +
        if (agentStr.indexOf("MSIE 7.0") > -1)
 +
            mode = "Compatibility View";
 +
        else
 +
            mode = "IE8";
 +
    }
 +
    else
 +
        mode = "IE7";
 +
    */
     // Code for organising pages into viewable
     // Code for organising pages into viewable
-
+
   
-
// Strip the hash
+
    // Strip the hash
-
var href = (location.href).split("#");
+
    var href = (location.href).split("#");
-
+
   
-
// Split the components
+
    // Split the components
-
var url = href[0].split("/");
+
    var url = href[0].split("/");
-
+
   
-
// Check that you're not on the calendar and that you're not in Compatibility View
+
    // Check that you're not on the calendar and that you're not in Compatibility View
-
if(url[url.length - 1] != "calendar" && mode != "Compatibility View")
+
    if(url[url.length - 1] != "calendar" && $('#toc').length && url[url.length - 1] != "protocols" )// && mode != "Compatibility View")
-
ParsePage(location.hash);
+
    {
 +
        ParsePage(location.hash);
 +
   
 +
        $(window).scroll( function(e){
 +
           
 +
            var windowTop = $(window).scrollTop();
 +
            var tocTop = $('#toc').offset().top;
 +
            var contentTop = $('#page_content').offset().top - 10;
 +
            //alert(windowTop);
 +
           
 +
            if(windowTop > contentTop)
 +
            {
 +
                $('#toc').css({'position': 'fixed',
 +
                              'top': '5px',
 +
                              'left':tocLeft});
 +
            } else
 +
            {
 +
                $('#toc').css({'position': 'relative',
 +
                              'top': '0px',
 +
                              'left': '0px'});
 +
            }
 +
        });
 +
    }
      
      
     $('.top_menu li').hover(function(){
     $('.top_menu li').hover(function(){
Line 99: Line 125:
     }, function(){
     }, function(){
         $(this).find('ul').slideUp(toggleSpeed);
         $(this).find('ul').slideUp(toggleSpeed);
-
    });
 
-
   
 
-
    $('#twitter_feed').hover(function(){
 
-
        $('#tweet_case').slideDown(toggleSpeed);
 
-
    }, function(){
 
-
        $('#tweet_case').slideUp(toggleSpeed);
 
     });
     });
      
      
Line 112: Line 132:
     }, function(){
     }, function(){
         $(this).find('.display_image').show();
         $(this).find('.display_image').show();
-
if(!($(this).hasClass('box_1')))
+
        if(!($(this).hasClass('box_1')))
-
$(this).find('.under_text').hide();
+
            $(this).find('.under_text').hide();
-
    });
+
-
    /*
+
-
    $('#rss_feed').hover(function(){
+
-
        $(this).animate({marginLeft:"-150px"}, toggleSpeed, 'easeOutSine');
+
-
       
+
-
        if(firstTimeOpened)
+
-
        {
+
-
            $('#rss_feed_tooltip').show();
+
-
            //firstTimeOpened = false;
+
-
        }
+
-
    }, function(){
+
-
        if(!leaveFeedOpen)
+
-
            $(this).animate({marginLeft:"-30px"}, toggleSpeed, 'easeInSine');
+
-
       
+
-
        if(firstTimeOpened)
+
-
        {
+
-
            $('#rss_feed_tooltip').hide();
+
-
            //$.cookie('firstTimeOpened', 'false');
+
-
        }
+
     });
     });
      
      
-
    $('#rss_feed').click(function(){
 
-
        if(leaveFeedOpen)
 
-
            leaveFeedOpen = false;
 
-
        else
 
-
            leaveFeedOpen = true;
 
-
    });*/
 
-
 
     // Event handlers for closing the pop up box. Individual actions taken by a page must be created in that page's JQuery
     // Event handlers for closing the pop up box. Individual actions taken by a page must be created in that page's JQuery
     $('#pop_up #pop_up_close').click(function(){
     $('#pop_up #pop_up_close').click(function(){
         $('#pop_up').fadeOut();
         $('#pop_up').fadeOut();
     });
     });
-
+
   
     $('#pop_up #pop_up_underlay').click(function(){
     $('#pop_up #pop_up_underlay').click(function(){
         $('#pop_up').fadeOut();
         $('#pop_up').fadeOut();
     });
     });
-
+
    /*
-
if(mode != "Compatibility View")
+
    if(mode != "Compatibility View")
-
{
+
    {
-
$('.toclevel-2').click(function(){
+
        $('.toclevel-2').click(function(){
-
+
           
-
var href = $(this).children('a').attr('href');
+
            var href = $(this).children('a').attr('href');
-
+
           
-
$('#toc').find('a[href="' + cur_content + '"]').toggleClass('active');
+
            $('#toc').find('a[href="' + cur_content + '"]').toggleClass('active');
-
$('#bodyContent').find(cur_content + '_section').hide();
+
            $('#bodyContent').find(cur_content + '_section').hide();
-
$('#bodyContent').find(href + '_section').show();
+
            $('#bodyContent').find(href + '_section').show();
-
+
           
-
cur_content = href;
+
            cur_content = href;
-
+
        });
-
setTocHeight();
+
    }*/
-
});
+
-
}
+
-
   
+
-
    var tocTop = $('#toc').offset().top;
+
-
   
+
-
    alert(tocTop);
+
});
});
Line 177: Line 165:
     $('#toc').nextUntil('#logos').addClass("temp_for_wrap");
     $('#toc').nextUntil('#logos').addClass("temp_for_wrap");
     $('.temp_for_wrap').wrapAll('<div id="page_content">');
     $('.temp_for_wrap').wrapAll('<div id="page_content">');
-
     //$('</div>').insertBefore('#logos');
+
      
-
     /*
+
     tocLeft = $('#toc').offset().left - 10;
-
var numSections = parseInt($('.toclevel-2').length);
+
    tocTopPerm = $('#toc').offset().top - $(window).scrollTop();
-
var logos = $('#bodyContent').find($('#logos')).html();
+
   
-
+
    $('#toc .toclevel-1').append('<li class="toclevel-2 tocsection-6"><a href="#"><span class="tocnumber">1.5</span> <span class="toctext">Return to Top</span></a></li>');
-
var logosExists = $('#bodyContent').find($('#logos')).length;
+
-
+
-
$('#bodyContent').find($('#logos')).remove();
+
-
+
-
if(numSections > 1)
+
-
{
+
-
var topLevelTag = $('#bodyContent').find($('.toclevel-2').children('a').attr('href')).parent().prop("tagName");
+
-
var topLevelTag = 'h2';
+
-
+
-
$('#bodyContent').children('.printfooter').before('<' + topLevelTag + ' id="temp_h2">Temp</' + topLevelTag + '>');
+
-
+
-
for(var i = 0; i < numSections; i++)
+
-
{
+
-
var currentID = $('.toclevel-2').eq(i).children('a').attr('href');
+
-
+
-
var currentTitle = $('#bodyContent').find(currentID);
+
-
+
-
var currentClass = currentID.replace("#","");
+
-
+
-
$(currentID).removeAttr('id');
+
-
+
-
$(currentTitle).parent().nextUntil(topLevelTag).andSelf().addClass(currentClass);
+
-
+
-
$("." + currentClass).wrapAll('<div class="page_section" id="' + currentClass + '_section"></div>');
+
-
+
-
//$("." + currentClass).removeClass(currentClass);
+
-
+
-
if(hash == "")
+
-
{
+
-
if(i > 0) $('#bodyContent').find(currentID + '_section').hide();
+
-
else cur_content = currentID;
+
-
}
+
-
else
+
-
{
+
-
if(hash == currentID) cur_content = currentID;
+
-
else $('#bodyContent').find(currentID + '_section').hide();
+
-
}
+
-
}
+
-
+
-
$('#bodyContent').find('#temp_h2').remove();
+
-
} else
+
-
{
+
-
$('#bodyContent').find('#toc').hide();
+
-
}
+
-
+
-
if($('#toc').length)
+
-
{
+
-
//alert($('#bodyContent').find('#toc').html());
+
-
$('#toc').find('#toctitle h2').html($('.toclevel-1').find('.toctext').first().text() + '<hr class="blue_bg"/>');
+
-
$('.toclevel-1').find('.toctext').first().hide();
+
-
$('<table id="toc" class="toc">' + $('#bodyContent').find('#toc').html() + '</table>').insertAfter($('#bodyContent').find('h1').first());
+
-
$('#bodyContent').find('#toc').first().remove();
+
-
}
+
-
+
-
//$('.printfooter').insertBefore(logos);
+
-
+
-
if(logosExists) $('<div id="logos">' + logos + '</div>').insertBefore($('.printfooter'));
+
-
$('<hr />').insertAfter($('#bodyContent').find('h1').first());
+
-
setTocHeight();
+
-
    */
+
-
}
+
-
 
+
-
function setTocHeight()
+
-
{
+
-
if(mode != "Compatibility View")
+
-
{
+
-
$('#toc').find('a[href="' + cur_content + '"]').toggleClass('active');
+
-
+
-
var count = 0;
+
-
+
-
while((count < 5))
+
-
{
+
-
$('#toc').height($(cur_content + '_section').height() + 30);
+
-
+
-
count ++;
+
-
}
+
-
}
+
}
}

Latest revision as of 17:25, 3 October 2013

var toggleSpeed = 150;

var current_display = 'main';

var cur_main_display = 1;

var leaveFeedOpen = false;

var firstTimeOpened = true;

var cur_content = "";

var mode = "temp";

var tocLeft = "";

var tocTopPerm = "";

$(function(){

   //alert(msg);
   /*
   var loop1,          
   c1 = 0;
   var loop2,
   c2 = 0;
   var loop3,
   c3 = 0;
   var loop4,
   c4 = 0;
   /*
   $('.box_2').on('mouseenter mouseleave', function( e ){
      if( e.type=='mouseleave' ){
        clearInterval( loop1 );
      }else{
        loop1 = setInterval(function(){        
           $('.box_2 .slice').css({transform: "rotate("+ ( (++c1) % 360 ) +"deg)"});                
        },30);   
      }
   });
   
   $('.box_3').on('mouseenter mouseleave', function( e ){
      if( e.type=='mouseleave' ){
        clearInterval( loop2 );
      }else{
        loop2 = setInterval(function(){        
           $('.box_3 .slice').css({transform: "rotate("+ ( (++c2 * -1) % 360 ) +"deg)"});                
        },30);   
      }
   });
   
   $('.box_4').on('mouseenter mouseleave', function( e ){
      if( e.type=='mouseleave' ){
        clearInterval( loop3 );
      }else{
        loop3 = setInterval(function(){        
           $('.box_4 .slice').css({transform: "rotate("+ ( (++c3 * 1) % 360 ) +"deg)"});                
        },30);   
      }
   });
   
   $('.box_5').on('mouseenter mouseleave', function( e ){
      if( e.type=='mouseleave' ){
        clearInterval( loop4 );
      }else{
        loop4 = setInterval(function(){        
           $('.box_5 .slice').css({transform: "rotate("+ ( (++c4 * -1) % 360 ) +"deg)"});                
        },30);   
      }
   });
   */
   /*
   var agentStr = navigator.userAgent;
   if (agentStr.indexOf("Trident/5.0") > -1) {
       if (agentStr.indexOf("MSIE 7.0") > -1)
           mode = "Compatibility View";
       else
           mode = "IE9";
   }
   else if (agentStr.indexOf("Trident/4.0") > -1) {
       if (agentStr.indexOf("MSIE 7.0") > -1)
           mode = "Compatibility View";
       else
           mode = "IE8";
   }
   else
       mode = "IE7";
   */
   // Code for organising pages into viewable
   
   // Strip the hash
   var href = (location.href).split("#");
   
   // Split the components
   var url = href[0].split("/");
   
   // Check that you're not on the calendar and that you're not in Compatibility View
   if(url[url.length - 1] != "calendar" && $('#toc').length && url[url.length - 1] != "protocols" )// && mode != "Compatibility View")
   {
       ParsePage(location.hash);
   
       $(window).scroll( function(e){
           
           var windowTop = $(window).scrollTop();
           var tocTop = $('#toc').offset().top;
           var contentTop = $('#page_content').offset().top - 10;
           //alert(windowTop);
           
           if(windowTop > contentTop)
           {
               $('#toc').css({'position': 'fixed',
                              'top': '5px',
                             'left':tocLeft});
           } else
           {
               $('#toc').css({'position': 'relative',
                              'top': '0px',
                             'left': '0px'});
           }
       });
   }
   
   $('.top_menu li').hover(function(){
       $(this).find('ul').slideDown(toggleSpeed);
   }, function(){
       $(this).find('ul').slideUp(toggleSpeed);
   });
   
   $('#image_display .proj_box, #image_display .image_box').hover(function(){
       $(this).find('.display_image').hide();
       $(this).find('.under_text').show();
   }, function(){
       $(this).find('.display_image').show();
       if(!($(this).hasClass('box_1')))
           $(this).find('.under_text').hide();
   });
   
   // Event handlers for closing the pop up box. Individual actions taken by a page must be created in that page's JQuery
   $('#pop_up #pop_up_close').click(function(){
       $('#pop_up').fadeOut();
   });
   
   $('#pop_up #pop_up_underlay').click(function(){
       $('#pop_up').fadeOut();
   });
   /*
   if(mode != "Compatibility View")
   {
       $('.toclevel-2').click(function(){
           
           var href = $(this).children('a').attr('href');
           
           $('#toc').find('a[href="' + cur_content + '"]').toggleClass('active');
           $('#bodyContent').find(cur_content + '_section').hide();
           $('#bodyContent').find(href + '_section').show();
           
           cur_content = href;
       });
   }*/

});

function ParsePage(hash) {

//('
').insertAfter('#toc');
   $('#toc').nextUntil('#logos').addClass("temp_for_wrap");
$('.temp_for_wrap').wrapAll('
');
   tocLeft = $('#toc').offset().left - 10;
   tocTopPerm = $('#toc').offset().top - $(window).scrollTop();
   
$('#toc .toclevel-1').append('
  • <a href="#">1.5 Return to Top</a></li>'); }