Openwave Mobile Browser 6.1 and 6.2: XHTML Mobile Profile and CSS Reference
Section 32 out of 38 total sections
Current chapter: CSS Reference
|
|
|
|
WAP CSS defines a number of useful extensions to CSS2. These extensions are supported by Openwave Mobile Browser 6.2.
You can use the -wap-marquee value to cause text, an image, or other content that is too wide to fit on one line on the screen to scroll across the screen, rather than wrapping to a new line.
Setting the -wap-marquee value for the display property also makes it possible to take advantage of four related WAP CSS properties, -wap-marquee-style, -wap-marquee-loop, -wap-marquee-dir, and -wap-marquee-speed, to control the manner, direction, speed, and related aspects of scrolling (these properties are described in the following sections of this chapter).
While you can use -wap-marquee with any element, it's really meant for block elements: If you apply it to an inline element, the affected content scrolls on a line by itself, interrupting the line in which it occurs as if it were surrounded by line breaks.
li.scroll {display: -wap-marquee}
Causes all list items whose class attribute is set to scroll to scroll across the screen, rather than to wrap.
Controls how content scrolls across the screen.
This property requires that the selected element also have the display property set to the -wap-marquee value.
The values have the following effect:
scroll The content starts completely off one side of the screen and then scrolls across the screen until its completely off the other side of the screen. Repeat.
slide The content starts completely off one side of the the screen and then scrolls across the screen. Scrolling stops when the first character reaches the other side of the screen.
alternate The content starts completely off one side of the screen, scrolls across the screen until its completely off the other side of the screen, and then does the same thing in the reverse direction. Repeat.
li.slide {display: -wap-marquee; -wap-marquee-style slide}
Causes all list items whose class attribute is set to slide to slide across the screen.
Controls how many times the scrolling effect repeats.
An integer (0, 1, 2, and so on) or the keyword infinite.
This property requires that the selected element also have the display property set to the -wap-marquee value.
Setting the value of -wap-marquee-loop to 0 has the same effect as not setting the display property to -wap-marquee.
li.scroll2 {display: -wap-marquee; -wap-marquee-loop 2}
Causes all list items whose class attribute is set to scroll2 to scroll across the screen twice.
Controls whether content scrolls from left to right (ltr) or from right to left (rtl).
This property requires that the selected element also has the display property set to the -wap-marquee value.
li.slide-ltr {display: -wap-marquee; -wap-marquee-dir ltr}
Causes all list items whose class attribute is set to slide to slide left to right across the screen once.
Controls the speed of the marquee effect.
This property requires that the selected element also have the display property set to the -wap-marquee value.
li.slow {display: -wap-marquee; -wap-marquee-speed slow}
Causes all list items whose class attribute is set to slow to scroll across the screen more slowly than normal.
Assigns a physical phone key as a shortcut for activating a form control or a link.
none, one of the phone keys 0-9, *, or #
This property is particularly useful as a shortcut for activating a form control or a link, but can also be used as a shortcut for scrolling any other element into view.
Provide users a visual hint for elements with key shortcuts. For example, if you have a list of links with key shortcuts, you can present them as an ordered list.
Pressing a key that is a shortcut for a link is the same as selecting that link on the screen and pressing the primary softkey.
For more information, see the description of the accesskey attributes in the sections describing the XHTML-MP elements <input>, <label>, and <textarea>.
If an XHTML document contains one or more <a>, <input>, <label>, or <textarea> elements that use of accesskey attribute and there is a conflict with the use of -wap-access-key in a style sheet, the style sheet key assignment takes precedence.
input.send {-wap-access-key: *}
Assigns the * key as a shortcut for input elements of class send. For example:
<input class="send" type="submit" value="submit" title="Submit(*)"/>
The title of this button includes the * in parenthesis as a visual clue that the * key is a shortcut.
Sets an input mask for text input in a form.
You can specify the following values for the -wap-input-format attribute:
To limit the number of characters users can enter, you can specify a single-digit number before the character tag. For example, "3X" lets the user enter a maximum of three symbolic, numeric, or uppercase alphabetic characters.
To let users enter an unlimited number of characters, specify an asterisk (*) before the character tag. For example, "*a" lets the user enter any number of symbolic or lowercase alphabetic characters.
To insert a character into the mask, use the syntax \c, replacing the c with the character you want to insert. This is useful for inserting, for example, a dash in a nine-digit area code.
Text input elements, that is, <input type="text"> and <textarea>
You must enclose -wap-input-format values in quotation marks.
input.zipcode9 {-wap-input-format: "NNNNN\-NNNN"}
Sets an input mask for text <input> elements whose class attribute is set to zipcode9 to accept only five digits followed by a dash followed by four digits.
Requires a user to enter text, select a button, or choose a pop-up menu item on a form.
Form input elements (see <form> for a list).
If you use -wap-input-required in a style sheet applied to an XHTML-MP form input element that also uses the emptyok attribute, the -wap-input-required value from the style sheet takes precedence.
See section 19.3.1 of the WAP CSS Specification (available from the OMA at http://www.wapforum.com) for details about combining the -wap-input-required and -wap-input-format properties.
input.req {-wap-input-required: true}
Requires users to enter a value in form input elements whose class="req".
|
|
|
|