1

I've got icons set as my navigation bar which is placed horizontally. But I have added after those icons some text that explains what action is associated with the icon.

For example, the 'home' icon from fa fa-home (FontAwesome), the text behind this icon 'Home'. The text should only be visible if the browser size is less than 767 pixels in width (twitter bootstrap responsive).

I tried a few ways, but none of them worked, like $('.navbarText').text().hide();, $('a.navbarText').text().hide();, $('a text').text().hide();. I don't recall all my tries though, but tried some pure CSS ways too.

I want to avoid adding a span or div around it.

Any ideas?

[EDIT] some extra info. This is the rendered html:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a class="dismissLbl" data-animation="true" data-delay="200" data-placement="bottom" data-title="Go to home page" data-trigger="hover" href="/" rel="tooltip"><i class="fa fa-home fa-lg"></i>Home</a></li>
     <li>
        <a class="dismissLbl" data-animation="true" data-container="body" data-delay="200" data-placement="bottom" data-title="Go to my service(s)" data-trigger="manual hover" href="#" rel="tooltip"><i class="fa fa-list fa-lg"></i>About</a>
    </li>
    <li>
        <a class="dismissLbl" data-animation="true" data-container="body" data-delay="200" data-placement="bottom" data-title="Go to my deals" data-trigger="manual hover" href="#" rel="tooltip"><i class="fa fa-thumbs-o-up fa-lg"></i>Contact</a>
    </li>

</ul>
</div>

@Hashem Qolami and Brian, when you resize the browser to a smaller size, the horizontally aligned menu will become a button that's placed on the right of the navbar which you can press and the menu opens that looks like an accordion. See the following screenshots for the visual explanation.

normal size, meant for desktop view small size, meant for phones, tablets

As for why I don't want to add a span or div around it, is because I'm using @Html.ActionLink("linktext", "actionName") to render the link, which would require some jquery to surround the link tags every time the browser loads or user navigates. Not to mention the checks that have to be done too for every link tag to check whether they are already surrounded or not at every page load or user navigation.

Unnecessary performance loss, if you're asking me.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Quoter
  • 4,236
  • 13
  • 47
  • 69

5 Answers5

3

Considering the following stucture:

<a class="dismissLbl" href="#">
    <i class="fa fa-home fa-lg"></i> Home
</a>

Without adding extra elements, you could achieve that by giving a font-size of 0 to anchor tags and then overriding the value on the font icons (nested <i> elements):

a.dismissLbl { font-size: 0; }
a.dismissLbl .fa { font-size: 22px; }

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
    a.dismissLbl,
    a.dismissLbl .fa {
        font-size: 16px; /* or whatever you want */
    }
}

Finally by using @media queries, you could reset the font-size to make the text visible on extra small devices.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • This answer is under this assumption that you want to display the text on larger screens and hide that on smaller ones. If you want the opposite, well, you have the logic! – Hashem Qolami Sep 04 '14 at 22:20
  • See my edit in the question, have you named there explicitly about the larger and smaller screen size/browser size. – Quoter Sep 05 '14 at 17:37
  • @Quoter Fair enough, just one more question, Are you using the font icons by adding `` elements as you've done in your posted snippet? – Hashem Qolami Sep 05 '14 at 17:43
  • @Quoter I've implemented the navbar as you've shown in the question, check this **[Updated Demo](http://jsbin.com/tacugu/1/edit)**. – Hashem Qolami Sep 05 '14 at 18:07
  • that worked perfectly awesome. If you update your questio with this demo, I'll mark it as answered. – Quoter Sep 05 '14 at 19:09
  • to answer your previous question in a comment, I'm using a 3rd party lib that supports chaining in the `View` with `Razor`. This line will produce a link with FontAwesome icon: `@Html.Bootstrap().ActionLink(Resources.Menu.Home, "Index", "Home").Class("dismissLbl").PrependIcon("fa fa-list fa-lg")`. – Quoter Sep 05 '14 at 20:43
2

Why not use media queries in your CSS?

.text{ display: none; }
@media only screen and (max-width: 767px){ 
  .text{ display: block; }
}
AJFarkas
  • 2,929
  • 1
  • 17
  • 15
  • I agree with @AJFarkas, the best way to target that text without using jquery or javascript of any kind its by using media queries (css). If you need and example on how to do this, please post a jsfiddle with your actual code, then I will be able to work from there and give you a working demo. – Allan Sep 04 '14 at 21:50
  • FYI, Browser support from media queries summarized here: [link](http://caniuse.com/#feat=css-mediaqueries) – John Hascall Sep 05 '14 at 00:13
  • @AJFarkas, that was my first choice, just couldn't get it to work that way, and I still can't. – Quoter Sep 05 '14 at 17:20
  • Can I see your CSS? It's hard to help when I'm flying blind. Maybe put the whole thing up on a [Fiddle](http://jsfiddle.net/) and we'll be able to tweak the code. – AJFarkas Sep 05 '14 at 20:49
2

You can easily do this with a CSS Media Query and psuedo selectors:

View the example in Plunker

  // Common style for all button icons
  button { color:#000; font-size:24px; paddng:1em; border:none; background:none; cursor:pointer; }
  button:hover { color:#0088CC; }
  button span:after { padding-left:.5em; }

  // Text to display after each icon
  #menu span:after { content:"Menu"; }
  #home span:after { content:"Home"; }
  #mail span:after { content:"Mail"; }
  #account span:after { content:"Account"; }

  // Media Query to hide the text when viewport is less than 767px
  @media (max-width: 767px) {
    button span:after {
      content: ""!important;
    }
  }
J.C
  • 80
  • 6
1

Use the empty() function.

$('.navbarText i').empty();
iammikerodriguez
  • 379
  • 1
  • 5
  • 16
  • See my reply to genocide_hoax – Quoter Sep 04 '14 at 21:29
  • Use media queries instead to hide the text. You will probably have to wrap the text in a span though. Bootstrap should also have CSS helper classes to achieve this. – iammikerodriguez Sep 04 '14 at 21:33
  • The problem is, is that the a-tag is generated by the `@Html.ActionLink()` method in `asp.net-mvc`. I can't influence the output. – Quoter Sep 04 '14 at 21:36
  • What if you add the anchor text inside the fontawesome element and then use the jQuery empty() function on that? Not sure how asp.net-mvc works when outputting links. – iammikerodriguez Sep 04 '14 at 21:43
  • simply because once the browser gets resized to a bigger width, there is no text to show. It's a "how to hide/show the text" question. – Quoter Sep 05 '14 at 17:22
1

In case the text is wrapped in a dom element assign a class to it and do the following.

 $(window).resize(function() {
   doc_width = $(window).width();
    if(doc_width < 767){
      $(".mytext").hide();
    } else {
      $(".mytext").show();
    }

}

I used it in .resize just make it a function .. call it on .ready and .resize.

Bootstrap Way:

<div class="row">
 <div class="col-xs-12 col-sm-3">
   <img src="#" alt="icon">
  </div>
  <div class="hidden-xs col-sm-9">
    TEXT
  </div>
</div>

Modify it according to your grid system.

Genocide_Hoax
  • 843
  • 2
  • 18
  • 42