I'd like to create a dropdown menu with rounded corners without using images. I tried combining the suckerfish menu plugin with a number of the JQuery rounded corners plugins, which mostly worked fine in Firefox, but looked terrible in IE.
Does anybody have an easy combination of plug-ins that will work with both IE and Firefox?
Did you already try DD Roundies? I've had pretty good cross-browser success with this code, it also fixes background image transparent pngs, the only code library I've found that actually did this on all browsers.
Try using CSS3 border-radius and if really necessary, CSS3Pie for IE<9 compatibility.
Related
I want to use transition effect on hover for IE 8 like in this example:
http://jsfiddle.net/evcL2/10/
According to this site (is working only on ie) that is possible (use trasntion option and fade effect) but I am not able to use it. Can someone help me a little bit with that script, for me is simportant to have that transition on hover only for background color.
Thank you.
IE8 doesn't support CSS3 transitions. You'll have to fake it using JavaScript tweens, or settle for IE9 support. IE8 users don't deserve nice looking websites anyway :-)
But if you're in the awkward position of being tasked with creating IE compatible stuff, take a look at this MSDN introduction to Filters and Transitions. It appears that even the IE specific transition filters require JavaScript to work, so you might as well go with the proper JavaScript solution of using jQuery.animate. With a small plugin it can animate colors. Here's an example on JSFiddle.
For some reason the website you suggested doesn't render properly in my browser. However, I think you may be attacking the problem wrongly. I would use jQuery's $.animate() function for this, as it is very cross browser and can animate gradual changes in many css properties.
I need to zoom an image to the mouse cursor using JavaScript. The problem is, all info I found on how to do this is using CSS3 transforms, etc. It needs to be cross-browser compatible and as far as I know, IE 7 (I think even up to 9) isn't compatible with CSS3.
Is there any way I can do this with jQuery or pure JavaScript? Right now, I made it zoom with the mousewheel, but that's the easy part.
http://www.tripwiremagazine.com/2010/02/15-jquery-plugins-to-create-stunning-image-zoom-effects.html
Probably want the 3rd one down.
The JQuery Kabbar image zoomer is crossbrowser compatible:
http://www.ideabonus.com/Kabbar/index.html
I have a slideshow running with textquotes. These quotes contain a custom font provided by cufon. This all works fine.
However when the slideshow fades in or out, the text gets a dark border or shadow. I think its a transparancy issue in IE but I can't find a solution.
I'm using the jQuery plugin Cycle for my slideshow, and it has some IE opacity and cleartype fixes but none work.
Any ideas ?
Thanks!
This is an old question, but because people might still end up here when searching for similar issues, I'd like to add the "solution".
De solution is quite simple really. Use #font-face. Just like Mottie suggested. I ended up switching to a different but very similar font that did not have the beforementioned issues with #font-face.
As far as I can tell it's not possible to fix it by use of cufon in any way that does not involved seeing flickering texts or any other rendering issue.
I'm looking for a JavaScript library that can create round corners on div tags with a transparent background, such that the background colour/image of the parent element is visible at the rounded corners. For an example of rounded corners without a transparent background, have a look at the left menu on this page. Notice that the background of the parent element is not shown at the corners of the menu items.
I need this to work in IE7+ and FF3+ (ideally the other browsers too), and I'd prefer a JQuery plugin.
Does anyone have any good resources or plugins that would help?
JQuery Corner?
I tried 2 different JQuery corner-rounding plugins. This one didn't work in either FF or IE and this one only worked in FF.
However, I found a non-JQuery library that worked perfectly in both, DD_roundies.
It's got a lot of limitations... but the Transparent Background Corners plugin might work in your scenario.
If you can, however, I'd suggest actually doing all the rounding server-side with CSS. It's all just divs within divs, with different padding for the corner divs. It gets rid of the huge performance hit that Safari and IE will take if you have lots of rounding to do, and allows you to have the page still look stylish for your users who don't/can't enable javascript.
How can I replace the scrollbar's images using HTML/CSS?
I have:
scrollbar-base-color: #00acee;
scrollbar-dark-shadow-color: #00acee;
scrollbar-track-color: #ffffff;
scrollbar-face-color: #00acee;
scrollbar-shadow-color: #00acee;
scrollbar-highlight-color: #00acee;
scrollbar-3d-light-color: #00acee;
Can I use an image to accomplish the same idea?
No you can't use images in place of the scroll bar. I'll also just mention that changing the colours is very annoying to users and it only works in IE anyway, so just stick with the standard GUI elements.
For webkit based browsers (for a sufficiently new value of "webkit") there are a collection of propriety CSS properties.
No, you can't use an image in the scroll bar. (Also, even changing the color is only supported in IE in non-standard mode.)
The only way to use images in a scroll bar would be not to use the standard scroll bar at all, but implement a replacement scroll bar yourself using DHTML, or find someone who has done that already.
However, you should be a bit restrictive when changing the look of controls that the users are already used to. If you are not careful you may end up confusing people so that they don't even recognise it as a scroll bar at all...
It is not possible to put an image inside the scrollbar. Customizing the scrollbar is not a W3C spec (IE only CSS), but details on what is possible can be found here:
http://www.quirksmode.org/css/scrollbars.html
as far as i know you cant style a scroll bar with an image.
if you want to use jquery, you can do so easily using this jquery plugin:
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
The trick there is to "simulate" a scroll bar using some divs, which you can style any way you want, since they are just regular divs. After that its easy to just use the scrollTop property and scroll events etc (but you dont really need to know how it works to use it)
For MooTools, there's MooScroller.
Steve
jScrollPane (demo)
or
Interface (demo).
Both using jQuery.
Webkit == Safari and Chrome, but Firefox and Opera have plans to implement similar in upcoming releases. The spec is a killer though, so it may not be worth using even if you have the support.
Mootools has quite a few:
Mooscroller (will be
implemented into Mootools -more),
MooScroll (based on
Solutaire's?)
UvumiScroll
MochaUI's
I imagine it is part of Ext UI, and probably JQ's UI library, but have no personal experience there.
One non-library dependent class: http://www.hesido.com/web.php?page=customscrollbar