Wonder if JQuery can do something like http://ikt.co.id/
look at the flash right side... does it posible? and someone can send me a guide or script sample?
thanks guys!
You might want to take a look at the perspective CSS3 property for the start bit. But that is only currently supported by webkit browsers, such as Safari and Chrome.
From then on, using jQuery's hover event to both stop the perspective and then to shift the padding of each element.
Related
Having a blurred image is one of the main aesthetic features on my website. So far I am using CSS3 filter blur() to create the blur, but I know this is not supported in neither Firefox nor Internet Explorer. I was wondering is there an alternative, maybe JavaScript/jQuery, which will help me create the blurred effect I am looking for?
There are plenty of JS libraries that blur images.
BlurJS
VagueJS
StackBlur Algorhythm
Anyway, if you're using a static blurred image (i.e., no need to unblur/blur it again), I'd say you should go with a normal bitmap image. That might help to avoid unnecessary CPU load on the browser and compatibility issues.
See if blur.js, a jQuery plugin, does the trick for you. Essentially, what it does is move your image to a <canvas>, and does the blurring effects there. See a more comprehensive article on the topic: Effects for the Web!.
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 have an animation using css-sprites. The animation works in webkit and mozilla. Can anyone suggest how I get this to work in IE? I guess I need some javascript?
http://www.arc-bpictures.com/anim.html
Thanks
Try this:
http://jsfiddle.net/zQeaa/
you are using CSS3 animation with sprites, with the prefixes -webkit and -moz. (You should have posted this code to save us the time). But anyway, IE does not support keyframe animations yet. I'd recommend a jscript library such as spritely for cross-browser support.
The title pretty much explains it.
I need some way to keep using body { direction: rtl; } but prevent IE from moving the scrollbar to the left side and keep it on the right. Just like all other browsers. (This is not such a big issue with IE < 9, but IE9 has several bugs when using rtl.)
Anybody got a hack/fix? Thanks.
(Don't mind doing this with jQuery or something...)
You can put everything in a div with dir=rtl, and leave the body alone.
I believe the answer is no, it can't be done.
You could replace the browser toolbar with a custom bar, using a javascript lib like jScrollPane.
Anyway, I think this is a bad idea and you should live with this feature of IE ;)
I am hoping to incorporate custom scrollbars in my site as there are divs with set heights that will overflow. I have managed to get exactly what I want using webkit styling in css however I am aware that there will be issues when looking at the site in Firefox or IE.
As a result, I tried to incorporate the jScrollPane library into my site but its causing all sorts of js "clashes" which is throwing the whole site into a mess!
Are there any simpler methods to customise my scroll bar so that I have cross browser compatibility without adding a new js page to the site?
Alternatively - is there a way I can attach something to the css for when the browser is firefox!?
Thanks
JD
Fast forward to 2017, and there are a lot of good custom scrollbar scripts these days. By good I mean ones that rely on native scrolling mechanics and works on mobile devices too. The one I use is Perfect Scrollbar. Some other good ones can be found here in this blog post.
I'm a little confused with what exactly you're asking for, but if you're looking for a scroll bar of some sort that can be customized with CSS, look no further than jQuery UI's Slider.
You'll have to add some event handlers to do the scrolling, but it shouldn't be too difficult over-all.
Here are some custom scrollbars you can use:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
One off these solutions should work. BTW i use JScrollpane and it works like a charm for me
I went through all of the suggestions above and was disappointed by either of the following issues:
poor cross-browser compatibility
lag
a lot of redundant code/ dependencies (jQuery UI)
Therefore, I've used some CSS trickery and JavaScript (depends on jQuery selectors) to build my own custom scrollbar implementation. The demo is available at https://dev.anuary.com/680a3c94-9651-550f-abca-e853613eb9ce/. The source code is hosted at https://github.com/anuary/jquery-custom-scrollbar.
My approach relies on the native browser scrollbar. However, this implementation does not support horizontal scrollbars.
Just found this, without jQuery, if anyone is interested:
http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/