I am developing a simple Firefox (v 26) extension which overlays the "BrowserToolbarPalette" and simply adds a Button to the main toolbar.
The "oncommand=" listener for the button is working when I use inline javascript such as:
<overlay id="xulschoolhello-browser-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="NodeVisButton"
tooltiptext="Visualize Server Nodes"
label="NodeVis"
oncommand="alert('Foobar');" />
</toolbarpalette>
</overlay>
...and the alert is showing up.
If I include my js file like this:
<overlay id="xulschoolhello-browser-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://nodevisualizer/content/nodevis.js" />
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="NodeVisButton"
tooltiptext="Visualize Server Nodes"
label="NodeVis"
oncommand="nodeVis.showNode()" />
</toolbarpalette>
</overlay>
...the javascript is not working.
Content of the javascript file:
var nodeVis = {
showNode: function {
alert('Argh!');
}
};
My chrome.manifest:
content nodevisualizer chrome/content/
overlay chrome://browser/content/browser.xul chrome://nodevisualizer/content/plugin.xul
..and my directory layout:
node_visualizer
- chrome
-- content
--- plugin.xul
--- nodevis.js
- chrome.manifest
- install.rdf
At some point I managed to get the javascript console to at least show an error that "nodeVis" is not defined, but not in the current layout/config.
Any help appriciated!
Darn it, there was a typo in the javascript with missing parenthesis behind "function {}".
var nodeVis = {
showNode: function (){
alert('Argh!');
}
};
. Anyways. Now we have a nice template to fiddle around.
Related
Following the Visualizing Your Grids https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids instructions, I've been attempting to get the toggling functionality to work.
First off, can someone explain what the following is actually suppose to do?
compass install singularitygs/grid-toggle
I am assuming create a folder and some files, but when I run the command, nothing happens. If I do the following..
compass install singularitygs/box-sizing
It creates directories and files as expected.
My project works fine with Singularity (this is just 1 SASS file, 1 html file)
#include background-grid works within the SCSS file, but that's the first way of doing it and I'm interested in the toggle version.
I have tried to manually include the grid.js AND grid.min.js file provided and referenced them in the head of my index.html file. I added the data-development-grid="show" to the body tag as suggested. I can't even get the grid to show by default, let alone getting it to work with the toggle.
Here is part of my gem file
gem 'toolkit', '~>1.0.0'
gem 'singularitygs', '~>1.0.7'
gem 'breakpoint', '~>2.0.2'
group :development do
gem 'guard'
gem 'guard-compass'
gem 'guard-livereload'
end
And my simple HTML file
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/screen.css" />
<script type="text/javascript" src="javascripts/grid.min.js"></script>
<script type="text/javascript" src="javascripts/grid.js"></script>
</head>
<body data-development-grid="show">
<h1>test</h1>
<div id="mydiv" class="no-mqs container">
<p>This is my div</p>
</div>
</body>
</html>
And my 1 SCSS file
#import 'compass';
#import 'compass/reset';
#import 'toolkit';
#import 'singularitygs';
#import 'breakpoint';
There are some grid variables, a container class, some other basic styles below all of the above imports.
Any help appreciated.
Thanks
The quick answer is to refer you to my question and answer on the same topic, about two questions ago. However, basically, there are three ways. The first you have found and you can place '#include background-grid' in the element that you wish to have a grid shown. I think you will find that you can't install grid-toggle, as directed, but I don't think you need to. The second method is the toggle. You have to place '#include grid-toggle' in your style.scss in either a * { ... } selector or an html{ ... } selector. You reference the script grid.js in the head of your web page. However, that script assumes you want the grid on your body div. You add data-development-grid="show" (or "hide") inside the body opening div.
You can put the grid on another element such as a wrap div (don't we all use wrap?), by adding data-development-grid="show" to the wrap div, but then you need to modify the grid.js file. Here is my javascript version as a guide (seems to work, but I'm no programmer!):
(function() {
window.onload = function() {
var body = document.body;
body.onkeypress = function(e) {
if (e.keyCode === 103 || e.charCode === 103) {
var wrap = document.getElementById('wrap');
var dev = wrap.getAttribute('data-development-grid');
if (dev === null || dev === 'hide') {
wrap.setAttribute('data-development-grid', 'show');
}
else {
wrap.setAttribute('data-development-grid', 'hide');
}
}
};
};
})();
BTW, your body or wrap (whichever you choose) must not have a background colour or image because the grid will be underneath and therefore invisible.
The third method is the overlay, which I particularly like because it sits over the background colour. for this, add #include grid-overlay('#wrap'); to the *{ ...} or html{ ... } element in your style.scss file. You will get a 4-line symbol in the bottom left and when you mouseover it, it causes the grid to appear - mouseoff = disappear.
I've assumed that you want the grid in a wrap div, but you can put it where you like.
I hope this helps.
For me it worked using the command: bundle exec compass install singularitygs/grid-toggle
My web page has no «meta» viewport tag absolutely.
I have created my own «meta» viewport tag dynamically:
var viewportMeta = document.createElement('meta');
viewportMeta.setAttribute('id', 'myMeta');
viewportMeta.setAttribute('name', 'viewport');
viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');
and appended it to the «head» (after some user actions):
document.head.appendChild(viewportMeta);
Then (after user clicks on some button) I need to remove "myMeta" «meta» tag from «head»:
var myMeta = document.getElementById('myMeta');
document.head.removeChild(myMeta);
And it removes, 100%! Checked with desktop browser and with Adobe Edge Inspect Weinre on iPad.
But the whole page does not go to it's previous state! Whole page stays the same, like it has «meta» viewport tag with all defined properties in "viewportMeta" object.
So, is there a way to remove «meta» viewport tag completely? Any ideas?
(This issue is on iPad's Safari and Chrome browsers. Tried not to remove «meta» tag but just changed it's «content» property — no success. Did not checked on Android devices and browsers.)
You should restore the original value of viewport meta tag
<html>
<head>
<title>test dynamic view port</title>
</head>
<body>
<button id="turnOn">on</button>
<button id="turnOff">off</button>
<script type="text/javascript">
function turnOnDeviceViewport() {
removeMetaIfExist();
var viewportMeta = document.createElement('meta');
viewportMeta.setAttribute('id', 'myMeta');
viewportMeta.setAttribute('name', 'viewport');
viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');
document.head.appendChild(viewportMeta);
alert("click");
}
function turnOffDeviceViewport() {
removeMetaIfExist();
var viewportMeta = document.createElement('meta');
viewportMeta.setAttribute('id', 'myMeta');
viewportMeta.setAttribute('name', 'viewport');
viewportMeta.setAttribute('content', 'width=980, user-scalable=yes');
document.head.appendChild(viewportMeta);
alert("click");
}
function removeMetaIfExist() {
var metaElement = document.getElementById("myMeta");
if (metaElement) document.head.removeChild(metaElement);
alert("removed");
}
document.getElementById("turnOn").addEventListener("click", turnOnDeviceViewport, false);
document.getElementById("turnOff").addEventListener("click", turnOffDeviceViewport, false);
</script>
</body>
You can find details about viewport meta default values on Apple's developer website:
Safari HTML Reference: Supported Meta Tags
EDIT: the default viewport value "width=980, user-scalable=yes" might not be the same for all devices and browsers so for a complete solution you will need to identify the browser you are running on and set the default value accordingly
Hi I followed the instructions to create an extension.
My issue is that I can inject text on the fly but not HTML. Firefox block the character "<"
Here is my code in my XUL file.
<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="jquery.js" />
<script>
var myExtension = {
init: function() {
// The event can be DOMContentLoaded, pageshow, pagehide, load or unload.
if(gBrowser) gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);
},
onPageLoad: function(aEvent) {
var doc = aEvent.originalTarget; // doc is document that triggered the event
var win = doc.defaultView; // win is the window for the doc
if (win != win.top) return; //only top window.
$("body",doc).html('WORK');
$("body",doc).html('<div>NOT WORKING</div>');
}
}
window.addEventListener("load", function() { myExtension.init(); }, false);
</script>
</overlay>
Thank you very much for your help
This is a XUL file, it has to use XML syntax. In particular, XML tags inside <script> elements will be interpreted as such - and you definitely don't want it. To prevent it you can wrap your script into a CDATA section:
<script>
<![CDATA[
doSomething("<foo>bar</foo>");
]]>
</script>
This makes sure that the tag contents are really interpreted as text.
How can i catch the "onblur" event of my htmlbox textarea?
I want to be able to get the htmlbox content when it's onblur..
Thank's In Advance.
Try this code, it loops waiting 1 second until htmlbox creates the iframe, then it adds a .blur handler to the iframe, I found out the iframe's id by using IE8's Developer Tools, by clicking on the arrow icon in the developer tools and clicking the box you can see how HTML looks after the page loads and javascript processed. if($("iframe").length) is true then then htmlbox has created the iframe and you can attach the .blur event handler.
<script type="text/javascript">
$(function(){
var check = function(){
if($("iframe").length){
$("#hb_html").blur(function(){
alert('Blur has occurred!');
});
} else {
setTimeout(check, 1000)
}
}
setTimeout(check, 1000)
});
</script>
This example demonstrates:
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bar").blur(function(){
$(this).text("I have been blurred.");
});
});
</script>
<textarea id='bar'>foo</textarea>
Make sure the file jquery-1.5.min.js is in the same folder IF you use the example above.
You can read up on the .blur event at http://api.jquery.com/blur/
It receives a function as an argument and executes it when it becomes blurred.
I'm working on my first GM script, to replace the Flash previews on http://www.freesound.org with HTML 5 audio tags, and to add a download link to search results. I have the latter working fine, but I can't get the audio tag to display in Firefox 3.5.9. Here's my script:
// ==UserScript==
// #name FreeSound HTML 5 Preview
// #namespace http://thewordnerd.info
// #description Replace Flash-based sound previews on freesound.org with audio tags and add quick download links
// #include http://freesound.org/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// ==/UserScript==
$(document).ready(function() {
$("embed").remove();
$(".samplelist").each(function(index) {
sampleNo = $(this).find("a:first").attr("href").split("?")[1].split("=")[1];
userName = $(this).find("a:eq(1)").html();
title = $(this).find("a:first").html().replace(/ /g, "_");
url = "/download/"+sampleNo+"/"+sampleNo+"_"+userName+"_"+title;
$(this).find("script").replaceWith("<audio src='"+url+"' controls='controls' type='audio/wave'/>");
//$(this).find("audio").removeAttr("tabindex");
$(this).append("<a href='"+url+"'>Download</a>");
});
});
I can see the element in Firebug and it seems just fine.
Thoughts on what I might be doing wrong here? Since the download link does download the requested file, since it's a wave and since I think I've set the correct type, I'm at a loss as to why this isn't displaying.
It may not be your script so much as the freesound.org site/server.
When I run a modified version of your script, the audio controls all appear for a split second before reverting to the error display, like so:
Firefox reports MEDIA_ERR_SRC_NOT_SUPPORTED for the files I checked.
Save this code to your machine and then run it with Firefox:
<html>
<head>
<title>Audio File test</title>
</head>
<body>
<audio id="aud1" controls="true" type="audio/ogg"
src="http://www.freesound.org/download/7521/7521_abinadimeza_Rainfall.ogg">xxx</audio>
<audio id="aud2" controls="true" type="audio/ogg"
src="http://developer.mozilla.org/#api/deki/files/2926/=AudioTest_(1).ogg">xxx</audio>
</body>
<script type="text/javascript">
window.addEventListener ("load", ErrorReport, false);
function ErrorReport (evt)
{
console.log (document.getElementById ("aud1").error);
console.log (document.getElementById ("aud2").error);
}
</script>
</html>
.
You'll see that the known good file, from Mozilla, works correctly but the one from freesound.org does not. This may be a bug/limitation in Firefox -- both files play fine on my local player.
Here is a link to the Firefox bug system, to search for or report bugs.