Develop Reference

How to add inline style to a video/gif embed code that is not part of the DOM?

I have various embed codes from different gif/video sites eg
<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Each site has different ways of embedding eg <iframe>, <a>, <div> etc for the opening tag. All I need to do is add inline style to the first tag in the embed code. I thought of registering the element etc but that will fail as it will create outer tags etc. How can I achieve what I want dynamically preferably in jquery but javascript is ok. Ie The embed code will be placed in a input field and onpaste I need to insert the style then display the element. Is using regex my only option?

The tough thing is that if your embed works through an <iframe>, the content is not there before it is in the DOM, and it is the content of the iframe that you need to manipulate (some other types of embeds inject directly into your DOM, those should be easier to add style to before attaching).
This may work:
var embedCode = '<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
var embed = $(embedCode);
embed.on('load', function() {
// The contents are loaded. add the styles however you choose
embed.contents().find('body').css({
width: '100%';
// etc...
});
});
// now add the iframe to your dom
$('#myEmbedContainer').append(embed);
In your question you mention using regex - I suspect you mean either to detect if it is an iframe embed, or to look into the contents of the loaded iframe. In case 1 (detect if your embed code has an iframe tag), it is probably ok. In case two, I would not try to use regex on a full document in an iframe. Jquery selectors can help you find various wrappers inside the iframe, and that's probably a better way to go. For example:
var styleRecipient = embed.contents().find('body');
if (!styleRecipient.length) {
styleRecipient = embed.contents().children('div').first();
// etc.
}
This is a complicated problem, and I would focus on making it work one embed source at a time. Good luck!

Zoomsounds: Load new file into div via data-source attribute

I'm using a javascript audio player named ZoomSounds. It creates divs of a circular play button and loads content into them like this:
<div id="ap3" class="audioplayer-tobe skin-minimal"
style="position:absolute; width:100px;"
data-type="normal" data-source="sounds/edge.mp3"></div>
What I'd like to do is have other files on the page and load them into the same div (ap3) through clicking their links. ZoomSounds doesn't seem to have any support, and it seems a waste of a nice little plugin. Is there a simple way of doing this? Thank you.

I think the answer depends on what this plugin is doing with the data attributes and when, but if you just want to replace the div#ap3's data attributes you can use jQuery.
So let's say you have another file referenced in an anchor tag like so:
<a class="replace1" href="sounds/replacement.mp3">The Replacement MP3</a>
You can grab that href and replace the div#ap3 data-source attribute with it like so:
(function($) {
$("a.replace1").click(function(e){
e.preventDefault();
var hrefReplacement = $(this).attr('href');
$("div#ap3").data("source",hrefReplacement);
});
})(jQuery);

Transferring text from iFRAME to a textarea using js or jquery

I'm currently working on a little html/js site and my current goal is to load a .txt file into a page (accomplished this with iFrame src), then transfer the text from the iFrame to a textArea.
The latter I cannot do for some reason. I have tried to get various scripts to help me but none of them seem to work.
Currently lets imagine i have only this in the html:
<iframe name=my_frame id=my_frame src=textfile.txt height=100% width=100% frameborder=0 scrolling=auto marginheight=5 marginwidth=5></iframe>
The java code i am using to validate whether I am getting the inner text of the iFrame is a simple alert:
<script>
alert($('my_frame').*[attribute]*);
</script>
The ''attribute'' part is a dummy in this case. I've used things like HTML, innerHTML, innerTEXT, text, value, body, instead - but none of them work....
Perhaps someone here could assist with a little script to accomplish moving plain text from iFRAME to textArea, or even suggest a better way of approaching this?
I would be extremely grateful for any and all assistance.
Cpt.Mgn.

I think you must change your code:
<script>
alert($('#my_frame').html());
</script>
# Is a selector for id.
html() return all the html inside the element.
I hope this helps :)
EDIT:
<iframe name=my_frame id=my_frame src=textfile.txt height=100% width=100% frameborder=0 scrolling=auto marginheight=5 marginwidth=5>Hello </iframe>
And alert said: Hello
Link to code: http://jsfiddle.net/rEM6H/

if your file is hosted and the textfile is public-ally accessible, then you can try this
$.get("http://yourdomain.com/a.txt", null, function(response){
$("#theTextArea").val(response); // where theTextArea is the ID of the textarea you want to put the data into.
});

Is there a way to make images inside display:none not get downloaded by the browser?

I want the browser (mobile webkit especially) to NOT download images that are inside display:none divs. Right now, they get downloaded and not rendered.
Is there a jquery plugin to do this?

you can use data-* attributes. that way, you can have jQuery load them on demand:
<img data-source="image_path">
//this one gets all images and loads them
$('img').each(function(){
//loads the source from data-source
this.src = this.getAttribute('data-source');
});
<img data-source="image_path" class="foo">
<img data-source="image_path" class="foo">
//this one gets all images that have class foo and loads them
$('img.foo').each(function(){
//loads the source from data-source
this.src = this.getAttribute('data-source');
});
ofcourse you need to wrap this in a function so that you can call which images on demand. like:
function loadImg(selector){
$(selector).each(function(){
this.src = this.getAttribute('data-source');
});
}
//load images with class foo:
loadImg('.foo');

I don't think so. To be sure, you would need your original HTML DOM to exclude the hidden images, which you could do with server-side programming based on user agent sniffing (although that is not recommended). Modifying the DOM after document.ready or document.load will mean that the browser has already had a chance to request assets from the server even if they might not be displayed.
It would be unusual but if you still want to use jQuery you could follow #Pointy's advice and make all images placeholders in your markup. Then replace the :visible placeholders with the images you want using an attribute as the data source. No plugin is needed, just use something like replaceWith() or attr() to swap out the placeholder node for the image you want downloaded or change the src attribute.
I would use a 1x1 transparent gif as the placeholder with the correct height and width attributes rather than no source <img> for a placeholder. That way the page flow will be determined correctly when the page renders so it won't jump around as your images lazily load.

Jquery - Replace Specific Line in HTML

I'm having an issue with iframes and IDs.
I currently have an Iframe with no ID attached to as its generated by another websites javascript. So I quickly wrote a Jquery script to give IDs to Iframes on load of page, and it worked successfully. Problem is however, it applies the ID to ALL the Iframes on the page instead of specifically the one I want.
This is what I have.
<script>
$(document).ready(function () {
$("iframe").attr({
id: "iframeid1"
});
});</script>
Is there a method with Jquery to 'search and replace' something specific on the page? For example
Search for:
<iframe allowtransparency="true" frameborder="0" scrolling="no" width="160" height="600"
Replace with:
<iframe id="iframeid1" allowtransparency="true" frameborder="0" scrolling="no" width="160" height="600"
Any help is appreciated! Thanks in advance!

If you know it is the nth iframe on the page:
$("iframe")[n].setAttribute('id', 'iframe1');
EDIT: You could also use attribute selectors:
$("iframe[allowtransparency=true][frameborder=no][etc=etc]").attr({id: 'iframe1'});

It depends on if there is a unique way of finding the iframe you want. For example, is it the only one with width = 160 and height = 600? Or is it always the Xth iframe on the page? Is it always located in the same spot in the page?
Here are some queries as examples for all 3 scenarios:
// if the width/height combination is unique...
var iframe = $('iframe[width=160][height=600]');
// if it is always, say, the 3rd iframe on the page
var iframe = $('iframe:eq(2)'); // 0-based index
// if it is always the only iframe in a div with an id of "iframeContainer"...
var iframe = $('#iframeContainer').find('iframe');
Then you can set the attribute like you said:
iframe.attr('id', 'iframeid1');

if the iframe is wrapped inside a div, with a ID, than you can do:
<script>
$(document).ready(function () {
$("#divID iframe").attr({
id: "iframeid1"
});
});</script>

If you know where your iframe is at you can get it by index position.
If you have 4 iframes on the page and you're looking for the third (with respect to the DOM), you can do this:
$("iframe").get(3).attr({
id: "iframeid1"
});

You can use selectors to find an iframe tag with specific attributes. But you need to be able to uniquely identify the specific iframe you want from attribute values, not HTML search.
As an example:
$('iframe[width="160"][height="600"]').attr("id", "iframeid1");
This would select iframe tags with width=160 and height=600. You can add more attributes if needed to uniquely select your particular iframe.
Perhaps the best option would be to use the DOM structure around the iframe to identify which one you want. You could use parent object identifiers, ordering of the tags, etc.. whatever helps uniquely identify the one you want.