sifr not showing colour

[Tupira]

Back to issues with my old friend "sIFR". I am using the latest jquery.sifr.js and targeting the h2 tag on my pages with the following code:

$(document).ready(function()
{
$("#sidepanel h3").sifr(
{
path: 'flash/',
font: 'optima',
fontSize: '18px',
wmode:'transparent',
flashvars: {
css: [
'* { color: #CC00CC; }'
].join(' ')
}

}
);
});

But the colour doesn't show. I have tried with a color: variable instead of sticking it in Flashvars but that does not show either. Has anyone come across this problem before? How do I set up the colour of the text?

[paul_wilkins]

The examples page is supposed to show red text in the first example but it doesn't.
http://jquery.thewikies.com/sifr/#examples

The test area at the bottom of the page uses a style declaration to change the color.

I suggest that it may stay in beta for a while.

Could you use the original sIFR in the meantime. That one seems to work fine.
http://www.mikeindustries.com/blog/files/sifr/2.0/

[RetroNetro]

The examples page is supposed to show red text in the first example but it doesn't.
http://jquery.thewikies.com/sifr/#examples

I see it in red (after I click the button to make it use sIFR).

[paul_wilkins]

For some reason, sIFR works for me in Internet Explorer but not in Firefox, that's both the jQuery one and the original.

[RetroNetro]

I am using Firefox 3.0.1 by the way, works for me in IE6 as well.

I assume you got javascript enabled in FF, maybe some setting in the web dev bar perhaps?

Now back on topic!

I have never used the jQuery version before and never really cared for the original version, seemed buggy, (might have just been me), anyway take all this with a grain of salt:

What is all this for?

flashvars: {
css: [
'* { color: #CC00CC; }'
].join(' ')
}

From the brief read I gave the features page at the link pmw57 posted, I see them just adding a color style like so:

$("#sidepanel h3").sifr({ color: #CC00CC; });

So maybe this will work:

$(document).ready(function(){
 $("#sidepanel h3").sifr({
  path: 'flash/', // this is appended to the front of optima.swf below
  font: 'optima', // this is looking for an .swf file named optima.swf
  fontSize: '18px',
  wmode:'transparent',
  color: '#CC00CC';
 });
});

Hope it is helpful.

[paul_wilkins]

Oh yes of course. I recently installed Flashblock.
Pardon the disturbance - carry on.

[Tupira]

Hi guys, I have downloaded the code from the example page you posted above and got the colour working, however, now the fontSize: attribute does not work *Don't you love sIFR?*... So I'm wondering how do I get sIFR-ed items to be a certain size without having to affect the html version?

[Tupira]

By the way, i tried the zoom attribute but that just went pear-shaped i.e. a mess of having to adjust flash movie height, positioning etc. etc. etc. *sigh*

[Tupira]

Maybe if I actually paste the code down somebody will be able to spot the problem:

This is the original Jquery.sifr.js I was using:

jQuery.sifrSettings = function(settings) {

	/* == Sets Settings == */
	arguments.callee.settings = jQuery.extend(
		{
			/* Absolute Offset X ...... */ absoluteOffsetX: null, aoX: 0,
			/* Absolute Offset Y ...... */ absoluteOffsetY: null, aoY: 0,
			/* Relative Offset X ...... */ relativeOffsetX: null, roX: 0,
			/* Relative Offset Y ...... */ relativeOffsetY: null, roY: 0,
			/* Font Path .............. */ path: null,
			/* Font File .............. */ font: null,
			/* Font Size .............. */ fontSize: null,
			/* Text Color ............. */ color: null,
			/* Text Underline ......... */ underline: null,
			/* Text Transform ......... */ textTransform: null,
			/* Text Link Color ........ */ link: null,
			/* Text Hover Color ....... */ hover: null,
			/* Background Color ....... */ backgroundColor: null,
			/* Text Align on X ........ */ textAlign: null,
			/* Text Align on Y ........ */ verticalAlign: null,
			/* Content ................ */ content: null,
			/* Width .................. */ width: null,
			/* Height ................. */ height: null
		},
		arguments.callee.settings,
		settings
	);

	/* == Returns Settings == */
	return arguments.callee.settings;

};

jQuery.fn.sifr = function(settings) {

	/* == Converts color to HEX == */
	var hex = function(N) {
		if(N==null) return "00";
		N = parseInt(N);
		if(N==0 || isNaN(N)) return "00";
		N = Math.max(0, N);
		N = Math.min(N, 255);
		N = Math.round(N);
		return "0123456789ABCDEF".charAt((N - N%16) / 16) + "0123456789ABCDEF".charAt(N%16);
	};

	/* == Converts colors to HEX == */
	var hexed = function(color) {
		if(!color) { return false; }
		if(color.search('rgb') > -1) {
			color = color.substr(4,color.length-5).split(', ');
			color = hex(color[0]) + hex(color[1]) + hex(color[2]);
		}
		color = color.replace('#','');
		if(color.length < 6) {
			color = color.substr(0, 1) + color.substr(0, 1) + color.substr(1, 1) + color.substr(1, 1) + color.substr(2, 1) + color.substr(2, 1);
		}
		return color;
	};
	
	/* == Executes Function == */
	return this.each(function() {

		var o = jQuery(this);
		if(o.is('.sifr')) {
			o.unsifr();
		}
		o.flash(
			{},
			{ update: false },
			function(htmlOptions) {

				/* == Collect Settings == */
				var s = jQuery.extend({},jQuery.sifrSettings(), settings);

				/* == Evaluates Sifr Settings == */
				/* Add Sifr Class ......... */ o.addClass('sifr');
				/* Font File .............. */ s.font = s.font || (/([^\'\",]+)[,]?/.exec(o.css('fontFamily')) || [,] )[1];
				/* Font Color ............. */ s.color = hexed(s.color || o.css('color'));
				/* Font Underline ......... */ s.underline = s.underline ||(o.css('textDecoration')=='underline');
				/* Background Color ....... */ s.backgroundColor = hexed(s.backgroundColor || o.css('backgroundColor'));
				/* Text Align on X ........ */ s.textAlign = s.textAlign || o.css('textAlign') || 'left';
				/* Text Align on Y ........ */ s.verticalAlign = s.verticalAlign || o.css('verticleAlign') || 'top';
				/* Text Part 1 ............ */ o.html('<span style="display:inline;margin:0;padding:0;float:none;width:auto;height:auto;font-weight:inherit;">' + o.html() + '</span>');
				/* Text Part 2 ............ */ var oc = jQuery(this.firstChild);
				/* Text Size .............. */
					if (s.fontSize) oc.css('fontSize',s.fontSize);
					if (s.fcolor) oc.css('color',s.color);
				/* Text Transform ......... */ s.textTransform = s.textTransform || o.css('textTransform');
					if (s.textTransform=='uppercase') s.content = oc.html().toUpperCase();
					if (s.textTransform=='lowercase') s.content = oc.html().toUpperCase();
					if (s.textTransform=='capitalize') {
							var ochtml = oc.html().split(' ');
							for (var i = 0; i < ochtml.length; i++) {
								ochtml[i] = ochtml[i].charAt(0).toUpperCase() + ochtml[i].substring(1);
							}
							s.content = ochtml.join(' ');
					}
				/* Content ................ */ s.content = s.content || oc.html();
				/* Width .................. */ s.width = s.width || oc.width();
				/* Height ................. */ s.height = s.height || oc.height();
				/* Relative Offset X ...... */ s.aoX = (s.aoX || 0) + ((s.width / 100) * (s.roX || 0));
				/* Relative Offset Y ...... */ s.aoY = (s.aoY || 0) + ((s.height / 100) * (s.roY || 0));

				/* == Hide == */
				oc.hide();

				/* == Evaluates Flash Settings == */
				htmlOptions.style = 'vertical-align:' + s.verticalAlign + ';';
				htmlOptions.wmode = 'transparent';
				htmlOptions.src = s.path + s.font + '.swf';
				htmlOptions.flashvars.txt = s.content;
				htmlOptions.width = s.width;
				htmlOptions.height = s.height;
				htmlOptions.color = s.color;
				htmlOptions.flashvars.w = s.width;
				htmlOptions.flashvars.h = s.height;
				htmlOptions.flashvars.textalign = s.textAlign;
				if (s.aoX!=0) htmlOptions.flashvars.offsetLeft = s.aoX;
				if (s.aoY!=0) htmlOptions.flashvars.offsetTop = s.aoY;
				if (s.color) htmlOptions.flashvars.textcolor = s.color;
				if (s.link) htmlOptions.flashvars.linkColor = s.link;
				if (s.hover) htmlOptions.flashvars.hoverColor = s.hover;
				if (s.underline) htmlOptions.flashvars.underline = s.underline;
				if (s.backgroundColor) htmlOptions.flashvars.bgColor = s.backgroundColor;

				/* == Append Sifr Element == */
				o.append(jQuery.fn.flash.transform(htmlOptions));

			}
		);
	});

};

jQuery.fn.unsifr = function() {

	return this.each(function() {
		var o = jQuery(this);
		var oc = jQuery(this.firstChild);

		/* == Check for Existing Sifr Presence == */
		if(o.is('.sifr')) {
			o.html(oc.html());
			o.removeClass('sifr');
		}

	});

};

This is the element:

$(document).ready(function(){
 $("#sidepanel h3").sifr({
  path: 'flash/', // this is appended to the front of optima.swf below
  font: 'optima', // this is looking for an .swf file named optima.swf
  fontSize: '18px',
  wmode:'transparent',
  color: '#f00'
                }
            );
        });

In this case the Size works, but not the color and because I don't speak Javascript/JQuery per se I don't understand where the code could be failing above.

I have been stuck on these for a few days now and would be very grateful if someone could at least point me in the right direction.

Thanks