I try to create on hover hyperlink animation. When user hover on the link it will animate the underline.
I put the code here : http://codepen.io/elaelation/pen/bkicn
It works very well on Chrome & Firefox, but it did not work on Safari. I already put the -webkit-transition for Safari bug, but it still didn't work.
Is there anything wrong with my code ?
thank you.
I just found a good article here : http://css-tricks.com/transitions-and-animations-on-css-generated-content/
CSS transition on pseudo element is not supported yet in Safari. You can read the detail on the article above.
Related
Please run the demo on an iOS device.
I have two pages with similar elements (that have :hover states) and clicking on any element in the first page takes you to the second page.
Problems:
:hover persists between pages
location of :hover remains identical (try tapping different links)
This happens until you interact with the page again.
Demo: https://codesandbox.io/s/ios-persisting-hover-state-se3m1
Has anyone experienced this before? What solutions do I have to fix it? Would rather not have to add a no-touch type class everywhere where I do hover states in my CSS if possible.
Thanks!
This should answer your question: https://humanwhocodes.com/blog/2012/07/05/ios-has-a-hover-problem/
I am developing an extension for Firefox. The problem is that I can't see Inspect Element for an extension, extension screen just doesn't respond to right mouse click. I can select dropdown, can select, can edit, but can't invoke Inspect Element.
How can I do that? Sorry if the question is duplicated, but I couldn't find the answer anywhere. Thanks a lot.
I found the answer, it is here:
https://developer.mozilla.org/en-US/Add-ons/Add-on_Debugger.
I have unfortunately stumbled on the issue where, on iPad, a pop-up menu summoned by way of :hover does not disappear from the screen when the user touches an empty area of the page.
The problem is the same described here:
Hover Behavior on Desktop vs iPad
The menu is part of a template I bought, namely:
http://html.realia.byaviators.com/
But... wait a minute... it WORKS on the template's home page? And only on that page -- it doesn't work on any other page of that same template.
I was able to track the behavior down to the point where I found that the reason why it works is the following: initializing a Google map makes the menu behave properly. Just the simplest of maps, with the default options.
Now my question to the experts is: what is that Google does in the map initialization code in order to fix the :hover behavior?
Thank you very much in advance for your help!
Well, can't tell what is that Google does, however the solution is documented in mobile Safari developer's reference.
For a click event to be generated on an area of the document, there must be a click handler attached. For example, clicking on a div will generate a click event only if an onclick="void(0)" handle is presente:
Clicking here triggers event in mobile Safari
I'm trying to use the Twitter "Tweet" button on a site. It works great in all browsers, but in IE 7, it doesn't show the full width. There's no additional CSS in place, other than a little padding-left on the LinkedIn button for spacing.
Twitter have said that they fixed this issue a few months ago here, but I'm using the latest code from their developers site with no luck.
I've also tried the solution from StackOverflow suggesting to use .twitter-follow-button {width: 150px !important;}, but this also didn't solve the issue. The image below shows how it looks in IE7, with the text incorrectly cut short.
Any advice or suggestions of where to go next would be very much appreciated.
It looks like you are using the Twitter Share button instead of the Twitter Follow button. Therefore the used class as suggested by the quoted stackoverflow thread will not work. You should be using:
.twitter-share-button {width: 150px !important;}
The issue was a surrounding for the Twitter button that was being placed in-line, hence there wasn't a sign of it in the CSS. Thanks for your responses.
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.