SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    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?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  3. #3
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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).

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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(' ')
    }
    From the brief read I gave the features page at the link pmw57 posted, I see them just adding a color style like so:
    Code JavaScript:
    $("#sidepanel h3").sifr({ color: #CC00CC; });
    So maybe this will work:
    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';
     });
    });
    Hope it is helpful.
    Last edited by RetroNetro; Jul 17, 2008 at 19:00. Reason: fixed code error

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  7. #7
    SitePoint Enthusiast
    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?

  8. #8
    SitePoint Enthusiast
    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*

  9. #9
    SitePoint Enthusiast
    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');
    		}
    
    	});
    
    };
    This is the element:

    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'
                    }
                );
            });
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •