Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

CSS background color and background image to html element

Following are some CSS background properties

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

The background-color property specifies the background color of an element.

Code snippet

.details-section {

    background-color: #fff;

    color: #444;

}

The background-image CSS property sets one or more background images on an element.

Code snippet

.header-section {
    visibility: visible !important;
    position: relative;
    background: url("../images/header-img.gif");
}


Set background color and background image together to element 
/*background color and image shorthand CSS*/ 
.loading {
    position: relative;
    background: rgba(211,211,211) url("../images/progress.gif");
}

 

Set background color and background image to element with background position and background repeat
/*background color and
image shorthand color, image, position, and repeat CSS*/ 
.loading-bar {
    position: relative;
    background: rgb(211,211,211) url("../images/in-progress.gif") center no-repeat;
}

 

/*right side top
profile icon with shorthand color, image, position, and repeat CSS*/ 
.profile-section {
    background: #ffffff url("profile-us.png") no-repeat right top;

Bootstrap tab change event or click event customization

Bootstrap tab change event or click event customization

Ho to add custom code to check if any tab is clicked, for example hide/show some section for tab content.

Code snippets,

<ul class="nav nav-tabs">
          <li class="nav-item">
          <a class="nav-link active" href="#Home ">Home </a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#About ">About </a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#Contacts ">Contacts </a>
        </li>
 </ul>

jQuery code to detect event Click

   //First tab click event 
    $(".nav-tabs a:first-child").click(function () {
        //here is your customization code
     });
 
   //2nd tab click event
    $(".nav-tabs a: nth-child(2)").click(function () {
        //here is your customization code
     });
 
   // last tab click event
    $(".nav-tabs a:last").click(function () {
        //here is your customization code
     });
 
  // click for all tabs
    $(".nav-tabs a").click(function () {
        //here is your customization code
     }); 

Show or hide specific bootstrap tab with jQuery

The .nav-tabs class is used to generate a tabbed interface with nav-tabs as tabs in bootstrap.

Tab Nav

<ul class="nav nav-tabs">
          <li class="nav-item">
          <a class="nav-link active" href="#userList">User list </a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#details">Details</a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#rewards">Rewards</a>
        </li>
  </ul>

Tab content (Tab pane)

<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="userList" role="tabpanel" aria-labelledby="user-tab">some actual list data here..</div>
<div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">some actual details data here…</div>
<div class="tab-pane fade" id="rewards" role="tabpanel" aria-labelledby="rewards-tab">Rewards data here...</div>
</div>    

 

jQuery Code to show specific tab

Show first tab

$(".nav-tabs a:first-child").tab("show");


Show 2nd tab

$(".nav-tabs a:nth-child(2)").tab("show"); 


Show last tab

$(".nav-tabs a:last").tab("show"); 

 

To hide tab simply remove active class from nav-item

$(".nav-tabs a.active").removeClass("active");