19.5.2. Slide Marquee Style

Description of an animation of the slide marquee style:

It may be difficult to imagine how a slide marquee animation actually looks in a WAP browser simply by reading the above textual description. Let's see an XHTML MP/WAP CSS example that demonstrates the usage of the slide marquee style and how it looks in some mobile phone browsers. In the following XHTML MP/WAP CSS example, the direction of the marquee animation is set to right-to-left.


(marqueeEg4.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: slide">Hello world.</p>
    <p style="display: -wap-marquee; -wap-marquee-dir: rtl; -wap-marquee-style: slide">Hello, welcome to our WCSS Tutorial.</p>
  </body>
</html>


The following screenshots show the result of the above XHTML MP/WCSS example in a mobile phone browser. The length of "Hello world" is smaller than the screen width, while that of "Hello, welcome to our WCSS Tutorial." is larger than the screen width. As you can see in the screenshots, "Hello world" stopped when it touched the other side of the screen, while "Hello, welcome to our WCSS Tutorial." stopped once its ending edge was shown.









Nokia Mobile Browser 4.0


Previous Page Page 34 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.