Modifying a HTML page to fix several "bugs" add a function to next/previous on a option dropdown
- by Dennis Sylvian
SOF, I've got a few problems plaguing me at the moment and am wondering if anyone could assist me with them.
I'm trying to get Next Class | Previous Class to act as buttons so that when Next Class is clicked it will go to the next item in the dropdown list and for previous it would go to back one.
There used to be a scroll bar that allowed me to scroll the main window left and right, it's missing because (I think it was to do with the scroll left and scroll right function)
The footer at the bottom doesn't show correctly on mobile devices; for some reason it appears completely differently to as it does on a computer. The "bar" practically and the Scroll Left and Scroll buttons don't appear at all on mobile devices.
The scroll left button is unable to be clicked for some reason, I'm unsure what I've done wrong.
Refreshing the page resets the horizontal scroll position to far left (I'm pretty sure this relates to the scroll bar)
I want to also find a way so that on mobile devices the the header will not show the placeholder image, however I can't work out what CSS media tag(s) I should be using.
Latest: http://jsfiddle.net/pwv7u/
Smaller HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DATA DATA DATA DATA DATA DATA DATA DATA</title>
<style type="text/css">
<!--
@import url("nstyle.css");
-->
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
for (var i=0;i<($("table").children().length);i++){
if(readCookie(i))
$($($("table").children()[i]).children()[(readCookie(i))]).toggleClass('selected').siblings().removeClass('selected');
}
$("tr").click(function(){
$(this).toggleClass('selected').siblings().removeClass('selected');
if(readCookie($(this).parent().index())){
if(readCookie($(this).parent().index())==$(this).index())
eraseCookie($(this).parent().index());
else{
eraseCookie($(this).parent().index());
createCookie($(this).parent().index(),$(this).index(),1);
}
}
else
createCookie($(this).parent().index(),$(this).index(),1);
});
// gather CLASS info
var selector = $('.class-selector').on('change', function(){
var id = this.value;
if (id!==''){
scrollToAnchor(id);
}
});
$('a[id^="CLASS"]').each(function(){
var id = this.id,
option = $('<option>',{
value: this.id,
text:this.id
});
selector.append(option);
});
function scrollToAnchor(aid) {
var aTag = $("a[id='" + aid + "']");
$('html,body').animate({
scrollTop: aTag.offset().top - 80
}, 1);
}
$("a.TOPJS").click(function () {
scrollToAnchor('TOP');
});
$("a.KEYJS").click(function () {
scrollToAnchor('KEY');
});
$("a.def").click(function () {
$('#container').animate({
"scrollLeft": "-=204"
}, 200);
});
$("a.abc").click(function () {
$("#container").animate({
"scrollLeft": "+=204"
}, 200);
});
function createCookie(name,value,days) {
var expires;
if (days) {
var date = new Date();
date.setMilliseconds(0);
date.setSeconds(0);
date.setMinutes(0);
date.setHours(0);
date.setDate(date.getDate()+days);
expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) === 0)
return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
});
</script>
</head>
<body>
<div id="header_container">
<div id="header">
<a href="http://site.x/" target="_blank"><img src="http://placehold.it/300x80"></a>
<select class="class-selector">
<option value="">-select class-</option>
</select>
<div class="classcycler">
<a href="#TOP"><font color=#EFEFEF>Next Class</font></a> <font color=red>|</font> <a href="#TOP"><font color=#EFEFEF>Previous Class</font></a>
</div>
<div id="header1">
Semi-Transparent Image <a href="#TOP"><font color=#EFEFEF>Up to Top</font></a> | <a href="#KEY"><font color=#EFEFEF>Down to Key</font></a>
</div>
</div>
</div>
<a id="TOP"></a>
<div id="container">
<table id="gradient-style">
<tbody>
<thead>
<tr>
<th scope="col"><a id="CLASS1"></a>Class 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class<br>Test 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class Data 1</th>
<th scope="col">Class 1<br>Class 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class 1<br>Class 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class 1</th>
<th scope="col">Class 1 Class 1</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> (data text)</th>
<th scope="col">title text</th>
<th scope="col">text</th>
<th scope="col">text</th>
<th scope="col">title text</th>
<th scope="col">title text</th>
</tr>
</thead>
<tr class="ft3"><td>testing data</td><td>testing data</td><td>test</td><td>class b</td><td>test4</td><td><div align="left">data</div></td><td><div align="left"> </div></td><td><div align="left"></div></td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><tr>
<tr class="f3"><td>test</td><td>test</td><td>test</td><td>class a</td><td>test2</td><td><div align="left"> </div></td><td><div align="left"></div></td><td><div align="left"></div></td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><tr>
<thead>
<tr>
<th scope="col"><a id="CLASS2"></a>Class 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class<br>Test 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class Data 2</th>
<th scope="col">Class 2<br>Class 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class 2<br>Class 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class 2</th>
<th scope="col">Class 2 Class 2</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> data text</th>
<th scope="col">title text<br> (data text)</th>
<th scope="col">title text</th>
<th scope="col">text</th>
<th scope="col">text</th>
<th scope="col">title text</th>
<th scope="col">title text</th>
</tr>
</thead>
<tr class="ft3"><td>testing data</td><td>testing data</td><td>test</td><td>class f</td><td>test2</td><td><div align="left">data</div></td><td><div align="left"></div></td><td><div align="left">data</div></td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><tr>
<tr><td>test</td><td>testing data</td><td>test</td><td>class f</td><td>test4</td><td><div align="left">data</div></td><td><div align="left"></div></td><td><div align="left"></div></td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><tr>
<tr class="f3"><td>test</td><td>testing data</td><td>testing data</td><td>class d</td><td>test5</td><td><div align="left">data</div></td><td><div align="left"> </div></td><td><div align="left">data</div></td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><tr>
<tr><td>testing data</td><td>test</td><td>test</td><td>class f</td><td>test5</td><td><div align="left"></div></td><td><div align="left"></div></td><td><div align="left">data</div></td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><tr>
<tr class="f2"><td>test</td><td>test</td><td>testing data</td><td>class a</td><td>test1</td><td><div align="left">data</div></td><td><div align="left"> </div></td><td><div align="left">data</div></td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><tr>
</tbody>
<tfoot>
<tr>
<th class="alt" colspan="34" scope="col"><a id="KEY"></a><img src="http://placehold.it/300x50"></th>
</tr>
<tr>
<td colspan="34"><em><b>DATA DATA</b> - DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA </em></td>
</tr>
<tr>
<td class="alt" colspan="34"><em><b>DAT DATA</b> - DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA </em></td>
</tr>
</tfoot>
</table>
</div>
<div id="footer_container">
<div id="footer">
<a href="http://site.x/" target="_blank"><img src="http://placehold.it/300x80"></a>
<div class="footleft">
<a class="def" href="javascript: void(0);"><font color="#EFEFEF">Scroll Left</font></a>
</div>
<div id="footer1">
<font color="darkblue">Semi-Transparent Image</font> <i>Copyright © 2013 <a href="http://site.x/" target="_blank" style="text-decoration: none"><font color=#ADD8E6>site</font></a>.</i>
</div>
<div id="footer2">
<i>All Rights Reserved.</i>
</div>
<div class="footright">
<a class="abc" href="javascript: void(0);"><font color="#EFEFEF">Scroll Right</font></a>
</div>
</div>
</div>
</body>
</html>
CSS
gradient-style * {
white-space: nowrap;
}
#header .class-selector {
top: 10px;
left: 20px;
position: fixed;
}
#header .classcycler {
top: 45px;
left: 20px;
position: fixed;
font-size:20px;
}
body {
line-height: 1.6em;
background-color: #535353;
overflow-x: scroll;
}
#gradient-style {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 0px;
width: 100%;
text-align: center;
border-collapse: collapse;
}
#gradient-style th {
font-size: 13px;
font-weight: normal;
line-height:250%;
padding-left: 5px;
padding-right: 5px;
background: #535353 url('table-images/gradhead.png') repeat-x;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #ffffff;
}
#gradient-style th.alt {
font-family: "Times New Roman", Serif;
text-align: left;
padding: 10px;
font-size: 26px;
}
#gradient-style td {
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
color: #00000;
border-top: 1px solid #fff;
background: #FFF url('table-images/gradback.png') repeat-x;
}
#gradient-style tr.ft3 td {
color: #00000;
background: #99cde7 url('table-images/gradoverallstudent.png') repeat-x;
font-weight: bold;
}
#gradient-style tr.f1 td {
color: #00000;
background: #99cde7 url('table-images/gradbeststudent.png') repeat-x;
}
#gradient-style tr.f2 td {
color: #00000;
background: #b7e2b6 url('table-images/gradmostattentedstudent.png') repeat-x;
}
#gradient-style tr.f3 td {
color: #00000;
background: #a9cd6c url('table-images/gradleastlatestudtent.png') repeat-x;
}
#gradient-style tfoot tr td {
background: #6FA275;
font-size: 12px;
color: #000;
padding: 10;
text-align: left;
}
#gradient-style tbody tr:hover td,
#gradient-style tbody tr.selected td {
background: #d0dafd url('table-images/gradhover.png') repeat-x;
color: #339;
}
body {
margin: 0;
padding: 0;
}
#header_container {
background: #000000 url('table-images/gradhead.png') repeat-x;
border: 0px solid #666;
height: 80px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
position: relative;
margin: 0 auto;
width: 500px;
height: 100%;
text-align: center;
color: #0c0aad;
}
#header1 {
position: absolute;
width: 125%;
top: 50px;
}
#container {
margin: 0 auto;
overflow: auto;
padding: 80px 0;
width: 100%;
}
#content {
}
#footer_container {
background: #000000 url('table-images/gradhead.png') repeat-x;
border: 0px solid #666;
bottom: 0;
height: 95px;
left: 0;
position: fixed;
width: 100%;
}
#footer {
position: relative;
margin: 0 auto;
height: 100%;
text-align: center;
color: #FFF;
}
#footer1 {
position: absolute;
width: 103%;
top: 50px;
}
#footer2 {
position: absolute;
width: 110%;
top: 70px;
}
#footer .footleft {
top: 45px;
left: 2%;
position: absolute;
font-size:20px;
}
#footer .footright {
top: 45px;
right: 2%;
position: absolute;
font-size:20px;
}
