JQuery Mobile programmatically create selectmenu - styling gone - javascript

I used JQuery Mobile 1.4.5 to programmatically create a select menu. It works, however the styling is gone. If I do $select.selectmenu(), the styling is there, but the popup window is displayed fullscreen instead of just floating above the select widget.
var $select = $("<select>");
$select.attr({
id: "selectThemes",
"data-native-menu": false
});
$.each(settings.themes, function (index, theme) {
var $option = $("<option>");
$option.attr("value", theme.Theme).text(theme.Name).appendTo($select);
});
$("#divOptions").append($select);
$select.selectmenu();
For test purpose, I also created a static select in my HTML page and called $select.selectmenu() in document.ready(), but the styling is missing as well.
Any ideas are appreciated! :)

The styling is correct - the selectmenu is displayed fullscreen because there are many items on the list. I didn't realize it because the scrollbar on the right side is missing. I enable scrolling and the problem is solved.

Related

Why ComboBox is not working after applying Resize and Move functionality to PopUpDiv

I have a normal Div with title-header ['Resize and Move Me! , Combobox'] and body part as mention below in link.
When I applied move and resize functionality using javascript, ComboBox on header part is not working. It would not drop list. If I put Combobox outside of that DIVs then its working properly,But inside it would not. See example,
JSFIDDLE DEMO
I have few questions
Can anyone tell me the reason that why its not working?
What should be the solution to make it work properly.
Because, in one the mouse click events, you are trying to block the default behavior of the select box.
function onMouseDown(e) {
onDown(e);
e.preventDefault();
}
Here e.preventDefault, is blocking the select box from showing the options when you click the mouse.
Please comment/delete it out to get the normal behavior of the select box.

Semantic UI - Following menu example

I'm new to Semantic UI and I want to implement following menu as seen in Semantic UI's documentation on right side. I want to implement this functionallity to fixed top menu - so when id of header element is reached, active element in menu should be changed. I was looking at code of docs.js where this is implemented for documentation's site, but this code is pretty complex if you are using Semantic UI for the first time. I have those classes for my menu: ui large top fixed hidden menu
Is there already built-in following menu (probably not since it's not mentioned in docs?) or I add it with jQuery?
semantic-ui only gives you the styling. Once you click on a menu item, it is up to you to update the item's active status.
This is how we have it implemented in our code -
const menuNav = $('.ui.menu.menu-component .item');
menuNav.on('click', function (item) {
menuNav.removeClass('active');
$(this).addClass('active');
});
The other thing to remember is that you need to check the URL on page load so that you can set the appropriate item label to active.

jQuery DataTables - Inside an Bootstrap 3 Panel will cause the Search Box and Page Numbers in the Wrong Position

I'm having an issue where I'm putting jQuery DataTable in an bootstrap 3 panel will cause the search box and page numbers to go off.
Here is the design:
I have a webpage, and will have multiple jQuery DataTable, however, with a large number of columns, it will make the webpage scrollable horizontally.
Hence my idea is to use the bootstrap 3 panel feature, and put the datatable inside, hence it will now only scroll the panel, but not the whole webpage.
Hence, the final result is a nice looking table inside the panel.
However, when the panel starts to scroll horizontally, the search and page tabs are not placed to the far right side, but in the middle, which it will look like this after it scrolls.
Can anyone point me to the right direction on how I could put the search and page tabs to the far right?
The best way to keep your search bar at the end of your table AND keep a scrollable table is to use scrollX in the DataTable attributes. ScrollX
Simple workaround - disable default search field, make a custom input field for datatables search and place it in bootstrap panel.
var oTable = $('#datatable').dataTable({
// ... options ...
});
$('.custom-input-field').keyup(function(e){
oTable.search($(this).val());
oTable.draw();
});
setTimeout would be a good idea in this case:
var searchTimer;
$('.custom-input-field').keyup(function(e){
clearTimeout(searchTimer);
var keyword = $(this).val();
searchTimer = setTimeout(searchTable, 1000, keyword);
});
function searchTable(keyword){
oTable.search(keyword);
oTable.draw();
}

jCarousel with keyboard : wrong focus using the tab key

I'm using the 0.3 version of the jQuery jCarousel script to display three carousels on the webpage I'm working on. Those three carousels work just fine.
The trouble is : you can't use them properly using the keyboard.
If you tab through the page, the focus goes to the first link of the first item in the carousel, even if this item is not visible ! (For example : click on a "next" link in one of the carousels, then use the tab key to browse : the focus will go to a link which is not visible inside of the carousel).
If you keep using the "tab" key, the focus will successively go to all the links of all the items in the carousel.
Instead of that : the focus should go to the first link of the first visible item ; then, if the last link of the last visible item is reached, then the focus should go out of the carousel (the next link outside of it, in fact).
A solution could be to use tabindex... but some parts of the page are shared with other pages of the website, so I just can't use tabindex in all the links of all my pages...
Instead of that, I had tried things like this :
$("#carousel-editos li a").focusin(function () {
$("#carousel-editos li.jcarousel-item-first .post-title a").focus();
return false;
});
but then it prevents any further use of the "tab" key...
I hope this is clear... Thanx for any help !
I think you need a combination of the answers that you've already provided. It seems like you should be able to use Javascript to dynamically set tabindex attributes on the HTML that you need to be tabbable (heh, new word). I'm thinking of something like this:
On page load, find all visible items in the carousel. Use jQuery to set the tabindex property for each item that you want in the tab cycle.
Assign tabindex properties to all other links on the page that you want to cycle through.
Add some jQuery to modify the tabindex attributes when the user changes the items in the carousel (click the next/prev buttons).
It would be much easier to help you if you made a simplified example in jsFiddle.
On the carousel createEnd and scrollEnd functions you can reset the contents of .jCarousel so that only the visible carousel items are "tabbable". I have done that in my code as follows:
var bannerSlider_scrollEnd = function(event, carousel) {
var $carousel = carousel.element(),
$items = carousel.items(),
$bannerContent,
$visibleItemsContent = carousel.visible().find('.bannerContent');
$items.each(function (index) {
$bannerContent = $(this).find('.bannerContent');
disableTabbing($bannerContent);
});
reenableTabbing($visibleItemsContent);
$visibleItemsContent.find(':focusable').eq(0).focus();
};
The disableTabbing($container) and reenableTabbing($container) lines refer to helper functions I coded into my site which basically find all :focusable elements in a given container and set the tabindex to "-1", then "0" respectively.
After this processes, users will be left tabbing only through visible carousel items instead of all carousel items.

Change jQuery autocomplete

jQuery has an autocomplete code that works like the search box on google. However it doesn't allow for the drop down items to be clickable links. I'm not that great with jQuery. Is there any way to alter the jQuery autocomplete code to make the items links?
Also if possible i would like to alter that code again so that when the user uses the arrow keys to scroll down the dropdown, the hovered item doesnt appear in the search box
Heres the link to the jQuery code: http://jqueryui.com/demos/autocomplete/
It's right there in the docs:
http://jqueryui.com/demos/autocomplete/#event-select
You must change the select event appropriately:
$( ".selector" ).autocomplete({
select: function(event, ui) { window.location = "www.google.com"
}
});
There is a way for you to control the actual html that is displayed.
It is in fact shown on the page you linked to
http://jqueryui.com/demos/autocomplete/#custom-data
There is no reason why you should not be able to make the drop down links.

Categories