Embed animated SVG in HTML page, paused (without starting animation) - javascript

You can embed an SVG file into into an (X)HTML 5 document:
<object data="anim.svg" id="svganim"/>
or
<img src="anim.svg" alt="embedded SVG"/>
But if anim.svg is animated, the animation will start playing as soon as the page loads.
How can you embed an animated SVG file such that the animation starts out paused? The user can then play the animation by pressing a button (using unpauseAnimations() in Javascript)
An inelegant way
window.onload = function() {
var svg_anim = document.getElementById('svganim').contentDocument.rootElement;
svg_anim.pauseAnimations();
};
Disadvantage: this doesn't work if the embedded SVG is in a different security context from the parent document. Is there a better way?

One way to solve this is to make the animations not start automatically by changing the svg file (to add begin="indefinite" to any animations that start automatically). These animations can then be triggered by a call to beginElement() to the animation elements you want to trigger. If you have many such elements, it's probably easier to use pauseAnimations().
However, with <img> elements you can't start the animations since no events will ever be fed into the svg itself, so that's not going to work there. And scripting is disabled in this case too, so you can't trigger or prevent animations that way either.
With <object>, <embed> or <iframe> you can do scripting, e.g like your suggestion. You can add a script tag as one of the first children of the svg root element of the svg file and in that <script> element call pauseAnimations. But you can also do it from the main document as you suggested.

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.

Destroying embed objects using javascript

I have a video add that automatically shows up on the bottom left corner of the users screen when a page loads. The user can push a button to destroy the add, unfortunately it doesn't destroy it completely. The flash options are still available like play. Which can be problematic if there are functional elements on their page (like buttons) and the ad is blocking the user from using the elements.
Additional Information:
The video add is being using as part of the embed tag, and clients are using a javascript include to include the video add to their page.
I also have it sorta working using an iframe for the flash portion but it's behaviour is not consistent between each browser so I want to move away from putting it in an iframe.
I also don't know flash nor have the flash source.
You can use JQuery :
$('.ads').remove();
It should remove completly this part from the HTML code.
In Pure Javascript, you need to know the parent tag, you certainly don't know. (And the parent will NOT be removed)
<div id="ParentDiv">
<div id="YourAd" class="ads">This is another paragraph.</div>
</div>
<script>
var parent = document.getElementById("ParentDiv");
var child = document.getElementById("YourAd");
parent.removeChild(child);
</script>
Example

How can I replace an image with an SWF on click, and revert back to the image when another image is clicked and replaced with an SWF?

Let's say I have 3 images, each a placeholder for a Flash animation. When I click an image I want it to be replaced by its corresponding SWF. When I click another image I want the current SWF to be replaced by its placeholder image, and the newly clicked image to be replaced by its SWF.
I'm thinking of using the data attribute on the images to hold the path to the SWF…but this doesn't seem like the cleanest way to accomplish what I want.
IMAGE and SWF are quite different object. The first is a simple block element, the second is a more complex object/embed.
The simpliest way i see to achieve what you want is to load both image and swf, maybe in 2 different DIVs, and then swap them trough javascript, setting the "display" style as you wish.
Another way is create a DIV for each image and, always through javascript, dinamically rewrite the content on "click" event. Cleaner, but a bit more complex.
You can replace the html code using .replaceWith().
BUT each time you will replace html to Flash, your animation will be restarted.
It means :
Replace html->swf : Flash Player loads SWF
Replace swf->html : Flash Player unloads SWF
I'm not talking about the SWF downloading (you can use cache for this) but only the SWF application loading.
Depending on your needs, this solution can fit but IMO you should think about not using Flash.
By the way, working with display: none; or .hidden (e.g.) will have the same effect as replacing html code.

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.

How to preprocess HTML before it is parsed by the browser - block resorce loading

I am looking for a way to modify some text inside the HTML before it is being parsed by the browser.
More precisely, I would like to remove some tags from the HTML so the image resources would not be fetched by the browser, only when I am ready I could insert these tag back to have them loaded.
Is it possible to do that via some JS/Jquery or CSS, if so, how?
the motivation here is to be able to block the loading of some resources on a page and have them loaded only when needed according to some logic. this needs to be done by some kind of scripting added to the page
Because you're doing this in JavaScript the HTML is already being processed when it comes to launch your <script> tags.
You could move your <script> tags into the <head> from the <body>, or move it to the very beginning of the body. However the problem here is that you'll have to wait for your elements to actually be created in the DOM before you can work with them.
You could use something like setTimeout() or similar and continually look for them until you find them, but there's still going to be a slight delay between them being created and your script finding them, at which point they might already start to load.
The only surefire way is to process the markup server side long before it gets to the browser.
My answer here possibly could be of use, if you can place noscript tags in key places in your markup prior to parsing/evaluation:
Client-Side Dynamic Removal of <script> Tags in <head>
This method—for javascript-enabled agents—would delay the rendering of the entire page however, or at least the regions that you needed to affect.
basic generalised theory
Wrapper your body or specific region with a noscript tag identified with either a class or id. Place some javascript to execute directly after the close noscript that grabs the tag and reads the html contents as a string. At this point you could modify the html string however you like and then re-inject it back into the DOM replacing the noscript tag.
more specific implementation
If you know before-hand which resources you need to postpone—say all your images—you could wrap each image in-question with a noscript tag. Then trigger off some JavaScript that grabs all noscripts and rewrites the contained image html to use a placeholder or lower quality version of the image. At the same time you could set up event listeners or timeouts that inject the actual images when the time is right.
The Lazy Load Plugin for jQuery is maybe what you are looking for. It delays loading of images in long web pages.
You can use any jQuery event such as click or mouseover. You can also use your own custom events such as foobar. Default is to wait until user scrolls down and image appears on the window.
Beside all the It is also possible to delay loading of images. Following code waits for page to finish loading (not only HTML but also any visible images). Five seconds after page is finished images are loaded automatically.
$(function() {
$("img:below-the-fold").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazy").trigger("sporty");
}, 5000);
});
Check the delayed loading demo.

Categories

Resources