Search

Module: Editor

Version: 4.0.1 +

User: Developer

Object Type: Output Object

Child of:

- WebPage

- WebPanel

 

Description

A WebSlider object provides output on a website. With a WebSlider, a user can select a value out of a range of numbers, by dragging the indicator with the mousebutton.

Properties

AutoPostBack

A postback is an action taken by an interactive webpage, when the entire page and its contents are sent to the server for processing some (submitted) information and then, the server posts the same page back to the browser.
Possible values of the AutoPostBack property are 'True' or 'False'. If the value is 'True', then the input of the WebSlider will be used directly in the calculation after you've released the mousebutton and therefore selected your input. If the value is 'False', then the input will not directly be processed.

CustomChangeScript

With the ShowCurrentValue property you can select whether and when the chosen value should be displayed. By entering a script in the CustomChangeScript property, you can then configure in which way this value should be displayed. You can use this property for instance to display a selected age in years and months. The parameter of the CustomChangeScript should be 'value', which refers to the value chosen in the WebSlider.

A possible scenario could be that the preference is to add a % mark after a number selected by the webslider. To actually manage this a script has to be added. A possible script could be:

<script type="text/javascript">
	function formatPercentage(input)
		{
			return input + '%';
		} 
</script>

With this script included somewhere within your Futurama Document, the outcome of the webslider now has added the % sign. To actually use this script the property CustomChangeScript in the Properties Window of the WebSlider must have the value: return formatPercentage(value);

See bottom of this page for an example of the usage of this property.

DebugLogMode (from version 4.1)

Indicates the level of detail of debug information that is logged during runtime of the website to the trace, a logfile, a database etc. The possible values are:

  • None: no debug information is logged
  • Simple: only basic information is given
  • Extended: in addition to the information in the Simple mode the values of all the properties of the object are shown

Enabled

Possible values are 'True' or 'False'. If the value is 'False', then the object can not be used within the application.

IsPublic

Possible values are 'True' or 'False'. If the value is 'False', then the object can only be used within the document where it is created. If the value is 'True', then also from other Futurama documents can be referred to this object. This means that changes in the object also affect the document in which is referred to this object. If the value is 'True' and you attempt to move or delete the object, a warning will be given. To limit these warnings to a minimum it is recommended to set IsPublic to 'True' only when necessary.

LargeChange

The WebSlider object combines two ways to scroll within the range of numbers, configured in the LargeChange and SmallChange property. The property LargeChange offers the option to navigate in larger steps. If you click at the slide bar, at the left or right of the indicator handle, it will move to the side clicked on, with the LargeChange number. Next to that, the LargeChange property decides which values are displayed in the slide bar.

Orientation

The property ‘Orientation’ indicates whether the webslider should be displayed vertically or horizontally.

ShowButtons

The property ShowButtons indicates whether the arrow buttons on each side of the webslider should be displayed or not.

ShowCurrentValue

With the ShowCurrentValue property you can select whether and when the chosen value should be displayed.

  • Never: the current value is never displayed.
  • Sliding: the current value is displayed when sliding the slide bar, but disappeares when the mouse button is released.
  • Always: the current value is always displayed.

ShowHandle

The property ShowHandle indicates whether an indicator handle should be displayed within the webslider, indicating the currently chosen value. The handle can be used to slide.

ShowTickMarks

The property ShowTickMarks indicates whether tickmarks should be displayed at the slide bar of the webslider.

SliderPosition

The property SliderPosition indicates where the marking of the webslider should be displayed regarding to the webslider itself. If the value ‘TopLeft’ is selected, then depending of the orientation of the webslider, the marking is at the top or left of the webslider. If the value ‘BottomRight’ is selected, the marking is at the bottom or right of the webslider.

SmallChange

The WebSlider object combines two ways to scroll within the range of numbers, configured in the LargeChange and SmallChange property. In the property SmallChange you can configure the stepsize of the webslider, which is the difference between two successive steps in the slider. If you click at the arrows at the left or right of the slider, the indicator handle will slide to the left or right with the SmallChange number. Next to that, the SmallChange property defines the marking of the slide bar.

ToolTip

In the property Tooltip a text can be entered that is shown in the application when a cursor is moved across the WebSlider. In this way information about the usage of the webslider can be given to the user.

UserVariable

Here you should select the UserVariable that gets its value by the WebSlider. The properties Min and Max of the UserVariable need to be entered. These values decide what the end values of the WebSlider are.

Visible

Possible values are 'True' or 'False'. If the value is 'True', the object will be rendered and therefore displayed in your application. If the value is 'False', the object will not be rendered.

XmlName

The name of the object as it is shown in the source of the website. By default the XmlName is equal to the name given in the property (Name) with spaces replaced by underscores, but you are free to change it.

(Name)

The name of the object.

Comment

Here a comment can be entered. For example a short description of the object.

ID

The unique identification number of the object. This number is automatically generated by Futurama on the moment of creation. This number can be used when searching for a certain object in the Find Window.

UpdatePanel

In this property you can create a reference to a WebPanel. When the Button is then clicked on in the application, ónly this WebPanel will be refreshed. The rest of the page will not be changed. When the property is left empty, the WebPage will be refreshed as a whole

CssClass

Here the CssClass can be entered. In the stylesheet you can define the style elements that belong to this class.

DecreaseText

In the property DecreaseText a text can be entered that is shown in the webslider when the cursor is placed above the lower end arrow button of the webslider. This button is used to decrease the value of the webslider. Default text is 'Decrease'.

DragText

In the property DragText a text can be entered that is shown in the webslider when the cursor is placed above the indicator handle of the webslider. Default text is empty.

Height

The height of the WebSlider. This property is required. It’s not possible to configure the height using CSS. The measurements of the webslider are decisive for the division of the slide bar.

IncreaseText

In the property IncreaseText a text can be entered that is shown in the webslider when the cursor is placed above the upper end arrow button of the webslider. This button is used to increase the value of the webslider. Default text is 'Increase'.

Max

The property Max refers to the upper limit of the webslider, and consists of three sub-properties:

  • Format: indicates how the upper limit value should be displayed
  • ShowCaption: indicates whether the upper limit value should be displayed
  • Width: indicates the width of the box at the upper end of the webslider, in which the upper limit value is displayed

Min

The property Min refers to the lower limit of the webslider, and consists of three sub-properties:

  • Format: indicates how the lower limit value should be displayed
  • ShowCaption: indicates whether the lower limit value should be displayed
  • Width: indicates the width of the box at the lower end of the webslider, in which the lower limit value is displayed

Width

The width of the WebSlider. This property is required. It’s not possible to configure the height using CSS. The measurements of the webslider are decisive for the division of the slide bar.

Rendering

A WebSlider object is rendered in different parts that hold their own standard layout. It is possible however to change these using CSS. The classname entered in the CssClass property is used in different places within the HTMLCode. For example, when you enter the CssClass 'YourWebSlider', the WebSlider object broadly is rendered as follows:

<span class="YourWebSlider_CurrentValue"></span>
<span class="YourWebSlider_MinValue"></span>
<span class="YourWebSlider_MaxValue"></span>

The WebSlider as a whole consists of both scripting codes and multiple HTML elements and list items. These are not specificly relevant for styling the WebSlider object, and therefore not displayed in the code above.

The classes that are derived of the CssClass filled in are:

  • YourWebSlider_CurrentValue: The current value chosen in the time bar. This value is displayed if you have the property ShowCurrentValue set on 'Sliding' or 'Always'.
  • YourWebSlider_MinValue: The lower end value of the slide bar
  • YourWebSlider_MaxValue: The upper end value of the slide bar

When you are displaying the current value in your application, you probably want to locate it yourself. Therefore you could use this CSSexample:

.YourWebSlider_CurrentValue{
	position:absolute;
	top:100px;
	left:50px;
}

Beware that the rendering of objects depends on the DocType selected for your Futurama Document. The rendering mentioned above is based on the DocType XHTML_1_0. If your using the old DocType HMTL4_Transitional, please consult the Document page for further information.

Example

This example shows the usage of the CustomChangeScript property.

Download

Download the Futurama Document WebSlider Example.

Description

  1. Open the XML-document which is contained in the zip-file in the Futurama Editor (Version 4.2.1 or later).
  2. Here a WebSlider object can be seen within the WebPage and WebPanel construction.
  3. In the CustomChangeScript property is stated that for displaying the current value, the result of the JavaScript formula 'formatPercentage' should be used. The parameter in the CustomChangeScript is (and must be) 'value', which refers to the value chosen in the WebSlider
  4. The script for this formula is defined in an HTMLInclude, directly above the WebSlider object. It states that the current value should be displayed with the percentage sign (%) added to it. When running this 'application' in your browser, it can be seen that the Current Value is displayed as so.
  5. You could have also directly inserted the formula ' value +'%' ' in the CustomChangeScript property, which would give the same result. However, by defining the script in a separate HTMLInclude, you can also use it multiple times for different websliders.

Related Topics

- Futurama Objects: The Atlas chapter that describes all Futurama objects. See the Output-section for a description of the type of objects this object belongs to.

- UserVariable

 

Updated: 2012-08-09