PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview of the Sliding Banner control
  • Creating a Sliding Banner control
  • Characteristics of Sliding Banner control
  • Description window
  • Content of planes used for the Sliding Banner control
  • Customizing the Sliding 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
Warning
From version 24, Scrolling Banner is kept for backward compatibility. This function is replaced by The Sliding Banner control.
Overview of the Sliding Banner control
The Sliding 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 an automatic slide Image control or a linear looper! The Sliding Banner control can contain controls and processes.
The Sliding Banner control is used to display independent contents in different planes.
Sliding Banners are often used as site headers.
Example:
The sliding banner changes plane on its own or upon request.The planes can contain controls
The sliding banner changes plane on its own or upon request. The planes can contain controls.
Creating a Sliding Banner control
To create a Sliding Banner control:
  1. On the "Creation" pane, in the "Containers" group, click "Scrolling Banner".On the "Creation" pane, in the "Containers" group, click "Sliding Banner".
  2. Click the position where the control will be created in the page. The control appears in creation mode.
  3. The Sliding Banner control includes:
    • several planes with the different elements of the sliding banner. Each plane contains all the controls required by a "slide" of the Sliding Banner.
    • plane pickers (or bullets), displayed at the bottom of the sliding banner, allowing the user to access a slide directly.
    • slide buttons, allowing the user to cycle through the "slides" of the Sliding 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 Sliding Banner control.
  • use the Page Up / Page Down keys to move between planes.
To display the control characteristics, select "Description" from the popup menu of control.
Note: The Sliding 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 Sliding Banner control

Description window

The description window of the "Sliding Banner" control is used to:
  • Create or delete the planes corresponding to the different "slides" of the sliding banner ("General" tab). Three planes are available by default.
    Note: To access the different planes in the editor, you must:
    • select the Sliding Banner control.
    • use the Page Up / Page Down keys to move between planes.
  • 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 Sliding Banner control ("Details" tab): You can:
    • Define how the user will enable the slides. The available modes are:
      • with the keyboard: the user can click the arrow buttons to cycle through slides.
      • by horizontal swipe: the user will have to swipe with the mouse to cycle though slides.
      • by touch 'scroll': the user will have to perform a touch swipe to cycle through slides.
      • with a plane picker (bullets): the user will have to click the bullets to cycle through slides. If this option is not checked, the bullets are not displayed in the sliding banner.
      • with a previous button: the user will have to click the back button of the sliding banner to cycle through slides. If this option is not checked, the back button is not displayed in the sliding banner.
      • with a next button: the user will have to click the next button of the sliding banner to cycle through slides. If this option is not checked, the next button is not displayed in the sliding banner.
    • Enable the click in banner background. Used to manage the click on the sliding banner background. If this option is checked, the click process is automatically added to the processes of Sliding 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: Stops cycling through planes when hovering over the current plane.
    • Display duration of each plane: Duration between of each "slide" of the Sliding Banner.
  • Define the style for the Sliding Banner control ("Style" tab): You can define:
    • the CSS options of the control.
    • the plane pickers (bullets):
      • CSS style if necessary.
      • Image set. 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 Sliding Banner control.
      • Spacing between each element: spacing between bullets.
      • Width and height of elements.
    • the button on the left:
      • CSS style if necessary.
      • Image set. 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 set. 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 Sliding Banner control

  • The planes associated with the Sliding Banner control can contain all the types of controls found in WEBDEV except another Sliding Banner control.
  • A control in one plane of the banner can be associated to several planes of the Sliding Banner control. In this case, the control is automatically made control.

Customizing the Sliding Banner control

By default, the Sliding Banner control proposes buttons and plane pickers (bullets) to cycle through planes. These elements can be customized in the control style.
If you do not want to use the controls proposed by default, you can use specific controls positioned outside the Sliding Banner control. Then, all you have to do is:
  • configure the Sliding 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 version required
  • Version 22
Comments
Click [Add] to post a comment