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
Legend

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!

Technical Workshop Series: Splunk Data Management and SPL2 | Register here!

Hey, Splunk Community! Ready to take your data management skills to the next level? Join us for a 3-part ...

Spotting Financial Fraud in the Haystack: A Guide to Behavioral Analytics with Splunk

In today's digital financial ecosystem, security teams face an unprecedented challenge. The sheer volume of ...

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability As businesses scale ...