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!

Improve Your Security Posture

Watch NowImprove Your Security PostureCustomers are at the center of everything we do at Splunk and security ...

Maximize the Value from Microsoft Defender with Splunk

 Watch NowJoin Splunk and Sens Consulting for this Security Edition Tech TalkWho should attend:  Security ...

This Week's Community Digest - Splunk Community Happenings [6.27.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...