jquery-mobile/experiments/api-viewer/docs/scrollLeft/index.html

<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="ui-page">
        <div class="ui-header">
				<h1>.scrollLeft()</h1>
  				
</div>


<div class="ui-content ui-body ui-body-c" id="scrollLeft1">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.scrollLeft()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Integer">Integer</a></span>
</h2>
<div class="  entry-details">
<p class="desc"><strong>Description: </strong>Get the current horizontal position of the scroll bar for the first element in the set of matched elements.</p>
<ul class="signatures"><li class="signature" id="scrollLeft"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.2.6/">1.2.6</a></span>.scrollLeft()</h4></li></ul>
<div class="longdesc"><p>The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very left, or if the element is not scrollable, this number will be <code>0</code>.</p></div>
<h3>Example:</h3>
<div id="entry-examples" class="entry-examples"><div id="example-0">
<h4><span class="desc">Get the scrollLeft of a paragraph.</span></h4>
<pre><code class="example demo-code">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    p { margin:10px;padding:5px;border:2px solid #666; }
    &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
&lt;script&gt;var p = $("p:first");
			$("p:last").text( "scrollLeft:" + p.scrollLeft() );

			&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></div>
</div>
</div>
<div class="ui-content ui-body ui-body-c" id="scrollLeft2">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.scrollLeft( value )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
</h2>
<div class="  entry-details">
<p class="desc"><strong>Description: </strong>Set the current horizontal position of the scroll bar for each of the set of matched elements.</p>
<ul class="signatures"><li class="signature" id="scrollLeft-value">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.2.6/">1.2.6</a></span>.scrollLeft( value )</h4>
<p class="arguement"><strong>value</strong>An integer indicating the new position to set the scroll bar to.</p>
</li></ul>
<div class="longdesc"><p>The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the <code>scrollLeft</code> positions the horizontal scroll of each matched element.</p></div>
<h3>Example:</h3>
<div id="entry-examples" class="entry-examples"><div id="example-0">
<h4><span class="desc">Set the scrollLeft of a div.</span></h4>
<pre><code class="example demo-code">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
  div.demo {
  background:#CCCCCC none repeat scroll 0 0;
  border:3px solid #666666;
  margin:5px;
  padding:5px;
  position:relative;
  width:200px;
  height:100px;
  overflow:auto;
  }
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
	&lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class="demo"&gt;&lt;h1&gt;lalala&lt;/h1&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;/div&gt;
&lt;script&gt;$("div.demo").scrollLeft(300);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></div>
</div>
</div>


				</div>

</body></html>
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com 2010-09-16 17:13:38 +00:00			`<!DOCTYPE html>`
			`<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>`
			`<div class="ui-page">`
			`<div class="ui-header">`
			`<h1>.scrollLeft()</h1>`

			`</div>`

updated to remove toc fieldsets in demo pages 2010-09-16 18:27:10 +00:00
			`<div class="ui-content ui-body ui-body-c" id="scrollLeft1">`
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com 2010-09-16 17:13:38 +00:00			`<h2 class="jq-clearfix roundTop section-title">`
			`<span class="name">.scrollLeft()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Integer">Integer</a></span>`
			`</h2>`
			`<div class=" entry-details">`
			`<p class="desc"><strong>Description: </strong>Get the current horizontal position of the scroll bar for the first element in the set of matched elements.</p>`
			`<ul class="signatures"><li class="signature" id="scrollLeft"><h4 class="name">`
			`<span class="versionAdded">version added: <a href="/category/version/1.2.6/">1.2.6</a></span>.scrollLeft()</h4></li></ul>`
			`<div class="longdesc"><p>The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very left, or if the element is not scrollable, this number will be <code>0</code>.</p></div>`
			`<h3>Example:</h3>`
			`<div id="entry-examples" class="entry-examples"><div id="example-0">`
			`<h4><span class="desc">Get the scrollLeft of a paragraph.</span></h4>`
			`<pre><code class="example demo-code"><!DOCTYPE html>`
			`<html>`
			`<head>`
			`<style>`
			`p { margin:10px;padding:5px;border:2px solid #666; }`
			`</style>`
			`<script src="http://code.jquery.com/jquery-latest.js"></script>`
			`</head>`
			`<body>`
			`<p>Hello</p><p></p>`
			`<script>var p = $("p:first");`
			`$("p:last").text( "scrollLeft:" + p.scrollLeft() );`

			`</script>`
			`</body>`
			`</html></code></pre>`
			`<h4>Demo:</h4>`
			`<div class="demo code-demo"></div>`
			`</div></div>`
			`</div>`
			`</div>`
			`<div class="ui-content ui-body ui-body-c" id="scrollLeft2">`
			`<h2 class="jq-clearfix roundTop section-title">`
			`<span class="name">.scrollLeft( value )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>`
			`</h2>`
			`<div class=" entry-details">`
			`<p class="desc"><strong>Description: </strong>Set the current horizontal position of the scroll bar for each of the set of matched elements.</p>`
			`<ul class="signatures"><li class="signature" id="scrollLeft-value">`
			`<h4 class="name">`
			`<span class="versionAdded">version added: <a href="/category/version/1.2.6/">1.2.6</a></span>.scrollLeft( value )</h4>`
			`<p class="arguement"><strong>value</strong>An integer indicating the new position to set the scroll bar to.</p>`
			`</li></ul>`
			`<div class="longdesc"><p>The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the <code>scrollLeft</code> positions the horizontal scroll of each matched element.</p></div>`
			`<h3>Example:</h3>`
			`<div id="entry-examples" class="entry-examples"><div id="example-0">`
			`<h4><span class="desc">Set the scrollLeft of a div.</span></h4>`
			`<pre><code class="example demo-code"><!DOCTYPE html>`
			`<html>`
			`<head>`
			`<style>`
			`div.demo {`
			`background:#CCCCCC none repeat scroll 0 0;`
			`border:3px solid #666666;`
			`margin:5px;`
			`padding:5px;`
			`position:relative;`
			`width:200px;`
			`height:100px;`
			`overflow:auto;`
			`}`
			`p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }`
			`</style>`
			`<script src="http://code.jquery.com/jquery-latest.js"></script>`
			`</head>`
			`<body>`
			`<div class="demo"><h1>lalala</h1><p>Hello</p></div>`
			`<script>$("div.demo").scrollLeft(300);`
			`</script>`
			`</body>`
			`</html></code></pre>`
			`<h4>Demo:</h4>`
			`<div class="demo code-demo"></div>`
			`</div></div>`
			`</div>`
			`</div>`


			`</div>`

			`</body></html>`