Dashboards & Visualizations

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

maurelio79
Path Finder

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
Path Finder

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
Path Finder

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
Path Finder

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
Path Finder

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

0 Karma
.conf21 Now Fully Virtual!
Register for FREE Today!

We've made .conf21 totally virtual and totally FREE! Our completely online experience will run from 10/19 through 10/20 with some additional events, too!