I have tried using sIFR on a test page http://www.irwinassociates.eu/test.php without success. I have checked and re-checked but can't find what's wrong. I figure it's something simple. Can anyone help please? Thanks guys
I looked at the source of the page you linked to and didn't see any javascript code in place that calls the sIFR activate() or replace() functions. Follow the methods used on the official sIFR 3 demo page (view source) http://dev.novemberborn.net/sifr3/beta2/demo/
var font = { src: 'gillsans.swf' };
sIFR.activate(font);
sIFR.replace(font, {
selector: 'h1'
, css: ['.sIFR-root { color: #CCCCCC; }' ]
});
Related
Im working on a project in ruby on rails (rails 6), that include a blog working with action-text and trix. I have to add few option to my rich-text editor and there is one that block me for few days.
I added buttons in my trix toolbar, for add more title tag options following this issue and everything worked fine.
But when i try to add text-align options (left, right, center) it dont work
I tried many thing, but i would expect this to work:
in application.js
Trix.config.textAttributes.alignLeft = {
style: { textAlign: "left" },
parser: function(element) {
return element.style.alignLeft === "left"
},
inheritable: true
}
then i insert it in the toolbar like this:
in application.js also
addEventListener("trix-initialize", function(event) {
var buttonHTML = '<button type="button" data-trix-attribute="alignLeft">RED</button>'
event.target.toolbarElement.
querySelector(".trix-button-group").
insertAdjacentHTML("beforeend", buttonHTML)
})
I tried both, with blockAttributes and textAttributes but dont work.
The button appear but does nothing.
What i want is that the div where my text is embed get style=" text-align: left"
Do you have an idea of how i could make it work? or maybe ideas, advices or lectures propositions?
(i saw somes issues in basecamp/trix github that speak about that(this one is really interesting), but its appear that the customized tag option, is not a good option and i didnt managed to make anything else work.
Thanks a lot
I have integrated a tinymce editor in a rails project with active admin.
I spent almost a couple of hours looking for a way to align the editor to the right of my available space, as currently it's hiding the labels for it.
I have the following init js:
$(document).ready(function() {
tinyMCE.init({
mode: 'textareas',
align: 'right',
width: '80%',
height: 200,
autoresize_min_height: 200,
autoresize_max_height: 400,
resize: 'both',
plugins : 'advlist autolink link image lists charmap print preview'
});
});
Read much of the TinyMCE4 documentation and couldn't find a way to align the window to the right. My attempts to override the css class for this are as well no successful.
Could you please give me an advice. Does someone know how to deal with the alignment via the js init?
Here's the screenshot: http://betasve.com/wp-content/uploads/2014/09/TinymceProblemAA.png
Thank you in advance.
Try this in active_admin.css.scss:
.mce-tinymce {
margin-left: 215px !important;
+
Complementing the answer make by nistvan, works better with:
.mce-tinymce { margin-left: 20% !important;}
I have the following in my sifr-config.js file:
sIFR.replace(avenir_book, {
selector: 'p:first-child',
css: '.sIFR-root { color: #782221; font-size:22px; }',
wmode: 'transparent'
});
But it doesn't work. I've verified that the same CSS works by testing it in my normal stylesheet. Does sIFR not understand this pseudo element, or does it need to be called in a special way?
Assuming you are using sIFR 3, :first-child is not supported as indicated by this page. However, sIFR can be made jQuery compatible, read more here.
Steps to replace parseSelector with
jQuery:
1 - Make sure you include the jQuery
JavaScript file.
2 - Remove all of the parseSelector
code at the bottom of sifr.js
3 - Add the following line:
var parseSelector = $;
I'm having trouble finding usage/syntax for the text-align feature of sifr. This feature goes inside the flashvars parameter correct? So would it be something like:
sIFR.replace(fontname, {
selector: 'h1',
wmode: 'transparent',
flashvars: 'textalign=center'
});
I tried the above with no luck using r436 build.
Apparently you only need to edit the all.css file. Here's someone talking about this.
If you don't want to change the css styling of a root element, then you can specify what CSS selection you are applying your sifr is referring to with the sSelector
You're confusing sIFR 2 and 3 syntax. flashvars no longer exists, for sIFR 3 specify it in the replacement CSS:
sIFR.replace(fontname, { selector: 'h1', css: '.sIFR-root { textalign: center; }' });
You can also specify background-color here, so you don't need to use transparency.
I just have a short question about switching the color of sifr objects on the fly with changeCSS:
The point is, that I'd like to change the color of the two headers whenever the user clicks on the "Switch style to..." on the upper right corner. Check the example page: www.capsule.hu/index2.html - and after clicking on the link nothing happens with sifr objects. Version is: sIFR, version 3, revision 436.
I'm using Kelvin Lucks styleswitcher script with some modifications (the script is hardly the same as here: http://www.digital-campaign.com/dc-example/) - on my current page I'm calling the sIFR.replace method whenever user changes the style (www.capsule.hu), but it seems a little bit slow for me, that's why I'd like to change.
Thanks for every help in forth,
Csongor
You can place the following in the body of the switchSifrColor function on your site:
$('h2').removeClass("sIFR-replaced");
sIFR.replace(helvetica, {
selector: 'h2',
wmode: 'transparent',
css: [ '.sIFR-root { color: #' + color + '; }' ]
});
The main change is that the css property is an array of strings, unlike the object that you were passing.
And a side-note: great work! The site looks very nice.
[Edit]
I guess this will prove more useful than calling replace again.
var css = '.sIFR-root {color:#ff1ff1;}';
$.each(sIFR.replacements['h2'], function() {
this.changeCSS(css);
});
I just tried it through Firebug and it looks great :)
[/Edit]