prevent mmenu close on click on page - mmenu

I have one mmenu instance. The default behaviour is that it closes when I click outside of the menu. How can I prevent this behaviour? To force the menu closure I want to use only a predisposed button (already working)
------------------ ADD Some details --------
My mmenu instance is as below
<nav id="listPanel">
<ul>
<li id="closeButtonLi"><span id="panelButtonClose" class="glyphicon glyphicon-chevron-right"> Chiudi</span></li>
<!--<li style="padding:10px"><input type="text" class="form-control" placeholder="Aggiungi atleta"></li>-->
<li id="athSelectorLi" style="padding:10px">
<input id="athSelector" style="width:70%;"/>
<img id="plusButton" style="width:35px;height:auto;cursor:pointer;margin-left:12px;" src="../../../docsUI/images/common/add.png"/>
<img id="removeButton" style="width:35px;height:auto;cursor:pointer;margin-left:7px;" src="../../../docsUI/images/common/remove.png"/>
</li>
<li >
<table id="athTable" class="hover compact" width="95%" cellspacing="0">
<thead>
<tr>
<th>markerColor</th>
<th>bib</th>
<th>name</th>
<th>avgSpeed</th>
<th>locate</th>
<th>remove</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</li>
</ul>
</nav>
$(document).ready(function() {
$("#listPanel").mmenu({
"classes": "mm-light",
"offCanvas": {
"zposition": "front",
"position": "right"
}
}
});
$("#panelButton").click(function() {
$("#listPanel").trigger("open.mm");
});
$("#panelButtonClose").click(function() {
$("#listPanel").trigger("close.mm");
});
});
What I need is to close the #listPanel menu only using the close button
<li id="closeButtonLi"><span id="panelButtonClose" class="glyphicon glyphicon-chevron-right"> Chiudi</span></li>
With current implementation, the button works as expected, but the menu closes also when I click outside the menu in the remaining part of the page. I want to avoid exactly it (close the menu clicking on the page as is the default behaviour as described in http://mmenu.frebsite.nl/tutorial/open-and-close-the-menu.html)
I searched both on Stack Overflow current answers and on website documentation, but I did not find any solution. The only API present is the onClick but it is not relevant for my needs.

$('#mm-blocker').unbind('mousedown')

This will remove div which will prevent close mmenu
$('#mm-blocker').remove();
better than unbind mousedown

Related

alpine js, x-model binds to wrong value when switching tabs

running into an issue with alpine js.
First of all I have a master component that allows the user to switch between two tabs
#props(['pages', 'blogs'])
<div x-data="init()" class="overview row mb30">
<div class="pageContent__content__languages disFlex mb20 bBottom">
<span
#click.prevent='tab = "pages"'
:class='{ "active": tab === "pages" }'
class="pageContent__content__languages__item disFlex aiCenter pt10 pb10 pr10 pl10 mr10 pointer">
Pagina's
</span>
<span
#click.prevent='tab = "blogs"'
:class='{ "active": tab === "blogs" }'
class="pageContent__content__languages__item disFlex aiCenter pt10 pb10 pr10 pl10 bRadius mr10 pointer">
Blogs
</span>
</div>
<div x-show="tab === 'pages'">
<x-form.edit.navigation.pages :pages="$pages" />
</div>
<div x-show="tab === 'blogs'">
<x-form.edit.navigation.blogs :blogs="$blogs" />
</div>
<button type="button" wire:click="navigationAddToMenu" class="btn blue w100 mt10">
Toevoegen aan menu
</button>
</div>
#push('scripts')
#once
<script type='text/javascript'>
function init() {
return {
selected: #entangle('selected'),
tab: 'pages',
};
}
</script>
#endonce
#endpush
These tabs either display pages or blogs depending on which tab is clicked.
Inside of these blade components is just a foreach loop to display the items,
#props(['pages'])
<div style="grid-area: unset" class="pageContent__settings bRadius--lrg disFlex fdCol">
<table class="overview__wrapper">
<tbody class="bRadius--lrg">
#foreach($pages as $page)
<tr class="overview__row bBottom">
<td class="overview__row__checkbox">
<input x-model='selected' value='{{ $page->id }}' type="checkbox"
id="col-row-{{$loop->index}}">
<label for="col-row-{{$loop->index}}"></label>
</td>
<td class="overview__row__name lh1">
{{ $page->page_name }}
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
The blog blade component is nearly identical.
Now the user is able to check a checkbox to add items to their menu, this is binded using the #entangle directive and the x-model on the checkbox.
So far when the user is on the default tab pages and they select a page the correct ID is retrieved from the checkbox, BUT when the user switches tab to the blogs display, and clicks a checkbox the value is retrieved from the pages tab.
e.g.
1 page and 1 blog, page has id of 1 blog has id of 2. User is on the pages tab and clicks on the checkbox the correct value of 1 is now added to the selected array, user switches tabs to blogs and clicks the checkbox the expected behavior would be to have the id of 2 added to the selected array, but it still adds 1.
Inspecting the HTML and the loops do add unique ids to each of their items.
Fixed it, need to make my ids on the input more unique, instead of doing
<input x-model='selected' value='{{ $blog->id }}' type="checkbox"
id="col-row-{{$loop->index}}">
<label for="col-row-{{$loop->index}}"></label>
I added a extra identifier
<input x-model='selected' value='{{ $blog->id }}' type="checkbox"
id="col-row-blogs-{{$loop->index}}">
<label for="col-row-blogs-{{$loop->index}}"></label>
and pages for the pages.
This fixed the issue

Click on deeply nested div in Watir

I am trying to click on checkbox (which represents as ) in Firefox using Watir. I have code left to me from the previous tester, and this code works in Chrome, but not Firefox.
Here is what I have.
Here is the code that leads to this div:
<div class="x-grid3-body" style="width:515px;" id="ext-gen201">
<div class="x-grid3-row x-grid3-row-first" style="width:515px;">
<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:515px;">
<tbody>
<tr>
<td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 158px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-0 x-unselectable" unselectable="on">Organisation</div>
</td>
<td class="x-grid3-col x-grid3-cell x-grid3-td-1 " style="width: 298px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-1 x-unselectable" unselectable="on">Catch Software</div>
</td>
<td class="x-grid3-col x-grid3-cell x-grid3-td-scopeCheckColumn x-grid3-cell-last x-grid3-check-col-td" style="width: 53px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-scopeCheckColumn x-unselectable" unselectable="on">
<div class="x-grid3-check-col x-grid3-cc-scopeCheckColumn"> </div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
What I need essentially is to click on this div
<div class="x-grid3-check-col x-grid3-cc-scopeCheckColumn"> </div>
I can't attach screenshots (rating is low), but this div is the checkbox that I need to click.
This piece of code works in Chrome:
#browser.div(:class => 'x-box-inner', :index => 1).table(:class => 'x-grid3-row-table').td(:text => 'Organisation').parent.td(:index => 2)
But in Firefox I can see that Watir is just click on the whole parent div (can see selection appear in browser), not on the checkbox div.
Thank you.
First off, there is only one element in the html you've showed that has the class 'x-grid3-cc-scopeCheckColumn', so is there a reason you can't do:
#browser.td(class: 'x-grid3-cc-scopeCheckColumn').click
If not, you can simplify your element location drastically to get the td you want, since there is only one td that has the text 'Organisation', and .parent would only get the td above it, but it looks like you want the tr tag above that, so perhaps you want:
#browser.td(text: 'Organisation').parent.parent.td(index: 2)
Using an XPath worked for me in Firefox:
#browser.div(:xpath, "//*[#id='ext-gen201']/div/table/tbody/tr/td[3]/div/div").click
I was able to verify it with .flash in place of .click since your div just contains a space and there was nothing to otherwise see.

Bootstrap menu collapse in ajax site. How can i close menu on every click?

my website uses Ajax and i want to close the Bootstrap's collapsed menu every time a user click click on every menu item, like this code. But this code doesn't work!! Damn!
$('.menu-item').click(function() {
$('.collapse').collapse('hide');
});
How can I fix it?
(The code of menu is a simply bootstrap 3.0.0):
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
And the code of menu:
<div class="col-md-6 downmy">
<div class="navbar-collapse in" style="height: auto;">
<div class="menuTop"><ul id="menu-primary" class="nav nav-pills"><li id="menu-item-605" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-605">Home</li>
<li id="menu-item-314" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-314">My Posts</li>
<li id="menu-item-315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-315">Guestbook</li>
</ul>
</div>
</div>
</div>
When an element with class '.collapse' collapse or become visible the '.collapse' class will be replace by the .in class. So you will have to apply your hide on the .in class too.
$('.menu-item').click(function() {
$('.in').collapse('hide');
});
Your menu items contain an anchor, when click this a new page will open... so i don't understand your question. To prevent this add an event.preventDefault (http://api.jquery.com/event.preventDefault/) to your code:
$('.menu-item').click(function(event) {
event.preventDefault();
$('.in').collapse('hide');
});
The following query worked fine for me :
//The ":not('.dropdown-toggle')" is for the drop down menu (like a language menu) because
// I didn't want my navigation to close when clicking sub menu
$(".nav li a:not('.dropdown-toggle')").on('click',function(){
$('.navbar-collapse.in').collapse('hide');
});
You can add it to your page or in the $(document).ready(function(){/*...*/}); method

Binding text box to telerik upload control MVC3

I want my textbox to display the name of file selected by telerik upload control. Please find the code snippet below.
<td>
#Html.TextBox(txtBox, null, new { style = string.Format("width:200px") })
</td>
<td style="padding-top: 1%; padding-left: 8%">
#(Html.Telerik().Upload().Name(BrowseButton)
//.HtmlAttributes(new { #class = "myCustomClass" }).Multiple(false))
Currently the textbox is displaying null.
The Telerik control should allow you to show the file name. Your extra textbox seems redundant.
Read the telerik documentation and specifically the html and css section. It says the following:
During and after uploading, a file list is displayed, which shows the progress and status of each uploaded file. Its HTML output is the following:
<ul class="t-upload-files t-reset">
<li class="t-file">
<span class="t-icon t-success">uploaded</span>
<span class="t-filename">some-uploaded-file.jpg</span>
<button class="t-button t-button-icontext t-upload-action" type="button">
<span class="t-icon t-delete"></span>Remove</button>
</li>
<li class="t-file">
<span class="t-icon t-fail">failed</span>
<span class="t-filename">some-failed-file.jpg
<span class="t-progress">
<span style="width: 75%;" class="t-progress-status">
</span></span>
</span>
<button class="t-button t-button-icontext t-upload-action" type="button">
<span class="t-icon t-retry"></span>Retry</button>
</li>
</ul>
If you want to update a textbox of your own, simply use their client api by adding this when creating telerik control
#(Html.Telerik().Upload().Name(BrowseButton)
.ClientEvents(events => events.OnSelect("onSelect"))
and in your javascript
function onSelect(e) {
// Array with information about the uploaded files
$('#yourTextboxId').val(e.files[0].name);
}
Again all the details are in the documentation.

jQuery selectable list with nested table not sized properly in jQuery tab

I'm implementing a jQuery tab in my MVC3 application, but one of the tabs is not sized properly. That is, some of the content is inside the tab, but the following strange formatting on my part is only partially inside the tab:
<div id="tabs">
<ul>
<li>Edit Schedule</li>
...
</ul>
<div id="tabs-1">
...
<div id = "scheduleData">
#Html.Partial("_partialView", ViewData["data"])
</div>
</div>
...
</div>
My partial view renders many tables, one with just a head, and the rest nested inside a jQuery selectable list:
<table>
<thead>
<tr>
<td>ID</td>
...
</tr>
</thead>
</table>
<ol id="selectable>
#foreach (var obj in Model)
{
<li class="ui-widget-content">
<table>
<tr>
<td>#obj.ID</td>
...
</tr>
</table>
</li>
}
</ol>
I'm not sure whether the tab sizing problem is happening because of the partial view, or my very strange formatting, or both.
It is worth noting that only the first table is inside the tab, and any other tables are consistently not in the tab, no matter how large or small the partial view is.
This is obviously a sloppy solution, and I was wondering if there is a better way to render a table row inside a selectable list so the jQuery tab is sized correctly, such as having all the rows in the first table? (which won't work because you can't nest a selectable list inside a table, to my knowledge) I appreciate your input.
The possibility exists to make a table a selectable item, instead of each row, but due to formatting issues I adopted the following solution instead:
$(document).ready(function () {
$("#scheduleTable tr").click(function () {
var href = $(this).find("a").attr("href");
if (href) {
$("#editDialog").dialog({ modal: true });
}
});
});
The markup then has an edit link in each row, which the Javascript watches, then creates a jQuery dialog box.
<table>
<thead>
<th> </th>
...
</thead>
<tbody>
#foreach (var obj in Model)
{
<tr>
<td>Edit</td>
...
</tr>
}
</tbody>
</table>
<div id="editDialog" title="Edit Entry" style="display:none">
...
</div>

Resources