Develop Reference

HTML Side Menu(vertical) scroll to active item on page load

My website has a vertical side menu with around 20 items. When a item is click it loads the destination, but the side menu needs to be again scrolled to find the active items if at the bottom of the side menu. Now how do I make the side menu auto scroll to active item on page load. Code snippet as below. Please help.
<nav class="menu">
<ul class="sidebar-menu metismenu" id="sidebar-menu">
<li class="">
Page 1
</li>
<li class="">
Page 2
</li>
<li class="">
Page 3
</li>
<li class="">
Page 4
</li>
<li class="">
Page 5
</li>
<li class="">
Page 6
</li>
<li class="">
Page 7
</li>
.......
<li class="active">
Page 20
</li>
</ul>
</nav>

If you are using javascript/JQuery then you one way to do this is by saving the selected item index in localStorage.Then fetch the saved index on window.onload/document.ready and then use scrollIntoView/animate to autoscroll to active item.

You should ideally be using two , one for the menu and one for the display destination page. You can have an id tag for each menu item and set it to have the focus. So for example:
<li id="6" class="">
Page 6
</li>
You can use document.getElementById("6").focus() to set the focus to the 6th item. Aternatively, you can make the menu div section non-scrolling.

Aria completed state?

When programming/designing for accessibility, is there a proper method for conveying that a particular item is "completed"?
Currently building some accessible e-learning. In a particular activity there are a number of buttons that must be pressed, where activating each button reveals further information in a separate panel. In this particular example, I am using a tablist.
Once all tabs have been visited, the user can move forward to the next activity.
Would changing the aria-label's to something like "Tab 1 - complete" or "Tab 1 - not complete" suffice for indicating their state?
Update 1
For clarification, in this particular example I'm using a tablist, using the methodology from Inclusive Components - Tabbed Interfaces. The unordered list is required to have a role="tablist", so I can't use the role="progressbar".
ie:
<ul role="tablist">
<li role="presentation"> <a role="tab" href="javascript:void(0)">Tab 1</a> </li>
<li role="presentation"> <a role="tab" href="javascript:void(0)">Tab 2</a> </li>
</ul>

You can tell assistive technologies such as screen readers that an element shows progress by giving it role="progressbar". Then, you can set up minimum and maximum values with aria-valuemin and aria-valuemax, respectively, and display the current value with aria-valuenow. By default, screen readers speak aria-valuenow as a percentage based on min and max. However, you can set aria-valuetext to tell the screen reader to present the value in a different format. It can look something like this:
<ol tabindex="0" role="progressbar" aria-valuemin="1" aria-valuemax="3" aria-valuenow="1" aria-valuetext="Step 1 of 3: First Step">
<li>First Step</li>
<li>Second Step</li>
<li>Last Step</li>
</ol>
Giving the element tabindex="0" will assure that the user tabs to it after each completed step, thus getting the new information.
Be sure to give the non-current sections of content aria-hidden="true" to make the screen reader skip them.
Update 1
In the case of role="tablist" there are a few different elements that can assist you. In your case, you can use aria-hidden and aria-selected as your states and control focus with tabindex. So let's say the screen reader user is on the first tab, your code can look something like this:
<ul role="tablist">
<li role="presentation">
<a role="tab" href="#section1" id="tab1" aria-selected="true" tabindex="0">Tab 1</a>
</li>
<li role="presentation">
<a role="tab" href="#section2" id="tab2" aria-selected="false" tabindex="-1">Tab 2</a>
</li>
</ul>
<section role="tabpanel" id="section1" aria-labelledby="tab1" aria-hidden="false">
// Tab1 content here
</section>
<section role="tabpanel" id="section2" aria-labelledby="tab2" aria-hidden="true">
// Tab2 content here
</section>
With this setup your screen reader user is unable to tab to the second tab, and its content is also hidden to the screen reader. You can trigger the appropriate tab when the screen reader user clicks the corresponding button by changing tabindex, aria-hidden, and aria-selected.
If you want to inform the screen reader user of the progress you can simply give the buttons aria-label. For example, the button for tab 1 can have: aria-label="Complete step 1 out of 3".
Hope it helps!

Navbar dropdown list auto open and auto close?

I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.

You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});

Open external HTML snippet as popup in jquery mobile

ok I am a bit rusty with jquery and new to jquery mobile so go easy on me ;). Ok I am creating a mobile website with jquery mobile and it has a lot of pages so rather than keep all the pages in one large multi-page template I have them in seperate page templates. I have a menu button that when clicked a popup appears with a listview menu in it, this works but I have to put the menu in every page template but I would rather just keep the menu in its own html file or even just somewhere in the dom that is outside the jquery mobile page structure so that I dont have to repeat the code in each page template.
How to I load the menu into the popup when its located in its own file? Failing that how do I load a div into that popup that is not inside a jquery mobile page?
My button:
Menu
my listview menu html:
<div data-role="popup" id="main-menu">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Menu
</li>
<li data-theme="c">
<a href="#how-it-works" data-transition="slide">
How it Works
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/buy-now/levels.html" data-transition="slide">
Order Now
</a>
</li>
<li data-theme="c">
<a href="#faq" data-transition="slide">
FAQ
</a>
</li>
<li data-theme="c">
<a href="#help" data-transition="slide">
Help
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/support.html" data-transition="slide">
Support
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/" data-transition="slide">
Main Website
</a>
</li>
</ul>
</div>

In a general sense, here is how you can load html from an external file into a div, beyon that, I am not quite certain what you are trying to do exactly:
$('#myDiv').load('somepath/somefile.html');

I have the exact same problematic, I have written something that displays the popup but partially renders the CSS [edit] a few more tries and I was able to make it render CSS perfectly:
$('[data-role=page]').live('pageshow', function (event, ui) {
$('#'+event.target.id).find('[id=main-menu]').load('menu.html', function(){
$('#'+event.target.id).find('[id=main-menu]').trigger('create');
});
});
Btw your main html page should contain the div declaration:
<div data-role="popup" id="main-menu"></div>
Menu
And your menu.html should contain only what's inside the div:
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<!-- .... listview content ... -->
</ul>

Twitter Bootstrap tab shown event not firing on page load

In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)
I tried adding this to the above script, to see if triggering it manually could work:
$('a[data-toggle="tab"]:first').tab 'show'
... but it didn't.
This is the HTML code I use in my view
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<%=t :updates, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :activity, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :articles, :scope => 'user.profile.sections'%>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="updates">
</div>
<div class="tab-pane" id="activity">
</div>
<div class="tab-pane" id="articles">
</div>
</div>
</div>
Any clue?

Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.
JSFiddle

You can trigger the event manually when you tell the page to show the tab:
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");

I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's
In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs
You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs

After my
$("#modal").modal('show');
I added this and it worked just fine:
$('a[data-toggle="tab"]:first').click();