Dashboards & Visualizations

How to customize a drilldown panel to apply a jquery animation in simple XML?

maurelio79
Communicator

Hi to all,

I successfully applied a custom jquery animation to panels already present in a dashboard when the page is loaded.
I'd like to do the same with panels that appear with a drilldown option. Is it possible in simple xml?
I think i have in some way to intercept the click event and apply my custom jquery animation, but how?

Thanks very much and regards.

1 Solution

maurelio79
Communicator

Here i am.
Using CSS3, you can do something like this:

#panel3, #panel5 {
        -webkit-animation-timing-function: ease-out;
        -webkit-animation: mymoveA 3s  1;
        animation: mymoveH 3s 1;
        position: relative;
}

@-webkit-keyframes mymoveA {
        from {left: -1000px; }
        to {left: 0px; }
}

#panel4, #panel6 {
        -webkit-animation-timing-function: ease-out;
        -webkit-animation: mymoveB 3s  1;
        animation: mymoveB 3s 1;
        position: relative;
}

@-webkit-keyframes mymoveB {
        from {right: -1000px; }
        to {right: 0px; }
}

in this way, for example, these panels appears moving from left to normal position or right to normal position.
If someone needs more information or help, do not hesitate to ask.

Thanks and regards

View solution in original post

maurelio79
Communicator

Here i am.
Using CSS3, you can do something like this:

#panel3, #panel5 {
        -webkit-animation-timing-function: ease-out;
        -webkit-animation: mymoveA 3s  1;
        animation: mymoveH 3s 1;
        position: relative;
}

@-webkit-keyframes mymoveA {
        from {left: -1000px; }
        to {left: 0px; }
}

#panel4, #panel6 {
        -webkit-animation-timing-function: ease-out;
        -webkit-animation: mymoveB 3s  1;
        animation: mymoveB 3s 1;
        position: relative;
}

@-webkit-keyframes mymoveB {
        from {right: -1000px; }
        to {right: 0px; }
}

in this way, for example, these panels appears moving from left to normal position or right to normal position.
If someone needs more information or help, do not hesitate to ask.

Thanks and regards

maurelio79
Communicator

If someone is interested, I did it with CSS3, but in jquery, I was not able to get this to work.

Bye

0 Karma

MuS
SplunkTrust
SplunkTrust

Do you mind sharing your css3 file an an answer?

maurelio79
Communicator

Shure! I will share this afternoon, now i'm not at work.

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...