We Keep Coding

Bootstrap: In Navbar, Show Different Content Based on Li Link Hovered in a Single Location?

I've tried a few JQuery and CSS implementations of this, but can't seem to get it quite right. I'm utilizing FontAwesome icons in the navbar for Bootstrap, and I would like to have a single location where, when the icons are hovered, a text description of them is shown/hidden.
This implementation has gotten me the farthest, with the different captions showing up. However, I need them all to appear in one location (preferably to the front of the ul navbar-nav grouping, as they will be right aligned).
CSS:
div#navbar a span {display: none;}
div#navbar a:hover span {display: block; position: absolute; top: 40px; left:-50px; width: 125px; padding: 5px; margin: 10px; z-index: 100;color: #AAA; background: black;font: 10px Verdana, sans-serif; text-align: center;}
HTML:
<ul class="nav navbar-nav">
<li><div class="nav-button"><i class="fa fa-user"></i></div><span>Text Goes Here</span></li>
<li><div class="nav-button"><i class="fa fa-umbrella"></i></div><span>Text Goes Here 2</span></li>
<li><div class="nav-button"><i class="fa fa-star"></i></div><span>Text Goes Here 3</span></li>
</ul>
The implementation above is based off MeyerWeb's CSS Popup Demo
I have tried JQuery Fiddles that worked for simple classes/links such as this: http://jsfiddle.net/AstroCB/42gV5/ , but I'm uncertain if the depth of Bootstrap classes is causing some sort of override, as I cannot seem to get JQuery show/hide functions based on the examples I've seen to work.
I have also tried ~ relations such as: http://jsfiddle.net/YsHA4/ but am again hitting a wall.
It's highly likely I am just approaching this the wrong way, but I've been attempting to solve this problem for a few days now and just can't seem to find a solution. A fresh set of eyes and any and all help would be absolutely appreciated. If there's any way I can clarify, please let me know. Thank you!!
EDITED TO ADD: I do not need the final result to be spans inside the links in any regard, they can be hidden external divs, etc. The example I gave is the farthest I have managed to get the functionality to what I want (separate information showing up for each hover), but if a different approach using JS/etc removes the spans or hard codes the text into a JS string in some way, so be it. I am just looking to get this functionality to work as anticipated with Bootstrap, whatever implementation best gets it there!
Also, see my comment for an image representation of what I am trying to achieve.

I made a Fiddle based on your image.
It uses bootstraps right section for the menu.
I have applied a loop to each link:
$.each($('a'), function() {
$(this).hover(function() {
$('.placeholder').html($(this).html());
});
});
It simply takes the HTML inside a tag and places in the menu item with the class placeholder.
Update:
In your case your links are bit more complex so the selector for the loop would look like this:
$.each($('a > span'), function() {
// do stuff here
});
This fetches all links in your document and then the span element inside that.
Aaand finally a Fiddle for the HTML you have provided here.
Code below edited since loops are unecessary:
$('a').hover(function() {
$('.placeholder').html($(this).html());
});
$('a > span').hover(function() {
// do stuff here
});

HTML
<ul class="nav navbar-nav">
<li class="hover"><div class="nav-button"><i class="fa fa-user"></i><span class="text hidden"> Text Goes Here</span></div>
</li>
<li class="hover"><div class="nav-button"><i class="fa fa-umbrella"></i><span class="text hidden"> Text Goes Here 2</span></div>
</li>
<li class="hover"><i class="fa fa-star"></i> <span class="text hidden">Text Goes Here 2</span>
</li>
</ul>
JS
$(document).ready(function () {
$('.hover').each(function (index, el) {
var thiz = $(this);
var text = thiz.find('.text');
thiz.on('mouseover', function (e) {
text.removeClass('hidden');
});
thiz.on('mouseleave', function(e){
text.addClass('hidden')
});
});
});
jsFiddle

Page jumps on checkbox click even with javascript disabled

A while ago you guys helped me with a page jump issue on this page in this forum post. I will be referring to the styled checkboxes under "Clients." Well a while back I just set the min-height on the changing container and it then prevented the page jump, but no longer does (for an unknown reason). Well, I went ahead and put window.scrollTo(0,1400) in my function, but it doesn't center the styled checkboxes correctly on IE so now I'm back to trying to figure out why the page jumps.
The weirdest thing though.. the page jumps when clicking one of the styled checkboxes even if you disable javascript (in chrome developer tool settings and then refresh). Why would a checkbox with javascript turned off cause a page jump?

I had a quick look on your source code I couldn't figure out why do you pull data using json on each click? does the clients change LIVE?
What i mean is you can list all your clients without Using Get Json or any kind of live query and then add a class for their related respective verticals.
For example for Services and healthcare,
css
#verticals li{
float:left;
list-style:none;
background-color: #97ceff;
color: black;
border-radius:2px;
margin-right:10px;
padding:5px 10px;
cursor:pointer;
}
#verticals li.activevertical{
background-color: #2f7fc7;
color: #fff;
}
html output
<!-- list verticals options !-->
<ul id="verticals">
<li id="service">Services</li>
<li id="healthcare">Healthcare</li>
</ul>
<div style="clear:both"></div>
<ul id="customers" class="">
<!-- Add filter class here in the <li> add filter_ before vertical kind !-->
<li class="filter_service">Ecova</li>
<li class="filter_service">HP</li>
<li class="filter_service">Gartner</li>
<li class="filter_healthcare">Henry Schein</li>
<li class="filter_healthcare">GE Healthcare</li>
<li class="filter_healthcare">BerylHealth</li>
<!-- and if a vertical can be in two categories add both vertical classes !-->
<li class="filter_healthcare filter_service">BerylHealth Show in Service and Healthcare</li>
</ul>
jQuery : very short version
jQuery(document).ready(function($){
$("#verticals li").on('click', function(){
var filterli = ".filter_"+$(this).attr("id");
$("#customers li").hide();
$("#verticals li").removeClass('activevertical');
$(this).addClass('activevertical');
$(filterli).show();
});
});
check it out at JSFiddle

CSS Negate: Displaying specific elements in a hidden Element?

Assume we have an element that is similar to this
<div id="navigation">
<div class="nav-block-1">....</div>
<div class="nav-block-2">....</div>
This is the offer
Report
</div>
Now I want to hide all the elements including the textelements but not the nav-block-2, so is there a way through which I can do this? Something like using CSS negation?
I tried using
#navigation :not(.nav-block-2) {
display:none;
}
but this seems to negating even the elements inside nav-block-2? Am I doing something wrong here? Any ideas?

Maybe not what you want but here's what i'd do.
#navigation * {
display:none;
}
#navigation a {
display:inline;
}
EDIT:
As it says in the comments in your question, I think it's difficult to do a :not when there's no tag around the text.

Try this
#navigation div:not(.nav-block-2) {
display:none;
}
<div id="navigation">
<div class="nav-block-1">Div 1</div>
<div class="nav-block-2">Div 2</div>
This is the offer
Report
</div>

Use this:
#navigation > *:not(.nav-block-2) {
display:none;
}
However, you can't hide single text nodes. You will need to put the "This is the offer" in a paragraph or at least in a <span> tag to hide it, or you would need to hide the whole #navigation which inevitable contains the .nav-block-2.

How to make LI innerText have indentation

Edit: This HTML is output from a Flash application & its badly formed because it contains li elements NOT inside a ul or ol element. Is there a way to get the desired indentation with this HTML(using CSS)? Hopefully I wont have to parse the HTML & insert my ol tags where I need to, hopefully :(
<textformat leading="2">
<li>
<font style=" font-family: 'arial'; font-size: 14px; color: #FFFFFF; letter-spacing: 0px; ">
Remaining optimistic and focused while paying attention to the doubts of others
</font>
</li>
</textformat>
Is there a way to make EVERY line of text inside a HTML li element be indented?
Example of what I am trying to achieve:
This is what currently happens which is what I am trying to avoid:
So I have this html:
<ol>
<li><font>text here <b>some bold</b></font></li>
</ol>

Add a padding and text-indent:
li {
text-indent: -1em;
padding-left: 1em;
}
Try it on JSFiddle.

It displays like that fine in all majors browsers by default. The only way you'll get the wrap around like the second example is if you actually wrote the numbers themselves instead of using:
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
There shouldn't be a problem as long as you use these tags. The only way you should be getting the second image is with the CSS style list-style-position: inside;. Should you have some strange stylesheet interfering with your example, you could add style="list-style-position: outside;" to the <ol> tag to ensure that the numbers are outside of the text.
Oh, gah... post edit:
<li> isn't really gonna work, then. Why not use a div for each one like this: http://jsfiddle.net/aMdm9/

How to make a click of the list image trigger a click of the link inside that list element?

I have an unordered list containing links.
I styled the list so that there is a "Click Me" image to the left of the link.
ul
{
list-style-image:url(/images/ClickMe.png)
}
The problem is: when the user clicks on "Click Me", they are not redirected and nothing happens.
How do I make a click of the list image trigger a click of the link in that list element?
<ul>
<li>Some Url</li>
<li>Some Other Url</li>
</ul>

This is more of a CSS problem I think, because the list bullets are not actually part of the a tag. You can cheat by making the links "wide left" to include the bullets like this (see the jsfiddle snippet):
ul
{
list-style: disc;
list-style-position: inside;
padding: 0;
margin: 0;
}
a {
margin-left: -20px;
padding-left: 20px;
}

You can always make the item clickable through jQuery:
$("li").click( function (evt) {
location.href = $(this).find("a").attr("href");
});

I don't know if there's a better way to do it but this works by making the link size so that it includes the bullets to the left of the link.
a{
margin-left: -2em;
padding-left: 2em;
}

Incidentally, this also works, but does not pass validation, does anyone knows if there's a correct way of doing it?
<body>
<ul>
<li>Some Url</li>
<li>Some Other Url</li>
</ul>
</body>

If you only need the list to have those bullets, you can do it also without lists by making the links "list-item" displays:
<style>
a{
display:list-item;
list-style-image:url(/images/ClickMe.png);
list-style-position:inside;
}
</style>
<div style="padding:12px;">
Some Url
Some Other Url
</div>
http://jsfiddle.net/zp8QU/