Hey all, I'm using this code to change my sIFR (version 3) H1 and H2 tags dynamically (thanks to Mark Wubben for the code), but I need to change my H2 background color in the same function.. Can anyone help me get the code working? Apparently sIFR and changeCSS doesn't work for background colors..
function changeColor(hexValue) {
var css1 = '.sIFR-root { color: '+ hexValue +'; }';
var css2 = '.sIFR-root { color: #080808; background-color: '+hexValue+'; }';
for (var i = 0; i < sIFR.replacements['h1'].length; i++) {
sIFR.replacements['h1'][i].changeCSS(css1);
};
for (var i = 0; i < sIFR.replacements['h2'].length; i++) {
sIFR.replacements['h2'][i].changeCSS(css2);
};
};
sIFR only supports a background color for the entire Flash movie, and this can't be changed later.
Your best bet is to enable transparency for the replacements, and set the background color on the HTML element replaced by sIFR (the <h2>). You're advised however to use transparency only when strictly necessary, and please keep in mind that transparency is largely unsupported on Linux. It will fall back to the specified background-color instead.
Related
Quick question:
Is there a way to add class and/or ID of the elements in the path of TinyMCE status bar under content?
TinyMCE has no such capability built into its status bar. If you wanted to add that you could do so by modifying the code. I would note that with any type of longer ID or Class labels that status bar will get filled up quickly which is why it does not do so by default.
The Elements in the Statusbar have a bunch of classes from Tiny Editor, you can examine it in the browser (chrome or firefox) with f12.
From there, it is no problem to override the current styling with some code like
.mce-statusbar.mce-container {
position : relative;
height : 0;
margin-top : -20px;
opacity : 0.5;
background-color :#fff;
border : 1px solid #333;
}
Beside, you can manipulate the code, where content is written in the Statusbar. See Plugin Wordcount for example. They are using some code like this to update the statusbar and enter a class name:
if (statusbar) {
Delay.setEditorTimeout(editor, function () {
statusbar.insert({
type: 'label',
name: 'wordcount',
text: ['Words: {0}', getCount()],
classes: 'wordcount',
disabled: editor.settings.readonly
}, 0);
editor.on('setcontent beforeaddundo undo redo keyup', debouncedUpdate);
}, 0);
}
I'm trying to make a modal backdrop completely transparent (specifically for one modal) and I'm having a difficult time achieving this. From the docs it says I can apply a custom class with backdropClass. When I open my modal, I call:
backdropClass: 'transparent-backdrop'
But no matter what styling I put in this class (whether to achieve transparency or just change the backdrop color), the backdrop does not change. My CSS looks like this:
.transparent-backdrop {
opacity: 0;
}
I can modify the backdrop color using windowClass (and the 'in' class):
windowClass: 'my-window-class'
.my-window-class.in {
background-color: #000;
}
However, if I try to set the opacity in a similar way:
.my-window-class.in {
opacity: 0;
}
my backdrop is still present, but now my modal disappears. Can anyone tell me the correct way to modify the opacity of the backdrop?
This works for me:
.transparent-backdrop.in {
opacity: 0;
}
Here's a screenshot showing the transparent backdrop in Chrome
So I created a Widget that the user clicks on and it opens up a Panel, I have a couple of Questions about the panel.
How Do I style the Panels borders, background color, etc..? I'm including an HTML file in it's contentURL, can I add CSS to alter it? If so how do I select it via CSS?
I also want to add a Close Button and keep the panel open always unless they click the close button.
On second thought, for the Add-on i'm trying to program it might be better if I make a window, is a window pretty stylable so I can make it look cooler?
Thanks for any help.
I don't think you can style panel borders. The panel border styles depend on the operating system and you cannot touch them. You can only really influence the inner area of the panel, effectively you get an iframe inside the panel that you can play with. E.g. to change the background your panel can contain:
<style type="text/css">
html
{
background-color: red;
}
</style>
You cannot, the panel is not a real HTML object, but a XUL window with an iframe or HTML inside.
I believe since Firefox 30 you can access to this object, you can read:
Avoid panel to autoHide in Firefox extension
Of course it's a kind of hack, looks like Mozilla is not really "open" ^^
I was able to modify the border of the panel:
/*run this first*/
var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
noautohide: true,
noautofocus: false,
level: 'top',
style: 'padding:15px; margin:0; width:150px; height:200px; background-color:steelblue;border-radius:15px'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
win.document.querySelector('#mainPopupSet').appendChild(panel);
panel.addEventListener('dblclick', function () {
panel.parentNode.removeChild(panel)
}, false);
panel.openPopup(null, 'overlap', screen.availLeft, screen.availTop);
So if you know the panel of your id just do this:
var sss = Cc['#mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var css = '';
css += '#YourPanelIdHere { border-radius:15px; opacity:.5; border:1px solid red; }';
var cssEnc = encodeURIComponent(css);
var newURIParam = {
aURL: 'data:text/css,' + cssEnc,
aOriginCharset: null,
aBaseURI: null
}
var cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI);
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET);
//sss.unregisterSheet(cssUri, sss.USER_SHEET);
That will style your panel. You don't have to use panel id in the style sheet, just anything that target your panel will do.
I have 3 main problems with my sifr implementation . Has taken me 2 days of trying to fix without any tangible results.
cant get navigation lists to work in firefox. I have followed all suggested fixes for this, including setting the replace on a higher level element - still doesnt work! here is my current code:
sIFR.replace(louisiana, {
selector: 'ul.tabs3 li'
,css: [ '.sIFR-root { font-size: 20px;}', 'a { color: #cc3333; text-decoration: none; padding:0px 8px; margin: 0;}', 'a:link { color: #555555; }', 'a:hover { color: #cc3333; }' ]
,thickness: 50
,wmode: 'transparent'
});
it works in safari, but clicking on each navigational link is like an exercise in patience - extremely slow to load.
cant get content in jquery tabs to losd. only first tab works. I have read the proposed fixes about using something like the code below on the scrolling div - doesnt work for me.
position: absolute;
left: -10000px;
i have also come across a solution which says to use a call back function with my tab code. I have no idea how to do that. here is my tab code:
$(function() {
$("ul.tabs3").tabs("div.panes3 > div",
{ history: true,
current: 'current',
// event:'mouseover',
effect: 'fade'
});
});
</script>
I cant get the code to exclude certain elements to be replaced to work. at the top of my config file I have:
parseSelector.pseudoClasses = {
'not': function(nodes, selector) {
var result = [];
each: for(var i = 0, node; i < nodes.length; i++) {
node = nodes[i];
var ignore = parseSelector(selector, node.parentNode);
for(var j = 0; j < ignore.length; j++) {
if(ignore[j] == node) continue each;
}
result.push(node);
}
return result;
}
}
and the replace code is :
sIFR.replace(louisiana, {
selector: "h2, div:not(.filter) h2"
,css: '.sIFR-root { font-size: 30px; color: #444444; }'
,thickness: 70
,forceSingleLine: true
,wmode: 'transparent'
});
I really need help with this - have been going for 2 days and totally clueless at this point.
sIFR shouldn't cause any slowdowns if you click on a link inside a sIFR movie, not sure what's up there. The selector looks good, but you might want to try without the transparency.
Wouldn't immediately know how to fix the tab thing either. sIFR is, by nature, hard to make work with tab interfaces. It's not really designed for menus either.
When you use the selector h2, div:not(.filter) h2 you're replacing all <h2>s and those not in div.filter. Try removing the h2, bit and see if that helps.
I spent a lot of time trying to configure a styleswitcher script that replace my html background and css from one color to another, I got some texts using SIFR3, mainly h1, h2 tahs and h2 a: links...
My only problem is that when I'm switching, the flash text doesnt take the color change into consideration, I've tried to play with rollBack but I'm out of luck.
I found an interessant solution here :
function changeColor(hexValue) {
var css = '.sIFR-root { color: ' + hexValue + '; }';
for (var i = 0; i < sIFR.replacements['h1'].length; i++) {
sIFR.replacements['h1'][i].changeCSS(css);
}
for (var i = 0; i < sIFR.replacements['h2'].length; i++) {
sIFR.replacements['h2'][i].changeCSS(css);
}
}
// after switching stylesheet:
changeColor('#FF9900');
It works for h1, h2 but not for my h2 a: links...
Can you tell me how to adjust this?? It would be really really nice.
Right now when firing this function, my links just turn in their old html look with underline text decoration. Thanks !!
You need to pass in the new (or existing) styles for the a as well.