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>
Related
In html A i am calling html B which contain tab as shown is the image. now the "Save " and "Save All" button is in html B i have used css to move to the top but this is not the right way to do. I need "Save" and "Save All" button in html A but for this i need to know which tab is selected.
HTML B
<div id="confi">
<div class="row">
<section widget-grid id="widget-grid">
<div class="col col-md-12">
<div ng-if="currComp" jarvis-widget id="script-widget" data-widget-color="darken" data-widget-colorbutton="false" data-widget-editbutton="false"
data-widget-deletebutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-gear"></i>
</span>
<h2>Script Configuration for {{comp}}</h2>
</header>
<div class="widget-body padding-10">
<ul id="scriptTabs" class="nav nav-tabs bordered">
<li ng-repeat="s in scripts track by $index">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file"></i> {{s}}
<!-- <span class="badge bg-color-blue txt-color-white">6</span> -->
</a>
</li>
</ul>
<!-- style="height:400px;margin-bottom: 30px;" -->
<div id="scriptTabsContent" class="tab-content padding-10">
<div class="tab-pane active" id="s{{$index}}" ng-repeat="s in scripts track by $index">
<div style="height:753px;width: 100%;">
<div id="{{ s }}" style="height:100%;width: 100%"></div>
<div style=" position: absolute;margin-top: -910px;right: 0px;">
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;" ng-click="save(s)">Save</button>
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;margin-right: 20px;" ng-click="saveAll('all')">Save All</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Currently i am using button in TabsContent so that i can get the value of "s" to the controller B and i cont use ng-click it is giving me error
<li ng-repeat="s in services track by $index" ng-click="functionInScope(s)">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file" ></i> {{s}}
</a>
</li>
please help me to get the value of "s" with out using the ng-click, so that i can send the value of "s" to the controller A for the save function.
Just a suggestion, Can't we create a variable named "selectedTab" and when you click the tab just generate a KeyUp event from that tab and in this event you can change the value this variable and while posting just get the value from that "selectedTab" variable.
For reference how to generate an click event
https://angular.io/guide/user-input
i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function
my HTML is a static variant, not a solution builded with ng-repeat or an existing JSON/Angular Controler.
I need to select a custom option and used alreay ng-select without a success.
My HTML looks like:
<div class="btn-group" dropdown>
<button type="button" class="pull-right btn btn-block btn-dropdown" dropdown-toggle>
<div class="pull-left">
<i class="flag-{{my.filter.flag}} left vcenter"></i>
<span class="vcenter">{{my.filter}}</span>
</div>
<div class="pull-right"><span class="caret"></span></div>
</button>
<ul class="dropdown-menu" dropdown-menu ng-init="options[0]">
<li ng-class="{active: my.filter == 'Germany'}">
<a ng-click="my.filter = 'Germany'; my.filter.flag='DEU'"><i class="flag-DEU"></i><span>Germany</span></a>
</li>
<li ng-class="{active: my.filter == 'England'}">
<a ng-click="my.filter = 'England'; my.filter.flag='GBP'"><i class="flag-GBP"></i><span>England</span></a>
</li>
</ul>
</div>
so how can i solve it to preselect the option "Germany" by pageloading into the div.pull-left section?
You mention ng-select in your question, but you used ng-selected. Maybe it is just a typo.
I have created a global Jquery to add and remove class toggle function for various elements through my page. JsFiddle
The toggle class displays a hidden div which overlays the original div. Within the overlay i have created a close button is an attempt to remove the hidden div.
I am having slight issue in removing a the toggle class with the close button. Below is my code
$('.details-btn').click(function(){
var $panel = $(this).closest('.square').find('.i-panel');
if ($panel.hasClass('inactive')) {
$('.square .i-panel').addClass('inactive');
$panel.removeClass('inactive');
} else {
$panel.addClass('inactive');
}
});
HTML
<div class="item-container small-6 relative">
<div class="square">
<span class="exclusive-tag-3 cap-txt absolute">
<p class="absolute">New</p>
</span>
<img src="http://myjpg">
<div class="item-details">
<ul>
<li class="small-5">
<p>ICON</p>
</li>
<!-- INFO BTN -->
<li class="small-5 details-btn">
<i class="fa fa-info-circle">OPEN</i>
</li>
<!-- INFO BTN ENDS -->
</ul>
</div>
<div class="d-hidden i-panel inactive absolute">
<article class="global-padding">
</article>
<footer class="absolute">
<ul class="global-padding">
<li class="small-5">
<a>
<p class="heading-5">Details</p>
</a>
</li>
<li class="small-3">
<a>
<p class="heading-5">
<i class="fa fa-envelope-o">SEND</i>
</p>
</a>
</li>
<li class="small-3">
<a>
<p class="heading-5">
<i class="fa fa-times">close</i>
</p>
</a>
</li>
</ul>
</footer>
</div>
</div> <!-- SQUARE ENDS HERE -->
</div> <!-- ITEM-CONTAINER ELEMENTS ENDS -->
You don't have a click handler for the close button, so only the open button is triggering the class toggle, you need to add the class details-btn to the close button as well or create a new click handler.
Try replacing
<p class="heading-5">
<i class="fa fa-times">close</i>
</p>
with
<p class="heading-5 details-btn">
<i class="fa fa-times">close</i>
</p>
Your Jquery function is triggered when you click on an element that has the class details-btn on it, therefore you must add class details-btn to your close button like this:
<i class="fa fa-times details-btn">close</i>
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.