Please look at http://my-webpresence.com/work/yasir/dinecart/menu.html#.
When you hover over the restaurants in the top menu and then hover over 'Browse' and then on any of the links in the menu, the entire menu 'flashes/flickers' as you move over ANY of the links.
What is the problem and how can I fix this?
Thanks
This may not be a complete solution, but it might help you locate the primary issue. Each time you hover over one of the top links "Featured" "New Restaurant" "By Category" "By Location" "See All", the li under #flyout-menu goes from "active selected" to "browse" to "active selected". That's when the flickering is occurring.
It may have something to do with this function here:
$("#flyout-menu li").hover (function () {
$("#flyout-menu li > div").hide();
$("#flyout-menu li").removeClass('selected');
$(this).addClass('selected')
$(this).children('.nav-sub-1-right').show();
});
Your Flyout menu javascript hides the <div> for a moment while you remove and re-add the selected class on your <li> nodes. then the <div> is redisplayed. This causes the flickering. Don't hide the <div>.
Related
I've made a stackblitz example here to show the issue:
https://stackblitz.com/edit/primeng-toolbar-demo-u21zmt?file=src%2Fapp%2Fapp.component.html
When clicking the remove button the popup menu shows in the wrong place.
I don't want to have to write custom CSS to position the menu every time I want to use it.
What am I doing wrong?
Switch the order in your html so
<p-button class="p-mr-2" #removeBtn type="button" icon="pi pi-chevron-down" label="Remove"
(click)="removeMenu.toggle($event)"></p-button>
<p-menu #removeMenu [model]="removeMenuItems" [popup]="true" appendTo="removeBtn"></p-menu>
becomes
<p-menu #removeMenu [model]="removeMenuItems" [popup]="true" appendTo="removeBtn"></p-menu>
<p-button class="p-mr-2" #removeBtn type="button" icon="pi pi-chevron-down" label="Remove"
(click)="removeMenu.toggle($event)"></p-button>
This will make the menu appear under "remove"
I have a simple Mega Menu. I am trying to display the sub menu of the parent menu item clicked. But for some reason when I click the parent item all the sub menu's are displaying instead of the clicked parent item sub menu. What I am doing wrong.
Here is my JSFiddle link
https://jsfiddle.net/jokcLjkb/4/
here is my js code.
$(document).ready(function() {
$("a.drop").on('click', function(e) {
e.preventDefault();
$("ul.mainNav li > .drop-full-col").css("display","block");
});
});
Thanks and Appreciate it
Your line:
$("ul.mainNav li > .drop-full-col")
Will select all the submenus because you target the main nav and all the <div class="drop-full-col"> elements. You need to select only the ones relative to the link you click on, and to do that you need to use this to refer to the link being clicked on. So change:
$("ul.mainNav li > .drop-full-col").css("display","block");
to
$(this).closest('li').find(".drop-full-col").css("display", "block");
jsFiddle example
.closest('li') will look for the closest list item when you click the link, and .find(".drop-full-col") will then search down the DOM for the div you want.
I have a simple html menu, when a menu item is clicked a class of `mg_cats_selected" is added to the anchor tag (which is the menu item).
I would like to copy the text value of the active/selected anchor tag and display it in another div on the page, but I would like to only display it once. When a new item link is clicked, I want to remove the old value from the separate div that I've created it and display the new value of the new selected menu item.
I hope that makes sense.
This is the HTML menu
<div id="mgf_165" class="mg_filter mg_new_filters">
<a rel="163" id="163" class="mgf_id_163 mgf mg_cats_selected left_menu" href="javascript:void(0)">Bathrooms Sinks</a>
<a id="164" rel="164" class="mgf_id_164 mgf left_menu" href="javascript:void(0)">Bowed</a>
</div>
This is the jQuery and the div where I wanna display the text values.
<script type="text/javascript">
jQuery(document).ready(function(){
console.log('test');
jQuery("a.left_menu").click(function(){
var txt = jQuery("a.left_menu").text();
//$(this).attr('rel');
jQuery("#category").append(txt);
});
});
</script>
<div id="category">
</div>
At the moment when I click on, say, "Bowed", this displays in the div
Bathrooms SinksBowed
And if I click again on "Bathroom Sinks", the same thing repeats
Bathrooms SinksBowedBathrooms SinksBowed
How can I deal with that? And did I follow the correct logic here?
You are currently getting the text of all the menu items and then appending it to the div.
You need to get the text of the clicked menu item, and then set the content of the div to the text value of that menu item.
jQuery(this) // the clicked menu item
jQuery('#category').text('VALUE') // set the text content of the tag to VALUE
Working solution on JSFiddle..
See Inside the Event Handling Function to learn more about jQuery event handling.
whenever the user the tabbed menu, from then, the selected tabbed menu should be selected[in background color] until the user select next any one of the tabbed menu. each tab menu has each page on its body content.
in code, the selected tab menu should have attribute class="selected" inside the html until user select next equivalent menu, i need this in javascript or in jquery.
Any help? please
my html code for this
<ul class="mainnav" id="mainnav1">
<li><span>Home</span></li>
<li><span>Test orders</span></li>
<li><span>Access arrangements</span></li>
<li><span>Pupil registration</span></li>
<li><span>Teacher assessment</span></li>
<li><span>Pupil results</span></li>
<li><span>Phonics screening check</span></li></ul>
Hope this can help.
$("#mainnav1 li a").on("click", function(){
$("#mainnav1 li a").removeClass("active");
$(this).addClass("active");
return false;
});
jsfiddle
I've been struggling with this for hours so hope someone can please help.
I have a dropdown menu (.category-navbar) which filters images shown below it. Whichever item is selected in the list is given the class '.select' - what I want is to have a label above that which displays the text of the selected list item.
<div class="dropdown-menu-portfolio">
<label>All</label> // This is the text I want to update
<ul class="category-navbar">
<li class="select">
<a>All</a>
</li>
<li>
<a>Item2</a>
</li>
<li>
<a>Item3</a>
</li>
<li>
<a>Item4</a>
</li>
</ul>
</div>
The label will initially show the text 'All' (as that is the default list item), but I want that to change when one of the other menu items are selected ie. 'Item2', 'Item3' etc.
Below is the code showing what I think I need, I've tried variations of this but nothing has worked - I've put 'copy' and 'replace' to show want I want to happen.
$(".category-navbar li a").click(function() {
$(this)
.copy(".select a").text()
.replace(".dropdown-menu-portfolio label").text();
});
Whilst trying to get anything to work, I found the code below does work, but obviously isn't right as it adds the newly selected item after the label, also it adds the text as a link, whereas I only want plain text.
$(".category-navbar li a").click(function() {
$(this)
.clone(".select a")
.appendTo(".dropdown-menu-portfolio label");
});
Any help would be much appreciated, thanks.
A simple solution would be:
$(".category-navbar li a").click(function() {
// Modifying the label
$('div.dropdown-menu-portfolio label').text($(this).text());
// Removing the class 'select' to the item previously selected
$('li.select').removeClass('select');
// Giving the class 'select' to the item currently selected
$(this).parent().addClass('select');
});
You're overthinking this. Just try
$(".dropdown-menu-portfolio label").text($(this).text());
Your syntax was wrong aside from this better solution.