I have a snippet in MODx Evo:
<?php
/*
Insert a block Image Quote
This snipped depends on GetField snippet being installed
Parameters are:
"eWords - enter the words you'd like in the quote
&tpl - the template with the above placeholders. default is blockQuoteTpl
*/
$tpl = isset($tpl) ? $tpl : 'blockQuoteTpl';
$quoteWords = isset($quoteWords) ? $quoteWords : 'Use the parameter quoteWords to define what goes here';
$imageId = isset($imageId) ? $imageId : '[*image*]';
$modx->setPlaceholder('tpl', $tpl);
$modx->setPlaceholder('quoteWords', $quoteWords);
$modx->setPlaceholder('imageId', $imageId);
return $modx->getChunk($tpl);
?>
tpl code:
<div class="blockQuoteImageText">
<div class="blockQuoteImage">
<img src="[+imageId:phpthumb=`&h=250&w=500&zc=1`+]">
<div class="blockQuoteText">
<p>[+quoteWords+]</p>
</div>
</div>
</div>
Which allows content editors to call the snippet, insert a line and produces the attached. The orange box with the text in it is positioned relative to the blockQuoteImageText div.
When the page loads, the orange text box is at the top or the page for 1/2 a second then shifts down to the correct position. Could this be because snippets within a content area are executed later than other snippets? I’ve removed phpthumb and it still jumps. I am loading a fair bit of javascript:
<script type="text/javascript" src="http://use.typekit.com/gxg7fyp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="[(site_url)]assets/templates/bl/js/hoverIntent.js"></script>
<script type="text/javascript" src="[(site_url)]assets/templates/bl/js/superfish.js"></script>
<script type="text/javascript" src="[(site_url)]assets/templates/bl/js/supersubs.js"></script>
<script type="text/javascript" src="[(site_url)]assets/templates/bl/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="[(site_url)]assets/templates/bl/js/jquery.cross-slide.min.js"></script>
<script type="text/javascript" src="[(site_url)]assets/templates/bl/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="[(site_url)]assets/templates/bl/js/jquery.countdown.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="[(site_url)]assets/templates/bl/js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var olympicStart = new Date();
olympicStart = new Date(olympicStart.getFullYear() + 1,7-1,27);
$('#olympicCountdown').countdown({until: olympicStart,
layout: ' {dn} {dl}, {hn} {hl}, {mn} {ml} and {sn} {sl}'});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'dark_rounded' /* light_rounded / dark_rounded / light_square / dark_square / facebook */
});
});
</script>
<script>
$(document).ready(function() {
$('ul.sf-menu').supersubs({
minWidth: 10.1, // minimum width of sub-menus in em units
maxWidth: 27, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish({
delay: 10, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'fast', // faster animation speed
autoArrows: false, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
});
</script>
is this a MODx snipped loading order issue or a javascript issue? All relevant CSS divs have a fixed height... anyone know how I debug this?
Thanks!
☆ A M B ☆