jQuery Tabbed Interface
June 22nd, 2010
1. Introduction
Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It’s a good “space-saver” and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure for this tabbed interface.
My ideas:
- Buttons on the top, content reside in different DIV elements.
- Click on one of the buttons, it shows the relevant content.
- Click on other buttons, it hides the existing and display the correct one.
Incoming search terms for the article:
- hide the tab in jquery on mouse out
- mouseover effect in studio webdesign
- jquery tabbed interface
- boxtop nav interface
- studio webdesign 4 repeat background disable
- mouseover jquery tab menu
- load selected div to jquery tab
- jquery tab mouseover effect
- jquery tab menu with arrow
- jquery tab menu on mouseover
- jquery tab ideas
- jquery li selected :not animate
- jQuery interface
- jquery beautiful tab
- ideas for interfaces jquery
- div vertical webdesign tab
- tab menu with class
Tags: body, css, design, html, interface, jQuery, menu, structure, tabbed, website
Imitating the WordPress Comment Backend
June 17th, 2010
I think most of you have probably seen the WordPress Ajax comment management backend. Well, let’s imitate it with jQuery. In order to animate the background color, you need include the Color Animations plugin. (view demo)
First line: will add “alt” class to even <div class=”pane”> (to assign the grey background on every other <div >)
Second part: when <a> is clicked, alert a message, and then animate the backgroundColor and opacity of <div>
Incoming search terms for the article:
Tags: ajax, animation, backend, background, comment, javascript, jQuery, opacity, plugin, wordpress