Getting this menu to stay open after link click - menu

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/

Related

CKEditor 4 : how to apply via API a style to current text

I am fighting with CKEditor in order that after CKEditor is loaded with a content and without selecting any style from toolbar, the changes (new text) made from an user, are automatically set in bold (no toolbar needed for the user).
I tried executing a command on the "click" event setting the bold style but it does not work very well
myEditor.on("instanceReady", function() {
var editable = myEditor.editable();
editable.attachListener( editable, 'click', function() {
myEditor.commands.bold.exec();
});
});
so I changed inserting element with bold style on click event
myEditor.on("instanceReady", function() {
var editable = myEditor.editable();
editable.attachListener( editable, 'click', function() {
var parent = myEditor.getSelection().getStartElement()
//simplified code without check if span already exist
myEditor.insertHtml('<span class="boldStyle">');
myEditor.insertHtml('</span>');
});
});
This works a bit better but I wonder if this approach is a good idea or how I could do better
Thanks

Menu - Focus onmouse

I have a menu that calls the above events at the main div.
mouseover
function() {
$('.box-content-category').addClass('active');
$(".box-content-category").show(1);
}
mouseout
function() {
$('.box-content-category').addClass('active');
$(".box-content-category").hide(1);
}
The problem. When the user sets the mouse (mouseover) to below div to explore the menu the menu dissapears.
How can i set the menu to stay open on mouseover and close when the mouseout at the above divs?
Thank you
Wish you the best

swipe and click to next slide

With flickity, is it possible to have two behaviours at the same time on the same slide?
swipe (default and better four touch screen)
click to next slide (better for desktop)
I tried something like:
var carouselCells = Array.from(document.querySelectorAll('.carousel-cell'))
carouselCells.forEach(function(e) {
e.addEventListener('click', function() {
flckty.next();
})
})
Here is the fiddle: https://jsfiddle.net/francoisromain/fum7Lrac/
The click works fine but the problem is the swipe moves forwards two slides.
use Flickity's staticClick event over standard click, as click is triggered during drag.
flkty.on( 'staticClick', function() {
flkty.next()
})
from: https://github.com/metafizzy/flickity/issues/486#issuecomment-258686221

JQuery Modal Dialog Form Submission

I have a JQuery Modal Form and when i add the submit event, it cannot display as dialog but rather than embedded into browser window. If I uncomment the click event below, it will embedded into browser window rather than show as dialog.
$(document).ready(function(){
//$("#moveTicketBtn").click() {
// $("#moveUnknownTicket").submit();
//};
$("#moveUnknownTicketDialog").dialog(
{
title: "Move Unknown Ticket",
autoOpen: true,
modal: true,
resizable: true,
stack: true,
width: 500,
height: 350
});
});
Does anyone have any idea why it is like this? Please help. Thanks.
EDIT Question:
I have a form inside this dialog and upon submission(onsubmit, onblur) the javascript is not called. What is the reason?
try
$("#moveTicketBtn").click(function() {
$("#moveUnknownTicket").submit();
});
you have to insert your function within the () of the click event.
more information here: http://api.jquery.com/click/
That should do the trick:
http://jsfiddle.net/uQCKJ/
As you can see the form is submitted, since the alert box is triggered
$("#moveTicketBtn").click(function() {
$("#moveUnknownTicket").submit();
});
I have put submit inside click function though works great.

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