How to override inline css style property which added by jquery

Question

I am using Kendo UI tabs so once tabs reach the last li list the right navigation arrow get hidden or added the display none inline CSS with jquery so I want to override the display none to display block !important and add opacity 0.4 when div have display none property.

https://dojo.telerik.com/@vishal14/UcaPEYoh

I try with if statement but its not working

<script>
                $(document).ready(function () {
                    $("#tabstrip").kendoTabStrip();
  
                    if($('.k-button').is(':visible')){
                        $(this).css("opacity","0.2");    
                    }else{
                        $(this).css("opacity","1");  
             
                }
                });
            </script>

There is no $('.k-button') in code shown (or in demo link) and this is the document — charlietfl
– charlietfl, Commented Aug 13, 2020 at 10:34

Ahmed Shamel · Accepted Answer · 2020-08-13 12:08:08Z

Your code if($('.k-button').is(':visible')) is not working because the left and right buttons are added dynamically.

For the right button, try this code:

$(document).ready(function () {
            $("#tabstrip").kendoTabStrip();
            setInterval(function () {
                var el = $('.k-tabstrip-next');

                if (el.css('display') == 'none') {
                    el.css("opacity", "0.2").css('display', '');
                    el.attr('data-el', 'stop');
                }
                else if (el.attr('data-el') != 'stop')
                    el.css("opacity", "1");
            }, 200);

            $(document).on('click', '.k-tabstrip-prev', function () {
                $('.k-tabstrip-next').attr('data-el', '');
            });
        });

If you want both buttons to be visible, you can try this:

$(document).ready(function () {
            $("#tabstrip").kendoTabStrip();
            setInterval(function () {
                var ne = $('.k-tabstrip-next');
                var pr = $('.k-tabstrip-prev');

                if (ne.css('display') == 'none') {
                    ne.css("opacity", "0.2").css('display', '');
                    ne.attr('data-el', 'stop');
                }
                else if (ne.attr('data-el') != 'stop')
                    ne.css("opacity", "1");

                if (pr.css('display') == 'none') {
                    pr.css("opacity", "0.2").css('display', '');
                    pr.attr('data-el', 'stop');
                }
                else if (pr.attr('data-el') != 'stop')
                    pr.css("opacity", "1");


            }, 200);


            $(document).on('click', '.k-tabstrip-prev', function () {
                $('.k-tabstrip-next').attr('data-el', '');
            });


            $(document).on('click', '.k-tabstrip-next', function () {
                $('.k-tabstrip-prev').attr('data-el', '');
            });
        });

Collectives™ on Stack Overflow

How to override inline css style property which added by jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related