The tabber blinks rapidly as the page loads

Whenever the page loads, I notice that my tabber flickers. It doesn't display properly until the loading is complete in both FireFox and Chrome browsers. Is there a way to prevent this flickering issue?

<div class="tabber">  
<div class="tabbertab tab_buy">
<h2>Buy</h2>    
<div class="buy_cont">
<input id="txt" name="txt"  type="text" placeholder="Search by Keyword..." />
 <div class="loc_sec">
<a href="#" target="_blank"><img src="images/map_ico.png" alt="" />
Location Map</a>
</div>
</div> </div>

<div class="tabbertab tab_rent">
<h2>Rent</h2>   
<div class="buy_cont">
<input id="txt" name="txt"  type="text" placeholder="Search by Keyword..." />

<div class="loc_sec">
<a href="#" target="_blank"><img src="images/map_ico.png" alt="" />
Location Map</a>
</div> </div>
</div>
</div>
jqueryhtmlcsstabs

Answer №1

To hide the tabber, set #tabber to display: none in your CSS file. This will ensure that the tabber is not visible while your document is loading.

Once your JavaScript file has finished loading and setting up the tabber, use jQuery to show it again.

$('#tabber').css('display', 'block');

For more tips on gracefully loading a web page, check out this thread.

Answer №2

Here is a solution tailored to your specific question, utilizing the following code snippet (without the use of Tabber.js):

$('.tabber').wrapInner('<div class="tabber-content-col"></div>');
$('.tabber-content-col').before('<div class="tabber-nav-col"><ul class="tab-nav"></ul></div>');
$('.tabbertab').each(function() {
  var tabNav = $(this).children('h2').text();
  $('.tab-nav').append('<li>' + tabNav + '</li>');
});
$('.tabbertab').hide();
$('.tabbertab').first().show();
$('.tab-nav > li').first().addClass('active');
$('.tab-nav > li').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
  $('.tabbertab').eq($(this).index()).show().siblings().hide();
});
ul.tab-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  background: lightgray;
}

ul.tab-nav>li {
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.2;
  text-transform: capitalize;
}

ul.tab-nav>li.active {
  background: #eee;
}

.tabber-content-col {
  overflow: hidden;
  background: #eee;
  padding: 40px 20px;
  margin: 0 0 50px;
}

.tabbertab {
  display: none;
}

.tabbertab>*:first-child {
  margin-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tabber">
  <div class="tabbertab tab_buy">
    <h2>Buy</h2>
    <div class="buy_cont">
      <input id="txt" name="txt" type="text" placeholder="Search by Keyword..." />
      <div class="loc_sec">
        <a href="#" target="_blank"><img src="images/map_ico.png" alt="" /> Location Map</a>
      </div>
    </div>
  </div>

  <div class="tabbertab tab_rent">
    <h2>rent</h2>
    <div class="buy_cont">
      <input id="txt" name="txt" type="text" placeholder="Search by Keyword..." />

      <div class="loc_sec">
        <a href="#" target="_blank"><img src="images/map_ico.png" alt="" /> Location Map</a>
      </div>
    </div>
  </div>
</div>

:

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

Exploring IndexedDB with Multi-dimensional Relationships

How do you manage many-to-many relationships in IndexedDB systems? For instance, let's consider a scenario where there is a Blog object to represent a blog post and a Tag object for tagging the posts. A single Blog can have multiple tags, and each ta ...

javascripthtmlindexeddb

The background image is cropped at both the top and bottom edges

Check out this JSFiddle link: http://jsfiddle.net/SoSoDef/uhx3o62f/1/. The code seems to be running fine, but I'm facing an issue where the image is being slightly cut off at the top and bottom for some reason. -webkit-background-size: cover; Can an ...

htmlcssimage

Utilize Jquery to trigger Controller Action

My goal is to refresh a specific 'div' when a user adds an item to the shopping cart. I have some jQuery code that should execute on the click event. It should trigger a post action (which is functioning correctly) and then reload everything with ...

jqueryajaxasp.net-mvc

Guide to retrieving a user's current address in JSON format using Google API Key integrated into a CDN link

Setting the user's current location on my website has been a challenge. Using Java Script to obtain the geographical coordinates (longitude and latitude) was successful, but converting them into an address format proved tricky. My solution involved le ...

javascriptjqueryhtmlgeolocation

Placing a button that is not visible on the screen

As I was designing a webpage for a new company, everything was perfect in the header except for the fact that we didn't have a logo yet. So, I decided to put a placeholder image in its place. Now that we finally have the actual logo and replaced the p ...

htmlcssposition

Can the ID attribute be used in the closing tag of an HTML element

Could this code be improved by properly closing the div with an ID: <html> <body> <div id="main"> </div id=main"> </body> </html> ...

htmlcss

Unable to adjust table, row, and cell heights in Outlook template due to HTML/CSS formatting issues

I'm struggling to make the height of the leftmost (commented) nested table adjust automatically based on the content in the right section. It displays correctly in Chrome, but does not stretch in Word/Outlook. Any ideas on how to fix this for Word/Ou ...

htmlcssoutlook

Use jQuery Ajax to fetch an image and display it on the webpage

Currently, I am working on an application that is designed to browse through a large collection of images. The initial phase of the project involved sorting, filtering, and loading the correct images, as well as separating them into different pages for imp ...

javascriptphpjqueryajaximage

How to smoothly scroll to a specific div on click and hide the top div using Jquery

Snippet of Code: HTML Markup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Title</title> </head> <body> <div id="intro"> <a href="#" id="showfullsite"></ ...

javascriptjqueryhtmlcss

Two boxes each taking up half of the width, with content placed inside a container

How can I achieve the appearance seen in this image? https://i.sstatic.net/2oZW8.png The layout consists of four columns using regular Bootstrap code. The first two columns should have a white background within a .container, while the other two columns s ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Mistake in labeling a checkboxgroup in ExtJs4.2 by wrapping a boxLabel incorrectly

I am encountering an issue where the box labels of the checkboxes are wrapping under the checkbox: http://jsfiddle.net/6pYWh/ { xtype: 'checkboxgroup', columns: 1, vertical: true, items: [ ...

javascriptcssextjs

Using the Count() function in PHP to update information upon page refresh

I have created a basic cart that displays a div containing purchased items when hovered over. The issue I am facing is that every time I click on the add to cart button, it doesn't immediately update the number of items in the cart. I have to manually ...

javascriptphpjquery

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Is there a way to dynamically display Bootstrap tabs? I want the content in the tab to show when the link is clicked, and also have a close button. I need the tabs to be aligned in a single row without wrapping down if they don't fit. Here's an ...

jquerycsstwitter-bootstrap

Dynamically changing the borders of WebGL canvases: a guide to adding and

Here is my code snippet for creating an HTML canvas: <canvas id="glCanvas" class="canvases" width="20" height="20></canvas> To set the color, I am using the following: gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); I am w ...

javascripthtmlcssborder

Eliminate extra spacing in the panel-footer on mobile devices

Trying to eliminate the empty space displayed below the footer in mobile mode, and ensure it stretches to fill the width automatically. I have included some script-related code for reference, but omitted it as it is more logic-based and not design-related. ...

htmlcssasp.netbootstrap-4webforms

Performance problems arising from use of Tailwind CSS drop-shadow class

Lately, I've been struggling to pinpoint the root cause of a drastic FPS drop in my application. The issue arises after using the app for some time, leading to a performance plunge down to around 10FPS. After investigating, I discovered that eliminati ...

cssvue.jstailwind-css

Is the radio functionality and dropdown menu experiencing technical difficulties?

I'm having issues with my code, specifically in the JS function when I try to retrieve values from radio buttons and dropdown menus. Can someone help me figure out what's going wrong? CSS: #mytable { width:400px; border: 1pt solid blac ...

javascripthtmlcss

Utilizing SEO and incorporating special characters like !# in a website's URL

I came across an interesting concept about designing a website that utilizes AJAX to load each page section without compromising SEO. It involved incorporating !# in the URL, similar to the approach adopted by Twitter. However, I've been unable to loc ...

javascripthtmlajaxseo

Responsive design is achieved through the use of CSS media queries targeting the

Could someone please clarify the meaning of the following value? Does it indicate that the output device must support exactly 256 colors, or is it acceptable for the output device to have 256 colors or fewer, or does the device need to support 256 colors ...

cssmedia-queries

What could be causing my image alignment to be disrupted by my navigation bar?

When the navigation bar is absent, my image aligns perfectly centered on the page. However, once I include the nav bar (created with an unordered horizontal list), the image shifts more towards the left of the page. This layout is very basic in nature. ...

htmlcss