{"id":3,"date":"2006-11-16T11:35:57","date_gmt":"2006-11-16T19:35:57","guid":{"rendered":"http:\/\/www.antunkarlovac.com\/blog\/?p=3"},"modified":"2007-04-03T14:04:10","modified_gmt":"2007-04-03T22:04:10","slug":"using-a-scrollbar","status":"publish","type":"post","link":"https:\/\/www.antunkarlovac.com\/blog\/2006\/11\/16\/using-a-scrollbar\/","title":{"rendered":"Using a Scrollbar"},"content":{"rendered":"<p>Using a scrollbar in LZX is so deceptively simple, that developers often have a hard time figuring it out. Below is an example of a scrollbar in action:<\/p>\n\n<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"\n\t\t\tid=\"fm_scrollbarlzx_1088669623\"\n\t\t\tclass=\"flashmovie\"\n\t\t\twidth=\"250\"\n\t\t\theight=\"125\">\n\t<param name=\"movie\" value=\"\/blog\/wp-content\/uploads\/2006\/11\/scrollbarlzx.swf\" \/>\n\t<!--[if !IE]>-->\n\t<object\ttype=\"application\/x-shockwave-flash\"\n\t\t\tdata=\"\/blog\/wp-content\/uploads\/2006\/11\/scrollbarlzx.swf\"\n\t\t\tname=\"fm_scrollbarlzx_1088669623\"\n\t\t\twidth=\"250\"\n\t\t\theight=\"125\">\n\t<!--<![endif]-->\n\t\t\n\t<!--[if !IE]>-->\n\t<\/object>\n\t<!--<![endif]-->\n<\/object>\n<p>There are two LZX classes you can use to make a view scroll its contents: <a href=\"http:\/\/www.openlaszlo.org\/lps-latest\/docs\/reference\/lz-scrollbar.html\">scrollbar<\/a> and <a href=\"http:\/\/www.openlaszlo.org\/lps-latest\/docs\/reference\/lz-hscrollbar.html\">hscrollbar<\/a>. scrollbar is vertical; hscrollbar is horizontal. The two orientations will work together automatically. The scrollbar is designed to scroll a <em>single view<\/em> within a clipping container. i.e. if you want to scroll multiple views (which you almost always will), you should wrap them in a <em>single containing view<\/em>.The diagram below shows the layout of views:<\/p>\n<div style=\"text-align: center\"><img decoding=\"async\" alt=\"Scrollbar Diagram\" id=\"image4\" src=\"http:\/\/www.antunkarlovac.com\/wp-content\/uploads\/2006\/11\/scrollbar_diagram.gif\" \/><\/div>\n<div style=\"text-align: center\"><img decoding=\"async\" id=\"image9\" alt=\"Scrollbar Diagram\" src=\"http:\/\/www.antunkarlovac.com\/blog\/wp-content\/uploads\/2006\/12\/scrollbar_diagram2.gif\" \/><\/div>\n<p>Some guidelines:<\/p>\n<ul>\n<li>The clipping view should have a defined width and height. It's OK if they are constraints.<\/li>\n<li>The clipping view <strong>must <\/strong>clip its contents. (clip=\"true\").<\/li>\n<li>The scrolling view must <strong>not <\/strong>have a defined height. Exploit the stretchy behavior of views here.<\/li>\n<li>Define a width for the scrolling view, so that it leaves room for the scrollbar.<\/li>\n<li>The scrollbar and scrolling view <strong>must<\/strong> be siblings. If not, you'll have to set the target attribute.<\/li>\n<\/ul>\n<p><a id=\"p7\" href=\"http:\/\/www.antunkarlovac.com\/blog\/wp-content\/uploads\/2006\/11\/scrollbar.zip\">Download an example of using the scrollbar<\/a><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Using a scrollbar in LZX is so deceptively simple, that developers often have a hard time figuring it out. Below is an example of a scrollbar in action: There are two LZX classes you can use to make a view scroll its contents: scrollbar and hscrollbar. scrollbar is vertical; hscrollbar is horizontal. The two orientations &hellip; <a href=\"https:\/\/www.antunkarlovac.com\/blog\/2006\/11\/16\/using-a-scrollbar\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Using a Scrollbar<\/span><\/a><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/3"}],"collection":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":1,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/3\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/3\/revisions\/195"}],"wp:attachment":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/media?parent=3"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/categories?post=3"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/tags?post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}