Resetting CSS attributes in Kendo UI Mobile when transitioning between views after removing them with jQuery

Dealing with the flicker of unstyled content in my kendo mobile web app has been a challenge, but I found a solution by using a specific CSS rule within my stylesheet:

[data-role="content"]
    { 
    visibility: hidden;
    }

This effectively hides all content within my kendo views, and then in the JQuery "load" event, I remove the CSS attribute to reveal the content:

$(window).bind("load", function () {
    // flicker of unstyled content
    $("[data-role=\"content\"]").css("visibility", "visible");
});

This method worked well until I encountered issues when utilizing kendo's view transitions.

During the slide:left transition, the original visibility: hidden; from my CSS file is reapplied, making everything invisible again.

I'm curious if this behavior is specific to kendo and how it handles views and transitions. While I could manually add a class with visibility: hidden; to each data-role="content" element and remove it in the "load" event handler, I prefer a less hardcoded approach.

Any insights or suggestions would be greatly appreciated.

jquerycsskendo-ui

Answer №1

During initialization, the data-role=content attributes are configured, meaning your load event handler will only apply to certain views (unless you manually set data-role=content).

You might want to think about hiding the application container instead.

Answer №2

After receiving recent upvotes for this message, I want to share my solution for avoiding the Flicker of unstyled content. This method has proven successful for me.

1.) Begin by adding a class to the main page of your single page application:

<style>
    .m-hide-unstyled-content {
        visibility: hidden;
    }
</style>

2.) Next, create a global function in the main page of your single page application:

<script>
        function eliminateFlickerOfUnstyledContent() {
            // fix for flickering unstyled content
            $(".m-hide-unstyled-content).removeClass("m-hide-unstyled-content");
        }
</script>

3.) Remember to manually include the data-role="content" div tag with our created class for every view:

<div class="m-hide-unstyled-content" data-role="content">
    ...
</div>

4.) Lastly, call the function from step 2 at the end of each view's data-init function:

<div data-role="view" data-init="initializeMyView">
    ...
</div>

<script>
    function initializeMyView(event) {
        ...
        eliminateFlickerOfUnstyledContent();
    }
</script>

By following these steps, you can effectively prevent any instances of unstyled content flickering on your website. Hopefully, this guide proves helpful to others.

Answer №3

To solve the flickering issue, I successfully implemented a technique where I set the display property to none for the flickering elements. Then, with the help of CSS or JavaScript, I managed to control when these elements are displayed using events like onHide or onShow.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When deployed, Angular 14 and Bootsrap 5 are functioning properly on a local environment but encountering issues on an online

My Angular application (version 14.2.0) is integrated with bootstrap (version 5.2.3). Upon building and deploying the application on a local IIS server, everything displays correctly as shown in the image below: https://i.sstatic.net/pLDs6.jpg However, w ...

javascriptcssangulardeploymentbootstrap-5

Transforming the code from numerous div elements to utilizing Ajax for efficient execution

One of the key functionalities is that the content within the <div> changes based on the option selected in the <select> element. I am looking to incorporate ajax instead of multiple <div> elements. However, my proficiency with ajax is l ...

javascriptphpjqueryajax

Utilizing bootstrap for a responsive design that includes max-height constraints and horizontal

Seeking to modify the appearance of my Angular Template by incorporating Bootstrap and a custom CSS file. <!-- index.html --> <div static-include="partial/example.html"></div> The static-include directive, sourced from Stack Overflow, p ...

cssangularjstwitter-bootstrap

Having trouble with CSS media queries not functioning properly on Internet Explorer version 9?

Incorporated media queries in my design to adjust the width of certain elements on the page according to the browser's width. These are the queries I am using: @media screen and (min-width:1024px) @media screen and (max-width:1024px) Chrome, Safari, ...

cssinternet-explorermedia-queries

Break up a list into separate paragraphs and style each word using individual CSS

I have a user-generated paragraph that consists of a list of words separated by commas, such as "dog, cat, hamster, turtle." I want to be able to individually assign attributes to each word in the list. Check out this image for reference In the example i ...

javascripthtmlcss

The script is unable to locate the property 'indexOf' because it is undefined

Searching for a specific value in an array using ui-select to capture values. A function is created to verify the existence of the value, which works perfectly fine. However, the console displays multiple instances of the error 'Cannot read property & ...

javascriptjqueryangularjs

I need to position the CSS vertical scrollbar on the right side of the page

I can't figure out how to move the vertical scrollbar to sit on the right side of my site's work page. Any help would be greatly appreciated. Below is the provided HTML code: <div class="heading"> <h1>PRINT</h1> &l ...

htmlcss

The challenge of navigating CSS specificity guidelines

In my CSS file, I have defined two styles for a table with the class "myTable". The first style sets the background color of header cells to gray, while the second style sets the background color of odd rows to blue: .myTable th { background-color: gr ...

css

Is the fixed header see-through?

I have a query regarding my website design. Currently, the fixed header on my site is transparent and when I scroll down, the content overlaps the header. However, I want the header to remain above the content. Can anyone provide assistance with this issue ...

htmlcss

Challenge with CSS selectors

Here is the HTML code I am working with: <label for="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]" class="error" id="tx_alterneteducationcatalog_subscriberadd[newSubscriber] [gender]-error">This field is required.</label> ...

htmlcsscss-selectors

Prevent keypress from being detected while the confirm box is displayed

My website heavily relies on key events, and for certain actions, it triggers a bootbox confirm box. This confirm box appears over a transparent layer, blocking all mouse click actions unless the user interacts with the confirm box. Now, I also want to dis ...

javascriptjqueryhtmlbootbox

Various objects are becoming engaged and chosen instead of a single item being focused on

In my React application, I have integrated a searchable Semantic UI dropdown. The issue I am encountering is that when I select an item by typing in the search field, the element matching the search text gets the class "active" and the element at the index ...

htmlcssreactjsreact-reduxsemantic-ui-react

Icons will be displayed when hovered over

Is it possible to display icons on hover in a div and hide them otherwise using just CSS? Or do I need to use javascript for this function? Thanks in advance! Example: HTML: <div id="text_entry"> <p>Some text here</p> <span ...

jqueryhtmlcss

Modifying a div element upon the successful completion of an ajax/json request

Currently, I have a form on my webpage for creating a new album. Alongside this form, there is also a delete album form. After successfully creating an album, I want to automatically update the checkbox list in the delete album form with the details of the ...

phpjqueryhtmlajax

Ways to adjust image sizes to fill the row with CSS

I am facing an issue with displaying multiple images using flexbox. Whenever an image cannot fit in the same row, it leaves a gap which disrupts the layout. https://i.sstatic.net/bXltY.jpg My goal is to resize these images dynamically so that there are n ...

htmlcssflexbox

Manage images with Jquery and PHP/Mysql

I am currently in the process of developing a CMS and have been searching for a suitable JQuery/PHP image manager without success. Therefore, I have decided to take on the challenge of creating my own image manager from scratch. The only setback is that my ...

phpjqueryajaxjson

How can you create a dynamic bounce effect for text with jquery animate()?

I've been experimenting with Jquery to achieve a bounce effect, here's what I have so far: Html: <div id ="animation">bounce</div> Jquery: $("#animation").animate({ marginTop: "80px" }, 1500 ) .animate({ marginBotto ...

javascriptjquery

The alignment of inline divs is off and they are not forming a straight row

From my understanding, adding display:inline to divs with a relative position should align them (left to right) similar to float:left. I attempted both methods but with no success. Below is an example of my latest try with inline displaying. My goal is to ...

javascripthtmlcss

Manipulating a <DIV> style within an Angular 8 project

Looking to change the display style? Check out this template: <div style="display: none" #myDiv /> There are 2 methods to achieve this: Method 1: Directly if (1===1) this.myDiv.style.display = "block"; Method 2: Using @ViewChild @ViewChild(&apo ...

cssangulartypescriptstylesangular8

What is the best way to make all <li> elements appear on one line above, regardless of the content within each <li>?

Is there a way to align all li elements on the same line regardless of their content? Check out this screenshot for reference: ? The main issue I'm facing is that when I try to code it, the content within each li element shifts the other lis like thi ...

htmlcsshtml-lists