SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
Thread: sifr not showing colour
-
Jul 17, 2008, 08:20 #1
- Join Date
- Mar 2008
- Posts
- 31
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
sifr not showing colour
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?
-
Jul 17, 2008, 15:43 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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/Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jul 17, 2008, 17:40 #3
-
Jul 17, 2008, 17:54 #4
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
For some reason, sIFR works for me in Internet Explorer but not in Firefox, that's both the jQuery one and the original.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jul 17, 2008, 18:39 #5
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?Code JavaScript:flashvars: { css: [ '* { color: #CC00CC; }' ].join(' ') }
Code JavaScript:$("#sidepanel h3").sifr({ color: #CC00CC; });
Code JavaScript:$(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'; }); });
Last edited by RetroNetro; Jul 17, 2008 at 20:00. Reason: fixed code error
-
Jul 17, 2008, 19:16 #6
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Oh yes of course. I recently installed Flashblock.
Pardon the disturbance - carry on.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jul 18, 2008, 02:49 #7
- Join Date
- Mar 2008
- Posts
- 31
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Jul 18, 2008, 02:52 #8
- Join Date
- Mar 2008
- Posts
- 31
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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*
-
Jul 21, 2008, 02:17 #9
- Join Date
- Mar 2008
- Posts
- 31
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
HTML Code: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'); } }); };
HTML Code:$(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' } ); });
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
Bookmarks