Develop Reference

Migrating from vue1 to vue2

I'm trying to migrate this sample dropdown menu from vue1 to vue2.
http://vuejsexamples.com/vue-dropdown-menu/
I've changed the ready method to mounted, removed the json filter and rewrote the for loop in close because it caused errors in the console.
Right now there aren't any errors while I run this, but still, the dropdown doesn't work properly - it does not close when I click outside of the menu.
Can anybody help with migrating this?
new Vue({
el: '#menu',
mounted: function()
{
var self = this
window.addEventListener('click', function(e){
if (! e.target.parentNode.classList.contains('menu__link--toggle'))
{
self.close()
}
}, false)
},
data: {
dropDowns: {
ranking: { open: false}
}
},
methods: {
toggle: function(dropdownName)
{
this.dropDowns[dropdownName].open = !this.dropDowns[dropdownName].open;
},
close: function()
{
for (var i = 0; i < this.dropDowns.length; i++) {
this.dropDowns[dd].open = false;
}
}
}
})
body {
margin: 2rem 0;
}
ul {
list-style: none;
}
.menu {
display: flex;
}
.menu__item {
position: relative;
padding-right: 3rem;
}
.menu__link {
text-transform: uppercase;
}
.menu__icon {
margin: 0 !important;
}
.open .dropdown-menu {
display: block;
}
.dropdown-menu {
font-size: 0.9rem;
position: absolute;
min-width: 130px;
top: 2.2rem;
display: none;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.dropdown-menu__item:first-child .dropdown-menu__link {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.dropdown-menu__item:last-child .dropdown-menu__link {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.dropdown-menu__link {
display: block;
padding: 1rem;
color: blue;
background-color: #fafafa;
}
.dropdown-menu__link:hover {
color: green;
background-color: #ccc;
}
<script src="https://unpkg.com/vue#2.4.2/dist/vue.min.js"></script>
<div id="menu"class="row">
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="#">Home</a>
</li>
<li class="menu__item menu__item--dropdown" v-on:click="toggle('ranking')" v-bind:class="{'open' : dropDowns.ranking.open}">
<a class="menu__link menu__link--toggle" href="#">
<span>Rangliste</span>
<i class="menu__icon fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li class="dropdown-menu__item">
<a class="dropdown-menu__link" href="#">Aktuelle Runde</a>
</li>
<li class="dropdown-menu__item">
<a class="dropdown-menu__link" href="#">Siegerliste</a>
</li>
</ul>
</li>
<li class="menu__item">
<a class="menu__link" href="#">Belegungskalender</a>
</li>
</ul>
<pre>{{ dropDowns }}</pre>
</div>

To fix this I had to make two changes:
First is in the event listener. When I tested it, I got an exception since e.target.parentNode.classList was undefined (when element has no classes). The error is when trying to access function contains of undefined.
So I made a variable and checked for truthy value on it. If it is undefined, it wouldn't contain the desired class, so you could close the menu.
The next and main problem was this part of the code:
for (var i = 0; i < this.dropDowns.length; i++) {
this.DropDowns is an Object, not an Array. Objects don't have length, so you can't use dropDowns.length.
Instead, you'd extract the object keys and loop them, then access the values using the key name.
I used Array.prototype.forEach instead of the loop for a more functional approach, and this is the final result:
new Vue({
el: '#menu',
mounted: function() {
var self = this
window.addEventListener('click', function(e) {
var classList = e.target.parentNode.classList;
//Check if classList is a valid value. If classList is undefined, contains would throw an error.
if (!classList || !classList.contains('menu__link--toggle')) {
self.close()
}
}, false)
},
data: {
dropDowns: {
ranking: {
open: false
}
}
},
methods: {
toggle: function(dropdownName) {
this.dropDowns[dropdownName].open = !this.dropDowns[dropdownName].open;
},
close: function() {
var dropDowns = this.dropDowns;
Object.keys(dropDowns).forEach(function(key, index) {
dropDowns[key].open = false;
});
}
}
})
body {
margin: 2rem 0;
}
ul {
list-style: none;
}
.menu {
display: flex;
}
.menu__item {
position: relative;
padding-right: 3rem;
}
.menu__link {
text-transform: uppercase;
}
.menu__icon {
margin: 0 !important;
}
.open .dropdown-menu {
display: block;
}
.dropdown-menu {
font-size: 0.9rem;
position: absolute;
min-width: 130px;
top: 2.2rem;
display: none;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.dropdown-menu__item:first-child .dropdown-menu__link {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.dropdown-menu__item:last-child .dropdown-menu__link {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.dropdown-menu__link {
display: block;
padding: 1rem;
color: blue;
background-color: #fafafa;
}
.dropdown-menu__link:hover {
color: green;
background-color: #ccc;
}
<script src="https://unpkg.com/vue#2.4.2/dist/vue.min.js"></script>
<div id="menu" class="row">
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="#">Home</a>
</li>
<li class="menu__item menu__item--dropdown" v-on:click="toggle('ranking')" v-bind:class="{'open' : dropDowns.ranking.open}">
<a class="menu__link menu__link--toggle" href="#">
<span>Rangliste</span>
<i class="menu__icon fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li class="dropdown-menu__item">
<a class="dropdown-menu__link" href="#">Aktuelle Runde</a>
</li>
<li class="dropdown-menu__item">
<a class="dropdown-menu__link" href="#">Siegerliste</a>
</li>
</ul>
</li>
<li class="menu__item">
<a class="menu__link" href="#">Belegungskalender</a>
</li>
</ul>
<pre>{{ dropDowns }}</pre>
</div>
I'd recommend that you turn this menu into a component. As it is right now, that is non-reusable instance, and you'll surely need to use this dropdown in more places in your project.

Added $(box).bind("click touchstart", function() { to my logic but not successful on iPad

I have added '$(box).bind("click touchstart", function() {' to my script but still not running on iPad. I'm trying to get this script to work across all devices so that user can select the box nunbers 1-8 and recommendation with a border will show below. any idea why this is breaking on iPad? is there a better way to structure this?
var numbers = document.querySelectorAll(".clicked");
var letters = document.querySelectorAll(".border");
numbers.forEach(function(box, index) {
$(box).bind("click touchstart", function() {
letters.forEach(function(box) {
box.classList.remove("showBorder");
});
var info = document.getElementsByClassName('box-tip')[0];
if (index > 2) {
info.style.left = 11 + ((index - 3) * 45) + 'px';
}
else {
info.style.left = 0 + 'px';
}
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
$(document).on("click", '.clicked', function(){
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:15px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:15px auto;padding:0;}
.showBorder { outline: 1px dashed #233354; outline-offset:1px;}
.box-tip {
display:inline;
margin: auto;
position: relative;
visibility: hidden;
padding-left:10px;
}
.numberCircle {
border-radius: 90%;
font-size: 12px;
border: 2px solid #000;
color: #fff;
background: #000;
padding: 0 4px;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {color:#fff;background-color:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Test some logic one</span>
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div>
<span>Test some logic two</span>
</div>
<div class="box-tip">
<span>Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>

Try the following tweaks:
Detect & store user agent first ua = navigator.userAgent;
Then match it with iPad's and store it event = (ua.match(/iPad/i)) ? "touchstart" : "click";.
Use as $(box).bind(event, function() { //do stuff });.
Working on iPad Air.
var numbers = document.querySelectorAll(".clicked"),
letters = document.querySelectorAll(".border"),
ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";
numbers.forEach(function(box, index) {
$(box).bind(event, function() {
letters.forEach(function(box) {
box.classList.remove("showBorder");
});
var info = document.getElementsByClassName('box-tip')[0];
if (index > 2) {
info.style.left = 11 + ((index - 3) * 45) + 'px';
} else {
info.style.left = 0 + 'px';
}
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
$(document).on("click", '.clicked', function() {
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
});
.list-box li {
display: inline-block;
list-style-type: none;
padding: 1em;
background: red;
}
.list-box {
margin: 15px auto;
padding: 0;
}
.box-sleeve li {
display: inline-block;
list-style-type: none;
padding: 1em;
background: red;
}
.box-sleeve {
margin: 15px auto;
padding: 0;
}
.showBorder {
outline: 1px dashed #233354;
outline-offset: 1px;
}
.box-tip {
display: inline;
margin: auto;
position: relative;
visibility: hidden;
padding-left: 10px;
}
.numberCircle {
border-radius: 90%;
font-size: 12px;
border: 2px solid #000;
color: #fff;
background: #000;
padding: 0 4px;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {
color: #fff;
background-color: #000;
}
/* add these to prevent text move below 768 viewports */
#media (max-width: 768px) {
.box-tip span {
position: fixed;
left: 10px;
}
.box-tip span.numberCircle {
position: fixed;
left: 236px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Test some logic one</span>
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div>
<span>Test some logic two</span>
</div>
<div class="box-tip">
<span>Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>

dynamic fields class change per list element and Js to recognize part of the class

class in the list element change per box and are dynamic fields with width and length being the difference between the two. How to run my JS so that only the first part of the class is recognized without the number so js variable selectors should be '.attribute__swatch--width-' and '.attribute__swatch--length-'. please see my code below:
var numbers = document.querySelectorAll(".attribute__swatch--width-"),
letters = document.querySelectorAll(".attribute__swatch--length-"),
ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";
numbers.forEach(function(box, index) {
$(box).on(event, function() {
letters.forEach(function(box) {
box.classList.remove("showBorder");
});
var info = document.getElementsByClassName('box-tip')[0];
if (index > 2) {
info.style.left = 11 + ((index - 3) * 45) + 'px';
} else {
info.style.left = 0 + 'px';
}
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
$(document).on("click", '.clicked', function() {
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:15px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:15px auto;padding:0;}
.showBorder { outline: 1px dashed #233354; outline-offset:1px;}
.box-tip {
display:inline;
margin: auto;
position: relative;
visibility: hidden;
padding-left:10px;
}
.numberCircle {
border-radius: 90%;
font-size: 12px;
border: 2px solid #000;
color: #fff;
background: #000;
padding: 0 4px;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {color:#fff;background-color:#000;}
#media (max-width: 768px) {
.box-tip span {
position: fixed;
left: 10px;
}
.box-tip span.numberCircle {
position: fixed;
left: 236px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Test some logic one width</span>
<ul class="list-box">
<li class="attribute__swatch--width-14.5">1</li>
<li class="attribute__swatch--width-15">2</li>
<li class="attribute__swatch--width-15.5">3</li>
<li class="attribute__swatch--width-16">4</li>
<li class="attribute__swatch--width-16.5">5</li>
<li class="attribute__swatch--width-17">6</li>
<li class="attribute__swatch--width-17.5">7</li>
<li class="attribute__swatch--width-18">8</li>
</ul>
<div>
<span>Test some logic two length</span>
</div>
<div class="box-tip">
<span>Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="attribute__swatch--length-32">a</li>
<li class="attribute__swatch--length-34">b</li>
<li class="attribute__swatch--length-36">c</li>
<li class="attribute__swatch--length-38">d</li>
<li class="attribute__swatch--length-40">e</li>
<li class="attribute__swatch--length-42">f</li>
<li class="attribute__swatch--length-44">g</li>
<li class="attribute__swatch--length-46">h</li>
</ul>

You can use attribute selectors, specifically starts with (^=) to match:
document.querySelectorAll('[class^="attribute__swatch--width-"]');
document.querySelectorAll('[class^="attribute__swatch--length-"]')

jQuery submenu not displaying correctly

Here is my code here first menu working properly but when applied sub sub menu it's conflicting with previous li. You can check there is a list under food report . when clicking that child is not displaying.
$(document).ready(function() {
$(".menu_li").click(function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$('.child_ul').hide('slow');
$(this).children().children('.plus').show();
$(this).children().children('.minus').hide();
} else {
$(".menu_li").removeClass('selected');
$('.child_ul').hide('slow');
$(this).addClass('selected');
$('.plus').show();
$('.minus').hide();
$(this).children('.child_ul').show('slow');
$(this).children().children('.plus').hide();
$(this).children().children('.minus').show();
}
});
$(".menu_li1").click(function() {
if ($(".menu_li1").hasClass('selected')) {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(".menu_li1").children('.child_ul1').children('.plus1').show();
$(".menu_li1").children('.child_ul1').children('.minus1').hide();
} else {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(".menu_li1").addClass('selected');
$('.plus1').show();
$('.minus1').hide();
$(".menu_li1").children('.child_ul1').show('slow');
$(".menu_li1").children('.child_ul1').children('.plus1').hide();
$(".menu_li1").children('.child_ul1').children('.minus1').show();
}
});
});
.child_ul,
.child_ul1 {
display: none;
}
.left_menu ul li {
cursor: pointer;
}
.child_ul li,
.child_ul1 li {
border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
background: #272525 none repeat scroll 0% 0% !important;
border-bottom: 1px solid #222;
}
.plus {
float: right;
margin-right: 5px;
}
.minus {
float: right;
margin-right: 5px;
}
ul li a {
background: #373737;
height: 30px;
padding-top: 14px;
display: block;
color: #949494;
text-decoration: none;
padding-left: 30px;
border-top: 1px solid #2f2f2f;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
<a>input form
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'></span>
</a>
<ul class='child_ul'>
<li>
কাজের বিনিময়ে খাদ্য
</li>
<li>
সেতু কালভারট
</li>
<li>
ঘূর্ণিঝড় আস্রয় কেন্দ্র
</li>
</ul>
</li>
<li class='menu_li'>
<a>Report
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul'>
<li class='menu_li1'>
<a>food report
<span class='plus1'><img src='plus.png'></span>
<span class='minus1' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul1'>
<li>
কাজের বিনিময়ে খাদ্য সাধারণ
</li>
<li>
কাজের বিনিময়ে খাদ্য সমন্নিত
</li>
</ul>
</li>
<li>
রিপোর্ট আর্কাইভ
</li>
</ul>
</li>

Thanks Tushar your comment helped me. I solved my problem I placed event.stopPropagation(); for my sub sub menu section then it worked properly. So I placed my own answer with snippet if it helped others.
$(".menu_li").click(function(event){
//$('.child_ul').hide('slow');
//$(this).children('.child_ul').toggle('slow');
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
$('.child_ul').hide('slow');
$(this).children().children('.plus').show();
$(this).children().children('.minus').hide();
}else {
$(".menu_li").removeClass('selected');
$('.child_ul').hide('slow');
$(this).addClass('selected');
$('.plus').show();
$('.minus').hide();
$(this).children('.child_ul').show('slow');
$(this).children().children('.plus').hide();
$(this).children().children('.minus').show();
}
});
$(".menu_li1").click(function(event){
//event.preventDefault();
event.stopPropagation();
console.log('brick me!');
//$('.child_ul').hide('slow');
//$(this).children('.child_ul').toggle('slow');
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
$('.child_ul1').hide('slow');
$(this).children('.child_ul1').children('.plus1').show();
$(this).children('.child_ul1').children('.minus1').hide();
}else {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(this).addClass('selected');
$('.plus1').show();
$('.minus1').hide();
$(this).children('.child_ul1').show('slow');
$(this).children('.child_ul1').children('.plus1').hide();
$(this).children('.child_ul1').children('.minus1').show();
}
});
.child_ul,
.child_ul1 {
display: none;
}
.left_menu ul li {
cursor: pointer;
}
.child_ul li,
.child_ul1 li {
border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
background: #272525 none repeat scroll 0% 0% !important;
border-bottom: 1px solid #222;
}
.plus {
float: right;
margin-right: 5px;
}
.minus {
float: right;
margin-right: 5px;
}
ul li a {
background: #373737;
height: 30px;
padding-top: 14px;
display: block;
color: #949494;
text-decoration: none;
padding-left: 30px;
border-top: 1px solid #2f2f2f;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
<a>input form
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'></span>
</a>
<ul class='child_ul'>
<li>
কাজের বিনিময়ে খাদ্য
</li>
<li>
সেতু কালভারট
</li>
<li>
ঘূর্ণিঝড় আস্রয় কেন্দ্র
</li>
</ul>
</li>
<li class='menu_li'>
<a>Report
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul'>
<li class='menu_li1'>
<a>food report
<span class='plus1'><img src='plus.png'></span>
<span class='minus1' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul1'>
<li>
কাজের বিনিময়ে খাদ্য সাধারণ
</li>
<li>
কাজের বিনিময়ে খাদ্য সমন্নিত
</li>
</ul>
</li>
<li>
রিপোর্ট আর্কাইভ
</li>
</ul>
</li>

If event.stopPropogation() doesn't work alone across different browsers try using event.preventDefault() along with event.stopPropogation().

How do I shift content to left in nav bar

So I know this will be a very easy fix, however, I cannot figure it out for the life of me.
How can I shift the letters in this nav bar to the very left?
$(document).ready(function() {
$(".letter").click(function(e) {
$(".letter").parent().removeClass('current');
$(this).parent().addClass('current');
var letter = $(this).html().trim();
$(".submenuDiv").hide();
x = e.clientX - 100;
pos = $(this).position();
y = pos.top + 50;
$("#div" + letter).css({
left: x,
top: y,
position: 'absolute'
});
$("#div" + letter).show();
});
});
.alphabetNav {
background-color: #D9DDDF;
}
.alphabetNav li {
text-decoration: none;
cursor: pointer;
float: left;
display: inline;
list-style: none;
background-color: #E9EDEF;
padding: 3px;
margin: 2px;
}
.letter:hover {
color: red;
}
}
.submenuDiv ul {
display: inline;
}
.submenuDiv ul li {
float: left;
list-style: none;
padding: 5px;
margin: 10px;
background-color: #F1F5F7;
border: solid 1px black;
border-radius: 10px;
font-size: 12px;
}
.submenuDiv {
display: none;
}
.alphabetNav {
width: 550px;
height: 27px
}
.noNav li {
cursor: default;
color: #ccc
}
li.current {
background: #fff
}
.alphabetNav li {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<ul class='alphabetNav'>
<li><a class='letter' id='letterA'>A</a>
</li>
<li><a class='letter' id='letterB'>B</a>
</li>
<li><a class='letter' id='letterC'>C</a>
</li>
<ul class='noNav'>
<li>D</li>
</ul>
<li><a class='letter' id='letterE'>E</a>
</li>
<ul class='noNav'>
<li>F</li>
</ul>
</ul>
<!-- Submenu for letter A -->
<div class='submenuDiv' id='divA'>
<ul>
<li>
Abbotsford-Mission (B.C.)
</li>
</ul>
</div>
<!-- Submenu for letter B -->
<div class='submenuDiv' id='divB'>
<ul>
<li>
Barrie (Ont.)
</li>
<li>
Brantford (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter C -->
<div class='submenuDiv' id='divC'>
<ul>
<li>
Calgary (Alta.)
</li>
</ul>
</div>
<!-- Submenu for letter D -->
<div class='submenuDiv' id='divD'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter E -->
<div class='submenuDiv' id='divE'>
<ul>
<li>
Edmonton (Alta.)
</li>
</ul>
</div>
</body>
Thanks in advance!

All you need is:
.alphabetNav{
padding-left: 0px;
}
Get familiar with using the Web Inspector in the browser, you will get to know what you need to do to fix your problem. :)
Here is a snapshot from Chrome (the green part is for padding):

Remove the padding from the container.
.alphabetNav{
padding:0;
background-color:#D9DDDF;
}
Or just the left padding.
.alphabetNav{
padding-left:0;
background-color:#D9DDDF;
}

Set padding to 0 on alphabetNav