I. Overview
1.1 Requirement
When designing a large-screen report block, we hope to realize the effect of marquee on text. Generally marquee can be realized by “HTML+JS” on a single row of text. How can we enable the effect of marquee to work on a whole report block as shown in the figure below?
1.2 Solution
Hide scrollbars and realize the effect of marquee by defining an After Initialization event for a report block. The solution has the following characteristics:
1) When marquee works on multiple report blocks, it can pause on each report block separately.
2) If any row of a report block is frozen, the effect of marquee remains unaffected.
3) If a custom scrollbar is installed, the effect of marquee remains unaffected.
II. Sample
2.1 Create a new template
2.1.1 Create a new data connection
Create a new dashboard and a new dataset ds1 by inputting the following SQL statement:
SELECT * FROM SALES_BASIC
See the figure below:
2.1.2 Design report style
Create a new report block report0 in the style shown below:
2.1.3 Freeze the title row
Select the report block report0, click [Edit] and freeze the No.1 row, as shown in the figure below:
2.2 Add an After Initialization event
Select the report block report0 and add an After Initialization event, as shown in the figure below:
Input the following JS codes:
setTimeout(function() {
var $report = $("div[widgetname=REPORT0]"); //Get the div element of the corresponding report
var $scroll = $report.find("#frozen-center"); //As the report block contains a frozen row, get the object to be scrolled through #frozen-center
var flag = window.flag0; //Set a global parameter flag to mark the pause or operating state of scrolling. If marquee works on multiple report blocks, then the flag for each report block should be different
$report.find("#frozen-center").css('overflow-x', 'hidden');
$report.find("#frozen-center").css('overflow-y', 'hidden');
$report.find("#frozen-north").css('overflow-x', 'hidden');
$report.find("#frozen-north").css('overflow-y', 'hidden'); //Hide scrollbars if there is any frozen row or column
$report.find(".reportContent").css('overflow-y', 'hidden');
$report.find(".reportContent").css('overflow-x', 'hidden'); //Hide scrollbars if there is no frozen row or column
flag = true; //Scroll by default
$scroll.mouseover(function() {
flag = false; //If the mouse is hovered over the report block, then scrolling stops
})
$scroll.mouseleave(function() {
flag = true; //If the mouse leaves, then scrolling resumes
})
var old = -1;
setInterval(function() {
if (flag) {
currentpos = $scroll[0].scrollTop;
//Get the distance from the scrolling object to the top
if (currentpos == old) {
$scroll[0].scrollTop = 0; //Reset if the bottom is reached
} else {
old = currentpos;
$scroll[0].scrollTop = currentpos + 1.5;
//Move 1.5 pixels downward if the bottom is not reached
}
}
}, 25); //Execute at the frequency of 1.5 pixels downward per 25ms
}, 500);
Users have to make the following modifications on their own:
Modification | Notes |
var $report = $("div[widgetname=REPORT0]") | 1) REPORT0 should be modified according to the name of a report block 2) The name of a report block should be capitalized, for example, the report block report0 in the Sample should be written as REPORT0. |
var $scroll = $report.find("#frozen-center") | The scroll slider element should be modified as needed: #frozen-center: there is freeze in a report block .reportContent: there is no freeze or custom scrollbar plugin in a report block .scrollDiv: there is no freeze in a report block but a custom scrollbar plugin is installed |
var flag = window.flag0 | If there are multiple marquee-containing report blocks in a template, which are set as flag0, flag1, flag2, …, respectively Global variables should be different from each other, or pause of marquee on a single report block cannot be realized. |
Note
If the desired effect is not realized due to slow loading, we may appropriately adjust the delay defined by the delay function setTimeout.
2.3 Preview
Save the template, click [Preview] to see the marquee effect of the report block report0, as depicted in 1.1 Requirement.
