Why, in this JavaScript animation, are certain elements going to strange places?

StackOverflow https://stackoverflow.com/questions/21372219

Question

At http://classicorthodoxbible.com/words.html, I have a partially broken animation; consistent cross-browser (Mac) testing elicits the same behavior.

The intent is to move tokens to random places and then animate them coming to their proper place; you can see this functioning on a per-character basis in http://classicorthodoxbible.com, the present homepage.

The engine, which is substantially similar between the two, is in the words.html page:

function journey(index, starting_x, starting_y, target_x,
target_y, starting_opacity, target_opacity, delay, radix) {
    if (isNaN(starting_x) || isNaN(starting_y) || isNaN(target_x) || isNaN(target_y)) {
        /* console.log('starting_x: ' + starting_x +
                      ' starting_y: ' + starting_y + ' target_x: ' +
                      target_x + ' target_y: ' + target_y); */
        console.log('Returning...');
        return;
    }
    /* console.log(target_x - starting_x + ', ' + (target_y -
                  starting_y)); */
    if (Math.abs(starting_x - target_x) + Math.abs(starting_y - target_y) < 2) {
        // console.log(index);
        jQuery('#text_' + index).css({
            'left': target_x,
            'top': target_y,
            'opacity': target_opacity,
            '-ms-filter':
                'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + target_opacity * 100,
            'filter': 'alpha(opacity=' + target_opacity * 100,
            'position': 'absolute'
        });
    } else {
        if (starting_x - target_x > 0) {
            var new_x = (target_x + Math.floor((starting_x - target_x) * radix));
        } else {
            var new_x = (target_x + Math.ceil((starting_x - target_x) * radix));
        }
        if (starting_y - target_y > 0) {
            var new_y = (target_y + Math.floor((starting_y - target_y) * radix));
        } else {
            var new_y = (target_y + Math.ceil((starting_y - target_y) * radix));
        }
        var new_opacity = target_opacity + (starting_opacity - target_opacity) * radix;
        jQuery('#text_' + index).css({
            'left': new_x,
            'top': new_y,
            'opacity': new_opacity,
            '-ms-filter':
                'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + new_opacity * 100,
            'filter': 'alpha(opacity=' + new_opacity * 100,
            'position': 'absolute'
        });
        setTimeout(function () {
            journey(index, new_x, new_y, target_x, target_y,
            new_opacity, target_opacity, delay, radix);
        }, delay);
    }
}

function start_fade_in() {
    var message = '<p><a href="http://tinyurl.com/classic-orthodox-bible">The Classic Orthodox Bible</a> is a complete Bible that includes Sir Lancelot Brenton\'s translation of the Septuagint (also known as the LXX), the Greek Old Testament as it was known to Christ and many of the earliest Church Fathers. Missing verses and the New Testament are taken from the <a href="http://tinyurl.com/complete-parallel-bible">King James Version</a>, whose style and quality are imitated by Sir Brenton. His translation is available in tiny, hard-to-read letters in the margins of <a href="http://tinyurl.com/brenton-septuagint">Hendrickson\'s Septuagint</a>, more of a shorthand convenience to scholars reading the Greek than genuinely intended for devotional use. Readers wishing for a complete English translation of the Septuagint in a regular Bible, and who appreciate the beauty, grandeur, and meticulous word-for-word accuracy of the <a href="http://tinyurl.com/complete-parallel-bible">King James Version</a> will find the <a href="http://tinyurl.com/classic-orthodox-bible">Classic Orthodox Bible</a> a delight.</p> <p>If you only buy ONE version of the Bible to help you understand Holy Orthodoxy, without a doubt, buy the <a href="http://tinyurl.com/orthodox-study-bible">Orthodox Study Bible</a>...</p> <p>But if you buy two, as there is good reason to do, you might consider the <a href="http://tinyurl.com/classic-orthodox-bible">Classic Orthodox Bible</a>.</p>';
    var message = '<p><a href="http://tinyurl.com/classic-orthodox-bible">The Classic Orthodox Bible</a> a complete Bible like the <a href="http://tinyurl.com/complete-parallel-bible">King James Version</a> that includes the <a href="http://tinyurl.com/brenton-septuagint">Septuagint</a>, and is completely uncensored.</p> <p>Readers wishing for a complete English translation of Orthodox Bible including the Septuagint in a regular Bible, and who appreciate the beauty, grandeur, and meticulous accuracy of the <a href="http://tinyurl.com/complete-parallel-bible">King James</a> will find it a delight.</p> <p>If you only buy ONE version of the Bible to help you understand Holy Orthodoxy, without a doubt, buy the <a href="http://tinyurl.com/orthodox-study-bible">Orthodox Study Bible</a>...</p> <p>But if you buy two, as there is good reason to do, you might consider the <a href="http://tinyurl.com/classic-orthodox-bible">Classic Orthodox Bible</a>.</p>';
    var split_message = message.split(/(<.*?>|)/);
    var split_message = '<p><a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_0">The</span> <span id="text_1">Classic</span> <span id="text_2">Orthodox</span> <span id="text_3">Bible</span></a> <span id="text_4">a</span> <span id="text_5">complete</span> <span id="text_6">Bible</span> <span id="text_7">like</span> <span id="text_8">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_9">King</span> <span id="text_10">James</span> <span id="text_11">Version</span></a> <span id="text_12">that</span> <span id="text_13">includes</span> <span id="text_14">the</span> <a href="http://tinyurl.com/brenton-septuagint"><span id="text_15">Septuagint,</span></a> <span id="text_16">and</span> <span id="text_17">is</span> <span id="text_18">completely</span> <span id="text_19">uncensored.</span></p> <p><span id="text_20">Readers</span> <span id="text_21">wishing</span> <span id="text_22">for</span> <span id="text_23">a</span> <span id="text_24">complete</span> <span id="text_25">English</span> <span id="text_26">translation</span> <span id="text_27">of</span> <span id="text_28">Orthodox</span> <span id="text_29">Bible</span> <span id="text_30">including</span> <span id="text_31">the</span> <span id="text_32"><a href="http://tinyurl.com/brenton-septuagint">Septuagint</span></span> <span id="text_33">in</span> <span id="text_34">a</span> <span id="text_35">regular</span> <span id="text_36">Bible,</span> <span id="text_37">and</span> <span id="text_38">who</span> <span id="text_39">appreciate</span> <span id="text_40">the</span> <span id="text_41">beauty,</span> <span id="text_42">grandeur,</span> <span id="text_43">and</span> <span id="text_44">meticulous</span> <span id="text_45">accuracy</span> <span id="text_46">of</span> <span id="text_47">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_48">King</span> <span id="text_49">James</span></a> <span id="text_50">will</span> <span id="text_51">find</span> <span id="text_52">it</span> <span id="text_53">a</span> <span id="text_54">delight.</span></p> <p><span id="text_55">If</span> <span id="text_56">you</span> <span id="text_57">only</span> <span id="text_58">buy</span> <span id="text_59">ONE</span> <span id="text_60">version</span> <span id="text_61">of</span> <span id="text_62">the</span> <span id="text_63">Bible</span> <span id="text_64">to</span> <span id="text_65">help</span> <span id="text_66">you</span> <span id="text_67">understand</span> <span id="text_68">Holy</span> <span id="text_69">Orthodoxy,</span> <span id="text_70">without</span> <span id="text_71">a</span> <span id="text_72">doubt,</span> <span id="text_73">buy</span> <span id="text_74">the</span> <a href="http://tinyurl.com/orthodox-study-bible"><span id="text_75">Orthodox</span> <span id="text_76">Study</span> <span id="text_77">Bible</span></a><span id="text_78">...</span></p> <p><span id="text_79">But</span> <span id="text_80">if</span> <span id="text_81">you</span> <span id="text_82">buy</span> <span id="text_83">two,</span> <span id="text_84">as</span> <span id="text_85">there</span> <span id="text_86">is</a> <span id="text_87">good</span> <span id="text_88">reason</span> <span id="text_89">to</span> <span id="text_90">do,</span> <span id="text_91">you</span> <span id="text_92">might</span> <span id="text_93">consider</span> <span id="text_94">the</span> <a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_94">Classic</span> <span id="text_95">Orthodox</span> <span id="text_96">Bible</span></a><span id="text_97">.</span></p>';
    var counter = 0;
    var filtered_message = '<div class="adjusted">';
    var message = '<p><a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_0">The</span> <span id="text_1">Classic</span> <span id="text_2">Orthodox</span> <span id="text_3">Bible</span></a> <span id="text_4">a</span> <span id="text_5">complete</span> <span id="text_6">Bible</span> <span id="text_7">like</span> <span id="text_8">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_9">King</span> <span id="text_10">James</span> <span id="text_11">Version</span></a> <span id="text_12">that</span> <span id="text_13">includes</span> <span id="text_14">the</span> <a href="http://tinyurl.com/brenton-septuagint"><span id="text_15">Septuagint,</span></a> <span id="text_16">and</span> <span id="text_17">is</span> <span id="text_18">completely</span> <span id="text_19">uncensored.</span></p> <p><span id="text_20">Readers</span> <span id="text_21">wishing</span> <span id="text_22">for</span> <span id="text_23">a</span> <span id="text_24">complete</span> <span id="text_25">English</span> <span id="text_26">translation</span> <span id="text_27">of</span> <span id="text_28">Orthodox</span> <span id="text_29">Bible</span> <span id="text_30">including</span> <span id="text_31">the</span> <span id="text_32"><a href="http://tinyurl.com/brenton-septuagint">Septuagint</span></span> <span id="text_33">in</span> <span id="text_34">a</span> <span id="text_35">regular</span> <span id="text_36">Bible,</span> <span id="text_37">and</span> <span id="text_38">who</span> <span id="text_39">appreciate</span> <span id="text_40">the</span> <span id="text_41">beauty,</span> <span id="text_42">grandeur,</span> <span id="text_43">and</span> <span id="text_44">meticulous</span> <span id="text_45">accuracy</span> <span id="text_46">of</span> <span id="text_47">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_48">King</span> <span id="text_49">James</span></a> <span id="text_50">will</span> <span id="text_51">find</span> <span id="text_52">it</span> <span id="text_53">a</span> <span id="text_54">delight.</span></p> <p><span id="text_55">If</span> <span id="text_56">you</span> <span id="text_57">only</span> <span id="text_58">buy</span> <span id="text_59">ONE</span> <span id="text_60">version</span> <span id="text_61">of</span> <span id="text_62">the</span> <span id="text_63">Bible</span> <span id="text_64">to</span> <span id="text_65">help</span> <span id="text_66">you</span> <span id="text_67">understand</span> <span id="text_68">Holy</span> <span id="text_69">Orthodoxy,</span> <span id="text_70">without</span> <span id="text_71">a</span> <span id="text_72">doubt,</span> <span id="text_73">buy</span> <span id="text_74">the</span> <a href="http://tinyurl.com/orthodox-study-bible"><span id="text_75">Orthodox</span> <span id="text_76">Study</span> <span id="text_77">Bible</span></a><span id="text_78">...</span></p> <p><span id="text_79">But</span> <span id="text_80">if</span> <span id="text_81">you</span> <span id="text_82">buy</span> <span id="text_83">two,</span> <span id="text_84">as</span> <span id="text_85">there</span> <span id="text_86">is</a> <span id="text_87">good</span> <span id="text_88">reason</span> <span id="text_89">to</span> <span id="text_90">do,</span> <span id="text_91">you</span> <span id="text_92">might</span> <span id="text_93">consider</span> <span id="text_94">the</span> <a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_94">Classic</span> <span id="text_95">Orthodox</span> <span id="text_96">Bible</span></a><span id="text_97">.</span></p>';
    jQuery('.display').html(message);
    var initial_coordinates = [];
    for (var index = 0; index < 100; ++index) {
        if (jQuery('#text_' + index).size()) {
            var coordinates = jQuery('#text_' + index).offset();
            initial_coordinates.push({
                'index': index,
                    'left': coordinates['left'],
                    'top': coordinates['top']
            });
        }
    }
    for (var index = 0; index < initial_coordinates.length; ++index) {
        if (jQuery('#text_' + initial_coordinates[index]['index']).size()) {
            var radius = Math.random() * (jQuery(window).width() + jQuery(window).height());
            var angle = Math.random() * 2 * 3.1415926535;
            var starting_x = (
            initial_coordinates[index]['left'] + Math.cos(angle) * radius);
            // console.log('starting_y: ' + starting_x);
            var starting_y = (
            initial_coordinates[index]['top'] + Math.sin(angle) * radius);
            // console.log('starting_x: ' + starting_y);
            journey(initial_coordinates[index]['index'],
            starting_x, starting_y,
            initial_coordinates[index]['left'],
            initial_coordinates[index]['top'], Math.random(),
            1, 1, .9);
        }
    }
}

start_fade_in();

Suggestions? I've looked through the last string used to populate the DIV before the animations, and I don't see how I've managed to send the last 5 or 10 words to radically different behavior than the other 80 or 90.

Thanks,

Was it helpful?

Solution

the ones that are getting the wrong ending position is because they are inside another element, so their offset is based off their parent.

For instance #text_86 has subelements, but since it has a position:absolute and the subelements have a position:absolute, the subelements are being positioned based on the top left corner of the parent, in this case top left of #text_86

You need to either have your algorithm factor in this, take the subelements out of the container, or move just that element and not the subelements

OTHER TIPS

you have a typo/error in the markup at #text_86

<span id="text_86">is</a>

the elements that follow are calculating as child elements of text_86.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top