I've got sIFR3 running on my site but for some reason, links are not clickable. I've never experienced this issue before.. I'm only replacing h2 with it which is a linked title on my site. How do i enable sIFR to treat it as such?
Site is: http://criticaldesigner.com
This sounds like a bug in Firefox/Safari where a Flash movie with wmode set to transparent or opaque, contained in a floated element, doesn't properly register click events. Try removing the wmode setting if possible.
Related
My website flickers out of control when scrolling on iOS mobile. Have't run into any issues on Android at all.
https://s3-us-west-1.amazonaws.com/stage.coefficientlabs.com/index.html
I've read through some similar forums discussing
-webkit-overflow-scrolling: touch;
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
But none of my attempts seem to have worked. I think part of it is because I can't tell which specific element is causing the flicker. It just appears to me like the entire website is flickering.
I've used
-webkit-overflow-scrolling: touch;
in the past before, but now when I inspect the code, it says it has an invalid property value. Some others are experiencing the same thing; I think the feature got discontinued or something.
I just want simple, normal mobile scrolling that we're all used to expecting.
Thanks so much in advance!
EDIT
I've found out that once I click the "Click to get started" button, and close the popup, the flicker stops. This doesnt happen with any other buttons, just this one. I've been working on integrating this popup with the rest of the website, so it looks like this is the culprit.
Still dont have any strong leads to pursue...not sure why opening and closing this popup causes the website to respond properly.
EDIT 2
Okay so I removed one CSS sheet and now the scroll works. Trying to isolate what in this CSS file is causing this scrolling issue. Here is the link. Any idea whats going on here?
Okay turns out that the popup wrapper's css property "display: none" was interfering with some of the other css properties(?). I changed this to "display:block" and just coded another way to hide the popup wrapper with z-index. No more flicker!
I am currently developing a hybrid app in iOS that loads a website and has some other features (contacts, sharing, notifications...) using cordova plugins. I do have access to the content of the site that is being displayed by the iframe.
The normal way this is done is to load the website in an iframe. I have already done this in android and it works very well. In iOS however:
Safari messes up the size of the frame. I fixed this by setting the min-width css style to 100% for the frame.
Scrolling on the iframe is always set to "no" even if you specify "yes. I "fixed" this (so I thought) by using the only solution I could find which is to wrap the iframe in a div and scroll the div. This made the header (position:fixed) scroll with the page when it should be fixed to the top of the page and broke other things on the page that rely on scroll position to trigger an action. I also tried modifying the body of the content to contain css styles mentioned here but this didn't work either. I was back to square one.
I have spent a total of a week researching how to fix this with no avail. Recently I have discovered that loading my website in iOS's UIWebView or WKWebView works well to display the site exactly how I would expect.
That brings me to two possible solutions (and my question):
Maybe I missed something with the css style on the content of the site. I read that it is possible to get scrolling to work this way but I am sceptical because safari does not allow scrolling on an iframe.
(The likely solution but the one I cannot figure out) Make my cordova app use a one of iOS's webviews. This is what I am having problems with. I cannot figure out how to do this. Is a webview an iframe? How do I use one of these webviews in my app? What does the index.html (cordova specific file) look like when I use a webview instead of an iframe (because currently this is where my iframe is).
I solved this. Since I have access to the contents of the page, I added:
position:absolute
top: 0
right:0
bottom:0
left: 0
overflow-y: auto
overflow-x: hidden
-webkit-overflow-scrolling: touch
To the scrolling body of the page. This fixed my problem
I have a problem that drives me nuts, i have used themeroller from jquery mobile and i love this tool, it has its flaws and one of them is when you use dark backgrounds it leaves a little white stripe at the top of the list you can see it right here
http://yellowgreenmedia.info/1-theme/
it is on the top , left and right of the list, its small but it is there
Is there a fix for this, so i can remove the annoying white stripe
Thanks
Dave
On this:
div class="ui-btn-inner ui-li" ...
Give it:
border-top:0
Worked at my end.
First I would add a HTML DOCTYPE
http://www.w3schools.com/html5/tag_doctype.asp
I think you're missing the opening <html> tag
http://yellowgreenmedia.info/1-theme/ (right click to view source)
and last I think you also need to add just the custom theme and not jQM default css
http://jsfiddle.net/UEuKA/3/
Last I would give the jQM Theme Roller another go as it looks to be adding CSS from RC2
http://jquerymobile.com/themeroller/
http://yellowgreenmedia.info/1-theme/css/style.css (jQuery Mobile v1.0rc2)
One more thing, your custom CSS could be causing the extra line as well, Didn't look at it too much though
http://yellowgreenmedia.info/1-theme/css/custom.css
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.
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.