Alternate Marquee Style

Preferences - Do not show ads

Description of an animation of the alternate marquee style:

  • At the beginning, if the length of the marquee block is smaller than the screen width, the whole marquee block is shown on the screen with one of its edge (either the left edge or the right edge. It depends on the value of the -wap-marquee-dir property. If the -wap-marquee-dir property value is rtl [right-to-left], it should be the right edge. If the -wap-marquee-dir property value is ltr [left-to-right], it should be the left edge) touches the side of the screen. If the length of the marquee block is larger than the screen width, only part of the marquee block is displayed on the screen with one of its edge (either the left edge or the right edge. It depends on the value of the -wap-marquee-dir property. If the -wap-marquee-dir property value is rtl [right-to-left], it should be the left edge. If the -wap-marquee-dir property value is ltr [left-to-right], it should be the right edge) touches the side of the screen.

  • Then the marquee block scrolls across the screen of the mobile device.

  • 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.

To help you understand better the above description, let's see an XHTML MP/WAP CSS example now. It demonstrates the usage of the alternate marquee style. The screenshots of this XHTML MP/WAP CSS example show how the animation actually looks in some mobile phone browsers. The direction of the marquee animation is set to right-to-left in this example.


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


Below is the result of the above XHTML MP/WCSS example in a mobile phone browser. As you can see, the first line of text "Hello world." was shorter than the mobile phone browser's screen width. At the beginning, "world." touched the right side of the screen. The line then scrolled across the screen from right to left until "Hello" touched the left side of the screen. The second line of text, "Hello, welcome to our WCSS Tutorial.", was longer than the screen width. At the beginning, "Hello" touched the left side of the screen. The line then scrolled across the screen until the line's end was shown.












Nokia Mobile Browser 4.0


Page 35 of 39 Previous Page | Next Page
Contents at a Glance
Print this Web Page | | Back to Top

Feedback Form (Expand)

What do you think about this web page?






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