I've got a script that performs rotation in all modern browsers using jQuery UI and CSS transform property. But I doesn't work in IE. I've managed to make it rotates as expected (around it's center) but I fails when I resize it again.
You can find an example in here http://vremenno.net/examples/jquery-ui-rotation/
If someone could make the same thing for IE (resizing, rotating and dragging) using this (jQuery UI + filter for IE) or another way (raphael js, canvas, etc.) I could also pay for it.
Thanks in advance.
Just pointing in the right direction for IE
have a look at microsoft's Matrix Filter
They have examples and an actual demo page explaining how to do it..
But it would probably take some tackling to integrated it with the jQuery plugins..
Also look at this jquery plugin, jQuery 2D Transformation Plugin
Related
Does someone know how to do svg animations with CSS or small JS ?
Maybe there's a plugin to do that ?
https://wappalyzer.com/
MS-Edge doesn't support SMIL animations.
MS Edge doesn't support animating svg's with css either.
Google Chrome was planning to depricate SMIL (because you can use css animations instead), but they decided not to for now (but they probably will in the future)
So your remaining options are: javascript or give microsoft the finger and decide not to support their browser and use css animations (preferably) or SMIL.
Hope it helps and gives you some insight in what (not to) do. To answer in more detail I really need to know what you are trying to animate. That said, you should find plenty of examples/tutorials when you google for it. If you want to find something specific you can always check the Scalable Vector Graphics (SVG) 1.1 (Second Edition) Specification.
As a purely aesthetical design thing, I'm wondering if it's possible to have an element with a non-opaque background blur out the content behind it.
More specifically, when I have a modal box appear (as part of my custom alert/confirm/prompt setup), currently the background content is "faded" by having a mask over the screen the same colour as the document's background.
What I'd like to do is apply a small amount of blur (just a few pixels) to the masked content to further direct attention to the modal box.
Browser compatibility is not an issue, since as I mentioned it's purely aesthetical. Preferably I'd like it to work in IE9 as a minimum, and Chrome if possible.
Also, no jQuery. By all means, provide an answer in jQuery if you want, but I'll be translating it to raw JS before letting it near my site.
Nowadays you can use the backdrop-filter CSS Property.
CSS:
.modal {
backdrop-filter: blur(10px);
}
Not possible with pure CSS..
You could use (with its limitations) the html2canvas script to render the pages to a canvas.
Then blur that image or the part you want with http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Use the toDataUrl to get the image and use it as a background to your popup...
It is quite an involved process and requires a lot of javascript, but i believe it to be the only way to do it...
This would require javascript (and fairly complex javascript).
From what I understand, it sounds like you're trying to create an 'Aero glass' effect where the content behind a semitransparent element is given a blurred effect. It is not possible with HTML and CSS alone (unless you consider using IE-only filters).
At the moment, there aren't any CSS properties that can dynamically apply image filters like you're describing.
The html2canvas solution presented by Gaby is potentially overkill. You can get the same effect with an iframe of the same website that has been blured (via filter blur or another technique - "-webkit-filter: blur(2px)" only works in chrome as far as I know.
This said, I'd say both solutions are really really hacky and I'd personally never use either myself. I tried this out just to see if it was possible at all out of curiosity.
See a (chrome only) example here: https://s3.amazonaws.com/blur-demo/index.html
I am looking for a way to produce the jQuery mobile horizontal page transition effect on a mobile site without using the full JQuery lib. Does anyone know of a solution using a much smaller stripped down specific JS script? We are trying to keep file sizes to a minimum.
I found a decent solution to this.
Check out 'Non-Jquery Page Transitions lightweight' by fasw.
Demo here:
http://www.fasw.ws/demos/transitions1/slide1.html
And source here:
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
This is 1.7k of JS producing transitions that are just like those produced by the whole mobile jQuery Lib.
I had the exact same question; take a look at the accepted answer by Jasper on my post here.
You could also look at the decoupled widgets here.
I'm new to Flex.
I want to build cool web application in flex.
For displaying content of my site, I use viewstack and button bar. It is ready, but now I'd like to add some animation effect in that.
For example changing the navigation content shows flip animation.
So how do I do that?
Help full link.
This sounds similar to another question: How can I nicely animate between viewstacks.
Perhaps that will help?
That example shows the most basic kind of animation which is readily available using open and widely supported web-standards such as HTML, CSS, and JavaScript. The jQuery library will allow you to do this in just a few lines of code. Do you have an absolute requirement for flex?
anyone know how to re-design scrollbar slider for IE ??not just a color but perform too..
Googling will lead you to a variety of articles on this, including "10 jQuery Custom Scrollbar Plugins".
In general, a redesign requires JavaScript to control the scrolling of an overflowed container.
The best way to do it would be disabling the browser scroll bar and using a javascript solution instead. This, of course, would effect all browsers instead of just IE.
If you want to go that route, I highly recommend jScrollPane.
http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/
After installing just add this to your css:
html, body {overflow: hidden;}
jScrollPAne is great because you can style it easily with CSS or custom images. You can also easily adjust the scrolling speed and other behaviors.
While the extensions mentioned here are useful most of the time , I find that they are not on parity with native scrollbars.
For example a container with dynamic content or on resize will not trigger scrollbar resize which I find is huge limitation.(HTML5 Mutation Observers will probably make this easier in the future.)
For now I prefer scrollbar styling ,which has all the native functionality.
The downside is that is supported only by Webkit - Chrome and Safari browsers.
Still I consider that is a good trade-of... lately I notice Google is using the same technique for their apps (Gmail, G+, Reader, etc.)