codetoad.com
  ASP Shopping CartForum & BBS
  - all for $20 from CodeToad Plus!
  
  Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM 
Search Site:
Search Forums:
  horizontal scroll bar for drop down list box  Kris123 at 15:11 on Friday, September 12, 2003
 

Iam trying to get horizontal scroll bar for drop down box using HTML,css and javaScript, when value in drop down is toolarge.
If any body know the solution, it will be greate help to me.

Thanks a lot.

  Re: horizontal scroll bar for drop down list box  Troy Wolf at 16:33 on Friday, September 12, 2003
 

I assume by "drop down" you are referring to the HTML <SELECT> element. By default a <SELECT> element will horizontally (left to right) size to fit your contents. The vertical size is normally controlled using the "size" parameter. For example, to show 5 options at a time, <select name=MyOptions size=5>. The vertical scroll bar is automatic. There is not an option for a horizontal scroll bar in a SELECT.

So you must be forcing the width of the <SELECT> to be less than your contents. If so, your options will be cutoff -- no option for horizontal scrolling.

The "solution" would be to roll your own method for allowing the user to select the option(s). One idea is to use a popup window where you code your own scrollable list of options as a stand-alone HTML page. When the user selects an option, you pass back that value to the parent window. This is much more involved than simply using a <SELECT> of course, but if you want to do non-default things, you'll have to code for it.

Hope this helps, Kris.
Troy Wolf: site expert
SnippetEdit Website Editor


  Re: horizontal scroll bar for drop down list box  Kris123 at 18:40 on Friday, September 12, 2003
 

Thank you..Troy Wolf

Can I create horizontal scroll bar using javaScript for html <select> element?
I appreciate you help if you have any example code or just an idea.
Iam a java programmer and i know little about javaScipt.

Thanks a lot.

  Re: horizontal scroll bar for drop down list box  Troy Wolf at 18:55 on Friday, September 12, 2003
 

You cannot add a horizontal scroll bar to an HTML <SELECT> element. This is why I said your options are to "roll your own".

The two methods you'll want to look at are.
1) Write a stand-alone HTML page (of course could be generated server-side by ASP,PHP,CGI,JSP,CF, etc.). This page will be the scrollable list of options. Then have your page where you need the user to select an option pop a smaller window with this page in it. Script it so that when the user selects an option from the popup, that value is passed back to the parent page and the popup window is automatically closed.

2) DHTML menus. There are ways to generate objects that appear similar to a <SELECT> using scrollable <DIV>s and styles to make them appear and dissappear as needed. These can be very cool, but making them 100% cross-browser is a challenge for the best javascripters out there. There are examples out there you can leverage.
Troy Wolf: site expert
SnippetEdit Website Editor


  Re: horizontal scroll bar for drop down list box  Kris123 at 20:41 on Friday, September 12, 2003
 

Thank you for your time..I will going to try now.



  Re: horizontal scroll bar for drop down list box  rehan78 at 11:06 on Monday, October 27, 2003
 

hello

  Re: horizontal scroll bar for drop down list box  Kris123 at 12:36 on Thursday, November 13, 2003
 

Thanks lot for work around.

  Re: horizontal scroll bar for drop down list box  nagarjuna at 12:12 on Monday, January 08, 2007
 

hi,
can u tell me how to add scroll bar for the listbox using javascript,css,html.

Can plz share the code

  Re: horizontal scroll bar for drop down list box  Txtlocal at 10:13 on Tuesday, July 17, 2007
 

Hello,

I have joined this site purely to add this comment (as this is the no.1 Google result for this issue and it has remained unanswered since 2003!!)

Simply add the following DIV tag around the SELECT box and you will get a scroller:

<div style="overflow-x:scroll; width:500px;
overflow: -moz-scrollbars-horizontal;">
<select....></select>
</div>

Thanks,

Alastair
http://www.Txtlocal.com


  Re: horizontal scroll bar for drop down list box  acbose at 17:45 on Monday, March 31, 2008
 

excellent

  Re: horizontal scroll bar for drop down list box  ayqazi at 10:27 on Wednesday, February 04, 2009
 

I too have joined this page especially to post a comment here, as it is the number 1 search result in Google, to say:

AAAAAAAARRRRRRRRGGGGGGGGGGGGGGGHHHHHHHH, non-standard browser-specific hacks!

*runs away wildly waving arms*

*then...*

*slowly tip-toes back, and whispers:*

The CSS3 bit (overflow-x) is cool - but gotta wait for it to be more widely supported.


  Re: horizontal scroll bar for drop down list box  alexdenipaul at 18:17 on Monday, October 12, 2009
 

Firstly, you do not explain whether you are trying to do this through a web page. I will assume you are, by the title of your post.

Unfortunately I do not have time to help with the code, but would offer the following pointers auto insurance quotes.

Your question involves not so much Javascript, but the "Microsoft Word Object Model", so is only partially relevant to this forum.

Nevertheless here are your avenues of further enquiry:-

1. Microsoft Word Object Model

This object model is part of Microsoft Word (not Javascript) and it lets you "automate" word remotely from other programs (not just web pages, but any computer program).

It is primarily designed for Visual Basic, but can be accessed by Javascript from a web page - see para 2 below home based business.

However it is a bit more tricky to use through Javascript, particularly because you cannot use visual basic constants - you need to refer to them by value. If you research this further, you will soon know what I mean by this.

So where can you find out about this Object Model?

It is all there in the Word help files if you look for it.

If you look in the Word help, under programming information, you will find the Microsoft Word Visual Basic Programming Reference.

The Word object model, which lets you do things you will need to solve your problem like:-
- Open Word
- Open a Document in Word
- Access the collection of Tables in that ActiveDocument.
- Access the Rows and Cells of a given Table.

2. How do you access this from Javascript?

This can only be done I think through Internet Explorer (and perhaps Opera).

Here you need to learn about ActiveXObjects stored value debit cards.

ActiveXObjects (if you do not know) are separate computer programs which enable additional functionality. There are lots of ActiveX objects on the internet.

When you install Word, this also installs an ActiveX object for automating word, giving you access to the Word Object Model.

So in javascript, lets open up a new instance of word:-

var oApplication=new ActiveXObject("Word.Application");
oApplication.Visible=true; // "Visible" is in the Word Object Model

There you have it.

Then if you want to open you file and get the table:-

oApplication.Documents.Open("myfilename");
var oDocument=oApplication.ActiveDocument;
var oTable=oDocument.Tables(1);
creditcard









CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums








Recent Forum Threads
• C++
• Re: refresh parent after closing pop up window
• Dynamic Insertion
• Date and Time function around the world???
• Significant Factors
• Perl array access
• Re: huffman encoding and decoding in C++...
• Perl One Liner: Replace {(
• Re: html including php, accessing the functions


Recent Articles
ASP GetTempName
Decode and Encode UTF-8
ASP GetFile
ASP FolderExists
ASP FileExists
ASP OpenTextFile
ASP FilesystemObject
ASP CreateFolder
ASP CreateTextFile
Javascript Get Selected Text


© Copyright codetoad.com 2001-2009