I have a side menu that opens when the user hovers over it. In one section when the user clicks on a menu item a popover opens next to it.
But when you move onto the popover to select something from the dropdown menu the hover menu closes and leaves the popover. I tried using stopPropagation(), but the menu still closes.
Any ideas on how to fix this issue?
<li class="active treeview menu-open" id="testExecution">
<!-- sidebar menu item 1: Test Execution -->
<a>
<i class="fa fa-bars"></i> <span>Test Execution</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<!-- sidebar submenu -->
<li class="active treeview menu-open" id="partnersTree" onclick="closePopovers()">
<a>
<i class="fa fa-circle-o"></i> <span>Partners</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active" id='tab1'><a><i class="fa fa-circle"></i> tab1</a></li>
<li id='tab2'><a><i class="fa fa-circle"></i>tab2</a></li>
<li id='tab3'><a><i class="fa fa-circle"></i> tab3</a></li>
</ul>
</li>
<li class="treeview" id="historySettings">
<a>
<i class="fa fa-circle-o"></i> <span>History Settings</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a id="versionHistory" data-container="body" data-toggle="popover" data-placement="right">
<i class="fa fa-gear"></i> <span>Version History</span>
<span class="pull-right-container">
<i class="fa fa-angle-right pull-right"></i>
</span>
</a>
</li>
<div class='_content' id='versionHistoryPicker' style='width:250px'>
<div class="form-group">
<label>Select Version:</label>
<select class="form-control" id="versionDropdown" style="background-color:#ffffff; color:#777777" >
<option selected="selected" disabled="true"> Please Select Version </option>
</select>
</div>
<button type="submit" class="btn btn-default btn-block" onclick="drawHistoryCharts()">Submit</button>
</div>
<li><a id="dateHistory" data-container="body" data-toggle="popover" data-placement="right">
<i class="fa fa-gear"></i> <span>Date History</span>
<span class="pull-right-container">
<i class="fa fa-angle-right pull-right"></i>
</span>
</a>
</li>
<div class='_content' id='dateHistoryPicker' style='width:250px'>
<div class="form-group">
<label>Date range:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="reservation">
</div>
</div>
<button type="submit" class="btn btn-default btn-block" onclick="dateHistoryChart()">Submit</button>
</div>
<li><a onclick="onLoad()">
<i class="fa fa-refresh"></i> <span>RESET PAGE</span>
<span class="pull-right-container">
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
$("#testExecution").mouseout(
function(e) {
event.stopPropagation();
});
Related
I have a Drupal 8.8.4 site with Bootstrap 3.4.1 theme
I have created a store view page to display the tasks to be performed by merchants.
On this page, each task corresponds to a view block :
The orange blocks have the class "task-list-warning".
The red blocks have the class "task-list-danger".
enter image description here
There is a menu link to display this page and I added 2 badges :
With the class "task-badge-warning".
With the class "task-badge-danger".
I want to display the number of tasks on the page, in the menu link badges :
The number of class "task-list-warning" in the "task-badge-warning".
The number of class "task-list-danger" in the "task-badge-danger".
enter image description here
The store menu is a TWIG file containing the following code :
<nav role="navigation" aria-labelledby="menu-page-boutique" id="menu-page-boutique" class="contextual-region">
<ul class="nav navbar-nav m-0">
<li class="dropdown">
<i class="fas fa-plus-circle fa-lg"></i> Gérer votre {{ store_entity.type.entity.label }}
<ul class="dropdown-menu">
<li class="task">
<i class="fas fa-tasks fa-lg"></i> <b>Liste des tâches</b> <span class="badge badge-warning task-badge-warning">0</span> <span class="badge badge-danger task-badge-danger">0</span>
</li>
<li>
<i class="fas fa-cash-register fa-lg"></i> Point de vente
</li>
<li>
<i class="fas fa-exchange-alt fa-lg"></i> Migrer
</li>
<li>
<i class="fas fa-glasses fa-lg"></i> Voir
</li>
<li>
<i class="fas fa-feather-alt fa-lg"></i> Modifier
</li>
<li>
<i class="fas fa-trash-alt fa-lg"></i> Supprimer
</li>
<li>
<i class="fas fa-globe fa-lg"></i> Traductions
</li>
<li>
<i class="fas fa-sitemap fa-lg"></i> L'équipe
</li>
<li>
<i class="fas fa-link fa-lg"></i> Relations
</li>
<li>
<i class="fas fa-gift fa-lg"></i> Produits
</li>
<li>
<i class="fas fa-percentage fa-lg"></i> Promotions
</li>
<li>
<i class="fas fa-credit-card fa-lg"></i> Modes de paiement
</li>
<li>
<i class="fas fa-truck fa-lg"></i> Modes de livraison
</li>
<li>
<i class="fas fa-shopping-cart fa-lg"></i> Commandes
</li>
<li>
<i class="fas fa-clipboard-list fa-lg"></i> Inventaire
</li>
<li>
<i class="fas fa-calculator fa-lg"></i> Rapports de vente
</li>
<li>
<i class="fas fa-heartbeat fa-lg"></i> Mentions j'aime
</li>
<li>
<i class="fas fa-flag-checkered fa-lg"></i> Référencement
</li>
</ul>
</li>
</ul>
</nav>
How can I do this ?
THE PROBLEM
I started a module for Drupal 8 :
https://git.drupalcode.org/sandbox/zenimagine-3076032/tree/master
It only works if I'm on the task page. But if I go to another page, the counter in the menu does not work.
enter image description here
How to display the task counter on all pages where the menu is present ?
The menu is displayed on all pages with the url :
https://www.example.com/fr/store/ID_STORE
https://www.example.com/en/store/ID_STORE
https://www.example.com/fr/store/ID_STORE/*
https://www.example.com/en/store/ID_STORE/*
I want to keep active the tab, which I selected while toggling the CDNA. Please find the UI and code below:
So as per the Image, I have selected the "Segment View" so, while I am clicking on CDNA and open it again then "Segment View" should remain active.
Please help.
<ul class="nav side-menu " id="tree3">
<li style="background-color: #01AE9D;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;" class="campaignCentral active">
<a id="cdnaAnchor" class="sep">
<span>
<i class="fa fa-plus-square-o"></i>CDNA</span>
<span id="arrowImage" class="fa fa-chevron-circle-down"></span>
</a>
<ul t-ng-resize class="nav child_menu" style="display: block;">
<li ng-class="currentState == 'individual' ? 'active':''" class="parentLi">
<a ui-sref="individual">
<i class="fa fa-street-view" aria-hidden="true"></i>
<span data-ng-show="!resized">Customer View</span>
</a>
</li>
<li ng-class="currentState == 'segment' ? 'active':''" class="parentLi">
<a ui-sref="segment">
<i class="fa fa-pie-chart" aria-hidden="true"></i>
<span data-ng-show="!resized">Segment View</span>
</a>
</li>
<li ng-class="currentState == 'merchant' ? 'active':''" class="parentLi">
<a ui-sref="merchant">
<i class="fa fa-users" aria-hidden="true"></i>
<span data-ng-show="!resized">Merchant View</span>
</a>
</li>
<li ng-class="currentState == 'product' ? 'active':''" class="parentLi">
<a ui-sref="product">
<i class="fa fa-sitemap" aria-hidden="true"></i>
<span data-ng-show="!resized">Product View</span>
</a>
</li>
<li ng-class="currentState == 'dashboard' ? 'active':''" class="parentLi">
<a ui-sref="dashboard">
<i class="fa fa-desktop" aria-hidden="true"></i>
<span data-ng-show="!resized">Exec Dashboard</span>
</a>
</li>
</ul>
I am trying to make a responsive web app with a side menu that hide and shows via a button when the screen is small. However, I am finding that when the menu shows, it shows "behind" my main component (As shown in the images below). I am using angular 2 with with with some javascript/css from responsive website code
My main app.component.html looks like
<header class="header clearfix">
<button type="button" id="toggleMenu" class="toggle_menu">
<i class="fa fa-bars"></i>
</button>
<h1>Timesheet</h1>
</header>
<nav class="vertical_nav">
<ul id="js-menu" class="menu">
<li class="menu--item">
<a [routerLink]="['/a']" class="menu--link" title="a">
<i class="menu--icon fa fa-fw fa-user"></i>
<span class="menu--label">a</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/b']" class="menu--link" title="b">
<i class="menu--icon fa fa-fw fa-briefcase"></i>
<span class="menu--label">b</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/c']" class="menu--link" title="c">
<i class="menu--icon fa fa-fw fa-cog"></i>
<span class="menu--label">c</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/d']" class="menu--link" title="d">
<i class="menu--icon fa fa-fw fa-database"></i>
<span class="menu--label">d</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/e-csv']" class="menu--link" title="e">
<i class="menu--icon fa fa-fw fa-globe"></i>
<span class="menu--label">e</span>
</a>
</li>
</ul>
</nav>
<div class="wrapper">
<section>
<router-outlet></router-outlet>
</section>
</div>
Just add a CSS style, or do it inline.
CSS
nav.vertical_nav {
z-index: 9;
}
Inline
<nav class="vertical_nav" style="z-index: 9;">
I'm trying to do the mail box. Codes I want to hide my mail I get mail all the details of the show and yet does not work.
Show/Hidden class id='Detay'
Nuget Package = MimeKit
Show part
Clicked javascript I want to hide the data-side was the same.
<span onclick="Goster()" class="sender" data-id="#item.MessageId" title="#item.From">#item.From </span>
It was to hideShow/hidden
<div id="Detay" data-id="#item.MessageId" style="display: none">
hidden button
<div class="messagebar-item-left">
<a onclick="Gizle()" href="#" class="btn-back-message-list">
<i class="ace-icon fa fa-arrow-left bigger-110 middle blue"></i>
<b onclick="Gizle" class="middle bigger-110">Geri</b>
</a>
</div>
javascript code
<script type="text/javascript">
function Gizle() {
var divObject = document.getElementById('Detay');
divObject.style.display = 'none';
}
function Goster() {
var divObject = document.getElementById('Detay');
divObject.style.display = 'block';
}
</script>
each html element must have a unique id,
in your code you are assigning the same id to multiple div elements inside a foreach loop! you have to make it unique by adding a number for example;
<!--Show / Hidden to be part-->
<div id="Detay#(item.MessageId)" style="display: none">
when you will call show/hide you can parse the id like below:
<span onclick="Goster('Detay#(item.MessageId)')" class="sender" title="#item.From">#item.From </span>
and for hiding use this:
<b onclick="Gizle('Detay#(item.MessageId)')" class="bigger-110 middle">Geri</b>
finally you have to modify you javascript to accept the id parameter:
<script type="text/javascript">
function Gizle(id) {
$('#'+id).toggle(false);
}
function Goster(id) {
$('#' + id).toggle(true);
}
</script>
[UPDATE]
Full solution:
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon">#Html.ActionLink("Ana Sayfa", "Index", "Home")</i>
</li>
<li class="active">Mail Kutusu</li>
</ul><!-- /.breadcrumb -->
</div>
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div class="col-xs-12">
<div class="tabbable">
<ul id="inbox-tabs" class="inbox-tabs nav nav-tabs padding-16 tab-size-bigger tab-space-1">
<li class="active">
<a data-toggle="tab" href="#inbox" data-target="inbox">
<i class="blue ace-icon fa fa-inbox bigger-130"></i>
<span class="bigger-110">Gelen Kutusu</span>
</a>
</li>
<li>
<a data-toggle="tab" href="#sent" data-target="sent">
<i class="orange ace-icon fa fa-location-arrow bigger-130"></i>
<span class="bigger-110">Sent</span>
</a>
</li>
</ul>
<div class="tab-content no-border no-padding">
<div id="inbox" class="tab-pane in active">
<div class="message-container">
<div class="message-navbar clearfix">
<div class="message-bar">
<div class="message-infobar" id="id-message-infobar">
<span class="blue bigger-150">Mesaj Kutusu</span>
</div>
</div>
</div>
<div class="message-list-container">
<div class="message-list">
<!--<div class="message-item message-unread"> okunmamış-->
#foreach (var item in client.OrderByDescending(p => p.Date))
{
<div class="message-item">
<label class="inline">
<span class="lbl"></span>
</label>
<!--Show/Hidden Click-->
<span onclick="Goster('detay#(item.MessageId)')" class="sender" title="#item.From">#item.From </span>
<span class="time">#mvcHelper.saatAyarla(item.Date)</span>
#if (item.Attachments.Any())
{
<span class="attachment">
<i class="ace-icon fa fa-paperclip"></i>
</span>
}
<span class="summary">
<span onclick="Goster('detay#(item.MessageId)')" class="text">
#item.Subject
</span>
</span>
</div>
<!--Show / Hidden to be part-->
<div id="detay#(item.MessageId)" style="display: none">
<div class="message-container">
<div id="id-message-list-navbar" class="message-navbar clearfix hide">
<div>
<div class="messagebar-item-right">
<div class="inline position-relative">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Sort
<i class="ace-icon fa fa-caret-down bigger-125"></i>
</a>
<ul class="dropdown-menu dropdown-lighter dropdown-menu-right dropdown-100">
<li>
<a href="#">
<i class="ace-icon fa fa-check green"></i>
Date
</a>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-check invisible"></i>
From
</a>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-check invisible"></i>
Subject
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="id-message-item-navbar" class="message-navbar clearfix">
<div class="message-bar">
</div>
<div>
<div class="messagebar-item-left">
<a href="#" class="btn-back-message-list">
<i class="ace-icon fa fa-arrow-left blue bigger-110 middle"></i>
<b onclick="Gizle('detay#(item.MessageId)')" class="bigger-110 middle">Geri</b>
</a>
</div>
<div class="messagebar-item-right">
<i class="ace-icon fa fa-clock-o bigger-110 orange"></i>
<span class="grey">#mvcHelper.saatAyarla(item.Date)</span>
</div>
</div>
</div>
<div id="id-message-new-navbar" class="hide message-navbar clearfix">
<div>
<div class="messagebar-item-left">
<a onclick="Gizle()" href="#" class="btn-back-message-list">
<i class="ace-icon fa fa-arrow-left bigger-110 middle blue"></i>
<b onclick="Gizle" class="middle bigger-110">Geri</b>
</a>
</div>
</div>
</div>
<div class="message-list-container">
<div class="message-list hide" id="message-list"></div>
<div class="message-content" id="id-message-content">
<div class="message-header clearfix">
<div class="pull-left">
<span class="blue bigger-125"> #item.Subject </span>
<div class="space-4"></div>
<i class="ace-icon fa fa-star orange2"></i>
<img class="middle" alt="John's Avatar" src="/Areas/admin/Content/images/avatars/avatar.png" width="32">
#item.From
<i class="ace-icon fa fa-clock-o bigger-110 orange middle"></i>
<span class="time grey">#mvcHelper.saatGoster(item.Date)</span>
</div>
</div>
<div class="hr hr-double"></div>
<div style="position: relative;" class="message-body ace-scroll">
<div style="display: block; height: 150px;" class="scroll-track scroll-visible scroll-active">
<div style="height: 127px; top: 0px;" class="scroll-bar"></div>
</div>
<div style="max-height: 150px;" class="scroll-content">
<p>
#item.GetTextBody(TextFormat.Plain)
</p>
</div>
</div>
<div class="hr hr-double"></div>
#if (item.Attachments.Any())
{
<div class="message-attachment clearfix">
<div class="attachment-title">
<span class="blue bolder bigger-110">Ekler</span>
<span class="grey">#item.Attachments.Count()</span>
<div class="inline position-relative">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<i class="ace-icon fa fa-caret-down bigger-125 middle"></i>
</a>
<ul class="dropdown-menu dropdown-lighter">
<li>
Download all as zip
</li>
<li>
Display in slideshow
</li>
</ul>
</div>
</div>
<ul class="attachment-list pull-left list-unstyled">
#foreach (var attachment in item.Attachments)
{
<li>
<a href="#" class="attached-file">
<i class="ace-icon fa fa-file-o bigger-110"></i>
<span class="attached-name">#mvcHelper.getAttachmentName(attachment.ToString())</span>
</a>
<span class="action-buttons">
<a href="#">
<i class="ace-icon fa fa-download bigger-125 blue"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-trash-o bigger-125 red"></i>
</a>
</span>
</li>
}
</ul>
</div>
}
</div>
</div>
</div>
</div>
}
<!--ForEach End-->
</div>
</div>
<div class="message-footer clearfix">
<div class="pull-left"> Total</div>
<div class="pull-right">
<div class="inline middle"> page 1 of 16 </div>
<ul class="pagination middle">
<li class="disabled">
<span>
<i class="ace-icon fa fa-step-backward middle"></i>
</span>
</li>
<li class="disabled">
<span>
<i class="ace-icon fa fa-caret-left bigger-140 middle"></i>
</span>
</li>
<li>
<span>
<input value="1" maxlength="3" type="text">
</span>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-caret-right bigger-140 middle"></i>
</a>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-step-forward middle"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="hide message-footer message-footer-style2 clearfix">
<div class="pull-left"> </div>
<div class="pull-right">
<div class="inline middle"> </div>
<ul class="pagination middle">
<li class="disabled">
<span>
<i class="ace-icon fa fa-angle-left bigger-150"></i>
</span>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-angle-right bigger-150"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- /.tab-content -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function Gizle(detayId) {
$('#'+detayId).toggle(false);
}
function Goster(detayId) {
$('#'+detayId).toggle(true); }
</script>
Any idea how to show first row of elements inside collapsed region as a default (so that collapse and expand happen on second row and above).
http://jsfiddle.net/3pmzLdrr/
<div class="row">
<div class="span4 collapse-group" style="text-align:center">
<p class="collapse">
<a class="btn btn-app" href="#">
<i class="fa fa-edit"></i>Edit
</a>
<a class="btn btn-app" href="#">
<i class="fa faa-edit"></i>Edit
</a>
<a class="btn btn-app" href="#">
<i class="fa fa-edit"></i>Edit
</a>
<a class="btn btn-app" href="#">
<i class="fa fa-edit"></i>Edit
</a>
<a class="btn btn-app" href="#">
<i class="fa fa-edit"></i>Edit
</a>
<a class="btn btn-app" href="#">
<i class="fa fa-edit"></i>Edit
</a>
<a class="btn btn-app" href="#">
<i class="fa fa-edit"></i>Edit
</a>
<a class="btn btn-app" href="#">
<i class="fa fa-edit"></i>Edit
</a>
</p>
<p style="text-align:center"><a class="btn" href="#">Display All</a></p>
</div>
</div>
$('.row .btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.collapse-group').find('.collapse');
$collapse.collapse('toggle');
});