Saving jQuery accordion state on post1
By Steven Datt2 on 7 January 2011
Tags:
Here’s something I picked up by experimentation during the development of a CRUD system, which managed users, inventory, orders and reservations. The question was, how do I have page specific forms to add, update, and delete entries?
The answer was the accordion.
The problem with using the accordion in this way from a usability perspective is it won’t save the tab you were on if you post a form (e.g. if you have an update form in tab 2, where you select an ID from a drop-down box and submit to populate the form fields with the information in the row selected).
“Remembering” the state can be achieved with a PHP statement:
if (!$_POST['update_select'] && !$_POST['delete_select']) {
?>
<script type='text/javascript'>
$(function() {
$('#name_of_accordion').accordion({ collapsible: true, active: false });
});
</script>
This code says if an update or delete id select form hasn’t been posted, initialise the accordion without any tabs active. (active: false).
Right underneath that, add the next conditional statement:
}
if ($_POST['update_select']) {
?>
<script type='text/javascript'>
$(function() {
$('#name_of_accordion').accordion({ collapsible: true, active: 1 })
});
</script>
This statement adds a new property, active: 1. This tells the accordion that this tab should be open when the page loads (note: if you’re wondering why it’s 1 instead of 2, it’s because arrays always start at 0).
The last part of the statement handles the delete selector:
}
elseif ($_POST['delete_select']) {
?>
<script type='text/javascript'>
$(function() {
$('#name_of_accordion').accordion({ collapsible: true, active: 2 });
});
</script>
This statement does exactly the same as the update_select section, but corresponds to the delete selector. Now simply close off the elseif statement and you’re ready to roll:
}
?>
I hope this tip helps you as much as it helped me!
Photo credit: Crevier 3via Flickr/Creative Commons
Comments:
Leave a comment on Saving jQuery accordion state on post
Share & bookmark this post
What’s happening at Webcredible4
By Trenton Moss5 on 5 January 2011
Tags:
2011 is now here and a happy new year to you all from the Webcredible team! The Webcredible offices shut down between Christmas and New Year and it’s always strange to be back in the office after this time off.
Much of December was spent winding things down in the office, with more and more people seeming to be off on holiday in the run up to Christmas. I spent my time finishing off our selection process for our new head of business development role6, with us offering the job to one of almost 100 applicants.
We also had our annual Christmas party, which was as fun as usual, this year featuring some late-night crimes against music in the karaoke booth. Fortunately, we had it on a Friday night meaning no meetings to get up for the next day. This was in stark contrast to last year’s which was on a Thursday evening, meaning I struggled rather significantly at my meeting the next morning!
We’ve got an exciting year ahead of us here at Webcredible and I’m really looking forward to 2011. One of the items top of the list is our website redesign, which is badly needed. When we rebranded last year7 we didn’t have time to properly look at the website so simply did a bit of a face-lift on the old design so it fitted with the new logo. There’s no fixed go-live date for this but it’ll likely happen in late-Spring.
We’ll also be launching a couple of new services (which I can’t reveal just yet…) which we feel are very innovative and should hopefully do well for us. Watch this space!
Other than this, 2011 should see us continuing to deliver on user experience research and design projects to our clients. This past year we’ve started to do more and more work on mobile apps8 (iPhone and Android mostly) and definitely expect this to increase. We’ve also started getting our feet wet with game usability9 and also expect to be doing more of this throughout the year. We write quite a bit about this too so you can read our game usability blog posts10 if this is your thing.
So, there’s not much else more to say other than… have a great 2011!
Comments:
Leave a comment on What’s happening at Webcredible
Share & bookmark this post
Do-it-yourself ‘Magic Whiteboard’11
By Alexander Baxevanis12 on 4 January 2011
Tags:
User experience design is a visual craft and for each of our projects we tend to dedicate many square metres of wall space for sketches, diagrams & brainstorming notes. Fortunately, we can stick whatever we want to the walls of our office and most of them are constantly covered with whiteboards, sticky notes, flipcharts and Blu-Tack.
Running meetings & workshops outside our office is another story - we often have to use meeting rooms equipped with nothing more than a single flip-chart stand and could do with some extra wall space. In these cases, Magic Whiteboard13 has been a great solution, allowing us to create whiteboard-like surfaces on walls without leaving any marks behind.
However, there were a couple of things I didn’t like about Magic Whiteboard: each A1 sheet costs more than £1, the packaging is rather bulky, and it’s not always easy to come by in a stationary shop. So one day, when I was sitting on a train coming back from a client meeting, I put my engineering hat on and thought:
Wait a second - this looks very similar to the cling film you can buy in the supermarket. I wonder if that would work equally well?
A few days later, I walked into the Tesco across the street from our office, and went out with a package of cling film (priced at about £1.70). I tried sticking it on the wall and write on it, and you can see the results below:
It looks like you can write on it, you can erase it with a standard sponge or just a paper napkin, and it sticks reasonably well, although quite a bit more creased than a Magic whiteboard. It sticks much better on anything that’s a very flat surface such as metal, wood & glass (if you’re lucky enough to be in a meeting room with windows):
I don’t thing we’ll be using this trick anytime soon as a full-on replacement of our Magic Whiteboard stock, but I’m sure it will come in handy one day, if we forget to take our Magic Whiteboard into a meeting and there’s a supermarket nearby!
Do you have any other DIY tricks for setting up the perfect meeting environment? Let us know in the comments below…
Comments:
Leave a comment on Do-it-yourself ‘Magic Whiteboard’
Share & bookmark this post
Online should really mean ‘online’14
By Rhodri Buttrick15 on 23 December 2010
Tags:
As part of my second year university course, we have to do a Careers module. The motives for this course are good as it is obviously to encourage us to start thinking about and planning for the future. Part of the first assignment required us to do a personality test (Myers-Briggs Type Indicator) which they call the “on-line” work. In fact, it was just a Word Document which should be downloaded and ‘completed’ and then posted in an electronic folder.
Completing the form entailed:
- Selecting one of two answers from 28 questions by ticking either box a or box b.
- Adding up the number of a’s and b’s in four groups on a scoring sheet.
- Deciding on the “dominant” characteristics by selecting those with the biggest score.
That may sound simple but:
- The document’s tick boxes couldn’t be ticked; they used a “tick box font”.
- The scoring grid was a nightmare for any dyslexic and probably for a lot of other people below. See the diagram. It even included some un-marked boxes at the bottom, for some reason. Again, the tick boxes were just cosmetic and couldn’t be used in any electronic format.
Despite my good IT skills, I could only do this by printing a copy of the sheets and asking someone to tick the boxes for me (I’d get them muddled up) as we went through the questions and asking them to complete the scoring sheet, again using a pen. Subsequently, I had to update the Word document to look like the hand-written one as the course director wanted it handed in “on-line”. I couldn’t visually follow the grid and so asked someone else to transcribe it. This all took about an hour.
Oddly enough, there was an alternative to the Myer-Briggs called the Jung Typology, which was offered as optional background work. It had a similar set of questions and scoring approach. However, this was truly ‘online’. I selected my answers using a radio button on the screen; when the questions were completed, I submitted the answers and the result and analysis was displayed in a way that I could copy and paste into a Word document to file. This took ten minutes.
The lesson is that a little thought by the person who designed this module could have saved everyone a lot of time, which was essentially wasted on non-valued-added “mechanics”. Anyone designing this type of exercise would be well advised to consider what exactly the participants would actually have to do to complete the assignment.
Comments:
Leave a comment on Online should really mean ‘online’
Share & bookmark this post
Lion OS X and Mac App Store – Apple’s ‘app experience’ opens for Mac16
By Martin Rosenmejer17 on 22 December 2010
Tags:
Apple’s presentation a while ago revealed its plan of launching a new operating system for Mac computers called Lion OS X18 as a successor to the current Snow Leopard OS X. Together with the new OS, Apple is opening an App Store for Mac similar to the one used for its iPhone and iPad.
Not surprisingly, Steve Jobs told the popular operating system iOS for iPhone and iPad has been a source of inspiration when developing the Mac Lion OS X. Thus, the new Lion OS X has an iOS-like ‘app grid’ via the LaunchPad and the new Mac App Store allows users to download free and paid-for apps from the store via their iTunes account.
From a business perspective, it is attractive for Apple to control the distribution of software. It can reduce software theft, and control and encourage the Mac development community, and require a 70/30 split of the revenue from the developers. Although responses are mixed on sites like MacRumours19 and Apple Insider20, many developers are still eager to give up 30% of revenue for the value of having a distribution channel straight on the desktop of all Mac users (running Snow Leopard or Lion OS X). Fortunately, software will still be available from traditional channels, so users have access to software not approved and controlled by Apple.
The inspiration from the mobile platforms is interesting but maybe not a huge surprise. Simplicity is a keyword within UX these years, thus, it seems obvious to look for design inspiration in the simpler mobile/tablet realm, where Apple is doing so well.
From a user perspective, the new Mac ‘app experience’ offers some interesting elements. The App Store will be convenient with instant access to apps, one click to download and payment via iTunes. Like the iOS App Store, Apple is expected to promote a rich development environment for the Mac Store, where about 70% of the apps will be free.
The installation and update processes will be simple, as the apps will auto-install and auto-update like they do on the iOS App Store. Another element taken from the mobile platform is that apps will auto-save and auto-resume, so the app will launch and reopen to the same work-state as when it was closed. Finally, the Lion OS X brings multi-touch capabilities, but it is still to be revealed how this will work. We can only guess how the user experience will be like, but it is indeed an interesting idea to incorporate the simple and quick ‘app experience’ from the mobile platform to the Mac OS X.
Although the new Lion OS X looks interesting, it is surprising Apple has not included dynamic app icons and/or widgets on the Lion OS X desktop as known from the Android mobile OS and Windows 7. Widgets are ‘mini-apps’ e.g. on the desktop or home screen, which can display live content like a news feed, an updated weather forecast or stock information. With the real estate available, it would have been obvious to integrate widgets as part of the desktop screen. Apple’s grid with one-size app icons on the iOS has been called old fashion, and it could have been interesting if it had taken this a little further with the Lion OS X. It would give the user more options to personalise the desktop, and it is a useful and quick way to receive updates instead of always having to launch an app.
Whereas Apple fans have to wait until next summer for the Lion OS X, the Mac App Store21 will open in January 2011 and be available for Snow Leopard OS users.
Comments:
Leave a comment on Lion OS X and Mac App Store – Apple’s ‘app experience’ opens for Mac
No comments:
Post a Comment