Question about jquery plugins in asp.net page

Question

I have a web page which contains jquery plugins whose initialization code is placed in document.ready event. My problem is while the page is loading the plugins take time for being applied, for example in the top of the page I am using a plugin for tabs and in the body of the page there's an images slider plugin and also a plugin that truncates text in some paragraphs, what happens is when I request the page and while it's being displayed in browser, the plugins seems to be not bound to the elements for example all the tabs containers are collapsed below each other as well as the images that supposed to be sliding horizontally they are all on top of each other and the text that supposed to be truncated isn't and once the page completely finish loading all the plugins take effect, I can see all the tabs containers jumping up to be correctly displayed, and the text suddenly gets truncated. The client is complaining from this behavior of page elements being collapsed then assembled, it really looks very ugly. I don't know how to solve this.

Can anyone help me? Thanks in advance

Example of the collapsed tabs

Example of the collapsed image slider

that's kind of the point of document ready ;) it sets up the plugins, when the document is ready! you could try loading the content ajaxly once the main document is loaded. is there a sample we can look at? — Patricia
– Patricia, Commented Jun 15, 2011 at 17:30

Town · Accepted Answer · 2011-06-20 12:28:14Z

1

You can assign the ui-tabs-hide class to your tab content to prevent FOUC (Flash Of Unstyled Content).

Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:
<div id="example" class="ui-tabs">
  ...
  <div id="a-tab-panel" class="ui-tabs-hide"> </div>
  ...
</div>

answered Jun 20, 2011 at 12:28

Town

14.9k3 gold badges50 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yasmine Over a year ago

Sorry I forgot to accept your answer, I was overwhelmed by joy when the problem was gone :)

Collectives™ on Stack Overflow

Question about jquery plugins in asp.net page

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