We Keep Coding

UI Bootstrap - how to prevent tooltip opening when dropdown is open

I have a dropdown that is triggered by clicking a glyphicon. The glyphicon has a ui-bootstrap tooltip that is triggered on mouse-enter/mouse-leave. The tooltip is also triggered to close when the glyphicon is clicked, and the dropdown is shown.
However, once the dropdown is open, the tooltip is shown again if the mouse-enter is triggered. I would like to prevent the mouse-enter triggering the tooltip when the dropdown is open.
The html for the glyphicon and the dropdown is:
<span class="" uib-dropdown-toggle>
<span class="glyphicon glyphicon-sort category-sort-icon" uib-tooltip="Sort"
tooltip-placement="left" tooltip-is-open="sortTooltipIsOpen"
ng-click="sortTooltipIsOpen = !sortTooltipIsOpen">
</span>
</span>
<ul uib-dropdown-menu class="dropdown-menu-right">
<li ng-repeat="s in sortDesc" ng-click="sortBy(s)">{{s}}</li>
</ul>
I've create a plnkr to show exactly how it working: http://plnkr.co/edit/aeOuJasEHFUH505o2L8T
Any ideas how to do this?

Here is the working plnkr. I have used "is-open" attribute to detect whether dropdown is open or not. Based upon that, I have disabled/enabled the tooltip. I hope it helps.
I have added tooltip-enable="!isDropdownOpen" to the tooltip and is-open="isDropdownOpen" to the uib-dropdown.
<span class="" uib-dropdown is-open="isDropdownOpen">
<span class="" uib-dropdown-toggle>
<span class="glyphicon glyphicon-sort category-sort-icon" uib-tooltip="Sort"
tooltip-placement="left" tooltip-is-open="sortTooltipIsOpen"
ng-click="sortTooltipIsOpen = !sortTooltipIsOpen" tooltip-enable="!isDropdownOpen" >
</span>
</span>
<ul uib-dropdown-menu class="dropdown-menu-right">
<li ng-repeat="s in sortDesc" ng-click="sortBy(s)">{{s}}</li>
</ul>

Bootstrap hide tabs button in tab

I use bootstrap tabs
http://getbootstrap.com/javascript/#tabs
and I create hide button like this
<li role="presentation"> Options <span onclick="$('#tab_6').hide();" class="tab_hide_btn">X</span></li>
If I clicking the hide span, tab is opened and hidden at the same time, because both onclick action are on the same layer

You can add a listner in your Javascript to hide tab:
$('li a[role="tab"] span').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).parents('li').hide();
});
Moreover Bootstrap provides an helper class to display a close button, so your html could be:
<li role="presentation">
<a href="#tab_content_6" id="tab_6" aria-controls="tab_content_6" role="tab" data-toggle="tab">
Options
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</a>
</li>

Try doing something like this in a <script> tag:
$('span').on('click', function(e) {
$(this).parents('li').hide();
});
jsbin: http://jsbin.com/pekoduwusi/edit?html,js,output
I've updated jsbin with the functionality you're looking for. Its quick and dirty but does the trick. The concept is you want to get the href of the parent span then find the content with that id striping away the # character. Then, hide that content.
jsbin: http://jsbin.com/cutiwibora/edit?html,js,output

JQuery back button (goes to blank page)

I have implemented a button:
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li class="ui-body ui-body-b ui-li-static ui-body-inherit ui-last-child">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button id="submitButton" type="submit" class="ui-btn ui-btn-a ui-corner-all">Submit</button></div>
<div class="ui-block-b"><button id="cancelButton" data-direction="reverse" type="button" class="ui-btn ui-btn-a ui-corner-all">Cancel</button></div>
</fieldset>
</li>
</ul>
with accompaning JavaScript function that should make the button act as a "back" button:
$(document).on( 'click', '#cancelButton', function() {
window.history.back();
});
All I'm testing at the moment is a transition between two pages, and the button works fine for the first three transitions. On the third transition, instead of going back one page, it goes to a blankpage (I believe this is created by my IDE, NetBeans). When I use the console to call window.history.back() it transitions nicely and does not have any issues whatsoever. My question is if there is some interaction between the button and the window.history.back() call that males it go to a blankpage

To make sure that you're not taken back to the blank page, check if history really exists before firing back action:
if (history.length > 1) {
history.go(-1);
}

Bootstrap dropdown selection makes screen jump

So I'm using bootstrap for my website and I have many div's on each page with a dropdown on each that change the information inside the div from a chart to a table and vise-versa. This works fine except when the user selects an option from the drop down the screen seems to "jump", putting that div at the top of the screen. I found a similar issue for someone else saying it has something to do with the anchor tag(#), but I believe I need mine since the drop down does refer to something.
DROPDOWN:
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle btn-xs" type="button" id="dropdownMenuGraphOneSmall" data-toggle="dropdown" aria-expanded="true">Graph One Options<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOneSmall">
<!--DROPDOWN MENU-->
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneData">Data</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneChart">Chart</a>
</li>
<li role="presentation">
<a data-toggle="modal" data-target="#enlargeGraphOneModal" role="menuitem" tabindex="-1">Maximize</a>
</li>
<li role="presentation">
<a class="collapse-link" role="menuitem" tabindex="-1" href="#graphOneCollapse">Collapse</a>
</li>
</ul>
</div>
CONTENT IT CALLS:
<div class="content active row" id="graphOneChart">
............
</div>
<div class="content" id="graphOneData">
............
</div>

To keep the page from jumping, you can remove the href="" altogether, and just keep the a tag empty like this <a>, then it wont jump.
If you have to keep the href tag, you can use the e.preventDefault() in your click or on method.

When you use an anchor tag, <a>, it is going to automatically go to the location that the href tag is pointing to. If your link is pointing to an id on the page, the link is going to scroll the screen to the element the link is pointing to. If you want to use the link to call a function, leave the href attribute empty, href="".

If you use a hash # in an anchor, the browser will automatically scroll to the element with the corresponding id.
For example, clicking on:
Data
Will cause the page to jump to:
<div id="graphOneData"></div>
To stop this happening, either change the id of the div or the href of the anchor.

jquery autocomplete - prevent closing it when clicking on outside div?

So - jquery autocomplete and extra div with special character icons that can be inserted into a search box (such as É, ã etc)...
Whenever user types - autocomplete dropdown show up, but when user needs to click on a special character icon (so it would be inserted into a searchbox) -> autocomplete dropdown predictably closes as focus has been lost:(
Is there a way to prevent jquery autocomplete dropdown from hiding on lost focus in cases when user clicks on one of the special character icons?

EDIT: This is directed towards the jquery autocomplete combobox for use with selectbox, but the same solution and thought process definitely applies for autocomplete as well (I was working on the combobox when I came across your problem :)
HTML:
<select class="combobox">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="add_another">Add Another Option</option>
</select>
CSS:
.force-open{
display:block !important;
}
JS:
$(function() {
$( ".combobox" ).combobox({
// the select event is apparently the only event
// that you can pass a function, so if your goal
// is to keep it open specifically when a user
// clicks an option, then this is where you should start
select: function(event, ui) {
$(event.currentTarget)
.parent()
.next("ul")
.addClass("force-open");
}
});
$(".custom-combobox .ui-button").click(function(){
//This is the actual answer to your question,
//which is specifically forcing the jquery selectbox
//to stay open after it has already been opened,
//regardless of the change in focus.
$(this)
.parent()
.next("ul")
.addClass("force-open");
})
});
Explanation:
Normally what I try to do if there are no good exposed events for a given library or chunk of code when doing web development (other than try to hack at/update the source code...) is look at the structure of html that is generated from the library/js (if there is any at all).
In this case, the generated html from jquery-ui after calling $( ".combobox" ).combobox({...}) is:
<select class="combobox" style="display: none;">
....shown above in HTML section...
<span class="custom-combobox">
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite">4 results are available, use up and down arrow keys to navigate.</span>
<input class="custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left ui-autocomplete-input" title="" autocomplete="off">
<a class="ui-button ui-widget ui-state-default ui-button-icon-only custom-combobox-toggle ui-corner-right" tabindex="-1" title="Show All Items" role="button" aria-disabled="false">
</span>
<ul id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" tabindex="0" style="display: none; width: 209px; top: 43px; left: 8px;">
<li class="ui-menu-item" role="presentation">
<a id="ui-id-2" class="ui-corner-all" tabindex="-1">Volvo</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-3" class="ui-corner-all" tabindex="-1">Saab</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-4" class="ui-corner-all" tabindex="-1">Mercedes</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-5" class="ui-corner-all" tabindex="-1">Add Another Option</a>
</li>
</ul>
This gives me a great jumping-off point in order to add/remove css classes in order to force the functionality I want. Remember, this is a last resort, and should only be abused when there isn't a fully featured api to help bind/unbind events. By examining the html structure, I can use jquery selectors/methods to get at the correct 'ul' tag I am trying to keep open, in this case. So after I grab the ul I want using jquery, I addClass 'force-open' which has 'display:block !important;' , ultimately forcing the jquery combobox to stay open, regardless of focus. Now simply removeClass 'force-open' when you feel it is time to 'shut' the combobox.
Hope this helps :).