Team:Queens Canada/Notebook/Week1
From 2012.igem.org
(Difference between revisions)
Line 11: | Line 11: | ||
} | } | ||
</style> | </style> | ||
+ | <script> | ||
+ | $.fn.bouncyText = function() { | ||
+ | |||
+ | |||
+ | /* ---------------------- | ||
+ | | PREP - exit if Chrome or Safari. Run only on text nodes of nodes, so don't interfere with other stuff inside $(this). Convert spaces | ||
+ | | to  's. Make clone of element so spacing maintained when text is turned into position absolute | ||
+ | ---------------------- */ | ||
+ | |||
+ | if (navigator.appVersion.indexOf('Chrome') != -1 || navigator.appVersion.indexOf('Safari') != -1) return; | ||
+ | var ac = arguments.callee; | ||
+ | $(this).html($(this).html().replace(/ /g, ' ')); | ||
+ | $(this).clone().css('visibility', 'hidden').insertAfter($(this)); | ||
+ | var textNodes = $(this).contents().filter(function() { return this.nodeType == 3; }); | ||
+ | if (textNodes.length == 0) { return; } | ||
+ | |||
- | < | + | /* ---------------------- |
+ | | MAIN | ||
+ | ---------------------- */ | ||
+ | |||
+ | ac.main = function(textNode) { | ||
+ | |||
+ | |||
+ | //wrap text node in master span and break each char within it into its own DIV, so can be individually targeted for effects | ||
+ | //border looks pointless but position in some browsers is odd without it! | ||
+ | |||
+ | var thisTN_newHTML = $('<span>').css('border', 'solid 1px transparent').addClass('bouncyText_wordContainer').css({position: 'relative'}); | ||
+ | for(var i=0; i<textNode.text().length; i++) thisTN_newHTML.append(function() { | ||
+ | return $('<div>').text(textNode.text().substr(i, 1)); | ||
+ | }); | ||
+ | textNode.after(thisTN_newHTML).remove(); | ||
+ | |||
+ | |||
+ | //treat each char DIV so it's ready for effect code but so letters are still next to each other. Spaces need to be > | ||
+ | |||
+ | var thisTN_widthSoFar = 0; | ||
+ | thisTN_newHTML.children().each(function() { | ||
+ | $(this).css({position: 'absolute', top: 0, left: 0}); | ||
+ | var thisCharLeft = $(this).index() != 0 ? thisTN_widthSoFar : 0; | ||
+ | $(this).css('left', thisCharLeft); | ||
+ | $(this).get(0).poo = thisCharLeft; | ||
+ | thisTN_widthSoFar += $(this).width(); | ||
+ | }); | ||
+ | |||
+ | |||
+ | //now run effects on letters at random | ||
+ | |||
+ | setInterval(function() { | ||
+ | if (ac.main.stop) return; | ||
+ | var charNode = $(thisTN_newHTML).children(':eq('+Math.floor(Math.random()*($(thisTN_newHTML).children().length-1))+')'); | ||
+ | charNode.effect('bounce', null, null, function() { | ||
+ | if ($(this).parent().is('.ui-effects-wrapper')) { | ||
+ | var this_clone = $(this).clone(); | ||
+ | var this_closestWordContainer = $(this).closest('.bouncyText_wordContainer'); | ||
+ | $(this).parentsUntil('.bouncyText_wordContainer').remove(); | ||
+ | this_closestWordContainer.append(this_clone); | ||
+ | } | ||
+ | }) | ||
+ | }, 1000); | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | /* ---------------------- | ||
+ | | ITERATE over text nodes and hit main func for each | ||
+ | ---------------------- */ | ||
+ | |||
+ | textNodes.each(function() { ac.main($(this)); }); | ||
+ | |||
+ | |||
+ | } | ||
+ | </script> | ||
+ | <script> | ||
$(function() { $('#bounceTest').bouncyText(); }) | $(function() { $('#bounceTest').bouncyText(); }) | ||
</script> | </script> |
Revision as of 15:53, 25 May 2012
Control
this text