Menu with mouseenter, mouseleave and click to stay open an close - menu

I have this menu who is working with mouseenter/mouseleave and when clicked the item will stay open, if I click in the body, the item it will be closed and when a click in another item it will be opened. The problem is: i want to close the item open when i click him, but with this code i can't do it. I just try toggle and many others things but i can't achieve what i wanted.
function handler() {
$('#menu > li').on('mouseenter',function(){
//mouseenter handler
});
$('#menu > li').on('mouseleave',function(){
//mouseleave handler
});}
$('#nav-outer').on('mouseenter mouseleave', handler);
$('#menu > li').on('click', function( e ) {
e.stopPropagation();
$('#menu > li').off('mouseenter mouseleave');
$('#nav-outer').off('mouseenter mouseleave', handler);
$('#overlay').show();
});
$('body').click(function(){
$('#overlay').hide();
$('#nav-outer').bind('mouseenter mouseleave', handler);
$('#menu > li').find //etc. like mouseleave handler
$('#menu > li').bind('mouseenter',function(){ //etc. like mouseenter handler
});
});
});

Related

AddEventListener to SharePoint Modal window, so that parent window can execute a function, declared inside the Modal

The following code, included in $(document).ready of the modal window, does not work. Apparently the iframe of the SharePoint modal window has not yet been loaded into DOM, when the addEventListener fires out.
What would be the correct approach to handle this?
window.addEventListener("message", function(event) {
if(event.data == "openpi");{
alert(1)
}
});
Thank you!
There is dialogReturnValueCallback option in SP.UI.ModalDialog.showModalDialog, you could get the value from dialog and then used in parent window.
<script type="text/javascript">
//******** Dialog with Data from Pop Up Starts Here ***********/
function openDialogAndReceiveData(tUrl, tTitle) {
var options = {
url: tUrl,
title: tTitle,
dialogReturnValueCallback: onPopUpCloseCallBackWithData
};
SP.UI.ModalDialog.showModalDialog(options);
}
function onPopUpCloseCallBackWithData(result, returnValue) {
if(result== SP.UI.DialogResult.OK)
{
SP.UI.Status.removeAllStatus(true);
var sId = SP.UI.Status.addStatus("Data successfully populated to text boxes from Pop-up");
SP.UI.Status.setStatusPriColor(sId, 'green');
document.getElementById('<%= txtData1.ClientID %>').value = returnValue[0];
document.getElementById('<%= txtData2.ClientID %>').value = returnValue[1];
}else if(result== SP.UI.DialogResult.cancel)
{
SP.UI.Status.removeAllStatus(true);
var sId = SP.UI.Status.addStatus("You have cancelled the Operation !!!");
SP.UI.Status.setStatusPriColor(sId, 'yellow');
}
}
//******** Dialog with Data from Pop Up Ends Here ***********/
</script>
Check here for details

How to use nightmare to press arrow key?

Is there any way to use nightmare (the nodeJS module) to press an arrow key? Either by sending the key to the specific element or by clicking on the element and sending the keypress to the page as a whole?
My problem is that there is a dropdown menu which, when clicked on, displays some options below it. These options do not appear to be clickable, I have tried click and even the realClick nightmare extension. Neither seem able of selecting any element of the dropdown. While playing around with the page, I found that by using the arrow keys and the enter key, I could select the options without clicking. So is there any way to send the keypress events to electron? Either through nightmare or by accessing electron directly?
It is called auto complete menu and there is no standard way of doing it.
I tried working with Google and came up with a method. I think, it will be tough to make generic solution, as it depends on how auto complete is implemented. Hope this helps!
var Nightmare = require('nightmare');
var nightmare = Nightmare({
show: true,
webPreferences: {}
})
nightmare
.goto('http://www.google.co.in')
.evaluate(function(searchTerm) {
var elem = document.querySelector('#lst-ib');
elem.value = searchTerm;
//Do mousedown to initiate auto complete window
var event = document.createEvent('MouseEvent');
event.initEvent('mousedown', true, true);
elem.dispatchEvent(event);
}, 'Leo')
.then(function() {
//Wait for results to appear
nightmare.wait(1000)
.evaluate(function() {
//Click the first option of List
var first = document.querySelector('#sbtc > div.gstl_0.sbdd_a > div:nth-child(2) > div.sbdd_b > div > ul > li:nth-child(1)');
first.firstElementChild.click();
}).then(function() {
console.log('All Done');
});
});

Getting this menu to stay open after link click

I have tried several things but cant get this slide menu to stay open. Any thoughts???
$(function() {
$('.items ul').hide();
});
$('.1979').click(function() {
$(this).find('.entries').stop().slideToggle();
});
fiddle: https://jsfiddle.net/johnrsherwood/u6bnra9x/12/

cancel tab closing in p:accordionPanel

I have a p:accordionPanel and inside of each tab of the panel there is some info that the user can manipulate, what i need to do is if the user close the tab show a confirm dialog (before the tab get closed) whit something like "are you sure you wanna close the tab? if you do your changes will be lost". here is what i tried
<p:ajax event="tabClose" onstart="return myFunction()"
listener" {myBean.myMethod}" process="#this" />
function myFunction() {
var answer = confirm("are you sure you wanna close the tab? if you do your changes will be lost");
if(answer){
//some logic
return true;
}else{
//some logic
return false;
}
}
The problem is that if i choose cancel on the confirm dialog the tab get close anyway. Shouldn't the tab closing be canceled by the onStart="return false"? is there a way to achieve what i'm trying to do?
Finally I solved my problem, apparently the onStart="return false" does not prevent the tab from change its statatus but the onTabChange attribute of the p:accordionPanel does, the only problem is that for some reason the onTabchange event of the accordion don't get execute when the tab is been closed just when the tab is been opened so i have to override the acordionPanel unselect function of primefaces to call the onTabChange event
PrimeFaces.widget.AccordionPanel.prototype.unselect = (function(index) {
var cached_function = PrimeFaces.widget.AccordionPanel.prototype.unselect;
return function() {
var panel = this.panels.eq(index);
if(this.cfg.onTabChange) {
var result = this.cfg.onTabChange.call(this, panel);
if(result === false)
return false;
}
var result = cached_function.apply(this, arguments);
return result;
};
})();
then i only had to placed myFunction(); on the onTabChange event of the accordiong panel (onTabChange="return myFunction()")and it works.

Chrome page action popup disappears

I need a page action popup icon to appear when a tab has a specific URL in the address bar.
I have this in my background page
chrome.tabs.query({url:"MYURL.COM"} , function(tab)
{
for(i=0;i<tab.length;i++)
{
console.log(tab[i].id);
chrome.pageAction.show(tab[i].id);
}
});
The popup shows whenever I reload the extension but as soon as user refreshes, it goes away and doesn't come back.
The reason is that the background.js page is only loaded once, so you need to add a listener to every time the page tab is updated to check whether the page action should be shown, something like this:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (tab.url.indexOf("MYURL.COM") > -1) {
chrome.pageAction.show(tabId);
}
});
There is no reason to iterate over each tab as you have done.
As Adam has already said, the tabs.onUpdated event is the way to do it.
Anyway, it [seems like I'm not the only one who experienced that the tabs.onUpdated event doesn't always fire when it should - even when waiting for complete status.
So if you're having the same issue, you might want to try my modified version that has proven reliable for me 100%.
chrome.tabs.onUpdated.addListener(function(tabId, change) {
if (change.status == "complete") {
chrome.tabs.query({active: true}, function(tabs) {
var tab = tabs[0];
// Now do stuff with tab .. Eg:
if (tab.url.indexOf("MYURL.COM") > -1) {
chrome.pageAction.show(tab.id); }
else {
chrome.pageAction.hide(tab.id); }
});
}
});
Use chrome.tabs.onUpdated to listen to new tabs and tab reloads of the domain you are interested in.

Resources