In one of our project we got to modify the look and feel of the textarea scrollbar, similar to http://www.hesido.com/web.php?page=customscrollbar, the one in the right side with rounded corners and grey color. This script works fine with div but does not work with textarea. Anybody knows any better and customizable script for textarea?
As far as I know... it can't be done. How about using an XML's DOM method: replaceChild() ? Create a <textarea> element first, save its content and attributes. Then replace it with FleXcroll's div.
I would suggest making the li classes custom for them so it can be changed as needed. hopefully that will help otherwise I can copy their coding and try modding it to your liking
Sorry its beyond my skills level. i will have to stick with any JS/Jquery solution. or if you can show me any working example i will try to copy the code.
from the look of the source code, its all based on unordered list which means you can do list classes to make it more custom rather than js/jquery or xml stuff like others talked about
Okay, an example follows below. However, the result might not be as good as if you are using a div, since you know... we can not style textarea. Let's see if your browsers support it. I hope Emrah BASKAYA won't mind about it test.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <link href="flexcrollstyles.css" rel="stylesheet" type="text/css" /> <script type='text/javascript' src="flexcroll.js"></script> <script type="text/javascript"> function transform_textarea(){ var el1 = document.getElementById("my_textarea"), el2 = document.createElement("div"), el3 = null; //COPY TEXTAREA'S CONTENT el2.innerHTML = el1.value.replace(/\n/g,"<br />"); //COPY TEXTAREA'S ATTRIBUTES. if (el1.hasAttributes()){ var attrs = el1.attributes; for(var i=0; i<attrs.length; i++) { el2.setAttribute(attrs[i].name,attrs[i].value); } } el1.parentNode.replaceChild(el2,el1); //ACTIVATE FLEXCROLL ON THAT NEW ELEMENT fleXenv.fleXcrollMain("my_textarea"); } </script> </head> <body> <div class="flexcroll my_style"> <h1>A heading</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. </p> <p>Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. </p> </div> <textarea id="my_textarea" class="my_style"> A heading Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. </textarea> <input type="button" value="transform textarea" onclick="transform_textarea()" /> </body> </html> PHP: flexcrollstyles.css: /*Page related styles for you to view*/ .my_style{ background-color: #E7EADE; width: 200px; height: 300px; overflow: auto; margin: 0.3em; padding: 10px; border: 0px solid #410000; float: left; } /* Scroll Bar Master Styling Starts Here */ .scrollgeneric{ line-height: 1px; font-size: 1px; position: absolute; } .vscrollerbar { left: 0px; } /* Extra sample styles */ .vscrollerbarbeg { background: url(vscroller2.png) 0px -9px; width: 18px; height: auto; } .vscrollerbarend { background: url(vscroller2.png); width: 18px; height: 9px; } .vscrollerbase { width: 18px; background-color: white; } PHP: Image: see attachment
@hdewantara thanks for you help. i will give it a try shortly and get back to you if I find any issue. thanks for your time and efforts
This is an old thread but my note may help for others who are looking for a solution. This is not an easy issue at all. We were facing with this problem several times but didn't find a really working solution. Until my firend's team didn't come up with a Javascript library named NiceScrollbars library the beginning of this year. Give it a try, here is the link: NiceScrollbars library (http://www.nicescrollbars.com)