While using foundation's tabs what would be the best way to transition the content so it looked like it was sliding left or right? JQuery, MotionUI, or any other ideas?
Foundation Sites currently requires jQuery. So you can still use jQuery.
The best solution is to use MotionUI as it gives you all needed transitions and options and eases the development.
In general it is recommended to prefer CSS before JavaScript as CSS Transitions have a much better performance.
Related
The question is pretty straight forward. Should I use CSS or JQuery when styling elements that are in the hover state (does one have any real advantage over the other)? To me, using JS seems like a hassle since the pseudo-classes are so easy to use. Thank you!
You should use CSS wherever possible; it's more efficient.
It also works better with property cascade and with elements created later.
Well it depends. If you want your website also displayed on mobile devices it is wiser to make a hover class and attach it with jquery because mobile browser handle hover very sketchy and different.
Is it possible to recreate the explode animation from the jQuery UI plugin with only HTML and CSS3?
We would like to include this effect in a PhoneGap app built for iOS devices and prefer a pure CSS solution if possible.
Impossible. You need to have at least JavaScript support for these kind of effects.
I've been using the SuckerFish menus for pretty much ever right now... however I need something a little newer. mainly something that will handle drop-down items and fly-outs of variable widths. i.e. I may have 6 drop-down main items, each sub-menu needs to be a variable [dynamic] width AND the fly-outs for each are also of differing widths.
SuckerFish does not handle variable widths for the drop-downs particularly well .... has anyone got any suggestions?
The site is using jQuery, though I am not too hot on javascript 'anything' for navigation a pure CSS would be nice if possible.
-thanks
-sean
CSS has limited animations with limited browser support (looks like only the latest WebKits).
For a cross browser animated menu, you'll have to leverage JavaScript.
jQuery will make doing it quicker and less painful, but is not a requirement.
You could set things up with your usual SuckerFish as a baseline and then add Superfish on top of that to provide the fancy animations and what not. Superfish is built with jQuery so it should drop in fairly easily.
Looking at http://www.css3maker.com/ I see the menu items like "Border Radius" getting animated on mouseover. How was this achieved using CSS?
I did not look how it was done in that website. But jQuery can do wonders with animation. It's a javascript API that is becoming widely used.
CSS animations can be done using the transition property.
Check http://www.css3creations.com/ for demos.
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.)