I'm banging my head against the wall with an issue I'm having in IE8. I am using the fadeIn function on jQuery to make the site content fade in. This works perfectly fine in all of the other browsers, but when the fadeIn finishes in IE8 the font anti-aliasing seems to change, causing the text to shift slightly.
You can see the site at http://www.ipulse.biz. The code I'm using to cause the fade in is quite simple, as shown below.
var showContent = function() {
$('#content div:first').fadeIn(1000);
$('#navigation').fadeIn(500);
} // end showContent
The code is called by a setInterval function, if that makes any difference.
As previously explained, this is caused by Cleartype in Internet Explorer- but there is a workaround that will at least make this issue tolerable.
$('#navigation').fadeIn(500, function(){
if ($.browser.msie){this.style.removeAttribute('filter');}
});
That should force IE to clear the transparency and thus render the text normally.
It still isn't pretty, unfortunately.
This is caused by ClearType disappearing in Internet Explorer, which is quite annoying.
http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/
I know my answer comes a bit too late, but how about thinkin' vice-versa?
IE7 / IE8 don't keep anti-alias for Faded text, so, if you have a single color background (e.g. black), you can create an empty div, background-color: #000; position: absolute; display:block; and put it over the text element.
If your request is to have a text FadeIn effect you just have to apply the FadeOut to the "black" layer over it, and vice-versa.
This way the text anti-alias is kept intact.
Sorry for the very late reply, but I had the same problem and was searching for a solution when I came across this topic. I didn't find a working solution in this topic, but I came up with a simple solution that seems to fix the problem perfectly.
In stead of using:
$('.element').fadeIn(500)
use fadeTo and fade to 99%:
$('.element').fadeTo(500, 0.99)
You won't see a difference in the 1% and because it doesn't reach 100% opacity, IE doesn't seem to apply cleartype.
Let me know if this works for anyone else.
it needs to be called after the fade effect is completed (e.g. 500ms after etc.)
I fixed this by adding in the css for the required text
filter:alpha(opacity=99);
this will only effect ie. I still get a small shift in ie7 but it's exceptable.
You can see it working here http://thriive.com.au/
Found a ready solution for that problem.
http://jquery.malsup.com/fadetest.html
I have a solution: Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
I also had problems with transparent PNG's in faded area's, but combining the above JS for removing the filter attribute with a tiny bit of css the image black 'border' was gone while fading.
Is my case it was a element that uses a css-sprite, so i only had to add this to my sprite class in the css:
.sprite{
background-image: url('/images/sprite.png');
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF'); /* IE6 & 7 */
zoom: 1;
}
I'm not using JQuery but I half-solved this issue by using the following CSS:
div
{
opacity: .15;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
opacity: 1;
-ms-filter:"";
}
The fully opaque text is anti-aliased now, but the translucent isn't. It's not a huge issue for the translucent text though.
Related
I have a css class "buttonClass". I have a few pseudo-classes, of note: "buttonClass:hover".
In one case I have used two different images, and the hover feature works at switching between images.
In another case I'm using sprite style images and the pseudo class should adjust the background position appropriately.
When I used object-position the hover feature worked great in Chrome, but wasn't working in IE11, just to find out that IE doesn't support object-position.
So I switched to background-position. In the debugger switching the position values gets me the effect I need, but for some reason in the modal window where the button is, the hover feature is not working.
Classes are:
.buttonClass {position:absolute; bottom:15px; left:340px; background-position:0 0; background-repeat: no-repeat; width:118px; height:60px; }
.buttonClass:hover {position:absolute; bottom:15px; left:340px; background-position:-120px 0; background-repeat: no-repeat; width:118px; height:60px;
JavaScript file excerpt:
g = document.createElement('button'); g.className = 'buttonClass';
Other attempts have used the following in the JavaScript to no avail:
g.onmouseover = function () {
g.classList.remove("buttonClass")
g.classList.add("buttonClass:hover")
}
g.onmouseout = function () {
g.classList.add("buttonClass")
g.classList.remove("buttonClass:hover")
}
Adding a breakpoint has no effect...as thought the code is never implemented, However, changing values in the JS file and in the css does impact the contents if the div tag being used as a button.
Sites I've tried:
https://www.quora.com/Can-I-add-the-hover-pseudo-class-to-an-element-using-JavaScript
Setting CSS pseudo-class rules from JavaScript
https://www.w3schools.com/css/css_pseudo_classes.asp
Unfortunately, the code I'm working with is already existent and too large to paste a miniature functional piece. I'm trying to debug it so the features work "as advertised" so to speak.
Answers can come in the form of direct suggestions or references to sites or already answered questions that I've missed due to my particular formatting of inquiry.
Sorry, this wasn't a pseudo-class or browser issue. It was an inheritance issue. The button inherited from several divs up a pointer-events:none attribute. So adding pointer-events:all to the button class resolved the hover issue.
I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance
Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.
I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/
You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}
This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});
I've been searching for some CSS or jQuery that will achieve a translucent effect. Most of what I've seen are people using translucent as a synonym for transparent, and that's not really accurate or what I'm trying to get.
I would like a box and when this box passes over objects, it distorts the objects underneath. Think a bathroom window. It allows light to pass through, but not a clear picture. I've attached an image showing what I want to achieve.
My thinking is I would apply this effect on the top image (the white box in the sample image) but it might possibly be something else. Also, I'm pretty sure this will be javascript but I'm including CSS as an option in case there's something out there I didn't know could produce this type of thing.
Just use a transparent PNG, especially if you need a texture like your example.
Otherwise you can set the opacity of the inner div to some value < 1
As been suggested:
If you only need the effect to appear over an image (and not on top of html text etc.)
The number of images the effect should appear over is limited
Then you could prepare an alternate version of each image with the translucent effect applied, then use the alternate image inside the effect box as background image, where the background-position is calculated based on the box position.
Or you could look into this more complicated way: http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript
There is an alternative to the opacity or translucent image solutions listed in the other answers. You could try using a CSS3 filter with blur effect:
img {
-webkit-filter: blur(10px);
filter: blur(10px);
}
Please note however, that this is still in the experimental phase and subject to change. It also may note be supported by all browser vendors. For a list of compatible browsers, check here.
This list from CanIUse may also be helpful for you to look at.
In addition, here is another good resource on CSS Filters.
Looks like a good candidate is the jQuery Blur plugin. Seems to do exactly what I'm looking for. Thanks for everyone's suggestions.
http://www.blurjs.com/
An extention of the idea proposed by #Dryden Long
Here is a working Example: jsFiddle
You can create a translucent version of the image in GIMP/photoshop. Then set the css background property of the child div to fixed:
.parent-div {
position:relative;
background: url(normal.png) no-repeat 0 0 ;
}
.child-div {
width: 100px;
height:100px;
background: url(distorted.png) no-repeat <X> <Y> ; /* x y relative to the parent*/
background-attachment:fixed;
}
I'm looking to make a clever animation that makes three sucessive right angle quotes like » » » glow successively from left to right, then back to the left-most one again. I'm wondering if this might be a clever effect for other developers to use as well, and could be good Google-fodder.
The inspiration for this is obviously the slide-to-unlock screen on an iPhone, where the text glows in a progressive manner.
I do know about CSS3 animations with keyframes and have implemented these successfully before, but am not sure how to code in the part with the loop. I'm guessing Javascript is the answer here, with some kind of loop. I already have jQuery on the page I'm using so it wouldn't be anything extra to use jQuery functionality.
My HTML structure would be something like this:
<span class="glowquote"><span>»</span> <span>»</span> <span>»</span></span>
Any ideas on the best/most clever way to implement this? I realize not all browsers support CSS3 animations if they are to be used and honey badger don't care, I only need to support modern webkit and gecko implementations.
Edit 1: added span tags around each » to allow changing CSS properties individually for each right angle quote in JavaScript, as most people have done. For the guy who did the CSS3 method, not necessary!
Edit 2: Just for absolute clarity on what the goal is, the left-most one will glow a certain color first, using a CSS color:green etc. change and transition:color linear 0.4s etc, then the next one will do the same right after with maybe a short delay.
Edit 3: For further clarification, the exact animation I'm looking for looks like this, though in the example they've used a VERY hack-ish method that I don't think will work for a lot of people. I'm wondering if we are just coming up against the limitations of javascript/css3 or if there is more refinement possible. Link: http://css-tricks.com/examples/SlideToUnlock/
FINAL EDIT WITH SOLUTION SUMMARY: I decided to go with the pure CSS3 option but there are many valid options presented here that are all worthy of your time. I wish StackOverflow would allow for more than one correct answer. For anyone coming to this question from Google or elsewhere, make sure to browse the whole question to choose what may work the best for you! I figured that since this is mostly just for fun, I would feel okay leaving the Firefox & IE guys out in the dark. You can see what my final implemention was here: http://ezrahub.com/board/ at the top of the page, where it is used to expand the posting form. One quirk is that if you change the text size, you will also have to change the property background-size in your CSS stylesheet. I used background-size: 120px 50%; for mine, and if you play around with it you can see how the effect changes.
Hope everyone has fun with this and enjoy using it on your creations! Shout out to autistic moderators such as #JaredFarrish. (Why so mad?)
For the fun of it, here is a method using pure css. It has very limited support for browsers.
.glowquote {
background: -webkit-linear-gradient(left, black 0%, green 40%, green 60%, black 100%);
background-size: auto 50%;
padding: 0 100px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: gradient-animation infinite 1s linear;
}
http://jsfiddle.net/grc4/uF8H2/3/
Edit: The jsfiddle now partly works in firefox. The gradient animation works correctly, and the only thing that does't work is the text clipping (-moz-background-clip:text doesn't exist). This could be solved by using an image mask over the top of the background.
First, I'd put spans around the individual arrows so that you can change their CSS settings individually:
<span class="glowquote"><span>»</span> <span>»</span> <span>»</span></span>
Then, assuming you're using jQuery UI (because as far as I know core jQuery won't animate colours) you can do something like the following:
function doGlow(numTimes) {
var $arrows = $("span.glowquote span");
function nextGlow(i) {
$arrows.eq(i).animate({
color: "green"
}, 400).animate({
color: "black"
}, 400, function() {
i = (i + 1) % $arrows.length;
if (i === 0) numTimes--;
if (numTimes > 0) nextGlow(i);
});
}
nextGlow(0);
}
Demo: http://jsfiddle.net/KrL44/1
(Or here is the original version of my demo that just kept looping indefinitely: http://jsfiddle.net/KrL44/)
try this:
html:
<span class="glowquote"><span>»</span> <span>»</span> <span>»</span> </span>
js:
$(document).ready(function(){
var i = 0;
function run() {
$('.glowquote span:eq('+ i +')').animate({color: 'green'}, 500, function(){
$(this).animate({color: 'black'}, 500);
i++;
if (i > 2) { i = 0 }
run()
})
}
run()
})
http://jsfiddle.net/wQ9AT/
I'm having problems with a transparent PNG image showing black dithered pixel artifacts around the edge of the non transparent part of the image. It only does this in Internet Explorer and it only does it from a Javascript file it is used in.
Here's what I'm talking about...
http://70.86.157.71/test/test3.htm (link now dead)
...notice the girl in the bottom right corner. She has artifacts around her in IE8 (I haven't tested it in previous versions of IE, but I'm assuming it probably does the same). It works perfectly in Firefox and Chrome. The image is loaded from a Javascript file to produce the mouseover effect.
If you load the image all by itself, it works fine.
Here's the image...
http://70.86.157.71/test/consultant2.png
How to fix this?
The image was produced in Photoshop CS3.
I've read things about removing the Gama, but that apparently was in previous versions of Photoshop and when I load it in TweakPNG, it doesn't have Gama.
FIXED!
I've been wrestling with the same issue, and just had a breakthrough! We've established that if you give the image a background color or image, the png displays properly on top of it. The black border is gone, but now you've got an opaque background, and that pretty much defeats the purpose.
Then I remembered a rgba to ie filter converter I came across. (Thanks be to Michael Bester). So I wondered what would happen if I gave my problem pngs an ie filtered background emulating rgba(255,255,255,0), fully expecting it not to work, but lets try it anyway...
.item img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}
Presto! Goodbye black, and hello working alpha channels in ie7 and 8. Fade your pngs in and out, or animate them across the screen - it's all good.
I put this into a jQuery plugin to make it more modular (you supply the transparent gif):
$.fn.pngFix = function() {
if (!$.browser.msie || $.browser.version >= 9) { return $(this); }
return $(this).each(function() {
var img = $(this),
src = img.attr('src');
img.attr('src', '/images/general/transparent.gif')
.css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
});
};
Usage:
$('.my-selector').pngFix();
Note: It works also if your images are background images. Just apply the function on the div.
I know this thread has been dead some time, but here is another answer to the old ie8 png background issue.
You can do it in CSS by using IE's proprietary filtering system like this as well:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
DEMO
you will need to use a blank.gif for the 'first' image in your background declaration. This is simply to confuse ie8 and prevent it from using both the filter and the background you have set, and only use the filter. Other browsers support multiple background images and will understand the background declaration and not understand the filter, hence using the background only.
You may also need to play with the sizingMethod in the filter to get it to work the way you want.
I had the same thing happen to a PNG with transparency that was set as the background-image of an <A> element with opacity applied.
The fix was to set the background-color of the <A> element.
So, the following:
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
Turns into:
/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
PNG transparency prоblеm in IE8
Dan's solution worked for me. I was trying to fade a div with a background image. Caveats: you cannot fade the div directly, instead fade a wrapper image. Also, add the following filters to apply a background image:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE6 & 7 */
Please note that the paths in the src attributes of the filters are absolute, and not relative to the css sheet.
I also added:
background: transparent\9;
This causes IE to ignore my earlier declaration of the actual background image for the other browsers.
Thanks Dan!!!
please try below code.
background: transparent\0/;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */
Dan Tello fix worked well for me.
One additional issue I found with IE8 was that if the PNG was held in a DIV with smaller CSS width or height dimensions than the PNG then the black edge prob was re-triggered.
Correcting the width and height CSS or removing them altogether fixed.
I use a CSS fix rather than JS to workaround my round cornered layer with transparent PNG inside
Try
.ie .whateverDivWrappingTheImage img {
background: #ffaabb; /* this should be the background color matching your design actually */
filter: chroma(#ffaabb); /* and this should match whatever value you put in background-color */
}
This may require more work on ie9 or later.
Just want to add (since I googled for this problem, and this question popped first) IE6 and other versions render PNG transparency very ugly. If you have PNG image that is alpha transparent (32bit) and want to show it over some complex background, you can never do this simply in IE. But you can display it correctly over a single colour background as long as you set that PNG images (or divs) CSS attribute background-color to be the same as the parents background-color.
So this will render black where image should be alpha transparent, and transparent where alpha byte is 0:
<div style="background-color: white;">
<div style="background-image: url(image.png);"/>
</div>
And this will render correctly (note the background-color attribute in the inner div):
<div style="background-color: white;">
<div style="background-color: white; background-image: url(image.png);"/>
</div>
Complex alternative to this which enables alpha image over a complex background is to use AlphaImageLoader to load up and render image of the certain opacity. This works until you want to change that opacity... Problem in detail and its solution (javascript) can be found HERE.
My scenario:
I had a background image that had a
24bit alpha png that was set to an
anchor link.
The anchor was being
faded in on hover using Jquery.
eg.
a.button { background-image: url(this.png; }
I found that applying the mark-up provided by Dan Tello didn't work.
However, by placing a span within the anchor element, and setting the background-image to that element I was able to achieve a good result using Dan Tello's markup.
eg.
a.button span { background-image: url(this.png; }