Semantic UI - Following menu example - javascript

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.

Related

React material design onclick list-item highlight the item/ active

I have 2 panels with a list group on each panel. I am using material design.
Issue:
onclick first list-item on panel 1 it is not getting selected and changing style = "success" or highlighting the selected list, same for the panel 2.
Looking for the solution: onclick on list-item it should change the style or active or change the background color. Highlight the selected item and remove it when clicking on another item on the respective panel.
original code
I want output like this Bootstrap code. This was done in bootstrap but looking for a solution in material UI
You will need to add the following lines
In cards
selected={card==selectedCard}
in item
selected={item==selectedCheck}
I believe it should work after this.

Change the menu sidebar based on the menu item selected - Semantic UI & JQuery

I'd like to use SemanticUI to display different sidebars based on selected menu
I've tried one way, but it doesn't seem to work. Codepen link
Here, i have 2 menu items for the sidebar, i need to show 'first_sidebar' if i'm inside the menu 'First', if i'm inside 'Second', i need to show the 'second-sidebar'.
Thanks!
You are trying to show and hide sidebar as an ordinary HTML element with jQuery, using $("div.second_sidebar").hide() and $("div.first_sidebar").show().
But, since sidebars are Semantic UI element that you initialized with .sidebar() method, you should use this same method to show and hide sidebars, e.g.:
$("div.second_sidebar").sidebar('hide');
$("div.first_sidebar").sidebar('show');
Reference is here:
https://semantic-ui.com/modules/sidebar.html#/usage

JQuery Mobile programmatically create selectmenu - styling gone

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.

Disable javascript generated by asp.net menu control

I have a menu created using the asp.net menu control. I have added JQuery script that changes the display from pop-appearing to rolling out accordion style. However the pop-appearing still occurs, so what occurs overall is 'Mouse over Menu -> Sub Menu Appears --> Sub Menu Rolls back up'
What I am looking for, is a method to disable the javascript that asp.net generates that causes the sub menus to appear on mouse over, so that the replacement script that I have can function stand alone.
In other answers similar to this question I found the following:
public class MyCustomMenu : System.Web.UI.WebControls.Menu
{
protected override void OnPreRender(EventArgs e)
{
// Don't call base OnPreRender
//base.OnPreRender(e);
}
}
However adding that to my masterpage.cs file did not solve the issue.
If you look at the HTML rendered by menu control you will see that every menu element has a function call on mouse over, called Menu_HoverStatic. To disable it simple include an empty function by the same name in your ASPX markup:
<script type="text/javascript">
Menu_HoverStatic = function () { };
</script>
This will effectively disable original mouse over. Using this method you can disable other original event handlers if needed.
One thing that not everyone is familiar with is the use of Control Adapters to customize how a standard control renders.
Using adapters you can for example alter the output of the menu to be clean <ul> and <li> elements, integrate it with jquery, etc.
Here's an example of using ASP.NET 2.0 CSS Friendly Control Adapters on menues: http://www.asp.net/cssadapters/WalkThru/WalkThrough.aspx#SimpleMenu

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.

Categories