B_site_fork_jScrollpanel

Site for Anya перенастройка вида

by VitaliyAT

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<body>
    <div id="cmargin">
        <div id="header">header
            <div id="logo">logo</div id="logo">
            <div id="langs">langs
                <div id="eng">eng</div id="eng">
                <div id="rus">rus</div id="rus">
            </div id="langs">
        </div id="header">
        <div id="area" class="scroll-pane">
            <div id="scrollbar_container">
                <div id="scrollbar_content">
                    <!-- <div id="overview"> -->
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>3sadasdasdasd</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                    <p>1</p>
                    <p>2</p>
                ...

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
			   v2.0 | 20110126
			   License: none (public domain)
			*/
			html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
			    margin: 0;
			    padding: 0;
			    border: 0;
			    font-size: 100%;
			    font: inherit;
			    vertical-align: baseline;
			}
			/* HTML5 display-role reset for older browsers */
			article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
			    display: block;
			}
			body {
			    line-height: 1;
			}
			ol, ul {
			    list-style: none;
			}
			blockquote, q {
			    quotes: none;
			}
			blockquote:before, blockquote:after, q:before, q:after {
			    content:'';
			    content: none;
			}
			table {
			    border-collapse: collapse;
			    border-spacing: 0;
			}
			* {
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    -webkit-box-sizing: border-box;
			}
			#cmargin {
			    display: block;
			    padding-left: 12px;
			    padding-right: 12px;
			    /*border: 1px dotted green;*/
			}
			#area {
			    /*margin-top: 100px;*/
			    height: 500px;
			    width: 100%;
			    /*хитрость по централизации элемента с фиксд позишн*/
			    margin-right: 2%;
			    position: absolute;
			    /*overflow: hidden;*/
			    /*css для скролбара*/
			    background-color: #1a82f7;
			    background-image: url(images/fallback-gradient.png);
			    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
			    background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
			...

JavaScript

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
    return this;
}

jQuery.fn.bottomfix = function () {
    this.width(Math.max($(window).outerWidth() - 24) + "px");
    this.css("position", "absolute");
    /*this.css("top", Math.max(0, ($(window).height() - $(this).outerHeight()))+ "px");*/
    this.css("bottom", "0px")
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth(true)) / 2) + $(window).scrollLeft()) + "px");
    return this;
}

jQuery.fn.fheader = function () {
    this.width(Math.max($(window).width() - 24) + "px");
    this.css("position", "absolute");
    /*this.css("top", Math.max(0, ($(window).height() - $(window).height()))+ "px");*/
    this.css("top", "0px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
    return this;
}

jQuery.fn.areaview = function () {
    this.width(Math.max($(window).width() - 24) + "px");
    this.height(Math.max($(window).outerHeight(true) - $('#header').height() - $('#footer').height()) + "px");
    this.css("position", "absolute");
    /*this.css("top", Math.max(0, ($(window).height() - $(window).height()))+ "px");*/
    this.css("top", $('#header').height());
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
    return this;
}

do {
    $('#header').fheader();
    $('#footer').bottomfix();
    $('#area').areaview();
    header_w = $('#header').width();
    footer_w = $('#footer').width();
    console.info(header_w + " " + footer_w);
} while (header_w != footer_w)

/*$('#area').scrollbar();*/
/*$('#area').tinyscrollbar();*/
/*$('.scroll-pane').jScrollPane();*/
$('.scroll-pane').jScrollPane();
/*w_area =...