I am making firefox addon and I cann't manages styles to show correctly. For example, links color are always what page defines:
main.js:
pageMod.PageMod({
contentStyleFile: self.data.url("style.css"),
contentScriptFile: [self.data.url("jquery.js"), self.data.url("script.js")]
style.css:
#div_id {background:green}
#div_id a.black {color:black}
script.js:
$('body').append("<div id='div_id'><a class='black' href='#'>link</a></div>");
The result is: background:green is working, but #div_id a.black {color:black} is not working.
Page define a color and addon css-file can't change it. The only way to do it is $('#div_id a.black').css({'color':'black'})
What is wrong with addons css files? Why they are working only partially?
I will use this:
var styles = "#div_id {background:green}\
#div_id a.black {color:black}";
$("head").append("<style>"+styles+"</style>");
It is ugly, but it works.
Related
I am using Twilio Video React application, for my video application.
Twilio video renders video in two views, desktop and mobile, based on the device.
Due to space constraints on my desktop application I would like to render the video similar to that of a mobile on desktop, Is this possible? Is there a variable that I could set to allow me to do this ? Basically, I would like Twilio video to think that I am running the app on the mobile.
I tried to set isMobile to true in utils (as shown below), this doesn't seem to make a difference to the UI.
export const isMobile = (() => {
if (
typeof navigator === "undefined" ||
typeof navigator.userAgent !== "string"
) {
return true;
}
return /Mobile/.test(navigator.userAgent);
})();
I would like to achieve the below:
Twilio developer evangelist here.
I've not worked on this application myself, so I'm not familiar with how it is styled. There is not a variable for setting the style on mobile though, it is mostly controlled by CSS media query break points.
What you will notice among the code is that the CSS is embedded within the JavaScript. You will also find lines like:
[theme.breakpoints.down('xs')]: {
// styles
}
That breakpoint defines how a number of the styles are supposed to work at the small screen size. So if you remove the breakpoint and use the styles inside the breakpoint as the default styles, then the application will lay out in the mobile version.
Once you've done that, you can then place the video parts of the application within a div with a width you define and place the rest of your application around it.
Let me know if that helps at all.
I'm trying to add global hotkey support to Spotify (and others). For this I have to execute a content script in the player app iframe, but no matter what pattern I try Firefox just won't execute my content script.
This is what I try to do:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: /^https?:\/\/play\.spotify\.com\/apps\/player\/.+/,
attachTo: ["frame"],
contentScriptFile: [data.url("content.js")]
});
Has anyone any idea what could be wrong? How can I make it match?
See:
https://bitbucket.org/panzi/play-control/src/f1dbd217661c0f09d3615dce7b8b1cab9f8fbf70/browser-plugin/firefox/playcontrol-spotify/lib/main.js?at=default
The same thing for Chrome works perfectly well:
https://bitbucket.org/panzi/play-control/src/f1dbd217661c0f09d3615dce7b8b1cab9f8fbf70/browser-plugin/chrome/playcontrol-spotify/?at=default
I'm a regex noob, but in the doc examples, they don't use ^ even when the string starts with 'http'.
Try getting progressively more stringent to see which part of the regex it doesn't like. Throw an onAttach: console.log("pageMod attached"), in there to make sure it isn't being attached and something else isn't causing the problem.
/.*play\.spotify\.com\/apps\/player.*/ If this works, then either it doesn't like the beginning or the end. Try:
/https?:\/\/play\.spotify\.com\/apps\/player.*/
/^https?:\/\/play\.spotify\.com\/apps\/player.*/
.*play\.spotify\.com\/apps\/player\/.*/
.*play\.spotify\.com\/apps\/player\/.+/
If all of the above work, then your string should work too.
URL matching works the way I've written it. The bug was something else.
I want to develop firefox add-on(extension) which shouldn't have UI . I want execute some tasks whenever the webpage loads,, is it possible to achieve this ?
If anyone has useful links plz reply to this post
NIn Firefox add-on sdk tool, you can use page-mod to achieve this:
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*.org", // the url matcher of the page you want to modify
contentScriptWhen: 'end', // when to load the tasks
contentScript: '' // the javascript tasks you want to perform on page
});
It does not need to create an UI.
You can find out more about it at the documentation page for firefox add-on sdk (https://addons.mozilla.org/en-US/developers/docs/sdk/latest/).
First result: https://www.google.com.au/search?q=firefox+extension+on+page+load
First two results: https://developer.mozilla.org/en-US/search?q=firefox+extension+on+page+load
The Loading message in JQuery Mobile 1.1.0 doesn't seem to be working. Here is the JSFiddle for the code.
When I use version 1.0b2, it works as expected. Is this a bug in 1.1.0?
It is not a bug. Latest Jquery supports more config options. You can define the laoding message theme etc.
Refer the documentation here
Sample code
$(document).bind("mobileinit", function(){
$.mobile.loadingMessageTheme = 'a';
$.mobile.loadingMessageTextVisible = true;
});
Save above mentioned code in a js file (e.g. config.js ) and import it before importing jquerymobile framwork.
Good luck.
I have a few multiselect boxes from the Jquery UI on a page that work perfectly well in Chrome & Safari but not in Firefox for some reason... when I load the Error Console in Firefox I see:
Error: $.widget is not a function
Source File: http://localhost:3000/javascripts/jquery.multiselect.js?1302660373
Line: 563
Any ideas why?
edit: the line itself is within the open function right where it says "// react to option changes after initialization"
// open the menu
open: function(e){
var self = this,
button = this.button,
menu = this.menu,
speed = this.speed,
o = this.options;
widget: function(){
return this.menu;
},
// react to option changes after initialization
_setOption: function( key, value ){
var menu = this.menu;
switch(key){
case 'header':
menu.find('div.ui-multiselect-header')[ value ? 'show' : 'hide' ]();
I am assuming you are using the jQuery Multiselect plugin… which depends on jQuery UI.
Sounds like you have not included enough of the jQuery UI library or just none of it. You need to include the core parts of jQuery UI (including Widget) if you build a custom download. Or just download the whole jQuery UI and include it instead.
For anyone else who is getting this but has the requirements; make sure you are including the Javascript files in the correct order. This error was being caused by my jquery-ui.js being included after the multiselect js file.
This answer is probably unrelated to the situation of the questioner, but I put it here for the sake of others Googling the question.
I got this error using Rails 3.2 and fixed it by deleting (renaming) the public/assets folder. It seems there are a lot of problems with the assets pipeline still. I don't know the details but have had other Javascript failures that are fixed this way.
Actually if you are getting this error then it's either
a) per #andyb answer - you haven't included the correct jQuery UI components
OR
b) your DOM is not loaded yet with the correct $.widget and therefore your function is attempting to call before $.widget has loaded. to fix the problem, ensure $.widget is called BEFORE your function