How to move AJAX'd content in Javascript w/ Moovweb SDK? - javascript

So sometimes when working with the Moovweb SDK a client will AJAX in a content spot, but it will be in the incorrect area?
I cannot use tritium to move this content, because the area I want to move it to is inserted after page load!
Example:
<div class="where-i-want-to-move-it"></div>
<div class="content-area-i-want-it-moved-from">
<p class="content-i-want-moved">Hi! This was ajaxed in at a later date!</p>
</div>
How can I detect that this p tag was added through AJAX when I cannot control their JS to fire a specific event or fire a different call back?

One option would be to listen to node changes -- see this post -- and assuming you can target the correct mutation event, move the content manually in JavaScript.

Our firm avoids using MutationObserver because older versions of Android and IE don't recognize it.
Instead, we have begun implementing CSS Animations. You can insert CSS into your .ts file to assign animation #keyframes to an element. We then add a JS listener to listen for "webkitAnimationStart". So now when the AJAX'd content loads, the listener is instantly triggered, and we can now manipulate the new DOM using JS.
It is an excellent trick, and is cross-browser compliant when fully implemented.

Related

Event for the load-end of dynamically added CSS files through innerHTML

I use jQuery (which seems to use a glorified form of innerHTML document writing), to add a piece of HTML to the DOM:
$newElem=$(HTML).appendTo($container);
The said HTML piece contains CSS links, which seem to load async. Images also load async.
I need some form of load event similar to window.load when async content is done fetching AND done parsing (i.e. CSS), because based on that I trigger a container resize/rearrange function, and sizing obviously depends on CSS, async images (and even async fonts but this last point is not an immediate concern for me). So how to get a proper load event for the DOM-added HTML?
I don't think there's a built-in "load" event that's fired when all the resources requested by the dynamically added elements are finished loading.
You can probably implement this though if you're sufficiently motivated.
There's waitForImages jQuery plugin, that goes through the given DOM subtree, looking for images (<img> tags as well as references to images in computed CSS styles). It creates an <img> element for each image referenced from CSS to track its load status (as discussed here).
It doesn't support:
content:url() images (should be easy to add)
Tracking resources referenced from dynamically loaded CSS. You can use a similar approach to find all the <link> elements in the given subtree, and use their load event (supported in all major browsers now) to wait until the CSS is loaded. After CSS finishes loading, run waitForImages to track the image loads.

Display HTML content once the layout phase is complete

I'd like to display content once everything is available and correctly positioned in the web page. Most preloader techniques only consider download time, not rendering time, therefore letting the user seeing the page being constructed. That's short, but clearly noticeable. I'm using WebKit inside a native app, but that shouldn't matter.
What is the correct approach to delay content display until the page is completely ready?
As mentioned above, you can initially style everything to be visibility:hidden
<div id="content" style="visibility:hidden">
<!-- all your content
(won't be displayed, as long as they are not explicitly
visibility:visible) -->
</div>
The javascript to un-hide everything is quite simple:
function unhide() { document.getElementById("content").style.visibility = ""; }
To call it when everything is loaded, use the load event:
document.addEventListener('load', unhide, false);
I think the jQuery ready() handler actually listens to the DOMContentLoaded event in modern browsers, so it'll run before your images are loaded. If you only need the layout fixed before displaying everything, you can use ready() or DOMContentLoaded, but be sure to explicitly specify the image dimensions in HTML.

JavaScript Events on Parent of SVG Object

I'm currently working on a script that allows a user to embed a JavaScript file inside an SVG document to enable panning and zooming of the content. I've tried pretty much every variation of SVG panning and zooming I could locate and have only found one that has consistent cross-browser support. Unfortunately, the script was written with the assumption that the SVG would be written out in the HTML rather than embedded through the object tag. Since I'm working with quite a few pre-rendered SVGs, it would be more efficient to just link to an external JavaScript file in each SVG. Everything has been going well with the conversion thus far, but I've run into a bit of a snag. The script relies on mouse events hitting a div that wraps the SVG object. It looks like the following:
<div id="svgwindow">
<div id="wrapper">
<object id="svg" data="test.svg" type="image/svg+xml"></object>
</div>
</div>
An example of the JavaScript:
parent.document.getElementById("svgwindow").addEventListener("mousewheel", Zoom, false);
This script successfully adds the event so long as the event occurs in an area of svgwindow that the svg object is not populating. As soon as the event occurs overtop of the object the event is not captured. I haven't been able to find any similar instances pf this to help troubleshoot the error, so any help would be great.
Since the <object> tag will capture all events and there's no way to stop it, all you can do is put another <div> absolutely positioned on top of the wrapper <div> that will receive the events.
Of course if you swap to an <image> tag rather than an <object> tag that won't capture events but there are restrictions on images e.g. all data must be in one file and no scripting allowed that may make it unsuitable for you. If it is suitable then that's easiest way to go though.

Firefox and Safari stylesheet loading time, firing JavaScript event when loaded

We have some JavaScript code that resizes <div/> elements (adjusts height/width/padding/margin etc.) based on the dimensions of a parent <div/> element, specifically the height and width of the parent we use in the calculation. The parent div height and width is defined in a external CSS file, and <link> is used to include the stylesheet, in the <head> section of the page. All stylesheets are included before javascripts. The JavaScript resize code is fired inside of a jQuery document ready event using the standard $(function() {}). All stylesheets and javascripts automatically have timestamps appended to them (Rails application) to ensure they are not cached (in development).
In Firefox 3.6 the resizing works every time. However in Safari 5, occasionally the resizing fails, because the parent height/width is incorrect, which appears to be because the stylesheet has not loaded before the JavaScript. Frustratingly, this happens every few times, and is different depending on the browser/machine load. I can put the resizing code inside a setTimeout() and delay it by 1 second or so and get it to work reliably, but this is not a releasable solution because it is too slow, and still varies by machine. Ideally there would be a way to guarantee the stylesheet is downloaded, then fire the JS resize code.
First of all, is this a bad design, to have JS resizing based on CSS loaded from an external stylesheet? I'm considering trying to place the height and width inline so it is rendered from the server, but this requires significant app code change and tighter coupling to the UI, and I'd like to avoid inline style if possible. Is there a webkit event by chance when stylesheets are loaded? I don't think there is. Any suggestions on a method other than a timeout to ensure all stylesheets are loaded before firing JavaScript? Anyone else experienced differences in stylesheet load order/timing between Webkit and other browsers and have a solution to share? I could use some fresh thinking on this problem.
Note: in general for images, we use the load ($(thing).load(fn(){})) event on images to ensure they are loaded before applying any JavaScript to them. That would be a good pattern to follow if such a thing existed. Thanks!
Co-worker (#johnreilly) found a couple solutions, one polls the document.readyState property when the browser is Safari looking for a value of complete.
Get the real width and height of an image with JavaScript? (in Safari/Chrome)
Another creates a cssLoaded custom event and uses :after pseudo-selector to avoid polling. http://stilbuero.de/demo/cssloaded/
So the first solution is acceptable. I'm putting it in the main javascript file and using $.trigger() to emit a custom event to our handlers that depend on Webkit having fully downloaded the stylesheets.

I need help with javascript

I have a javascipt code something like
<script type="text/javascript" src="http://ads..........." ></script>
this script shows a banner. i want to use onClick event with this script without disturbing the banner click. is that possible?
Yes if the banner is not wrapped in an iframe that is cross domain, but the question is...
onClick event on what? the banner? the page? another element?
use addEventListener/addEvent or a JS library to add the event. If this kills the banner be sure to take the banner's onclick property and add it as well to the banner.
Those scripts usually produce dynamic content via document.write. If you examine the resulting DOM (e.g., via Firebug in FireFox, or Dev Tools in Chrome, etc.), you can get an idea of what the resulting structure is. If there's a top-level image or link, you can hook it with a DOM2 handler (addEventListener is the standard form; IE uses attachEvent instead; Javascript libraries like Prototype or jQuery can help iron out the inconsistencies for you). That would let you see a click without disturbing its underlying action (provided you don't cancel the event, but you have to do that on purpose, so you should be okay.)
Process that click through the handler, e.g.
<!-- Banner image -->

Categories

Resources