PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview of Scrolling Banner control
  • Creating a Scrolling Banner control
  • Characteristics of Scrolling Banner control
  • Description window
  • Content of planes used for the Scrolling Banner control
  • Customizing the Scrolling Banner control
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview of Scrolling Banner control
The Scrolling Banner control is used to display several contents successively, either automatically, or further to an action performed by the Web user.
It is not just a simple Image control with automatic scroll or a linear looper! The banner can contain controls and processes.
The scrolling banner is used to display independent contents in the different planes.
The scrolling banners are often used as site headers.
Example:
The banner changes plane on its own or upon request.The planes can contain controls
The banner changes plane on its own or upon request. The planes can contain controls.
Creating a Scrolling Banner control
To create a Scrolling Banner control:
  1. On the "Creation" pane, in the "Containers" group, click "Scrolling banner".
  2. Click the position where the control will be created in the page. The control appears in creation mode.
  3. The Scrolling Banner control includes:
    • several planes containing the differents banner elements. Each plane contains all the controls required by a "step" of the scrolling banner.
    • plane pickers (or bullets), displayed at the bottom of the banner, allowing the user to access a step directly.
    • scroll buttons, allowing the user to scroll the "steps" of the scrolling banner.
The created control contains 3 planes by default. The first plane is displayed in the editor. You can directly create the controls that will be displayed in the different planes.
Note: To access the different planes in the editor, you must:
  • select the Scrolling Banner control.
  • press the [Page Up] / [Page Down] keys to change plane.
To display the control characteristics, select "Description" from the popup menu of control.
Note: The Scrolling Banner control is WYSIWYG in the editor:
  • If you click the left button and the right button in the editor, the corresponding planes will be displayed.
  • If you click the plane picker (or bullets) in the editor, the corresponding planes will be displayed.
Characteristics of Scrolling Banner control

Description window

The description window of "Scrolling Banner" control is used to:
  • Create or delete the planes corresponding to the different banner "steps" ("General" tab). Three planes are available by default.
    Note: To access the different planes in the editor, you must:
    • select the Scrolling Banner control.
    • press the [Page Up] / [Page Down] keys to change plane.
  • Define the properties specific to a plane ("General" tab): All you have to do is select the requested plane to define:
    • whether the plane is visible by default.
    • the style options for the plane.
    • the plane tooltip.
  • Define the operating options for the Scrolling Banner control ("Details" tab): You can:
    • Define how the scroll will be enabled by the user. The available modes are:
      • with the keyboard: the user will have to click the arrow buttons to change step.
      • by horizontal swipe: the user will have to perform a swipe with the mouse to change step.
      • by scroll with finger: the user will have to perform a swipe with the finger to change step.
      • with a plane picker (bullets): the user will have to click the bullets to change step. If this option is not checked, the bullets are not displayed in the banner.
      • with a previous button: the user will have to click the previous button of the banner to change step. If this option is not checked, the previous button is not displayed in the banner.
      • with a next button: the user will have to click the next button of the banner to change step. If this option is not checked, the next button is not displayed in the banner.
    • Enable the click in banner background. Used to manage the click on the banner background. If this option is checked, the click process is automatically added to the processes of Scrolling Banner control.
    • Start the scroll automatically: Enables the automatic scroll. In this case, all the visible planes are automatically displayed according to the order of planes and with the specified display duration.
    • Interrupt the scroll during rollover: Interrupts the scrolling of planes when the curernt plane is hovered.
    • Display duration of each plane: Duration between of each "step" of the scrolling banner.
  • Define the style for the Scrolling Banner control ("Style" tab): You have the ability to define:
    • the CSS options of the control.
    • the plane pickers (bullets):
      • CSS style if necessary.
      • Image sheet. The image sheet used must be compatible with the image sheets used for the Radio Button and Check Box controls. This image sheet can also contain an animation for the bullets.
      • Margin at bottom: distance of bullets in relation to the bottom border of the Scrolling Banner control.
      • Spacing between each element: spacing between bullets.
      • Width and height of elements.
    • the button on the left:
      • CSS style if necessary.
      • Image sheet. The image sheet used must be compatible with the image sheets used for the Button controls. This image sheet can also contain an animation.
      • Offset to left: distance between the button and the left control border.
      • Width and height of button.
    • the button on the right:
      • CSS style if necessary.
      • Image sheet. The image sheet used must be compatible with the image sheets used for the Button controls. This image sheet can also contain an animation.
      • Offset to right: distance between the button and the right control border.
      • Width and height of button.

Content of planes used for the Scrolling Banner control

  • The planes associated with the Scrolling Banner control can contain all the types of controls found in WEBDEV except for a Scrolling Banner control.
  • A control found in a plane of the scrolling banner can be associated with several planes of the scrolling banner. In this case, the control is automatically made control.

Customizing the Scrolling Banner control

By default, the Scrolling Banner control proposes buttons and plane pickers (bullets) to change plane. These elements can be customized in the control style.
If you do not want to use the controls proposed by default, you have the ability to use specific controls positioned outside the Scrolling Banner control. Then, all you have to do is:
  • configure the Scrolling Banner control to no longer use the default controls ("Details" tab of control description).
  • program the action of new controls with the functions for scroll management. See Customizing the move from a plane to another one for more details.
Related Examples:
WW_Rewali Complete examples (WEBDEV): WW_Rewali
[ + ] This example is a site for travel booking.

It proposes travels at very attractive prices.
You have the ability to choose the travel duration, the start dates, then validate the purchase until the payment via Paypal.

It is using the "scrolling banner" control and the planes.
Minimum required version
  • Version 22
Comments
Click [Add] to post a comment