1

I am working on a web page based on Bootstrap CSS and consisting of several tabs. When dealing with small and xs devices I am using http://openam.github.io/bootstrap-responsive-tabs/# to make the tabs stack vertically.

Although it works properly there is a short time, when the page is loaded, in which the standard tabs are shown and then the bootstrap responsive script is executed. What is the right way of avoiding that?

I was thinking to make the tabs hidden and then visible when the document is ready after the responsive tab script is invoked.

Prabhat Singh
  • 192
  • 20
Andrea Sindico
  • 7,358
  • 6
  • 47
  • 84
  • 1
    Use a JS code to detect the width <= of the small devices, when there's one detected, make the scripts load in the head, you can use innerHTML to write your script tags in the head, so it'll load them and then pass to the body. And for the other devices, put your script tags at the end of the body so it'll load faster. I think this'll work. – BahaEddine Ayadi Jul 28 '15 at 06:16

2 Answers2

0

Make tabs visible on document ready or show loader like loading gif image until page get fully ready

Muhammad Atif
  • 1,050
  • 1
  • 9
  • 21
0

this reason will be make the scripts load in the head .the some of which actually render in the body .please read this link i hope you can idea

Should I write script in the body or the head of the html?

Community
  • 1
  • 1
channasmcs
  • 1,104
  • 12
  • 27