I create a new HTML5 Audio() object in Javascript code in my page. I want to place this audio object inside a table cell.
typeof() tells me that Audio() gives me an object, and so .append() on the table cell jquery object does not work.
I'd like to place the object into the page and show its controls so the user can interact with it - is that possible without actually writing the
<audio src...></audio>
HTML ?
The way you do it in jQuery, you use html syntax:
td.append("<audio>");
The angle brackets tell jQuery to create a new element. I'm not sure what method jQuery uses behind the scenes (whether innerHTML or doc.createElement()), but the non-jQuery approach would be:
var audioElement = td.appendChild(document.createElement("audio"));
To use the new Audio() syntax, the non-jQuery code is similar:
var audioElement = td.appendChild(new Audio);
Edit: I just tested, and jQuery seems to have no problem with this in Chrome:
td.append(new Audio());
Here's a jQuery demo: http://jsfiddle.net/gilly3/WRqyM/1
Update: IE9 doesn't seem to work. :-( IE9 just doesn't show up unless the audio has a src. I've updated the jsfiddle.
Related
I have looked something different from .appendChild() and .innerHTML but to work with Image() JavaScript objects.
I have 10 variables, img[1,2,3,4...10], created with JavaScript (new Image()) to pre-load and it's OK, now I want to insert it into my div only one at time.
innerHTML returns something like HTMLImageObject and appendChild() won't work like I want.
My solution so far is:
document.getElementById("teste").removeChild(document.getElementById("teste").firstChild);
document.getElementById("teste").appendChild(img1);
Someone have any better ideas?
If you don't want appendChild use replaceChild. For example:
div.replaceChild(imgs[i], div.firstChild);
Demo: http://jsfiddle.net/8bKy8/
your way is pretty solid but maybe like this is easier to read.. also lastChild has a marginal performance advantage
var ele = document.getElementById('teste');
while(ele.lastChild) {
ele.removeChild(ele.lastChild)
}
ele.appendChild(img1);
http://jsperf.com/innerhtml-vs-removechild/15
you could also keep a reference to the element somewhere
var ele = document.getElementById('teste'), img = ele.lastChild;
ele.removeChild(img);
ele.append(img1);
if you have jQuery available you can use
$('#teste').clear().append(img1);
depending on the browser you are using you potentially also have access to the HTML5 Selector API as well even without jquery that may be an alternative to the document.element method
document.querySelector('#tests').first();
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Locating_DOM_elements_using_selectors
I am creating an object element dynamically in jQuery, to render some content. It works in all browsers except IE8.
The code:
j$(document).ready(function(){
j$('.objContainer').html(j$('<object>').attr(
{'data':'http://www.stackoverflow.com',
'type':'text/html'}));
});
The HTML structure created after the execution(in IE8):
<object type="text/html"></object>
In other browsers[IE9, Firefox, Chrome]:
<object data="http://www.stackoverflow.com" type="text/html"></object>
Any solutions?
Works for me: using the IE8 developer tools, I can see the data attribute. Here's a screenshot.
(I know I shouldn't have to say it, but: you need to make sure that you're allowing scripts to run.)
as you see here, data (dataset) is not supported by IE.
What you can do is rename data to data-foo and then $(..).data("foo") will work
even in IE because of a special handling by jquery itself.
This is a way to bypass dataset limitation for IE.
It should work fine, Though i recommend you use $.data() method
http://api.jquery.com/jQuery.data/
It is much safer, and jQuery ensures that the data is removed when DOM elements are removed via jQuery methods.
Example:
<object id='myObj' data-url="http://www.stackoverflow.com" type="text/html"></object>
And you can read the value like:
var url = $('#myObj').data('url');// Read the value
$('#myObj').data('url', 'some-other-value');// Set a new value
I’m trying to add Vimeo embeds with options (colors, etc). However, it seems that Vimeo doesn’t recognize the options if the iframe is created using jQuery or DOM:
var fail = $('<iframe>', {
src: 'http://player.vimeo.com/video/36825140?title=0&byline=0&portrait=0&color=a4a9ab'
});
But, if I use innerHTML, it works (it also works using plain HTML).
var ok = $('<div>').html('<iframe src="http://player.vimeo.com/video/36825140?title=0&byline=0&portrait=0&color=a4a9ab"></iframe>');
Test fiddle: http://jsfiddle.net/nhkr5/
I would really like to use DOM tools for the task, so I can reference the iframe element and get rid of the extra wrapper.
Is there another "correct" way of doing this?
If you inspect the dynamically created iframe, you will discover that the & entities are not resolved, so you don't have & in the src, but literal &
http://jsfiddle.net/nhkr5/1/
This is a follow up to a question asked before at: How to access SVG elements with Javascript
However, the solution does not seem to work for me. I am testing on the latest version of Chrome. I have a map of the US as an SVG file, which I have downloaded on my machine and made some changes to the xml code.
I have the svg embedded using the object tag and assigned an id of "USAsvg" and am proceeding with baby-steps first. For a button onclick event I am executing the following code without success. Here 'CA' is a state declared using the path tag within the svg file.
var a = document.getElementById('USAsvg');
var svgDoc = a.contentDocument;
var delta = svgDoc.getElementById('CA');
alert(delta.value);
this works in the latest chrome,
load the SVG into your DOM directly, then manipulate it as if it were a normal html node,
the html() function in jQuery does not work, use text() instead.
$('.your_div_for_svg').load('svg/file.svg', function(){
$('#some_textnode_w_id_within_svg').text('Hello word');
});
I am writing a plugin to an old IE-only WYSIWYG-editor which resides in an old CMS. I've created a plugin that opens an popup where the user can enter the url of an youtube clip.
The popup then creates the corrent <object..><param..> markup for the embed and uses Internet Explorers pasteHTML function;
var range = plugin.editorDocument.selection.createRange();
var embedHtml = OpenDialog(dialogUrl, null, 400, 200);
if (!embedHtml) {
return;
}
range.pasteHTML(embedHtml);
I know it's missing a bit of information about some of the variables but you get the picture. The problem is that the <param>-tags gets removed when i run the pasteHTML. I wonder if anyone have an idea of fixing this, and letting me keep my param-tags
I'd suggest putting an ID on the <object> element, getting hold of it after the pasteHTML call via document.getElementById and using document.createElement and the object element's appendChild method to create and add <param> elements.