I am trying to put a autocomplete functionality on a text input , this is working fine if css is not present but if css is present this is not working .
This is my fiddle
and this is my code
var sourcesymbols = ["ONE", "TWO", "THREE"];
jQuery(document).ready(function() {
$("#stock_name").autocomplete({
source: sourcesymbols,
messages: {
noResults: '',
results: function() {}
}
});
});
Could you please let me know how to resolve this .
when you use CSS styling for the text box you will hide the data list (auto complete list data) you can try an alternative as shown in this link - Datalist
Related
I want to implement a tag input on my form and have the available tags auto-suggested; so these are the libraries I am using:
http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
https://github.com/bassjobsen/Bootstrap-3-Typeahead
This is how I initialize the two libs together:
$(document).ready(function() {
$('input#tags').tagsinput({
typeahead: {
source: ["mysql-server", "apache", "php", "nginx", "phpmyadmin"]
}
});
});
When I begin typing ph it starts suggesting two available tags like this:
When I make a selection, e.g. php - this what happens:
This happens with all tags, it does the tag and then there's a shadow version of the selected tag from the suggestion.
Any ideas?
How to place typeahead results above the text input ? The best for me would be adding an option to this widget or maybe some css rule ?
At this moment i finally used jQuery solution in render event of typeahead widget, by modifying css margin-top after each render. Here is the code:
echo Typeahead::widget([
//(...)
'pluginEvents' => [
'typeahead:render' => 'function(event,ui) {
var ttMenu = $("#search-main .tt-menu").first();
var ttMenuHeight;
if($(ttMenu).hasClass("tt-open")) {
ttMenuHeight = -$(ttMenu).height();
$(ttMenu).css("margin-top", ttMenuHeight - 70);
}
}',
],
//(...)
]);
'#search-main .tt-menu' is my selector for typeahead input, and this "70" is height of this input so be sure to replace it with your own.
Hope it helps.
I came across this page on slate.com that highlights similar words in a table when you hover over one instance:
http://www.slate.com/blogs/lexicon_valley/2013/09/11/top_swear_words_most_popular_curse_words_on_facebook.html
Does anyone know how this is done?
You can do it with jQuery like this:
$('table td').mouseover(function() {
$('table td').removeClass('highlight')
var text = $(this).text();
$('table td').filter(function() { return $(this).text() == text; }).addClass('highlight');
})
Check this jsFiddle
using jQuery.data
Always to know how something works, the first step is to read the source code
Check this:
EXAMPLE
$('.interactive_table .cell_word')
.hover(function(){
var word = $(this).data('word');
$(this).parent().parent()
.find('.word_'+word)
.addClass('highlighted');
},function(){
var word = $(this).data('word');
$(this).parent().parent()
.find('.word_'+word)
.removeClass('highlighted');
});
$('.interactive_table .cell_rank_number')
.hover(function(){
$(this).parent()
.find('.cell_word')
.addClass('highlighted');
},function(){
$(this).parent()
.find('.cell_word')
.removeClass('highlighted');
});
I'm trying to create a drop down list directive, with down-arrow that appears when the mouse is hovering the dropdown header or when the dropdown list is oppend, and disappears otherways.
I succeeded to do this, but if the dropdown list is closed not by selecting element or by pressing on the header list again, than the arrow isn't disappead.
(I.E. If i'm openning one list and than openning another without closing the first one, than arrow of the first list is not disappearing)
JsFiddle - http://jsfiddle.net/rpg2kill/uS4Bs/
code:
var myApp = angular.module('myApp', ['ui.bootstrap']);
function MyCtrl($scope) {
$scope.supportedList= ['Option1', 'Option2', 'Option3', 'Option4'];
$scope.selectedItem = 'Option1';
}
myApp.directive('dropDown',
function () {
return {
restrict: 'E',
replace: false,
scope: {
supportedList:'=',
selectedItem:'='
},
template:
'<div ng-mouseenter="onMouseEntered()" ng-mouseleave="onMouseLeft()">' +
'<a class="dropdown-toggle" data-toggle="dropdown" href="" ng-click="onMouseClicked()" >' +
'<img ng-style="{\'visibility\': dropDownIconVisibility}" src="http://png.findicons.com/files/icons/2222/gloss_basic/16/arrow_down.png"> </img>' + //Arrow down Icon
'<span>{{selectedItem}}</span>' +
'</a>' +
'<ul class="dropdown-menu">' +
'<li ng-repeat="item in supportedList" ng-click="onSelectedItem(item)">' +
'{{item}}' +
'</li>' +
'</ul>' +
'</div>'
,
link: function(scope, element, attrs) {
scope.dropDownIconVisibility = "hidden";
scope.dropDownIconVisibilityLocked = false;
scope.onSelectedItem = function(item) {
scope.dropDownIconVisibilityLocked = false;
scope.selectedItem = item ;
};
scope.onMouseEntered = function()
{
scope.dropDownIconVisibility = "visible";
};
scope.onMouseLeft = function()
{
if (scope.dropDownIconVisibilityLocked)
return;
scope.dropDownIconVisibility = "hidden";
};
scope.onMouseClicked = function()
{
scope.dropDownIconVisibility = "visible";
scope.dropDownIconVisibilityLocked = !scope.dropDownIconVisibilityLocked;
};
}
};
})
The code is little ugly. A better solution is to show the arrow if the mouse is hovering OR the list is openned, but I don't know how to bind angular to the state of the dropdown list.
Is there a way to binding angular to Twitter bootstrap's dropdown event?
Or is there a better way to solve this problem?
I suggest you using full CSS approach - it takes less code, it does not trigger JS evaluations, thus, it performs better (Angular is a bit slow with all its cool features). Once you go mobile - CSS will be more preferable, as supports downgrading with media queries and so on... There are too many pros!
Remove all your mouse-tracking code and add just two CSS rules and here you go:
a.dropdown-toggle img {
visibility: hidden;
}
a.dropdown-toggle:hover img {
visibility: visible;
}
I succeeded to solve the problem, unfortunately the solution is not so pretty, but at least it works.
I'll try to solve this with only CSS as madhead suggested.
The problem was that I didn't know when the user clicked outside the dropdown, that caused the dropdown popup to close but the icon was still displayed. So I attached an handler to each directive that listen on document.click event and hides the Icon.
document.addEventListener('click', function (event) {
scope.$apply(function () {
scope.hideDropdownIcon();
});
}, false);
That worked, but if I clicked on another Dropdown when the current dropdown was opened, the document.click event was not fired. So I had to create my event and attach it to $window and to call it when any dropdown is opens.
var event = new Event('hideDropDownIcon');
$window.addEventListener('hideDropDownIcon', function (e) {
scope.hideDropdownIcon();
}, false);
You can see it here:
http://jsfiddle.net/rpg2kill/uS4Bs/6/
There must be a better solution. So if you know how to do it better or by using only css, I would like to know.
Thanks.
Found CSS solution to the problem.
css is so simple instead all the js events..
The CSS:
a.dropdown-toggle img {
visibility: hidden;
}
li.ng-scope:hover img,li.ng-scope:active img,.open a img{
visibility: visible;
}
You can check this: http://jsfiddle.net/rpg2kill/HVftB/1/
A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:
http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm
Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.
Is there a workaround? At least with pure CSS or DOM hacks?
I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.
You can however work around it with Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.nav_element a').mouseover(function() {
$('.submenu').hide();
$(this).parent().find('.submenu').show();
});
$('.submenu').mouseover(function() {
$(this).show();
});
$('.submenu').mouseout(function (e) {
// Do not close if going over to a select element
if (e.target.tagName.toLowerCase() == 'select') return;
$(this).hide();
});
});
</script>
The code above uses jQuery.
Here is a way to improver select behavior in IE7/8, but it does not fix the issue
Change DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Add script
<script>
function ddlOut(e) {
setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
}
</script>
Add css
#nav .over div.submenu
{
display: block;
}
#nav .nav_element{
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("ddlOut(this)"),
this.style.behavior = null
);
}
It will work better at least but of course not perfect.
My advice is to change select control to html equivalent. I use OboutDropDown that has a nice view. There are many implementations that can suite you needs.
First you need to expand the :hover surface underneath your menu.
So in your css add width:310px;height:220px to #nav .nav_element a.
(also add a class or an id on the second div styled with top:220px)
Now you just need to simulate a mousedown triggered when you click on the select which will halt when the selection between the options is done - you can probably do the last part if you check for the onfocus state of the select which will stop the mousedown.