Support » Developing with WordPress » iPhone-Contact-Style Alphabetical Scrollbar

  • Hi everyone,

    I’m trying to create an iPhone-contact-style alphabetical scrollbar for this page:
    http://4friendsnihongo.com/mnemonics/

    out of this tutorial:

    https://www.packtpub.com/books/content/simple-alphabetical-glossary-using-jquery

    I watched a couple tutorials on how to make the Jquery accordion and thought it couldn’t be that different. Also don’t worry about including Japanese in your explanation, as long as I can get the Packtpub tutorial running on my page I’m pretty sure I can take it from there. I pasted the HTML from the alphabetical glossary tutorial into my webpage:

    Mnemonics 1

    mnemonics page 2Mnemonics 2

    I then went to my File Manager and followed this path —
    public_html/wp-content/themes/quest (Quest is the name of my theme. It sucks, don’t try it)
    and I added a js folder and inside it put “Alphabetical Scrollbar.js” :

    //jquery-alphabetical-scrollbar
    jQuery(function( $ ){
    //below code is for high-lighting the link and scroll to particular DOM Element as well
    $(“.firstUL li”).each(function() {
    $(this).click(function() { //On click of any Alphabet
    $(“.firstUL li”).removeClass(“selected”); //Initially remove “selected” class if any
    $(this).addClass(“selected”); //Add “selected” class for the clicked one
    elementClick = $(this).attr(“id”); //get respective ‘Id’ for example ‘a’,’b’,’c’.. etc.,
    $(“.content-container”).scrollTo($(“#content-for-“+elementClick), 800);
    //scrollTo particular DOM Element
    $(“.content-container div”).css({‘background-color’ : ‘#ffffff’});
    //set the background color to default, that is white
    $(“.content-container #content-for-“+elementClick).css({‘background-color’ : ‘#d2e2fc’});
    //set the background color to light-blue to that div
    });
    });

    //When “Return to Top” is clicked highlight the first Alphabet that ‘A’ and scroll to top.
    $(‘.return-to-top’).click(function(){
    $(“.firstUL li”).each(function() {
    $(“.firstUL li”).removeClass(“selected”); //Remove classname “selected”
    });
    $(“#a”).addClass(“selected”); //Add a class named “selected” to the first Alphabet
    $(“.content-container”).scrollTo($(“#content-for-a”), 800);
    //This is for scrolling to particular element that is “A” here…
    $(“.content-container div”).css({‘background-color’ : ‘#ffffff’});
    //set the background color to default, that is white
    $(“.content-container #content-for-a”).css({‘background-color’ : ‘#d2e2fc’});
    //set the background color to light-blue to that div
    });
    });
    </script>

    On the same level as the js folder I created a css folder and put “link_sprite_img.jpg” and “jquery.alphabetical scrollbar.css” :

    blue thing

    ===================================================
    <style>

    /* Making margin and padding to 0, since by default the body will be allocated some amount
    of pixels of margin and padding. */
    body{
    margin:0;
    padding:0;
    }

    #body-container{
    width:415px; /* Given a constant width of 415px to body-container div */
    height:500px; /* Given a constant height of 500px to the div */
    margin:0 auto; /* This will align the div to center */
    border:1px solid #3285ef; /* Giving the border */
    }

    #body-container .glossary-container{
    clear:both; /* This will not allow floating elements on either sides */
    }

    #body-container .content-container{
    height:430px; /* Given a constant height of 430px to the div */
    width:415px; /* Given a constant width of 415px to the div */
    overflow:auto; /* Scroll bar is shown when content is more than specified height */
    font-family:’Arial’,Verdana,Tahoma; /* Taken the default font to ‘Arial’ */
    font-size:10pt; /* Making font size to 10 points */
    clear:both; /* This will not allow floating elements on either sides */
    }

    #body-container .content-container div{
    padding-left:10px; /* Left padding given as 10px */
    border-bottom:1px #666666 solid; /* In order to separate each terms given bottom
    border color as #666666 (gray) with 1px */
    }

    #body-container .content-container div h2{
    margin-top:0px; /* Making the top margin to 0px */
    }

    #body-container .content-container p.return-to-top{
    color:#0066FF; /* Giving text color to Return to top text */
    text-decoration:underline; /* The text will be underlined */
    text-align:right; /* Text will be aligned to right */
    margin-right:10px; /* Given some margin 10px to right */
    cursor:pointer; /* Making the cursor to ‘hand’ */
    }

    .firstUL{
    padding:0px 0px 0px 10px; /* Given some padding to left and 0 padding to
    top, right, bottom */
    margin:0px; /* margin to 0px */
    background-color:#3285ef; /* Given background color */
    }

    .firstUL li {
    background:transparent url(images/link_sprite_img.jpg) no-repeat scroll 0 0;
    /* For all li’s(listings) given default background image using CSS Sprite concept */
    display:inline; /* Listings will be placed in a line */
    font-family:’Arial’,Verdana,Tahoma; /* Setting the font to ‘Arial’ */
    font-size:16pt; /* Setting the font size to 16 points */
    font-weight:bold; /* Making the text to bold */
    padding:10px 15px 22px; /* Given some padding to top, right, bottom and left */
    line-height:70px; /* This property specifies the line height */
    cursor:pointer; /* Making the cursor to ‘hand’ */
    }

    .firstUL li.selected{
    background:transparent url(images/link_sprite_img.jpg) no-repeat scroll 0px -57px;
    /* When any listing is highlighted, we are given the background to image using CSS
    Sprite concept */
    color:#ffffff; /* Making the font color ‘white’ */
    font-weight:bold; /* Making text bold */
    }
    </style>

    I also pasted wp_enqueue_script inside of “functions.php” :

    // enqueue alphabetical scrollbar script
    function my_scripts_method() {
    if ( !is_admin() ) {
    wp_enqueue_script(‘jquery’);
    wp_enqueue_script(‘alphabetical-scrollbar’, get_stylesheet_directory_uri() . ‘/js/alphabetical scrollbar.js’,
    array(‘jquery’), false, true);
    }
    }
    add_action(‘wp_enqueue_scripts’, ‘quest_theme_add_alphabetical-scrollbar’);

    This is still what my page looks like now:
    mnemonics page 2Mnemonics 2

    Is anyone both Jquery and WordPress savvy enough to help?
    Thanks for reading,
    Zee

  • The topic ‘iPhone-Contact-Style Alphabetical Scrollbar’ is closed to new replies.