"
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
