I made a few changes to the MEjs demo player, to enable playback of OGG in IE/Safari browsers, using the Cortado Java applet.
I have play/pause working, and although getPlayPosition() isn't getting the current position in milliseconds as described in the documentation, applet.currentTime and applet.duration work well for this purpose.
I thought it would be simple to hook these up to the current position indicators on the mejs player, but I'm running into a problem. setCurrentTime on the object is causing DOM Exception: InVALID_STATE_ERR (11) in IE, and a similar error happens in Safari. Apparently the object I'm trying to set no longer exists?
The code below will play and pause, and even give the seconds/total in the console (F12 tools MUST be enabled in IE.) Is there a good way to connect this to the play bar?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 MediaElement</title>
<script src="../build/jquery.js"></script>
<script src="../build/mediaelement-and-player.js"></script>
<link rel="stylesheet" href="../build/mediaelementplayer.min.css" />
</head>
<body>
<h1>MediaElementPlayer.js</h1>
<p>Audio player</p>
<h2>OGG Player</h2>
<audio id="player2" src="http://www.archive.org/download/memoirs_holmes_0709_librivox/holmesmemoirs02doyle.ogg" type="" controls="controls">
</audio>
<script>
MediaElementPlayer.prototype.buildplaypauseOrig =
MediaElementPlayer.prototype.buildplaypause;
MediaElementPlayer.prototype.buildplaypause = function(a,b,c,d) {
if (d.src.indexOf('.ogg') !=-1 /* && IE or safari */) {
if (jQuery(this.$node).find('applet').length==0) {
jQuery(this.$node).append('<applet code="com.fluendo.player.Cortado.class" codebase="http://theora.org/" archive="cortado.jar" width="100" height="100">'+
'<param name="url" value="'+d.src+'"/><param name="seekable" value="true"/><param name="autoPlay", value="false"/></applet>');
}
var el = this.$node; //mejs audio element
var initonload = function() {
if (el.find('applet')[0].isActive) {
var applet = el.find('applet')[0];
// This is where it fails: mejs.players[0].setCurrentTime or d.setCurrentTime cause dom exception
console.log(applet.code);
console.log(applet.currentTime);
/*mejs.players[0]*/ //d.setCurrentTime(applet.currentTime);
console.log(applet.duration);
/*mejs.players[0]*/ //d.media.duration = applet.duration;
} else {
window.setTimeout(initonload,100);
}
}
d.addEventListener("play",function() {
var audio = el.attr('src');
window.setInterval(function() {
//try {
var applet = el.find('applet')[0];
console.log(applet.currentTime);
// This is where it fails: mejs.players[0].setCurrentTime or d.setCurrentTime cause dom exception
//mejs.players[0].setCurrentTime(applet.currentTime);
console.log(applet.duration);
/*mejs.players[0]*/ //d.media.duration = applet.duration;
//}catch(e) {console.log(e)}
//console.log(applet.getPlayPosition()+"ms");
},1000);
//jQuery(this).find('applet')[0].setParam('url',audio);
el.find('applet')[0].doPlay();
});
d.addEventListener("pause",function() {
var applet = el.find('applet')[0];
applet.doPause();
});
d.addEventListener("load",function(e) {
alert('load');
});
}
this.buildplaypauseOrig(a,b,c,d);
}
mejs.HtmlMediaElementShim.determinePlaybackOrig =
mejs.HtmlMediaElementShim.determinePlayback
mejs.HtmlMediaElementShim.determinePlayback = function(htmlMediaElement, options, supportsMediaTag, isMediaTag, src) {
var res = this.determinePlaybackOrig(htmlMediaElement, options, supportsMediaTag, isMediaTag, src);
//if (mejs.MediaFeatures.isIE) {
res.method = 'native';
//}
return res;
}
$('audio,video').mediaelementplayer();
</script>
</body>
</html>
This is using MeJS 2.10.3.
[EDIT]
After inspecting the MediaElement.js code, it seems that mejs.players is not an array, but an object, and in order to access the first player, you would have to look into mejs.players['mep_0'], since mejs.players[0] would be undefined.
My guess would be that jQuery fails to create an interactive <applet> element, since, from my experience, jQuery (which heavily relies on document.createDocumentFragment) sometimes fails to attach/trigger events on dynamically created/cloned DOM nodes, especially in IE, which could be the cause for this DOM error that you're seeing, because your <applet> object probably failed to initialize.
To try and fix this problem, I'd suggest to use the native document.createElement and document.appendChild methods instead of the jQuery.append.
if (jQuery(this.$node).find('applet').length==0) {
var createElem = function(name, attributes) {
var el = document.createElement(name);
attributes = attributes || {};
for (var a in attributes) {
el.setAttribute(a, attributes[a]);
}
return el;
};
var applet = createElem('applet',{
code:'com.fluendo.player.Cortado.class',
codebase: 'http://theora.org/',
archive: 'cortado.jar',
width: 100,
height: 100
});
applet.appendChild(createElem('param', {name:'url', value:d.src}));
applet.appendChild(createElem('param', {name:'seekable', value: 'true'}));
applet.appendChild(createElem('param', {name:'autoPlay', value: 'false'}));
this.$node.get(0).appendChild(applet);
}
Related
I am creating a Safari extension that clears Outlook.com advertisements and other content. I have made two versions of the extension, one with CSS and one Javascript. However, there is a delay when removing the elements with Javascript. I was wondering is it possible to call a CSS file using Javascript so that it removes the elements quicker?
If anyone has made a Safari extension or is familiar with it, how can I make check box that will call a specific CSS file? For example, there is a CSS file called 'ads' and I have checkbox with the 'Key' ads and I want to be able to find a way so that I can call it when the checkbox has been checked.
I hope you understand what I am trying to say :) It is a bit difficult to write what I want to say.
Thanks.
This is the proxy.html file that calls the functions.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
var data = new Object();
safari.application.addEventListener( "message", function( e ) {
if( e.name === "getData" ) {
data.advertisements = safari.extension.settings.getItem( "advertisements" );
};
}, false );
</script>
</head>
<body>
</body>
</html>
Here is the script.js file.
$(function() {
safari.self.addEventListener( "message", function( e ) {
if( e.name === "setData" ) {
handleEvents( e.message );
}
}, false );
safari.self.tab.dispatchMessage( "getData" );
function handleEvents( e ){
if (e.advertisements !='show') {
var customStyles = document.createElement('style');
customStyles.appendChild(document.createTextNode('#RightRailContainer {display: none !important;} .WithRightRail {right: 0 !important;}'));
document.documentElement.insertBefore(customStyles);
}
Yes you can. In JavaScript you can use a function to create DOM elements:
document.createElement("link"); // Create CSS element.
Then you can use .setAttribute(attr, value) to give attributes to the created element. You can do something like this:
var file=document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("type", "text/css");
file.setAttribute("href", "main.css");
Note: You can also set the property directly doing file.[attr] = [value]. For example, this does the same thing as the above code:
var file=document.createElement("link");
file.rel = "stylesheet";
file.type = "text/css";
file.href = "main.css";
I'm trying to open multiple links at once in Google Chrome in new tabs but it fails.
Problems:
Blocked by popup
Open in new windows instead of tab after the user allowed the popup
With this, I can open multiple links at once in Firefox:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" >');</script>
<link rel="stylesheet" href="style.css">
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="openLinks()">Open</button>
</body>
</html>
Also, I came across someone who found a workaround.
I tried using setInterval to try to open the links individually but it didn't work.
You can do this in vanilla JavaScript:
<html>
<head>
<script type="text/javascript">
function open_win() {
window.open("http://www.java2s.com/")
window.open("http://www.java2s.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
</html>
Here is a more Chrome-specific implementation (if popup blockers are giving you difficulty):
var linkArray = []; // your links
for (var i = 0; i < linkArray.length; i++) {
// will open each link in the current window
chrome.tabs.create({
url: linkArray[i]
});
}
Here is some documentation: https://developer.chrome.com/extensions/tabs
The reason that the browser extension can do it is because Chrome extensions have access to a special Chrome API, which lets you use:
chrome.windows.create({tabid: n})
where createData has a tabid value greater than any current tab (and you can find the greatest current tabid using chrome.windows.getAll()).
However, in terms of doing it on your page (or anywhere that's not a Chrome extension), that's not possible, since whether or not a new window opens in a new tab is determined entirely by the user's settings.
The best way to open multiple tabs or windows is by using setTimeout() of 500ms.
window.open("https://facebook.com", "one", windowFeatures);
setTimeout(function(){
window.open("https://facebook.com", "two", windowFeatures);
}, 500);
User will have to allow popups but I ended up doing this:
function openMultipleTabs(urlsArray){
urlsArray.forEach(function(url){
let link = document.createElement('a');
link.href = url;
link.target = '_blank';
link.click();
});
}
Worth mentioning that you need to actually have popups allowed in your browser settings. Don't rely on browser alert asking you if you want to allow the popup to open.
The following code will open multiple popUp on the button click.
<html>
<head>
<title></title>
<script type="text/javascript">
function open_win() {
window.open("url","windowName","windowFeatures")
window.open("url","DifferentWindowName","windowFeatures")// different name for each popup
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
you need to make sure that each window name is different, otherwise the last popup will overwrite it's previous popup. As a result you will end up with a single popup.
I have a simple solution playing with setTimeout, check below
function openMultipleTabs(urlsArray: string[]) {
urlsArray.forEach((url: string, key: number) => {
if (key === 0) {
window.open(url, `_blank_first_${key.toString()}`);
} else {
setTimeout(function () {
console.log("resolved", key);
window.open(url, `_blank_${key.toString()}`);
}, 1500 * key);
}
});
}
Looks like extension uses below code to open those tabs.
function openTab(urls, delay, window_id, tab_position, close_time) {
var obj = {
windowId: window_id,
url: urls.shift().url,
selected: false
}
if(tab_position != null) {
obj.index = tab_position
tab_position++;
}
chrome.tabs.create(obj, function(tab) {
if(close_time > 0) {
window.setTimeout(function() {
chrome.tabs.remove(tab.id);
}, close_time*1000);
}
});
if(urls.length > 0) {
window.setTimeout(function() {openTab(urls, delay, window_id, tab_position, close_time)}, delay*1000);
}
}
If you want to take a look at the code of the extension for reference you will find the extensions in (for Windows) C:\Documents and Settings\*UserName*\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions
Since modern browsers (and even old ones with blockers), will absolutely not allow this (one user action, one new tab). My solution was:
openInfoLinks = () => {
const urlsArray = [
`https://...`,
`https://...`,
`https://...`,
]
window.open(
urlsArray[this.linkCounter],
`_blank_${someIdentifier}_${this.linkCounter}`
);
this.linkCounter++;
setTimeout(() => {
this.linkCounter = 0;
}, 500);
}
The user can open the links in quick succession with ctrl+click-ing the button N times.
Okay i have searched al over for a decent example on how to get the HTML 5 IMA SDK from Google working.
I have pasted my code below, all that happens is the HTML 5 video shows up that's it no errors nothing. I don't think the Javascript is even running and I know its because I messed something up. Please help. I just want to display ads into an HTML 5 vid
I have substituted my VAST tag for Googles example tag and used a generic video I found on the web for the src video. Anyone have a suggestion on why this doesnt work.
<video id="videohtml5" width="720" height="405" controls="controls">
<source src="http://www.cncpts.me/complex/html5-IMA/NewBalance_NYCExperience_FINAL.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var adsManager;
var adsLoader;
var clickTrackingOverlay = document.getElementById('clickTrackingOverlay');
var videoElement = document.getElementById('videohtml5');
var adsLoader = new google.ima.AdsLoader();
// Add event listeners
adsLoader.addEventListener(
google.ima.AdsLoadedEvent.Type.ADS_LOADED,
onAdsLoaded,
false);
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
onAdError,
false);
// Create request object
var adsRequest = {
adTagUrl: "hhttp://pubads.g.doubleclick.net/gampad/ads?sz=400x300&iu=%2F6062%2Fiab_vast_samples&ciu_szs=300x250%2C728x90&impl=s&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1&url=[referrer_url]&correlator=[timestamp]&cust_params=iab_vast_samples%3Dlinear",
adType: "video"
};
// Make request
adsLoader.requestAds(adsRequest);
function onAdsLoaded(adsLoadedEvent) {
// Get the ads manager
adsManager = adsLoadedEvent.getAdsManager();
adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
// Listen and respond to events which require you to pause/resume content
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
onPauseRequested);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
onResumeRequested);
// Set a visual element on which clicks should be tracked for video ads
adsManager.setClickTrackingElement(clickTrackingOverlay);
try {
// Call play to start showing the ad.
adsManager.play(videoElement);
} catch (adError) {
// An error may be thrown if there was a problem with the VAST response.
}
}
function onAdError(adErrorEvent) {
// Handle the error logging.
console.log(adErrorEvent.getError());
}
function onPauseRequested() {
videoElement.pause();
// Setup UI for showing ads (e.g. display ad timer countdown,
// disable seeking, etc.)
// setupUIForAd();
}
function onResumeRequested() {
// Setup UI back for showing content.
// setupUIForContent();
videoElement.play();
}
</script>
figured it out next task is to learn how to run this on an embed object inside an iframe
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/uds?file=ima&v=1&nodependencyload=true"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#videohtml5").click(function(){
var adsManager;
var clickTrackingOverlay = document.getElementById('clickTrackingOverlay');
var videoElement = document.getElementById('videohtml5');
var adsLoader = new google.ima.AdsLoader();
// Add event listeners
adsLoader.addEventListener(
google.ima.AdsLoadedEvent.Type.ADS_LOADED,
onAdsLoaded,
false);
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
onAdError,
false);
// Create request object
var adsRequest = {
adTagUrl: "http://pubads.g.doubleclick.net/gampad/ads?sz=400x300&iu=%2F6062%2Fiab_vast_samples&ciu_szs=300x250%2C728x90&impl=s&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1&url=[referrer_url]&correlator=[timestamp]&cust_params=iab_vast_samples%3Dlinear",
adType: "video"
};
// Make request
adsLoader.requestAds(adsRequest);
function onAdsLoaded(adsLoadedEvent) {
// Get the ads manager
adsManager = adsLoadedEvent.getAdsManager();
adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
// Listen and respond to events which require you to pause/resume content
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
onPauseRequested);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
onResumeRequested);
// Set a visual element on which clicks should be tracked for video ads
adsManager.setClickTrackingElement(clickTrackingOverlay);
try {
// Call play to start showing the ad.
adsManager.play(videoElement);
} catch (adError) {
// An error may be thrown if there was a problem with the VAST response.
}
}
function onAdError(adErrorEvent) {
// Handle the error logging.
console.log(adErrorEvent.getError());
}
function onPauseRequested() {
videoElement.pause();
// Setup UI for showing ads (e.g. display ad timer countdown,
// disable seeking, etc.)
// setupUIForAd();
}
function onResumeRequested() {
// Setup UI back for showing content.
// setupUIForContent();
videoElement.play();
}
});
});
</script>
<video id="videohtml5" width="720" height="405" controls="controls" onclick="">
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
I've developed a webpage showing some statistics.
These statistics are refreshed periodically by AJAX requests using mootools 1.4.5.
Here ist the basic code:
<script type="text/javascript">
var statisticRequest = new Request.HTML({
url: theURL,
noCache: true,
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
$(responseTree[0]).replaces($('statisticContainer'))
}
})
function getCurrentStatistics() {
statisticRequest.get()
}
window.addEvent('domready', function(){
getCurrentStatistics.periodical(2000)
});
</script>
On FF all works fine but the IE9 continuously allocates memory until the machine is nearly freezed.
It looks like the garbage collector didn't remove the old DOM elements.
Using sIEve, I can see the increasing number of DOM elememts and the resulting memory usage.
What can I do to force the IE to remove the unused elements?
Edit:
Using destroy() as shown below will slow down the memory consumption but will not stop it completely. Removing Request.HTML had no further effect.
<script type="text/javascript">
var statisticRequest = new Request({
url: theURL,
noCache: true,
onSuccess: function(responseText, responseXML) {
var newStatistic = Elements.from(responseText)
var oldStatistic = $('statisticContainer')
newStatistic.replaces(oldStatistic)
oldStatistic.destroy()
}
})
function getCurrentStatistics() {
statisticRequest.get()
}
window.addEvent('domready', function(){
getCurrentStatistics.periodical(2000)
});
</script>
yes you can. look at the code for this:
https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js#L743-747
it will just replace it in the dom. it won't really do much in terms of GC - the old element still 'exists' - in case you want to re-attach it.
http://jsfiddle.net/rE3JH/
var foo = document.id('foo');
new Element('div').replaces(foo);
console.log(foo); // still an element, though not in the dom
call foo.destroy(); to properly GC - see https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js#L802-807
alternatively, update the parent of staticContainer - applying a change to innerHTML direct. also, keep in mind .empty() will dispose child nodes and not destroy them - for periodical stuff like yours, you need to be thorough as it can avalanche over time.
I've been playing about with this for a while. I think you're better to use something like mootools. It's well tested and is pretty small. It also gives you lots of extra features that are all cross browser compatible and don't need extensve testing.
I've run the following code for over two hours with no memory leaks. Hope it helps either the questioner or someone else searching stack overflow: First the index.html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
img.slide{
border:1px solid black;
}
</style>
<script type="text/javascript" src="mootools/mootoolsCore.js">
</script>
<script type="text/javascript" src="mootools/mootoolsMore.js">
</script>
<script type="text/javascript">
function data(){
this.who="alan";
this.pageHolder=1;
this.lastPage = 4;
this.count = 0;
}
var newData = new data();
function changePage(newData,dirn){
newData.dirn = dirn;
saveData(newData);
}
function saveData(newData) {
//alert("reached save data");
var dataJSON = JSON.encode (newData);
var request = new Request.JSON({
method: 'post',
url: 'forwardDataJson.php',
data: {
json: dataJSON
},
onComplete: function(jsonObj) {
newData.pageHolder = jsonObj.pageHolder;
newData.count = jsonObj.count;
$("picHolder").set('html','<img class="slide" src ="OpeningSlide/Slide'+jsonObj.pageHolder+'.jpg"/>');
$("alertBox").set('html',jsonObj.alertGiven);
$("countme").set('html',jsonObj.count);
}
}).send();
};
function getCurrentStatistics() {
saveData(newData);
}
window.addEvent('domready', function(){
getCurrentStatistics.periodical(2000)
});
</script>
</head>
<body>
<div id="alertBox"></div>
<button type="button" onmousedown="changePage(newData,'backward')"/>backward</button>
<button type="button" onmousedown="changePage(newData,'forward')">forward</button>
<div id="picHolder"><img class="slide" src ="OpeningSlide/Slide1.jpg"/></div>
<div id="countme">0</div>
</body>
</html>
This looks for a series of images (Slide1.jpg, Slid2.jpg etc) and then displays them on the page. It checks every two seconds for a new bit of info and gets a counter number. Clicking forward or back makes the slides run through every 2 seconds. Not very exciting but it demonstrates the princilple of using AJAX and a server poll with Mootools.
You also need a server side script. Which in this case is:
<?php
if(get_magic_quotes_gpc()){
$test = stripslashes($_POST['json']);
}else{
$test = $_POST['json'];
}
$obj = json_decode($test);
$direction = $obj->{'dirn'};
$counter = $obj->{'count'};
++$counter;
$obj->{'count'} = $counter;
switch ($direction) {
case "forward":
if($obj->{'pageHolder'} < $obj->{'lastPage'}){
++$obj->{'pageHolder'} ;
}
break;
case "backward":
if($obj->{'pageHolder'} >1){
--$obj->{'pageHolder'} ;
}
break;
}
$reply = json_encode($obj);
echo $reply;
?>
You'll notice that I've used JSON for passing an object to and from the server. This is just for ease of coding. If you've never used it before it's the way to go (in my opinion at least) since it's straightforward to use once you get your head around it.
This example should work as is. You simply need a directory called OpeningSlide which should contain your jpg slides/images and of course the mootools libs.
Hope this helps
Incidently if you're wondering about the first few lines of the php code it's there to sort out issues with JSON and magic quotes. It adjusts for magic quotes being on or off at the server. You can remove it if you know your server setting.
I'm trying to develop a firefox extension which draws a toolbar at the base of every webpage.
Until now i managed to make jQuery work and i proved it by running
$("body",mr.env).css("background","black");
in the mr.on=function().
This code just makes the background color of the webpage black whenever i click the menu item associated with the addon.
But, if i try to run
$('body',mr.env).append( ' <img src="img/check.png" /> ' );
it simply fails. It doesn't show any error in Error Console and the image isn't displayed.
Why is that?
This is my overlay XUL :
<script src="window.js"/>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<!-- Firefox Tools menu -->
<menupopup id="menu_ToolsPopup">
<menuitem id="menu_crypt_demo" class="" image=""
label="Use DnsResolver?" insertbefore="javascriptConsole" accesskey="o"
oncommand="DnsResolver.onMenuItemCommand(event);">
</menuitem>
</menupopup>
This is the JavaScript file (window.js):
var DnsResolver = {
onLoad: function() {
// initialization code
this.initialized = true;
},
onMenuItemCommand: function() {
testextension.on();
window.open("chrome://dnsresolver/content/window.xul", "", "chrome");
}
};
window.addEventListener("load", function(e) { DnsResolver.onLoad(e); }, false);
if(!testextension){ var testextension={};}
(function(){
var mr=testextension;
mr.on=function(){
mr.loadLibraries(mr);
var jQuery = mr.jQuery;
var $ = function(selector,context){ return new jQuery.fn.init(selector,context||window._content.document); };
$.fn = $.prototype = jQuery.fn;
mr.env=window._content.document;
/*$("body",mr.env).css("background","black");*/
$('body',mr.env).append('<img src="img/check.png" />');
$(mr.env).ready(function(){
// hide and make visible the show
$("span.close a",mr.env).click(function() {
$("#tbar"),mr.env.slideToggle("fast");
$("#tbarshow",mr.env).fadeIn("slow");
});
// show tbar and hide the show bar
$("span.show a",mr.env).click(function() {
$("#tbar",mr.env).slideToggle("fast");
$("#tbarshow",mr.env).fadeOut();
});
});
/*$("body",mr.env).css("background","black");*/
}
// Loading the Jquery from the mozilla subscript method
mr.loadLibraries = function(context){
var loader = Components.classes["#mozilla.org/moz/jssubscript-loader;1"]
.getService(Components.interfaces.mozIJSSubScriptLoader);
loader.loadSubScript("chrome://dnsresolver/content/jquery-1.4.4.min.js",context);
var jQuery = window.jQuery.noConflict(true);
if( typeof(jQuery.fn._init) == 'undefined') { jQuery.fn._init = jQuery.fn.init; }
mr.jQuery = jQuery;
}
})();
Starting with Firefox 3, chrome resources can no longer be referenced from within <img>, <script>, or other elements contained in, or added to, content that was loaded from an untrusted source. This restriction applies to both elements defined by the untrusted source and to elements added by trusted extensions. If such references need to be explicitly allowed, set the contentaccessible flag to yes to obtain the behaviour found in older versions of Firefox.
Use the HTML tab in FireFox to know actually if the img element was added. It probably was added and the problem is with your URL.
I remember when building my FireFox extensions, that files are located through a special protocol (chrome:// I think), where you put the name of the extension and can browse through it.