Bootstrap3: Add dropdown exam

by Steve Coffman

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<br/>
<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Type <span class="caret"></span>

        </button>
        <ul class="dropdown-menu">
            <li class="disabled"><a href="#">Exams</a>

            </li>
            <li> <a class="trigger right-caret" href="#">NMBE Exam</a>

            </li>
            <li> <a class="trigger right-caret" href="#">Oral Exam</a>

            </li>
            <li> <a class="trigger right-caret" href="#">SAVE</a>

            </li>
            <li> <a class="trigger right-caret" href="#">Shelf Exam</a>

            </li>
            <li> <a class="trigger right-caret" href="#">Written Test/Exam</a>

            </li>
            <li class="disabled"><a href="#"><strong>Written Assessments</strong></a>

            </li>
            <li> <a class="trigger right-caret" href="#">Case Study Paper</a>

            </li>
            <li> <a class="trigger right-caret" href="#">Essay</a>

            </li>
            <li> <a class="trigger right-caret" href="#">Progress Notes</a>

            </li>
            <li> <a class="trigger right-caret" href="#">Write-Ups</a>

            </li>
            <li role="presentation" class="divider"></li>
            <li class="disabled"><a href="#"><strong>Learning Modules</strong></a>

            </li>
            <li> <a class="trigger right-caret" href="#">CLIPP</a>

            </li>
            <li> <a class="trigger right-caret" href="#">WISE-MD</a>

            </li>
            <li role="presentation" class="divider"></li>
            <li class="disabled"><a href="#"><strong>Other</strong></a>

       ...

CSS

/* 
More information here: http://blog.craigsworks.com/bootstrap-3-disabled-dropdown-links/
**/

/*
Mimic cursor style from native .dropdown-menu > .disabled > a{} styles,
since `pointer-events: none` kills the cursor state, too.
*/
 .dropdown-menu > .disabled {
    cursor: not-allowed;

}
/* The real magic ;) */
 .dropdown-menu > .disabled > a {
    pointer-events: none;
    font-weight:bold;
}

JavaScript

var resizeTextarea = function () {
    this.style.height = "";

    var
    $this = $(this),
        outerHeight = $this.outerHeight(),
        scrollHeight = this.scrollHeight,
        innerHeight = $this.innerHeight(),
        magic = outerHeight - innerHeight;
    this.style.height = scrollHeight + magic + "px";
};

// keydown is too soon and keyup only happens AFTER the character is inserted,
// so the screen would have updated already.
// So just set overflow: hidden on the textarea.
// not sure about cut/paste events.
$('.resizable-textarea')
    .keydown(resizeTextarea)
    .keyup(resizeTextarea)
    .change(resizeTextarea)
    .focus(resizeTextarea);

$(".linkToChangeGrade").click(function (e) {
    //do something
    $('.btnGradeSelectDropdownText').html($(this).attr('data-value'));
    $('#grade_input').val($(this).attr('data-value'));
    e.preventDefault();
});