Modifying a HTML page to fix several "bugs" add a function to next/previous on a option dropdown

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Posted by Dennis Sylvian on Stack Overflow See other posts from Stack Overflow or by Dennis Sylvian
Published on 2013-11-13T03:51:50Z Indexed on 2013/11/13 3:52 UTC
Read the original article Hit count: 741

Filed under:
|
|
|
|

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 &copy; 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;
}

© Stack Overflow or respective owner

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Related posts about JavaScript

Related posts about jQuery

Categories cloud

.NET ASP.NET iphone linux python Windows mysql android sql windows-7 html c ruby-on-rails css objective-c ubuntu networking sql-server wpf asp.net-mvc ruby database Xml apache AJAX osx security regex django Performance 12.04 windows-xp mac web-development iphone-sdk vb.net Silverlight apache2 flash server perl best-practices email installation eclipse visual-studio algorithm windows-server-2008 winforms wcf firefox bash dns /Oracle