Four Part DIV

by Paul Schmitt

HTML

<div class="content">
    <div class="backbutton">backbutton</div>
    <div class="nextbutton">nextbutton</div>
</div>
<div class="indicator">
    <div class="dot selected" onClick="location.href='#a1'"></div>
    <div class="dot unselected" onClick="location.href='#a2'"></div>
    <div class="dot unselected" onClick="location.href='#a3'"></div>
    <div class="dot unselected" onClick="location.href='#a4'"></div>
</div>

CSS

.content {
    display:inline-block;
    width:100%;
    border:2px solid red;
}
.backbutton {
    float:left;
    display:block;
    position:relative;
    width:50%;
    height:32px;
    color:#CCC;
    text-align:center;
    background-color:blue;
    cursor:pointer;
}
.nextbutton {
    float:right;
    display:block;
    position:relative;
    width:50%;
    height:32px;
    color:#CCC;
    text-align:center;
    background-color:green;
    cursor:pointer;
}
.indicator {
    float:left;
    position:absolute;
    display:table;
    left:5.5%;
    top:74%;
    margin:0;
    text-align: center;
    -moz-user-select:none;
    -webkit-user-select:none;
    z-index:10;
}
.dot {
    float:left;
    width:16px;
    height:16px;
    margin-left:8px;
    background-color:#D7D7D7;
}
.dot:hover {
    background-color:#FFF;
    cursor:pointer;
}
.dot.selected {
    background-color:#787878;
}
.dot.unselected {
    background-color:#D7D7D7;
}

JavaScript

$(document).ready(function () {
	    $(".nextbutton").click(function () {
	        slideTrackIndicator();
	    });

	    function slideTrackIndicator() {
	        var numDots = $(".dot").length,
	            $currentDot = $('.selected'),
	            currentDotNumber = $currentDot.index();
	        if (currentDotNumber < numDots - 1) {
	            $currentDot.toggleClass("selected unselected").next().toggleClass("selected unselected");
	        } else {
	            $currentDot.toggleClass("selected unselected").siblings().eq(0).toggleClass("selected unselected");
	        }
	    }
	});

$(document).ready(function () {
	    $(".backbutton").click(function () {
	        slideTrackIndicator();
	    });

	    function slideTrackIndicator() {
	        var numDots = $(".dot").length,
	            $currentDot = $('.selected'),
	            currentDotNumber = $currentDot.index();
	        if (currentDotNumber < numDots - 1) {
	            $currentDot.toggleClass("selected unselected").prev().toggleClass("selected unselected");
	        } else {
	            $currentDot.toggleClass("selected unselected").siblings().eq(0).toggleClass("selected unselected");
	        }
	    }
	});