iPhone-Contact-Style Alphabetical Scrollbar

Hi everyone,

I’m trying to create an iPhone-contact-style alphabetical scrollbar for this page:
https://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 page 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” :

===================================================
<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 2

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