I am using semantic-ui and I want to show some info text in dropdown. But it act as a link even it's a <div class="header item">
Here profile, settings and logout are link and rest are text(non-clickable)
sample mockup I tried with.
<div class="ui dropdown item">
<i class="icon dropdown"></i>
<div class="menu hidden">
<div class="header item">Narottam Guattom</div>
Action one
Action one
Action one
</div>
</div>
Semantic-ui treat that div as a link and dropdown get closed on click.
Is there better way to implement this in semantic-ui Or how can I prevent click event.
You should customize items selector. Try to use next code
$.fn.dropdown.settings.selector.item = '.menu > .item:not(.header)'; // change selector for all dropdowns
Also you can specify item selector locally. Read more about dropdown DOM settings to configure it properly
$( ".header " ).click(function( event ) {
event.preventDefault();
........//Custom code
});
Related
I have a button. If i click that button one popup will open in Navbar. I am using ui-bootstrap for this.
If I click outside the popup is not closing.
I wrote window.onclick function to achieve this. It is working.
But My problem is, If I click button popup will open. If I select any value in dropdown, on top of that one more popup will open.
So If I select any dropdwon value on the second dropdown, the first dropdown is automatically closing.
My need is, When I click button dropdown should open. and If I click outside the dropdown close.
If I select any value from dropdown, the dropdown should stable. It should not go off. Only when I click outside that time only it should go.
<button id="btn-append-to-body" type="button" class="btn btn-primary" ng-show="showFilterBtn" ng-click="showDropdown($event)">
<img src="assets/images/filterIcon.png">  Filter <span class="caret"></span>
</button>
<li class="nav-item dropdown">
<div class="dropdown-menu">
<div class="dropdown-item" ng-repeat="filter in filters">
<div>{{filter.filterObject}}</div>
</div>
</div>
</li>
window.onclick = function() {
$(".dropdown-menu").hide();
}
If I click button, the dropdown should not go.
This is how you can do, again this is not ideal way to do it, since we have little data provided by you, I can only think of this kind of fix :)
window.addEventListener("click", function(event) {
if (!$(event.target).hasClass('dropdown-menu') &&!$(event.target).parents().hasClass('dropdown-menu')) {
$(".dropdown-menu").hide();
}
});
EDIT 1
Just add a parent div and keep a unique class for dropdown-parents which you don't want to close
suppose class name is dropdown-select
and then just edit the condition like this
if (!$(event.target).hasClass('dropdown-select') &&!$(event.target).parents().hasClass('dropdown-select')) {
You should add an extension to the jquery library then add this script since you are using javascript
<script>
$( document ).ready(function() {
$(".dropdown-menu").hide();
});
</script>
I'm using Semantic-UI for Meteor. Let's say I have a dropdown like this:
<div class="ui floating dropdown labeled search icon button">
<i class="world icon"></i>
<span class="text">Select Language</span>
<div class="menu">
<div class="item">Arabic</div>
<div class="item">Chinese</div>
<div class="item">Danish</div>
<div class="item">Dutch</div>
</div>
</div>
And initializing it like this:
Template.DropdownTemplate.onRendered(function() {
this.$('.ui.dropdown').dropdown()
})
But how do I reach the behaviors of that dropdown, which, according to the documentation on the Semantic-UI site, look like this:
$('.your.element')
.dropdown('behavior name', argumentOne, argumentTwo)
;
An example is this clear behavior:
$('.ui.dropdown).dropdown('clear')
This simple behavior doesn't work (nor does any other behavior) in Meteor for some reason. Callbacks work, but not the behaviors.
Does anyone have a workaround for this?
I've searched all over and I'm unable to get this to work. I've got a button which I want to use as the main control to load up a lightbox image.
Here is my HTML
<li class="span1">
<a href="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_b.jpg" title="FLAG4_km003" class=" thumbnail" target="_blank" data-lightbox="lightbox">
<img alt="FLAG4_km003" src="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_z.jpg">
</a>
<div class="hover-box">
<p>Title</p>
<button class="view box-button">Zoom</button>
<button class="request box-button">Request</button>
</div>
</li>
As you can see the required lightbox link is in place but I want to trigger the click of it when a user clicks on the 'Zoom' button.
Here is my jQuery which currently isn't working:
$(document).on('click', '.view', function(){
$(this).closest("li.span1 a").click();
});
closest doesn't work like that. It selects the first/closest matching parent of the element. You should at first select the closest li element and then select the child/descendant a element.
$(this).closest("li.span1").children('a').click();
You could also use the parent and siblings methods for selecting the target element:
$(this).parent("div.hover-box").siblings('a.thumbnail').click();
I'm working with Semantic UI dropdowns, and I need to create a dropdown with around 3000 options in it. The dropdown works very well, except for one case. If the user clears out the search text, the dropdown completely locks up. I believe it's because it's trying to reload all the elements.
I've looked through the settings (http://semantic-ui.com/modules/dropdown.html#/settings) that are available for the dropdown, but nothing stands out in change the way it handles reloading all the elements.
Any advice would be greatly appreciated.
HTML:
<div class="ui fluid search selection dropdown">
<input type="hidden" name="security_group"></input>
<i class="dropdown icon"></i>
<div class="default text">Select Security Group</div>
<div class="menu">
<j:while test="${reference.next()}">
<div class="item" data-value="${reference.sys_id}">${reference.u_name}</div>
</j:while>
</div>
</div>
Javascript:
$(document).ready(function(){
$(".ui.fluid.search.selection.dropdown").dropdown();
$(".ui.fluid.search.selection.dropdown").width("100%");
});
I'm using a Bootstrap accordion and it works like a charm, no problem at all. However, I'd like to have a link to one of the tabs in the accordion. The idea is that once I click on the link, I'm taken to that part of teh page (the accordion is really down in the page) and open the tab.
So I used the following:
<i class="mdi-action-info"></i>
which should work. And it does in part: it opens the accordion tab just right, however, the page doesn't scroll to the anchor as it should. It just stays in the same position, but opening the accordion.
Any idea how to fix it? I have found answers related to jQuery UI accordion but nothing about BS accordion (and the jQuery UI answers didn't work either), really don't know why isn't this working
In order to scroll to the anchor, you should wait until your collapsable div is fully shown.
JQuery helps us to easily work out with that by collapse events.
$(document).ready(function() {
$("#section-two").on('shown.bs.collapse', function() {
window.location = "#section-two";
});
});
Check out Bootstrap JS Collapse Reference on w3schools.com for a quick documentation.
You can do it manually like so:
Open group 2
JS
$('#my-link').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
});
Fiddle
In my case I prefer to avoid adding JavaScript and decide to use two attributes (data-target and href) so that each of them has one job: 1)launch tab & 2)go to anchor:
<a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">
Building off of Michele's answer, here is an example where you can do an animated scroll to the div:
$(document).ready(function() {
$('#accordionEvent').on('shown.bs.collapse', function() {
var position = $('#accordionEvent').offset().top;
$('HTML, BODY').animate({scrollTop: position }, 500); //500 specifies the speed
});
});
Here is a working version that doesn't just force open an according but actually toggles it like you would expect. It will also scroll to the page anchor. Best of all it's dynamic so you don't need to manually code a bunch of functions for each according group.
Your webpage will look something like this:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section One
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section One Text
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section Two
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section Two Text
</div>
</div>
</div>
</div>
<div>
Now for the code:
$(".accordian-button").click(function(e) {
that = $(this)
accordian = that.siblings('.accordian-body')
$(".accordian-body").not(accordian).collapse('hide')
accordian.collapse('toggle')
})
// Kludge for allowing all accordians to be collapsed to start
$(".accordian-body").collapse('hide')
Here's a working fiddle:
http://jsfiddle.net/dkcb8jLq/31/
Notice you can just click on the div to toggle it or you can click on the text to toggle and go to the link.