WCSS Tutorial: -wap-marquee-style - Using Slide Style on Mobile Devices

19.5.2. Slide Marquee Style

Description of an animation of the slide marquee style:

At the beginning, the marquee block is off one side (left side or right side. It depends on the value of the -wap-marquee-dir WCSS property) of the mobile device's screen totally.
Then the marquee block scrolls to the other side of the mobile device's screen.
If the length of the marquee block is smaller than the screen width, the marquee block stops when it touches the other side of the screen. If the length of the marquee block is larger than the screen width, the marquee block stops once its ending edge is shown.
The animation repeats if the value of the -wap-marquee-loop WCSS property is larger than 1.

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

Page 34 of 39

Contents at a Glance (Click Here for Full Table of Contents)

Print this Web Page | | Back to Top

Feedback Form (Expand)

WCSS Tutorial Table of Contents WCSS Tutorial Contents at a Glance Preferences - Change Color Scheme Preferences - Do Not Show Ads Previous Page Next Page