SRC_DIR = src
BUILD_DIR = build
+
DOCS_DIR = docs
+DIST_DIR = dist
MODULES = jquery event fx ajax
-JQ = jquery-svn.js
-JQ_PACK = jquery-svn.pack.js
+JQ = ${DIST_DIR}/jquery.js
+JQ_LITE = ${DIST_DIR}/jquery.lite.js
+JQ_PACK = ${DIST_DIR}/jquery.pack.js
+
+all: jquery lite pack docs
+
+${DIST_DIR}:
+ mkdir -p ${DIST_DIR}
-all: ${JQ} ${JQ_PACK} docs
+jquery: ${DIST_DIR} ${JQ}
-${JQ}:
- @@echo "Building jquery-svn.js";
+${JQ}:
+ @@echo "Building" ${JQ};
@@for f in ${MODULES}; do \
echo "Adding module:" $$f;\
cat ${SRC_DIR}/$$f/$$f.js >> ${JQ};\
done
- @@echo "jquery-svn.js built.";
+ @@echo ${JQ} "built.";
-${JQ_PACK}: ${JQ}
- @@echo "Building jquery-svn.pack.js";
+lite: ${JQ_LITE}
+
+${JQ_LITE}: ${JQ}
+ @@echo "Building" ${JQ_LITE};
+ java -jar ${BUILD_DIR}/js.jar ${BUILD_DIR}/lite.js ${JQ} ${JQ_LITE}
+ @@echo ${JQ_LITE} "built.";
- cd ${BUILD_DIR} && java -jar js.jar build.js ../${JQ} ../${JQ_PACK}
+pack: ${JQ_PACK}
- @@echo "jquery-svn.pack.js built.";
+${JQ_PACK}: ${JQ}
+ @@echo "Building" ${JQ_PACK};
+ java -jar ${BUILD_DIR}/js.jar ${BUILD_DIR}/build.js ${JQ} ${JQ_PACK}
+ @@echo ${JQ_PACK} "built.";
test:
docs: ${JQ}
@@echo "Building Documentation";
- cd ${BUILD_DIR} && java -jar js.jar docs.js ../${JQ} ../${DOCS_DIR}
+ java -jar ${BUILD_DIR}/js.jar ${BUILD_DIR}/docs.js ${JQ} ${DOCS_DIR}
@@echo "Documentation built.";
clean:
- rm ${JQ}
+ rm -rf ${DIST_DIR}
+ rm -f ${DOCS_DIR}/index.xml
+ rm -f ${DOCS_DIR}/data/*
-load("js/ParseMaster.js", "js/pack.js", "js/writeFile.js");
+load("build/js/ParseMaster.js", "build/js/pack.js", "build/js/writeFile.js");
var out = readFile( arguments[0] );
-load("js/json.js");
-load("js/xml.js");
-load("js/writeFile.js");
+load("build/js/json.js", "build/js/xml.js", "build/js/writeFile.js");
var types = {
jQuery: "A jQuery object.",
--- /dev/null
+var types = {
+ jQuery: "A jQuery object.",
+ Object: "A simple Javascript object. For example, it could be a String or a Number.",
+ String: "A string of characters.",
+ Number: "A numeric valid.",
+ Element: "The Javascript object representation of a DOM Element.",
+ Hash: "A Javascript object that contains key/value pairs in the form of properties and values.",
+ "Array<Element>": "An Array of DOM Elements.",
+ "Array<String>": "An Array of strings.",
+ Function: "A reference to a Javascript function."
+};
+
+$(document).ready(function(){
+ $("span.tooltip").ToolTipDemo('#fff');
+
+ $("a.name").click(function(){
+ $("div.more,div.short",this.parentNode.parentNode).toggle().find("div.desc",function(){
+ $(this).html( $(this).html().replace(/\n\n/g, "<br/><br/>") );
+ });
+ return false;
+ });
+
+ $("#docs").alphaPager( 1 );
+});
--- /dev/null
+$.fn.alphaPager = function(fn,type) {
+ type = type || "char";
+
+ if ( fn == undefined ) {
+ fn = function(a){ return _clean( $.fn.text.apply( a.childNodes ) ); };
+ } else if ( fn.constructor == Number ) {
+ var n = fn;
+ fn = function(a){ return _clean( $.fn.text.apply( [a.childNodes[ n ]] ) ); };
+ }
+
+ function _clean(a){
+ switch (type) {
+ case "char":
+ return a.substr(0,1).toUpperCase();
+ case "word":
+ return /^([a-z0-9]+)/.exec(a)[1];
+ }
+ return a;
+ }
+
+ return this.pager( fn );
+};
+
+
+$.fn.pager = function(step) {
+ var types = {
+ UL: "li",
+ OL: "li",
+ DL: "dt",
+ TABLE: "tr"
+ };
+
+ return this.each(function(){
+ var type = types[this.nodeName];
+ var pagedUI = type == "tr" ? $("tbody",this) : $(this);
+ var rows = $(type, pagedUI);
+ var curPage = 0;
+ var names = [], num = [];
+
+ if ( !step || step.constructor != Function ) {
+ step = step || 10;
+
+ if (rows.length > step)
+ for ( var i = 0; i <= rows.length; i += step ) {
+ names.push( names.length + 1 );
+ num.push( [ i, step ] );
+ }
+ } else {
+ var last;
+ rows.each(function(){
+ var l = step( this );
+ if ( l != last ) {
+ names.push( l );
+ var pre = num.length ? num[ num.length - 1 ][0] + num[ num.length - 1 ][1] : 0;
+
+ num.push( [ pre, 0 ] );
+ last = l;
+ }
+
+ num[ num.length - 1 ][1]++;
+ });
+ }
+
+ if ( names.length > 1 ) {
+ var pager = $(this).prev("ul.nav-page").empty();
+
+ if ( !pager.length )
+ pager = $("<ul class='nav-page'></ul>");
+
+ for ( var i = 0; i < names.length; i++ )
+ $("<a href=''></a>").rel( i ).html( names[i] ).click(function() {
+ return handleCrop( this.rel );
+ }).wrap("<li></li>").parent().appendTo(pager);
+
+ pager.insertBefore( this );
+
+ var prev = $("<a href=''>« Prev</a>").click(function(){
+ return handleCrop( --curPage );
+ }).wrap("<li class='prev'></li>").parent().prependTo(pager);
+
+ var next = $("<a href=''>Next »</a>").click(function(){
+ return handleCrop( ++curPage );
+ }).wrap("<li class='next'></li>").parent().appendTo(pager);
+
+ handleCrop( 0 );
+ }
+
+ function handleCrop( page ) {
+ curPage = page - 0;
+ var s = num[ curPage ][0];
+ var e = num[ curPage ][1];
+
+ if ( !curPage ) prev.hide();
+ else prev.show();
+
+ if ( curPage == names.length - 1 ) next.hide();
+ else next.show();
+
+ $("li",pager)
+ .removeClass("cur")
+ .eq( curPage + 1 )
+ .addClass("cur");
+
+ pagedUI.empty().append(
+ jQuery.merge( rows, [] ).slice( s, s + e )
+ );
+
+ return false;
+ }
+ });
+};
--- /dev/null
+/*
+Description:
+
+ jQuery ToolTip Demo. Demo of how to add elements and get mouse coordinates
+ There is also a ToolTip plugin found at http://www.eyecon.ro/interface/,
+ which uses a CSS class to style the tooltip, but shows it below the input/anchor, rather than where the mouse is
+
+Usage:
+
+ $(window).load(
+ function()
+ {
+ $("a,input").ToolTipDemo('#fff');
+ }
+ );
+
+Parameters:
+
+ bgcolour : Background colour
+*/
+$.fn.ToolTipDemo = function(bgcolour)
+{
+ this.mouseover(
+ function(e)
+ {
+ if((!this.title && !this.alt) && !this.tooltipset) return;
+ // get mouse coordinates
+ // based on code from http://www.quirksmode.org/js/events_properties.html
+ var mouseX = e.pageX || (e.clientX ? e.clientX + document.body.scrollLeft : 0);
+ var mouseY = e.pageY || (e.clientY ? e.clientY + document.body.scrollTop : 0);
+ mouseX += 10;
+ mouseY += 10;
+ bgcolour = bgcolour || "#eee";
+ // if there is no sibling after this one, or the next siblings className is not tooltipdemo
+ if(!this.nextSibling || this.nextSibling.className != "tooltipdemo")
+ {
+ // create a div and style it
+ var div = document.createElement("div");
+ $(div).css(
+ {
+ border: "2px outset #ddd",
+ padding: "2px",
+ backgroundColor: bgcolour,
+ position: "absolute"
+ })
+ // add the title/alt attribute to it
+ .html((this.title || this.alt)).addClass("tooltipdemo");
+ this.title = "";
+ this.alt = "";
+ if(this.nextSibling)
+ {
+ this.parentNode.insertBefore(div, this.nextSibling);
+ }
+ else
+ {
+ this.parentNode.appendChild(div);
+ }
+ this.tooltipset = true;
+ }
+ $(this.nextSibling).show().css({left: mouseX + "px", top: mouseY + 3 + "px"});
+ }
+ ).mouseout(
+ function()
+ {
+ if(this.nextSibling && this.nextSibling.className == "tooltipdemo")
+ {
+ $(this.nextSibling).hide();
+ }
+ }
+ );
+ return this;
+}
--- /dev/null
+<?xml version="1.0" encoding="ISO-8859-1"?>
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+
+<xsl:template match="/*">
+<html>
+<head>
+ <title>jQuery Docs - API</title>
+ <link rel="stylesheet" href="style/style.css"/>
+ <script src="../jquery-svn.js"></script>
+ <script src="js/tooltip.js"></script>
+ <script src="js/pager.js"></script>
+ <script src="js/doc2.js"></script>
+</head>
+<body>
+ <h1>jQuery Docs - API</h1>
+ <ul id="docs">
+ <xsl:for-each select="method[not(@private)]">
+ <xsl:sort select="@name"/>
+ <xsl:sort select="count(params)"/>
+ <li>
+ <span class='type'><span title='TYPE' class='tooltip'><xsl:value-of select="@type"/></span></span>
+ <span class='fn'>
+ <a href='#{@name}' class='name' title=''><xsl:value-of select="@name"/></a>
+ <xsl:if test="not(@property)">(
+ <xsl:for-each select="params">
+ <span class='arg-type tooltip' title='TYPE'><xsl:value-of select="@type"/></span><xsl:text> </xsl:text>
+ <span class='arg-name tooltip' title='{@desc}'><xsl:value-of select="@name"/></span>
+ <xsl:if test="position() != last()">
+ <xsl:if test="@any"> or </xsl:if>
+ <xsl:if test="not(@any)">, </xsl:if>
+ </xsl:if>
+ </xsl:for-each>
+ )</xsl:if>
+ </span>
+ <div class='short'>
+ <xsl:value-of select="@short"/>
+ </div>
+ <div class='more'>
+ <div class='desc'>
+ <xsl:value-of select="desc"/>
+ </div>
+ <xsl:for-each select="examples">
+ <div class='example'>
+ <h5>Example:</h5>
+ <xsl:if test="desc">
+ <p><xsl:value-of select="desc"/></p>
+ </xsl:if>
+ <pre><xsl:value-of select="code"/></pre>
+ <xsl:if test="before">
+ <b>HTML:</b>
+ <pre><xsl:value-of select="before"/></pre>
+ </xsl:if>
+ <xsl:if test="result">
+ <b>Result:</b>
+ <pre><xsl:value-of select="result"/></pre>
+ </xsl:if>
+ </div>
+ </xsl:for-each>
+ </div>
+ </li>
+ </xsl:for-each>
+ </ul>
+</body>
+</html>
+</xsl:template>
+
+</xsl:stylesheet>
--- /dev/null
+html, body {
+ background: #212121;
+ font-family: Arial;
+ font-size: 14px;
+ text-align: center;
+}
+
+h1 {
+ margin: 15px auto;
+ text-align: left;
+ width: 600px;
+ color: #FFF;
+}
+
+ul.nav-page {
+ margin: 15px auto;
+ width: 600px;
+ padding: 0;
+ list-style: none;
+ position: relative;
+}
+
+ul.nav-page li {
+ padding: 0 3px;
+ display: inline;
+}
+
+ul.nav-page li.cur a {
+ font-weight: bold;
+ font-size: 16px;
+}
+
+ul.nav-page li a {
+ font-size: 14px;
+ color: #FFF;
+}
+
+ul.nav-page li.prev {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+ul.nav-page li.next {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+}
+
+ul.nav-page li.next a, ul.nav-page li.prev a {
+ font-size: 16px;
+ font-weight: bold;
+}
+
+ul#docs {
+ list-style: none;
+ margin: 0 auto;
+ padding: 5px;
+ width: 600px;
+ background: #FFF;
+ text-align: left;
+}
+
+ul#docs li {
+ margin: 5px 0;
+}
+
+ul#docs li span.tooltip {
+ border-bottom: 1px dashed #666;
+}
+
+ul#docs li a.name {
+ font-weight: bold;
+ text-decoration: none;
+}
+
+ul#docs li span.type {
+ display: block;
+ float: left;
+ color: #666;
+ width: 100px;
+ margin-right: 10px;
+ font-size: 12px;
+ line-height: 18px;
+ font-family: Courier;
+ text-align: right;
+}
+
+ul#docs li span.arg-type {
+ color: #666;
+}
+
+ul#docs li div.short {
+ font-size: 12px;
+ color: #666;
+ margin-left: 110px;
+ margin-top: 5px;
+}
+
+ul#docs span.fn {
+ font-family: Courier;
+}
+
+ul#docs div.tooltipdemo {
+ font-size: 12px;
+ font-family: Arial;
+}
+
+ul#docs li div.more {
+ display: none;
+ margin-left: 110px;
+ margin-top: 5px;
+}
+
+ul#docs li div.example {
+ overflow: auto;
+}
+
+ul#docs li div.example h5 {
+ font-size: 16px;
+}
+
+ul#docs li div.example pre {
+ color: #4F4;
+ background: #000;
+ padding: 5px;
+ overflow: auto;
+}
+++ /dev/null
-var types = {
- jQuery: "A jQuery object.",
- Object: "A simple Javascript object. For example, it could be a String or a Number.",
- String: "A string of characters.",
- Number: "A numeric valid.",
- Element: "The Javascript object representation of a DOM Element.",
- Hash: "A Javascript object that contains key/value pairs in the form of properties and values.",
- "Array<Element>": "An Array of DOM Elements.",
- "Array<String>": "An Array of strings.",
- Function: "A reference to a Javascript function."
-};
-
-$(document).ready(function(){
- $("span.tooltip").ToolTipDemo('#fff');
-
- $("a.name").click(function(){
- $("div.more,div.short",this.parentNode.parentNode).toggle().find("div.desc",function(){
- $(this).html( $(this).html().replace(/\n\n/g, "<br/><br/>") );
- });
- return false;
- });
-
- $("#docs").alphaPager( 1 );
-});
+++ /dev/null
-$.fn.alphaPager = function(fn,type) {
- type = type || "char";
-
- if ( fn == undefined ) {
- fn = function(a){ return _clean( $.fn.text.apply( a.childNodes ) ); };
- } else if ( fn.constructor == Number ) {
- var n = fn;
- fn = function(a){ return _clean( $.fn.text.apply( [a.childNodes[ n ]] ) ); };
- }
-
- function _clean(a){
- switch (type) {
- case "char":
- return a.substr(0,1).toUpperCase();
- case "word":
- return /^([a-z0-9]+)/.exec(a)[1];
- }
- return a;
- }
-
- return this.pager( fn );
-};
-
-
-$.fn.pager = function(step) {
- var types = {
- UL: "li",
- OL: "li",
- DL: "dt",
- TABLE: "tr"
- };
-
- return this.each(function(){
- var type = types[this.nodeName];
- var pagedUI = type == "tr" ? $("tbody",this) : $(this);
- var rows = $(type, pagedUI);
- var curPage = 0;
- var names = [], num = [];
-
- if ( !step || step.constructor != Function ) {
- step = step || 10;
-
- if (rows.length > step)
- for ( var i = 0; i <= rows.length; i += step ) {
- names.push( names.length + 1 );
- num.push( [ i, step ] );
- }
- } else {
- var last;
- rows.each(function(){
- var l = step( this );
- if ( l != last ) {
- names.push( l );
- var pre = num.length ? num[ num.length - 1 ][0] + num[ num.length - 1 ][1] : 0;
-
- num.push( [ pre, 0 ] );
- last = l;
- }
-
- num[ num.length - 1 ][1]++;
- });
- }
-
- if ( names.length > 1 ) {
- var pager = $(this).prev("ul.nav-page").empty();
-
- if ( !pager.length )
- pager = $("<ul class='nav-page'></ul>");
-
- for ( var i = 0; i < names.length; i++ )
- $("<a href=''></a>").rel( i ).html( names[i] ).click(function() {
- return handleCrop( this.rel );
- }).wrap("<li></li>").parent().appendTo(pager);
-
- pager.insertBefore( this );
-
- var prev = $("<a href=''>« Prev</a>").click(function(){
- return handleCrop( --curPage );
- }).wrap("<li class='prev'></li>").parent().prependTo(pager);
-
- var next = $("<a href=''>Next »</a>").click(function(){
- return handleCrop( ++curPage );
- }).wrap("<li class='next'></li>").parent().appendTo(pager);
-
- handleCrop( 0 );
- }
-
- function handleCrop( page ) {
- curPage = page - 0;
- var s = num[ curPage ][0];
- var e = num[ curPage ][1];
-
- if ( !curPage ) prev.hide();
- else prev.show();
-
- if ( curPage == names.length - 1 ) next.hide();
- else next.show();
-
- $("li",pager)
- .removeClass("cur")
- .eq( curPage + 1 )
- .addClass("cur");
-
- pagedUI.empty().append(
- jQuery.merge( rows, [] ).slice( s, s + e )
- );
-
- return false;
- }
- });
-};
+++ /dev/null
-/*
-Description:
-
- jQuery ToolTip Demo. Demo of how to add elements and get mouse coordinates
- There is also a ToolTip plugin found at http://www.eyecon.ro/interface/,
- which uses a CSS class to style the tooltip, but shows it below the input/anchor, rather than where the mouse is
-
-Usage:
-
- $(window).load(
- function()
- {
- $("a,input").ToolTipDemo('#fff');
- }
- );
-
-Parameters:
-
- bgcolour : Background colour
-*/
-$.fn.ToolTipDemo = function(bgcolour)
-{
- this.mouseover(
- function(e)
- {
- if((!this.title && !this.alt) && !this.tooltipset) return;
- // get mouse coordinates
- // based on code from http://www.quirksmode.org/js/events_properties.html
- var mouseX = e.pageX || (e.clientX ? e.clientX + document.body.scrollLeft : 0);
- var mouseY = e.pageY || (e.clientY ? e.clientY + document.body.scrollTop : 0);
- mouseX += 10;
- mouseY += 10;
- bgcolour = bgcolour || "#eee";
- // if there is no sibling after this one, or the next siblings className is not tooltipdemo
- if(!this.nextSibling || this.nextSibling.className != "tooltipdemo")
- {
- // create a div and style it
- var div = document.createElement("div");
- $(div).css(
- {
- border: "2px outset #ddd",
- padding: "2px",
- backgroundColor: bgcolour,
- position: "absolute"
- })
- // add the title/alt attribute to it
- .html((this.title || this.alt)).addClass("tooltipdemo");
- this.title = "";
- this.alt = "";
- if(this.nextSibling)
- {
- this.parentNode.insertBefore(div, this.nextSibling);
- }
- else
- {
- this.parentNode.appendChild(div);
- }
- this.tooltipset = true;
- }
- $(this.nextSibling).show().css({left: mouseX + "px", top: mouseY + 3 + "px"});
- }
- ).mouseout(
- function()
- {
- if(this.nextSibling && this.nextSibling.className == "tooltipdemo")
- {
- $(this.nextSibling).hide();
- }
- }
- );
- return this;
-}
+++ /dev/null
-<?xml version="1.0" encoding="ISO-8859-1"?>
-<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-
-<xsl:template match="/*">
-<html>
-<head>
- <title>jQuery Docs - API</title>
- <link rel="stylesheet" href="style/style.css"/>
- <script src="../jquery-svn.js"></script>
- <script src="js/tooltip.js"></script>
- <script src="js/pager.js"></script>
- <script src="js/doc2.js"></script>
-</head>
-<body>
- <h1>jQuery Docs - API</h1>
- <ul id="docs">
- <xsl:for-each select="method[not(@private)]">
- <xsl:sort select="@name"/>
- <xsl:sort select="count(params)"/>
- <li>
- <span class='type'><span title='TYPE' class='tooltip'><xsl:value-of select="@type"/></span></span>
- <span class='fn'>
- <a href='#{@name}' class='name' title=''><xsl:value-of select="@name"/></a>
- <xsl:if test="not(@property)">(
- <xsl:for-each select="params">
- <span class='arg-type tooltip' title='TYPE'><xsl:value-of select="@type"/></span><xsl:text> </xsl:text>
- <span class='arg-name tooltip' title='{@desc}'><xsl:value-of select="@name"/></span>
- <xsl:if test="position() != last()">
- <xsl:if test="@any"> or </xsl:if>
- <xsl:if test="not(@any)">, </xsl:if>
- </xsl:if>
- </xsl:for-each>
- )</xsl:if>
- </span>
- <div class='short'>
- <xsl:value-of select="@short"/>
- </div>
- <div class='more'>
- <div class='desc'>
- <xsl:value-of select="desc"/>
- </div>
- <xsl:for-each select="examples">
- <div class='example'>
- <h5>Example:</h5>
- <xsl:if test="desc">
- <p><xsl:value-of select="desc"/></p>
- </xsl:if>
- <pre><xsl:value-of select="code"/></pre>
- <xsl:if test="before">
- <b>HTML:</b>
- <pre><xsl:value-of select="before"/></pre>
- </xsl:if>
- <xsl:if test="result">
- <b>Result:</b>
- <pre><xsl:value-of select="result"/></pre>
- </xsl:if>
- </div>
- </xsl:for-each>
- </div>
- </li>
- </xsl:for-each>
- </ul>
-</body>
-</html>
-</xsl:template>
-
-</xsl:stylesheet>
+++ /dev/null
-html, body {
- background: #212121;
- font-family: Arial;
- font-size: 14px;
- text-align: center;
-}
-
-h1 {
- margin: 15px auto;
- text-align: left;
- width: 600px;
- color: #FFF;
-}
-
-ul.nav-page {
- margin: 15px auto;
- width: 600px;
- padding: 0;
- list-style: none;
- position: relative;
-}
-
-ul.nav-page li {
- padding: 0 3px;
- display: inline;
-}
-
-ul.nav-page li.cur a {
- font-weight: bold;
- font-size: 16px;
-}
-
-ul.nav-page li a {
- font-size: 14px;
- color: #FFF;
-}
-
-ul.nav-page li.prev {
- position: absolute;
- top: 0px;
- left: 0px;
-}
-
-ul.nav-page li.next {
- position: absolute;
- top: 0px;
- right: 0px;
-}
-
-ul.nav-page li.next a, ul.nav-page li.prev a {
- font-size: 16px;
- font-weight: bold;
-}
-
-ul#docs {
- list-style: none;
- margin: 0 auto;
- padding: 5px;
- width: 600px;
- background: #FFF;
- text-align: left;
-}
-
-ul#docs li {
- margin: 5px 0;
-}
-
-ul#docs li span.tooltip {
- border-bottom: 1px dashed #666;
-}
-
-ul#docs li a.name {
- font-weight: bold;
- text-decoration: none;
-}
-
-ul#docs li span.type {
- display: block;
- float: left;
- color: #666;
- width: 100px;
- margin-right: 10px;
- font-size: 12px;
- line-height: 18px;
- font-family: Courier;
- text-align: right;
-}
-
-ul#docs li span.arg-type {
- color: #666;
-}
-
-ul#docs li div.short {
- font-size: 12px;
- color: #666;
- margin-left: 110px;
- margin-top: 5px;
-}
-
-ul#docs span.fn {
- font-family: Courier;
-}
-
-ul#docs div.tooltipdemo {
- font-size: 12px;
- font-family: Arial;
-}
-
-ul#docs li div.more {
- display: none;
- margin-left: 110px;
- margin-top: 5px;
-}
-
-ul#docs li div.example {
- overflow: auto;
-}
-
-ul#docs li div.example h5 {
- font-size: 16px;
-}
-
-ul#docs li div.example pre {
- color: #4F4;
- background: #000;
- padding: 5px;
- overflow: auto;
-}