Semantic Ui Dropdown on hover - javascript

I want my semantic ui dropdown menu to trigger on hover instead of click, it works on click, but not hover.
Javascript:
$('.ui.dropdown').dropdown({on:'hover'});
HTML:
<div class="ui dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>

If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div:
<div class="ui simple dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
Fiddle Demo

This is the same answer as above, just cleaner.
$('.dropdown').dropdown({transition: 'drop', on: 'hover' });

you can take this, it works for me
$('.dropdown').dropdown({transition: 'drop' }).dropdown({ on: 'hover' });

I use this:
$('.menu > .ui.dropdown').dropdown({
on: 'hover'
});
And it works well. On your case, try to select the parent of dropdown item.

Related

Bulma hoverable dropdown doesn't show

js computes the structure below, i need a dropdown when the button is hovered whereas onclick should trigger the form submit.
nothing happens when i hover the button area. Is it because of is-active missing?
In Bulma's official docs about the dropdown menu, the example's indent can be confusing.
The "dropdown-menu" 'div' is a childnode of the main dropdown 'div'.
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Hover me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>

Dropdown with JS

I'm working on my site by editing a template but there is a drop down menu that does not work.
The drop-down menu CSS is missing.
How can I fix it with CSS and/or with JS?
Below is the HTML code:
Bentornato {$mybb->user['username']}! <i class="fa fa-caret-down"></i>
<div id="ddnmenu_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container">
User Panel<i class="fa fa-user menuadj"></i>
</div>
<div class="popup_item_container">
Edit Profile<i class="fa fa-pencil menuadj"></i>
</div>
<div class="popup_item_container">
Edit Options<i class="fa fa-cogs menuadj"></i>
</div>
<div class="popup_item_container">
Edit Avatar<i class="fa fa-picture-o menuadj"></i>
</div>
<div class="popup_item_container">
Edit Signature<i class="fa fa-paint-brush menuadj"></i>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/member.php?action=logout&logoutkey={$mybb->user['logoutkey']}" class="popup_item">{$lang->welcome_logout}!<i class="fa fa-power-off menuadj"></i>
</a>
</div>
</div>
edit:
I used the solution you suggested to me with jquery, but now there is another problem...
When the menu opens the side button moves beneath it, thus ruining the entire menu..
Before:
After:
How can I fix it?
Here is working code with jquery :
Add jquery library - https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
Then put this code in script section :
$(document).ready(function(){
$('#ddnmenu').click(function(){
$('#ddnmenu_popup').slideToggle();
})
})
Add this css:
#ddnmenu_popup{
position:absolute;
}
You can use $( ".popup_menu" ).toggle(); on clicking on the link #ddnmenu. But first you should remove style="display: none;"
$( "#ddnmenu" ).click(function() {
$( ".popup_menu" ).toggle();
});
You need to set the style property via JavaScript.
HTML:
<a onclick="openDropdown()" href="#" id="ddnmenu">Bentornato {$mybb->user['username']}! <i class="fa fa-caret-down"></i></a>
<div id="ddnmenu_popup" class="popup_menu" style="display: none;">
...
</div>
JS:
function openDropdown() {
document.getElementById('ddnmenu_popup').style.display = 'block';
}

onClick event is being caught by the parent element along with the clicked element

I have a div and inside it there are some elements.
my parent div has a test() function by using onClick.
in inside parent div there is a quickView() function by using onClick.
now, when I click on quickView() function, test() function fired .
<div onClick="test();" class="product-inner">
<h5 class="product-title height-40-px">
title
</p>
</h5>
<hr class="mt8 mb8">
<div class="product-meta">
<ul class="product-price-list">
<li><span class="product-save dir-to-right"><strong>7500</strong></span>
</li>
<li><span class="product-old-price dir-to-right">120,000</span>
</li>
<li><span class="product-price">%95</span>
</li>
</ul>
<hr class="mt0 mb0 mr6 hr-blue">
<div class="col-md-12 mt10">
<span class="col-md-6">
۹ <i class="fa fa-users"></i>
</span>
<span class="col-md-6">
<p class="font-size-12 display-inline">
zone
<i class="fa fa-map-marker"></i>
</p>
</span>
</div>
<ul class="product-actions-list mt35">
<li><a data-original-title="add cart" class="btn btn-cart btn-sm popup-text" href="#product-quick-view-add-to-cart" onclick="quickView(18730);" data-effect="mfp-move-from-top" data-toggle="tooltip" data-placement="top" title="">cart <i class="fa fa-shopping-cart"></i></a>
</li><li>details <i class="fa fa-eye"></i>
</li>
</ul>
</div>
</div>
Use event.stopPropagation() to prevent the click event from propagating to the parent. This is how you use it.
P.S. IE supports e.cancelBubble instead of e.stopPropagation()
function quickView(value, e) {
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
console.log(value);
}
function test() {
console.log('test Fired');
}
<div onClick="test();" class="product-inner">
<h5 class="product-title height-40-px">
title
</p>
</h5>
<hr class="mt8 mb8">
<div class="product-meta">
<ul class="product-price-list">
<li><span class="product-save dir-to-right"><strong>7500</strong></span>
</li>
<li><span class="product-old-price dir-to-right">120,000</span>
</li>
<li><span class="product-price">%95</span>
</li>
</ul>
<hr class="mt0 mb0 mr6 hr-blue">
<div class="col-md-12 mt10">
<span class="col-md-6">
۹ <i class="fa fa-users"></i>
</span>
<span class="col-md-6">
<p class="font-size-12 display-inline">
zone
<i class="fa fa-map-marker"></i>
</p>
</span>
</div>
<ul class="product-actions-list mt35">
<li><a data-original-title="add cart" class="btn btn-cart btn-sm popup-text" href="#product-quick-view-add-to-cart" onclick="quickView(18730, event); " data-effect="mfp-move-from-top" data-toggle="tooltip" data-placement="top" title="">cart <i class="fa fa-shopping-cart"></i></a>
</li><li>details <i class="fa fa-eye"></i>
</li>
</ul>
</div>
</div>
Click events are bubbling up from the inner element clicked up to the document root going through all the parents of the clicked element. in order to stop it from propagating up you should use - event.stopPropagation();
That's how event bubbling works. First the click event is triggered on the element that actually was clicked (a.btn.btn-cart in your case) and then it goes upwards and reaches the parent div with test(). You can prevent further event propagation by passing an event to your quickView() function and calling event.stopPropagation(). Then, your HTML should look like this:
<a class="btn btn-cart btn-sm popup-text" onclick="quickView(event, 18730);">Cart</a>
And your JavaScript function:
function quickView(event, number) {
event.stopPropagation();
console.log(number) // Do some stuff with the passed ID.
}

Bootstrap Tooltips have disabled parts of my javascript

So here is a issue I am experiencing that is driving me nuts. As soon as I enable Bootstrap tooltips on my tags, the custom JavaScript I have won't trigger. If I remove the Bootstrap code that triggers the tooltip from the tag, everything works. JSFiddle Example
Working Example (remove: data-toggle="tooltip" data-placement="left" title="Parent Title Text." and it will work):
<li>
<a class="toggle-data-options" data-toggle="tooltip" data-placement="left" title="Parent Title Text.">Parent
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: inline;"></span>
<span class="glyphicon glyphicon-chevron-down" style="display:none;"></span>
</a>
<div class="data-options" style="display: none">
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 1 Text">Child Item 1</a>
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 2 Text">Child Item 2</a>
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 3 Text">Child Item 3</a>
</div>
</li>
When you enable the bootstrap tooltip it inserts the tooltip <div> immediately after .toggle-data-options.
.data-options is no longer the .next() element, so there is no match. Use .nextAll() instead:
$(document).ready(function () {
$('.toggle-data-options').on('click', function () {
$(this).nextAll('.data-options').toggle('fast');
$(this).toggleClass("active");
$(this).find('span').slideToggle(0);
});
});
JSFiddle

jquery not() function not working on all elements

I am using jquery not to remove html of elements.
I don't get jQuery not() work in proper way. It removes all elements from children except the last one that I mentioned.
My Html-
<body>
<div id="edit-save-section">
<button id="edit-button" class="btn btn-info btn-large">
<span><i class="fa fa-cog"></i> EDIT</span>
</button>
<button class="division-twenty btn btn-success btn-large" data-loading-text="Saving..." class="btn btn-primary" id="btn_save"><span><i class="fa fa-save"></i> SAVE</span>
</button>
</div>
<nav id="menu">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
</ul>
</nav>
<div class="removable-section">
<b><i class="fa fa-arrows fa-2x"></i></b>
<a class="span1 pull-right remove-section-action" rel="tooltip" title="Remove section" data-placement="left" href="javascript:;"><b><i class="fa fa-times fa-2x"></i></b></a>
</div>
<div id="allhtml"></div>
</body>
Clearing html with jQuery-
$('#btn_save').click(function () {
var notAll = $('body').children().not("#menu", ".removable-section", "#edit-save-section").html();
$('#allhtml').append(notAll);
console.log($('#allhtml').html());
});
Somehow I managed removing #menu and .removable-section , But I can't remove #edit-save-section
And If i try to change order of these sections like-
var notAll = $('body').children().not("#menu","#edit-save-section",".removable-section").html();
Then it acts weird. It doesn't remove from body the last children found in above html structure. Here in this case it is .removable-section.
Let me know what is that I am doing wrong?
You can also use JQuery Clone to achieve this
$('#btn_save').click(function () {
var notAll = $('body').clone(true);
notAll.find("#menu").remove();
notAll.find(".removable-section").remove();
notAll.find("#edit-save-section").remove();
$('#allhtml').append(notAll);
});

Categories