1. Dargonight's Avatar
    On my web site I use jQuery to open and close <div> to save space in displaying information. When I move it to a mobile app, it doesn't work. I did conversion using from web to mobile using PhoneGap 2.0. Any idea on how to fix this or do I just need to display separate pages for each <div>?

    thx

    here the show/hide jquery:

    // JavaScript Document
    $(".mainDiv ul li a.topLevel").each(function () {
    if ($(this).attr("class") == "on") {
    $(this).attr("title", $(this).text() + ", Submenu Open");
    $(this).next().show();
    }
    else {
    $(this).attr("title", $(this).text() + ", Submenu Closed");
    $(this).next().hide();
    }
    });

    $(".mainDiv ul li a.topLevel").click(function () {
    var $checkSub = $(this).next("div");
    if (!$checkSub.is(":visible")) {
    $(".mainDiv li div.mainDivSub").slideUp("fast", function () {
    $(this).closest("li").find("a:first").removeClass("on");
    $(this).closest("li").find("a:first").attr("title", $(this).parent().find("a:first").text() + ", Submenu Closed");
    });
    $checkSub.slideDown("fast").focus();
    $(this).addClass("on");
    $(this).attr("title", $(this).text() + ", Submenu Open");
    }
    else {
    $(this).removeClass("on");
    $checkSub.slideUp("fast");
    $(this).attr("title", $(this).text() + ", Submenu Closed");
    }
    return false;
    });

    var $checkSub = $("div.mainDivSub");
    var $divWithFocus = null;

    $checkSub.focus(function () {
    $divWithFocus = $(this);
    }).blur(function () {
    $divWithFocus = null;
    });

    $(document).keypress(function (event) {
    if (event.keyCode == 27) {
    $divWithFocus.slideUp("fast");
    var $link = $divWithFocus.prev();
    $link.removeClass("on");
    $link.attr("title", $link.text() + ", Submenu Closed");
    $link.focus();
    }
    });

    and part of the HTML

    <div id="container">
    <div id="header">
    <h1><a href="#">PDF Requirements</a></h1>
    <div class="mainDiv" id="utility" role="navigation">
    <ul class="mainDivUL">
    <li>
    <a class="toplevel" href="#"><span class="mainDivHeader">Document Properties</span></a>
    <div class="mainDivSub">
    <ol>
    <li>
    Ensure that the document is not scanned and content contained in the document is not scanned.
    </li>
    <li>
    Scanned content must provide equivalent textual representation that can be interpeted by assistive technology.
    </li>
    <li>
    The language of the document was been set under File Properties, Advanced.
    </li>
    <li>
    The title and and author's name is in the File Properties under Description. Email addresses are not acceptable, Name(s) must be separated by spaces and provide academic credentials if available.
    </li>
    <li>
    Set the Page Order under Page Properties. This is also know as Tab Order.
    </li>
    <li>
    Ensure that the Tag Order, in the Tags Tress, is correct. Assistive technology will use the Tags Trees to determine how to read the document.
    </li>
    <li>
    Make sure the Reading Order is correct on the page.
    </li>
    <li>
    Ensure that Unicode codes are properly mapped or set to background if it does not provide content to the document.
    </li>
    </ol>
    </div>
    </li>
    08-24-2012 03:21 PM
LINK TO POST COPIED TO CLIPBOARD