Results 1 to 1 of 1

Thread: [JQuery] Smart Tags

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    [JQuery] Smart Tags

    I wanted something that mimics smart tags that are found in IDE's like Visual Studio and applications like Microsoft Office. Here is a wiki page on them if you want more information: https://en.wikipedia.org/wiki/File:Smarttags.PNG

    This is my solution to the smart tag design:

    Markup
    HTML Code:
    <div class="smartTag">
      <header>
        <i class="fa fa-info-circle smartTagInfo"></i> <!-- font awesome icon. css external sheet: https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css -->
        <i class="fa fa-caret-down smartTagDropDown"></i> <!-- font awesome icon. css external sheet: https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css -->
      </header>
      <main>
        <p>Item 1</p> <!-- example only -->
        <p>Item 2</p> <!-- example only -->
        <p>Item 3</p> <!-- example only -->
      </main>
    </div>
    CSS
    Code:
    .smartTag {
      max-width: 10em;
    }
    
    .smartTag header {
      background-color: #666;
      color: #fff;
      display: block; /* IE Fix */
      padding: .25em;
      max-width: 2em;
    }
    
    .smartTagDropDown {
      cursor: pointer;
    }
    
    .smartTag main {
      border: 1px solid #666;
      display: block; /* IE Fix */
      padding: 1em;
    }
    JQuery
    Code:
    $(function() {
      //hide all smartTagDropDowns and <main> in smartTags
      $('.smartTagDropDown').hide();
      $('.smartTag main').hide();
      
      //toggle the smartTagDropDowns on hover
      $('.smartTag').hover(
        function() {
          $(this).find('.smartTagDropDown').fadeIn();
        }, function() {
          $(this).find('.smartTagDropDown').fadeOut();
          $(this).find('main').fadeOut();
        }
      );
      
      $('.smartTagDropDown').on('click', function() {
        $(this).closest('.smartTag').children('main').fadeIn();
      });
    });
    Fiddle: http://codepen.io/anon/pen/Vabgam
    Last edited by dday9; Mar 24th, 2016 at 11:29 AM. Reason: Added IE Fix
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width