Just installed sIFR into the site I am building (a personal portfolio site). When using it on pages with slimbox popups, sIFR overlaps the slimbox and makes it dificult to see the image. I tried applying a high z-index to the items I didn't want overlapped, but that didn't solve anything. Here is a screenshot of what it looks like (since my site is not online yet):
http://users.sephiroth.ws/DemonicGoblin/sifr.png
Is there a way to hide the sIFR when a slimbox link is clicked, or a way to adjust the z-index for a way to it not to be always on top? This happens on the latest version of all major browsers (I couldn't test Safari or Chrome though, even though I doubt it will differ)
I ahvent been able to find any information regarding this subject, so if it has been fixed in the sIFR beta it would be nice to know. Thanks.
In sIFR 2 you need to set the sWmode parameter to "opaque". This should allow HTML elements to be displayed on top of the Flash movie.
In sIFR 3, the parameter is wmode, though you can also use opaque: true.
Thank you so much - just saved my day.
I saw that lightbox break - so did I nearly:)!!!
But what a straight forward answer and solution thanks!! again
The file in mention is:
sifr.js
and put a code like:
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc: "http://localhost/ddddddd/templates/template/i_font_swf/carbon_std_swf.swf", sCase: "upper", sColor: "#86ca29", sWmode:"opaque", sBgColor:"#fff"}));
I just write it cause took me some time to remember where this setting initially was - when I did the sIFR long ago.
Related
I've got a site that's using sIFR, and some of the replaced text is being stretched vertically in IE9. It's only happening in places where the text wraps 2 lines, and it fixes itself when I hover my cursor over it. The sIFR text is a link, but I'm not sure if that has any correlation.
I've tried various settings changes like fitExactly, forceClear, and forceSingleLine (though I want it to be able to wrap), and those didn't work. I've tried changing the font-size, line-height, and all other dimensions to px instead of em. innerHTML isn't being used anywhere on the page. It's frustrating that it works after being hovered on, but not before.
And I know you're probably thinking "use cufon or #font-face, dummy" but I'm stuck with sIFR for now. The client wants what the client wants...
I've found a solution,
if you try to hover with mouse cursor the text will display correct so..
I write few line of code to put in sifr-config.js
forcing flash reset "onReplacemment" callback only when IE9 is detected
you must use Jquery for browser detection or use another javascript way
see the link below:
http://www.voo-doo.net/robotphobia/2011/05/fix-sifr-ie9
I hate default select control, that's because it can't be styled in IE using CSS.
This is why I developed a new select control from scratch, using HTML + CSS + JavaScript.
I did a great job in the past two days matching CSS and HTML together, but today I discovered a bug wich looks very hard for me to fix.
In IE 7, when I have tow controls on the same page, the one from top does not overlay the one from bottom.
See the image: coolrgb dot com/files/select-help.jpg
Download the demo page (HTML + CSS + Javascript): coolrgb dot com/files/select-help.zip
Please help me, this control looks so nice for me and I want to use it on all my projects from now on. This bug killed my hopes and lot of time.
Thank you.
If you give each control the same z-index, then you will not have control over the stacking order.
I would suggest modifying your control to behave more like a real SELECT element: only one can be open at a time, or losing focus causes it to close. Alternately, you can set a high z-index when the control has focus, and a lower one when it does not.
Another thing to look out for: try putting some other controls like radio, checkbox, and select under your control. You might find that IE also will not hover over those even if you give them a different z-index (as #grawity explained in his answer). This is why you'll typically see widget demos displayed on top of these elements, as shown here: http://jqueryui.com/demos/dialog/
A typical hack to fix this is to use an iframe, but that probably deserves a different question altogether.
Edit: After rereading the question, this answer now seems totally unrelated, but I'm keeping it here anyway.
Not really an answer, but an attempt to explain:
In Internet Explorer, <select> tags are implemented as simple windowed controls, while all other elements are windowless controls (this allows them to be styled). That's why these tags are always on top and don't follow the z-order rules. (The drop-down menu part must be styleable so it's a windowless control, and so it shows under the main part.)
In Firefox all elements are windowless, and in IE8 they should be too.
I've noticed this issue in previous versions of Firefox whereby after scrolling sIFR links become inactive and need to be clicked in order to become links again. The fix for this was fairly straightforward and just required you to add 'fixFocus: true' in the sIFR config.
Unfortunately when I upgraded to Firefox 3.6 this fix no longer works. I'm just wondering if anyone else has come across this and know if there's a workaround. We use sIFR links in loads of our sites so this is a pretty bad bug!
Thanks in advance if anyone can help
*update - it seems like it's the addition of using the wmode: 'transparent' - if i take this out the fix focus works again. Still a problem though as most of our links need to be transparent
Yea, it's a browser issue, and a rather old one by now. There's no better workaround available in sIFR.
A trick to make the sIFR links work fine in firefox when having the wmode set to transparent, is to add that CSS code to the class that is being replaced :
.fontname:hover {background-position:0% 100%;}
In this example, fontname is the CSS class that determines which tags are replaced.
I'm implementing sirf in a site using a Drupal module. I have a few issues...
During testing the text fails in Safari 4 beta (win) and renders with a green background when transparency is applied. No doubt a Safari or plug in issue. There are a few crap things happening, the Lightbox overlay fails to cover any Flash objects. I'm sure you guys are tracking that error.
Exported fonts using Flash CS4 don't work. Got no idea why, I reverted to using one of the online conversion sites. I think the FLA is CS3. Maybe this could be updated.
Transparency failing in Safari 4 / Windows in definitely a Safari bug.
Which sIFR version are you using? The sIFR 2 movie is available in a CS 3 format, I do think the sIFR 3 movie is Flash 8.
sIRF3 and not working with Flash CS4 (for editing)
I've got some issues with headings not being drawn on the initial page load. Like the heading aren't draw in html before sIRF starts up and nothing then appears.
And another where jQuery created drop shadows draw before the sIRF text then when the page shifts they are in the wrong location.
I've mutated the call to this...
$('document').ready(function(){
$('.image-thumbnail img').ready(function(){
setTimeout( "drawShadow();", 4000) //slow it down to give objects a chance to draw
});
});
function drawShadow(){
$('.image-thumbnail').dropShadow({left:2, top:2, blur:2, opacity:0.5}); // Creates new drop shadows
}
What I really need is a signal that sIRF has completed. Any clue how I might do that?
I just recently upgraded to 436 from 419, and have found that fitExactly will no longer have any effect.
You can see an example here:
(With 419)
(With 436)
The javascript config is in the page head.
I checked the versions in between, and the latest it works with is 419.
I could adjust the width in the Javascript configuration, but then there would be a gap left on the side of the dropcap I'm using it on, and the fact that I'm integrating it with a Wordpress theme that automatically applies sifr (other than the one in the example), meaning that each can't be adjusted by changing the width or font size.
I would much prefer to use 436, especially due to there being less page shifting, so, is there a remedy?
Thanks for your time.
If you compare the width and height of the Flash movie on both pages, you'll see that it's the same. In other words, it looks like fitExactly works fine. I wouldn't know though why Flash is clipping the rendered text.
Just to test, could you open the r436 JavaScript file, search for '419' and replace by '436', and then use the r419 Flash movie? Perhaps that provides further clues.