CSS Tabs Navigation Tricks

Developing a tabs navigation with CSS holds some simple tricks, but most of the front-end guys end up getting the results in an inappropriate way. Here's what you need to know about it -
I. The margin-bottom: -1px to the <li> element
II. The border and background to the <a> element
III. Change in border and background in the <a> element when <li> has .active class

HTML: 

  
Tab 1
  
Tab 2
  
Tab 3
  
Tab 4
  
Tab 5

CSS: 

ul{ margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #ddd; 
}
ul:before, ul:after{
    content: ""; display: table;
}
ul:after{
    clear: both;
}
/**/
ul li{ 
    float: left; 
    margin: 0 4px -1px 4px;                /*Trick 1*/
}
ul li a{ 
    display: block; 
    text-decoration: none; 
    padding: 10px 15px; 
    border: 1px solid transparent;         /*Trick 2*/
    background: transparent;               /*Trick 2*/ 
}
ul li a:hover{
    background: #eee;
}
ul li.active a{ 
    border-radius: 4px 4px 0 0;
    border: 1px solid #ddd; 
    border-bottom: 1px solid transparent; /*Trick 3*/ 
    background: #fff;                     /*Trick 3*/ 
}

jQuery: 

$(function(){
    $('li a').on('click', function(e){
        e.preventDefault(); // to avoid page refresh because a elements have # in href 
        $('li').removeClass('active');
        $(this).parent('li').addClass('active');
    });
});

Demo: http://jsfiddle.net/dipaks2011/o35c8yxt/

Note: The fiddle demo is creating a ghost border on the right side of the tabs which doesn't appear in real HTML page.

JavaScript text selection popover

Those who have read some articles on Medium.com are aware of how they can select text anywhere on a page and share it on Twitter or write a short comment about the selected text right on that page.

That's a nice popover to have, if the requirement is to select the text and show some information related to it on the same spot. I thought of posting a simple demo of it here, so that others can use it.

Here's the code –

HTML:

    

       Having been in the field, most recently in India, I have seen that access to safe water is just a few dollars away for many people. A small loan can create a pathway to a household water tap. Making access to capital ubiquitous and affordable for those living in poverty would go a long way towards eliminating water stress.
    

CSS:

::selection{
  background: SeaGreen;
  color: White;
}
::-moz-selection{
  background: SeaGreen;
  color: White;
}
#textDescription{
  line-height:1.9em; font-size:16px; margin:10px; border:1px #333 solid; padding:5px; width: 450px;
 }
 .selectedText{
  position: relative;
  background-color: SeaGreen; color:#fff; line-height: 1.2em;
 } 
 .popDiv{
  background: ForestGreen; color: white; padding: 6px; width: 180px; height: 80px;  
  position: absolute; top: 18px; left: 0;
  border-radius: 4px; box-shadow: 2px 3px 4px #444;

  -webkit-animation: slideIn .5s;
  animation: slideIn .5s;
 }

 @-webkit-keyframes slideIn{
  from{
   top: 8px; opacity: 0; height: 40px;
  }
  to{
   top: 18px; opacity: 1; height: 80px;
  }
 }

 @-moz-keyframes slideIn{
  from{
   top: 8px; opacity: 0; height: 40px;
  }
  to{
   top: 18px; opacity: 1; height: 80px;
  }
 }

 @keyframes slideIn{
  from{
   top: 8px; opacity: 0; height: 40px;
  }
  to{
   top: 18px; opacity: 1; height: 80px;
  }
 }

JavaScript / jQuery:

 


 var parentContainerId = "textDescription"
  
 if(!window.CurrentSelection){
  CurrentSelection = {}
 }
 
 CurrentSelection.Selector = {}
 
 //get the current selection
 CurrentSelection.Selector.getSelected = function(){
  var sel = '';
  if(window.getSelection){
   sel = window.getSelection()
  }
  else if(document.getSelection){
   sel = document.getSelection()
  }
  else if(document.selection){
   sel = document.selection.createRange()
  }
  return sel
 }
 //function to be called on mouseup
 CurrentSelection.Selector.mouseup = function(){
  
  var st = CurrentSelection.Selector.getSelected()
  if(document.selection && !window.getSelection){
    var range = st
    range.pasteHTML("" + range.htmlText + "");   
  }
  else{
    var range = st.getRangeAt(0)    
    var newNode = document.createElement("span");
    newNode.setAttribute("class", "selectedText");
    range.surroundContents(newNode);
    //
    var getTitle = newNode.innerHTML;
    newNode.setAttribute("title", getTitle);

    //
    var popDiv = document.createElement('span');
    popDiv.setAttribute('class', 'popDiv');
    popDiv.innerHTML = getTitle;

    if(newNode.innerHTML.length > 0) {
     newNode.appendChild(popDiv);
    }     
    //Remove Selection: To avoid extra text selection in IE  
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
    }
        else if (document.selection){ 
         document.selection.empty();
        }
        //
  }
 }
        
 $(function(){

  $("#"+parentContainerId).on('mouseup', function(){
    $('span.selectedText').contents().unwrap();
    $(this).find('span.popDiv').remove();
  });

  $("#"+parentContainerId).bind("mouseup",CurrentSelection.Selector.mouseup); 
 })        

Demo: http://jsfiddle.net/dipaks2011/uz0gsu8a/1/



Related Posts:

jQuery tab navigation:
http://dipaksblogonline.blogspot.in/2012/03/simple-jquery-tab-navigation.html

Defer third party scripts:
http://dipaksblogonline.blogspot.in/2012/06/defer-third-party-scriptsads-until.html

Using multiple iScrolls in one page:
http://dipaksblogonline.blogspot.in/2013/06/using-multiple-iscroll-in-one-page.html