My page design getting distorted after page load (during page load tabs are visible as smaler and unaligned but after pageload all gets back to proper design)

Question

0.00/5 (No votes)

See more:

, +

Hi every Tech geek avilable in this forum
I am using the following code and i am using update panel
The issue is that i am using jquery for the alignment of the tabs used in my page
but when ever the page gets loaded the tabs gets distorted and looks as the initial stage li element and are un aligned
This is happening as i have used few service which call some otehr serices for data and it takes 1-2 seconds so in that timne frame the page looks distorted and as i know the jquery which is used to keep align the tabs is called after the whole html is loaded and code behind is executed
kindly help

<script src="/_layouts/1033/STYLES/js/commonstyles/js/jquery.uniform.js" type="text/javascript"
charset="utf-8"></script>
<script src="/_layouts/1033/STYLES/js/commonstyles/js/jquery.uniform.min.js" type="text/javascript"
charset="utf-8"></script>

<asp:ScriptManagerProxy ID="scriptmanagerproxy1" runat="server">
<Scripts>
<asp:ScriptReference Path="/_layouts/1033/STYLES/js/js/Script.js" />
</Scripts>

Quote:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<contenttemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
DynamicLayout="true">
<progresstemplate>
Loading...

Pending Proposal

Create Customer

Add a Customer

Search Your Customer(s)

Pending Inspection

Pending Submission


etc...........
etc....

any one help

Posted 10-Jun-14 22:25pm

Member 8073143

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Answer 1 · 2014-06-10T23:32:00

Solution 1

When browser loads a web page first it have to load the content, than build a object model (DOM) for that, and just as the last step the JavaScript will run and apply the design (that's the reason to move as much design as possible to CSS).
In your case the loading/rendering phase of the page took too much time (too much content?) so JavaScript have to wait. When all content is available JavaScript runs and everything is in order.
I would consider such behavior as design problem...

Posted 10-Jun-14 23:32pm

Kornfeld Eliyahu Peter

Comments

Member 8073143 11-Jun-14 6:00am

Thnaks for your swift response. I knew the exact reason as you said but i need the soultion. Can you kindly help what can be the possible solution. As the project is ready and design cant be changed is there any possible way where the jquery can be called simulteneously during pageload or aschronously ?

Thanks7872 11-Jun-14 6:42am

If the project is ready but doesn't load as expected, it can't be called ready. Secondly, to resolve issue you have to take some steps which is necessary. That's the reason you should always decide/maintain the structure of the application right from the start.

At this point of time, try to remove unnecessary CSS. Move design to CSS file as peter suggested.

Member 8073143 11-Jun-14 6:22am

Hi peter
thnks for the info
can you tell me as i am using .net code and in .cs page i mean in server side page few webservice is called wich take time
So i just want to know that what is the sequence of code execution
doest the whole html/css load first
then the code behind/ cd file
then at last jquery executes
correct me if i am wrong anywhere ?

Kornfeld Eliyahu Peter 11-Jun-14 7:24am

As any JavaScript is connected to the DOM of your page it can not be run until everything is loaded. If your page has a long loading time because of the amount of data you have to load with, you must separate the process.
1. Create a good looking HTML/CSS based page and load it
2. On page 'ready' display some kind of animation (like progress bar) and use JavaScript to load and display the info...