Image Rotation in IE8 - javascript

I am having problem while rotating the image in IE 8 , it works perfect in other browsers(Chrome,Mozilla,Firefox).
Is there any other way for this except filter progid:DXImageTransform.Microsoft.Basic Image(rotation) as I am having some problem while using this filter in zooming the image in IE 8.
After a perticular level of zoom ,image resets to its normal rotation(Angle 0) before that zoom level everything goes perfect but once this scenario occurs image resets on every zoom level on rotation of image. I think it may be the filters issue.
if any good article is there for the same then kindly share , this can also be helpful.

The transform property is CSS3 and is not supported in IE8. Your only options are to use the filter property, or draw vector shapes using VML.

IE's old filter styles are notoriously buggy. Thank goodness it's less of an issue now that modern IE versions don't need it any more.
Yes, it's possible to use them to do things like rotation and gradients, etc in older IE versions, but you have to be careful to understand that they are ActiveX controls, and not a native part of the browser.
This means that they have some limitations and quirks, some of which cannot be worked around. In particular, you will have problems if you try to combine them with other browser features that modify the element or the layout around it.
I've never tried using zoom in conjunction with a filter rotation, but it sounds like a classic case of features that may not work well together. If that's the case, you may simply have to accept that it's not going to work in old IE versions.
Perhaps you could find an alternative way to do what you want without using zoom? If it's a text element, maybe doubling the font-size would do the trick? Or if it's an image, maybe increasing the width and height and letting the browser scale the image for you.
If none of that works, the final solution may simply be to provide IE8 users with a slightly less exciting version of your site that doesn't do zooming and rotation quite a much as it does in other browsers.

Related

SVG zoom with svg-pan-zoom.js performance issues in Mozilla Firefox

I am using javascript svg-pan-zoom.js (https://github.com/ariutta/svg-pan-zoom) libary to zoom and pan svg in web application. Zooming in Firefox is very slow and laggy, while zooming in Chrome and IE11 works very well (tested with 5MB .svg file that presents floor plan - if file is smaller, this issue is not that noticeable). Panning is working fine. I've read many topics on this issue on forum but I haven't find any solution yet. Does anybody know what is causing this problem and how to fix it?
Example: http://jsfiddle.net/coz3fd0L/3/
Check your refreshRate option. Maybe you set a high number.
If not then you may set a low number (ex. 10 which means max 10 frames per second) and if may improve your problem.
Other than that I don't know of any other problems in svg-pan-zoom. At least if pan is smooth then zoom should be the same.
Maybe your SVG has a lot of edges/curves/nodes and Firefox is simply bad at resizing such things. Or it is bad at resizing large SVGs when matrix transform is used (matrix transform is used for zoom/pan in svg-pan-zoom).
Update: From what I see this is purely a Firefox problem (or the way it is). Just opening the SVG from your example http://imgh.us/test_51.svg takes 100% of CPU (for page scroll).
Also I did try to change matrix transform values manually (to test if it is svg-pan-zoom issue) and it is anyway very slow.
The only solution I see is to try to optimize your SVGs (maybe it is possible to make them simpler: less edges, nodes, do not render white elements...).

CSS3PIE - how trouble free is it for IE6 - IE8

I'm wondering if folks can tell me how trouble free CSS3PIE is for IE6 - IE8 (beyond the known issues). It seems like an excellent addition to allow one to use CSS3 features -- rounded corners, gradients, shadows, etc -- I just have limited time to invest into investigating stability / errors.
Thanks
P.S. Does it turn off automatically in browsers that support CSS3?
It has worked perfectly for me and it only affects IE so you dont have to worry about the other browsers.
Don't worry it's transparent.
The only "real" problem I've been having was with opacity transitions in ie8 :
In order to make a div fade out, you need to apply this css definition to every child element :
filter: inherit
Problem is it doesn't seem to work on the shape elements css3pie generates with css only. I had to modify the minified .htc file as folows :
look for the second occurance of "shape" in the script. It's in a function called 'Aa'.
After this statement:
g=e[a]=f.p.Za("shape");
you can add:
g.style.filter="inherit";
This clearly is a hack but it works great!
It is just for IE8. IE7 deals with transparency differently (http://www.jacklmoore.com/notes/ie-opacity-inheritance)

Rounded corners in IE 7+ with/without JavaScript?

To create rounded corners on my container elements I use this CSS:
border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;
However, IE does not appear to recognize and interpret the border-radius property (at least version 7-8, apparently its slated for version 9).
Is there a workaround for this that's doable entirely in CSS (no script, no extra markup)?
For JavaScript/jQuery solutions: I'd use a solution based on these if I could include a single script that would read my CSS, interpret the border-radius properties (including border-top-left-radius, border-top-right-radius), and apply the corners accordingly. Does this exist?
As far as I know for IE<9 there is no way to do this in pure CSS.
It has been documented that IE9 has border radius support.
There are Javascript workarounds available, but as you said you don't want to implement them, you're a bit stuck.
Unless you want to use images, this works well if you have static size elements, but doesn't work if they change size.
Other than that, I am not aware of any pure CSS solution without a lot of hacky markup.
Update:
I already linked to a resource that can do this for you, the CurvyCorners jQuery will detect the use of -webkit-border-radius and moz-border-radius on DOM elements and duplicate the effect in IE using a series of small DIVs with no images. You can also tell it to apply the effect to specific elements.
Update #2:
After Spudley's suggestion of checking out CSS3Pie, I would very much suggest this as the way to go as it uses the CSS property behaviour which only applies to IE, so it won't screw with the rest of the browsers, also this means no hacky markup added to your page (Curvy Corners adds many small divs) and no use of images.
Hope it helps :)
You ask for a way to do it without scripting and without any extra markup. This simply isn't possible. The feature is missing from IE7/8, and the only way to get IE to do it is by simulating the feature either with scripting or markup.
The best options are ones which only affect IE and are invisible to other browsers. This means that CSS3Pie stands head and shoulders above all the other options, because the technique it uses is only supported by IE. It also allows you to specify your border radius in CSS in the same way as for other browsers, making it more consistent.
Personally, I'd go for this solution every time. It's by far the cleanest solution you'll find for IE. Forget about any jQuery or pure javascript solutions; they almost all have issues of one sort or another, and as for markup options that involve corner graphics; just don't even think about it!
The real benefit that CSS3Pie has over other common solutions is that it uses a vector-graphics based solution, rather than pasting loads of divs into your document as CurvyCorners and others do. This means that the rounded corners CSS3Pie generates are smoothly drawn and works properly with background graphics on both the element itself and those behind it. Most other solutions have serious issues in these areas.
I don't know why you'd object to using scripting - especially HTC-based ones like this which don't get in the way of the other scripts. The absolute worst case is that a user has scripting turned off. And in that case, all they get is square corners; it's not the end of the world.
you can use .htc for border radius. link1 for htc files link2 for htc files
I suggest to have a look at this site. CSS3 Please
The scripting / jQuery solution you are talking about does exist, take a look at jQuery Curvy Corners.

Rotate an image using Javascript

First off, I am currently using JQuery so JQuery solutions viable.
I want to rotate an image by a dynamic X degrees which is calculated every sec.
Now I had this working perfectly using this JqueryRotate plugin
The image is rotated perfectly every sec. But I am trying something a little more complicated now.
I want to rotate 4 transparent images on top of each other. Currently I have four <img> tags all correctly aligned and looking nice and pretty ^_^ but using the JqueryRotate plugin that I mentioned earlier forces a redrawing of the image to rotate it losing the transparency so only the top most image is displayed which obviously isn't going to work.
So, What is a good library / plugin or way of rotating an Image whilst keeping transparency?*
Must work in Opera, Safari, Chrome, Firefox and IE8+
I am hoping not to have to include another library for this but if need be I will do so to create this effect of rotating the 4 images. Thanks in advance.
Raphael is a great library that works in IE (with VML) and other browsers (with SVG). It can rotate images and deal with transparency.
I don't know of any other way to deal with IE. CSS solutions are quite easy, but they don't work in IE.
Another option is to simulate image rotation with CSS sprites (the example does a simulated 3d rotatoin, but 2d is just as easy).
Well it might work even with jQueryRotate plugin, have you asked author (me) about this ? :P I dont read stackoverflow so often to answer that kind of requests :)
You could look at using Canvas. No native support from IE 8 but there is a plugin: http://ajaxian.com/archives/explorer-canvas-updated-for-ie-8-and-more.
If you were willing to live with the plugin requirement, Canvas should make your job easy.
Your best chance is to use canvas and use the IE canvas hack.
The CSS rotate for IE, like most other hacks for IE, uses the filter property, which will almost certainly interfere with the filter hack that's used for transparent images and the filter hack for changing opacity.
The canvas hack, on the other hand, uses native VML instead, which handles everything you need.
http://code.google.com/p/explorercanvas/
I don't know how performant it is, so your mileage may vary there.

Using HTML Canvas for UI elements?

I have a couple of UI elements such as buttons in my web application. I was going to use CSS3's transitions to animate the transition from one background-image to another. I figured out that it's not possible with the current transitions draft at least. So, I was wondering if it would make sense to use Canvas as the button. I'm sure it can handle events, so, I see no problems here. Are there any?
Other than the fact that it's not supported in IE, no.
canvas is not supported in Internet Explorer. Also, canvas animations render very slowly on PCs with little CPU power.
Unless you are writing something that is for a specific target audience (say internal users with Firefox and dual-core cpu) I think you should avoid using canvas for now...
I came to conclusion: using Canvas for UI elements is not a good idea.
For example, if you create a select-box using Canvas, how is the list going to appear in the top of other HTML elements?
Use raphael.js (MIT license) - it give you canvas-like API using SVG (and VML for IE) and works in all amjor browsers including IE6. And its fast (not too slow even in IE)

Categories