19.5. Controlling the Style of Marquee Animations (-wap-marquee-style Property)

The -wap-marquee-style WCSS property is used to specify how a marquee block should scroll across the screen of a mobile device. The following three marquee styles are available for use by your mobile Internet application:

  1. Scroll

  2. Slide

  3. Alternate

The default value of the -wap-marquee-style property is "scroll". Thus, the marquee animations shown in the earlier screenshots are of the scroll style.


19.5.1. Scroll Marquee Style

Description of an animation of the scroll marquee style:

The following XHTML MP/WAP CSS example shows how a marquee animation of the scroll style looks in some mobile phone browsers. The direction of the marquee animation is set to right-to-left in the following XHTML MP/WAP CSS example. (Note that the default values of the -wap-marquee-dir property and the -wap-marquee-style property are "rtl" and "scroll" respectively, which means the WCSS styles "-wap-marquee-dir: rtl" and "-wap-marquee-style: scroll" can actually be omitted in the following example.)


(marqueeEg3.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>WCSS Tutorial</title>
  </head>

  <body>
    <p style="display: -wap-marquee; -wap-marquee-dir: rtl; -wap-marquee-style: scroll">Hello, welcome to our WCSS Tutorial.</p>
  </body>
</html>


This is the result of the above XHTML MP/WCSS example in a mobile phone browser:












Nokia Mobile Browser 4.0


Previous Page Page 33 of 39 Next Page


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.

A button for going back to the top of this page