Develop Reference

Jquery - Change content styles iframe

I want to change styles css inside at a iframe, using:
$("#box_close").click(function(){
("#iframe").contents().find("#scrolling_box").removeClass("scrollingBox");
$("#iframe").contents().find("#scrolling_box").addClass("scrollingBoxCustom");
});
Not working ok because the attribute src is in different host that index file, so it gives a classic browser policy error when trying to access a resource that is not on the same host.
Is there some another way I can change styles from the html content of an iframe from a page hosted on another server?
Thanks,

Panel in Chrome Extension

I am working about Chrome Extension . I read a lot in Chrome developer but no result . My idea is load a html file to panel at right-bottom browser (or any position I liked) to show videos .I cannot use popup because it will be disappeared if i click anywhere.
Except popup,buttons on menu bar , how can i create a panel in chrome browser ?

You can inject the html in the tab where you want to show the html. See this answer how to inject html :
Inject HTML into a page from a content script
Use your own css as content script to position your element.
I assume you will be showing video in loaded html from external servers. But chrome extension do not allow you to reference external resources in your html. So you will need to download the video with response type blob and just set src of video element to this blob using window.URL.createObjectURL

Script Image Loading on HTTPS

I have a script tag on an HTML page that references an external script URL. The HTML page and the script run on HTTPS URLs. However, the script creates an IMG tag which references an image that is on an HTTP URL. I don't have control over the script itself (it is hosted by a third party). The problem is that the browser complains about loading HTTP content on an HTTPS page.
I tried the following:
Hiding the image using CSS display property - This still causes the image to load and the browser to complain
Changing the SRC attribute of the image using JavaScript/JQuery - this doesn't solve the problem because the script and the image load first and then my JavaScript runs
The image itself is not necessary, I can hide it or remove it. Also, if needed, I can host the image myself on HTTPS, but I still need to change the SRC attribute BEFORE the image loads.
Any suggested workarounds?

accessing iframe element not working in chrome

I am using iframe, this iframe will have a img tag so i have to set a data from a parent html page to iframe.
I am achieving this by following
My Html is,
<img id='im' src='data:image/jpeg;base64,/9j/4AAQSkZ.....'/>
My script is,
jQuery(".edit").click(function(){
jQuery("#editor").removeClass('disable');
frames = window.frames;
src = jQuery('#im').attr('src');
jQuery(frames[0].document.getElementById('canv')).attr("src",src);
});
The above code correctly pass image data and set the target element in iframe in firefox, but in chrome the target image does not change..What could be the reason for this?

Chrome is a little tricky when it comes to iframes. Add a doctype to the top of your iframe document and it should work.
If that does not work, it is likely an issue with Chrome security settings blocking mixed content. From what I understand, Chrome will not load I frames that are not https.

Javascript download image one time set src of two image tags

I'm trying to do some performance improvement on a web page that I'm building, and one of the things that I'm doing is, using javascript, downloading an image by creating an Image() object, and settings its src attribute to a given URL.
I'm then handling the onload event of that object, and in the handler, I'm using the objects src attribute to set the src attribute of two <img> elements on the page. What I was hoping that would do was only download the image one time, and then use that downloaded image as the src of the two image elements on the page, but that doesn't seem to be what's happening.
From what I can tell by viewing Network information using Firebug and Google Chrome dev tools, setting the src attribute of the two image elements on the page appears to result in actually downloading the image twice, once for each set.
Its the same image, and its rather large...so the download is time-consuming. Is there a way that I can force the image to only be downloaded once? Here's my code:
var image = new Image()
image.onload = function () {
$('#img1').attr('src', image.src);
$('#img2').attr('src', image.src);
image = null;
}
image.src = 'my/image/url';
UPDATE: This is what is causing me to believe that the image is being downloaded twice. Again...I could be wrong, maybe this is misleading, but if Chrome dev tools is reporting two different "resources" on the Network tab, each with the same path, the same file size, but different timings, wouldn't that indicate that its actually being downloaded twice? Maybe my problem is with the dev tools I'm using, I dunno...

src is nothing but the url pointing to the image on the server. If you set the src of the image it will refresh the image.
Browsers do cache images if the url do not change. Even if you see a image request in the console but it is still coming from the cache unless you have disabled caching.
Modern browsers support Local storage where you can cache any static resource you want. Take a look at this jQuery Image Cache plugin it might be helpful to you.
http://dumitruglavan.com/jquery-image-cache-plugin-cache-images-in-browsers-local-storage/

You can also try setting the background image to a class and add that class to elements you need.
When you are assigning the second src, the browser will check the server if the image is changed (might be using some file hash mechanism), if both the images in the server and in the cache is same, browser will load the image from the cache, still you will see a request to servers in Firebug console.