mmenu open in desktop, closed in mobile, just like demo site - panel

I would like the mmenu panel to be automatically opened in desktop mode, but only the menu icon to show in phone mode just like in the demo site http://mmenu.frebsite.nl/
I know I am not too bright but I can't find the answer in the documentation or in stack overflow. Please help
This is what I am doing.
$(document).ready(function() {
var mq = window.matchMedia( "(min-width: 800px)" );
if (mq.matches) {
$("#menu").mmenu({
offCanvas: false
});
} else {
// window width is less than 800px
}
});
But it feels a little clumsy and it doesn't resize dynamically, just with a refresh.

Related

How to disable scrollify.js on mobile and get back normal scrolling?

I am creating a website on Webflow, and I have no experience in codes. I added a basic setup of Scrollify, but I want it to work only on pc. On mobile, I want a basic scroll.
<script>
$(function() {
$.scrollify({
section : ".scrollsection",
});
});
</script>
It's working perfectly on pc, but on the phone, it brakes the website. I want to disable it on mobile and get the normal touch scroll back.
Tried to brake Scrollify with no existing section name:
<script>
$(function() {
var windowWidth = $(window).width();
if(windowWidth > 768){
$.scrollify({ section:".scrollsection"}); }
else{
$.scrollify({ section:".not-existing-section" }); } });
</script>
It stops whole scrolling on mobile. (But if I zoom in on the website on my phone, I can scroll normally.)
Is there a way to stop scrollify.js on mobile without blocking the whole scroll?
I saw the topic:
How to disable scrollify.js on mobile
but there is no answer.

electron app always placed at the top with full-width and other windows should be placed under it

I am facing an issue.
I need my electron app always placed at the top with full-width and other windows should be placed under it.
How can I do this?
anyone can help me to solve this issue?
You should use mainWindow.maximize() to display full width screen.
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1366,
height: 783,
alwaysOnTop:true //display show on top
})
// and load the index.html of the app.
mainWindow.loadFile('index.html');
// Emitted when the window is closed.
mainWindow.on('closed', function () {
mainWindow = null
})
mainWindow.maximize() //call like this way
}
You can get more reference from here

How to slide up/down on page navigation in Ionic 3?

When I navigate from page A to page B, I want to slide in the page B from the bottom upwards.
How can I do this in Ionic 3?
I have now
this.navCtrl.push(PageB,
{session: this.session},
{animate: true,
animation: 'transition',
duration: 500,
direction: 'forward'}
);
I tried to change the 'forward' in 'up' but that does not do anything.
Currently I am testing in Chrome browser.
Thanks
I think the navController is the wrong choice for this.
Mostly, the use case for sliding a page from bottom to top is when you want to show modal page. This can be done with the ModalController:
constructor(private modalCtrl: ModalController) {
}
showModal(): void {
let modal = this.modalCtrl.create(PageB, options);
modal.present();
}

Firefox crashes on element.remove()

When tinyMCE is used with Firefox and the user drags an image into the editor,image.remove (); window FF converts the image to a base64 string and embeds the image as text--not optimal DB strategy. This question addresses the issue. I've added a simple handler to the editor that handles it simply:
if (tinymce.isGecko) {
editor.getDoc().addEventListener('DOMNodeInserted', function(event) {
var image = event.target;
if ((image.nodeName === 'IMG') && (image.src.substring(0, 30).match(/.*?data.*?;base64/g))) {
image.remove ();
alert('Using drag-and-drop for images with Firefox has been disabled for technical reasons. Please use the "Add Media" button.')
}
},
false);
}
But image.remove (); crashes Firefox every time. Can anyone verify this, and is there a workaround?

Firefox ToolBar Button When Click Changes DOM?

New to firefox development and trying my best to figure this out.
Say I want to call a function in tap_browser.js that will modify the DOM when the user clicks on the toolbar widget, how would I do this?
This is the code I have so far
require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "tap-icon",
label: "Tap",
contentURL: data.url("favicon.png"),
contentScriptFile: [data.url("tap_browser.js")]
});
I'm currently using a library to create the toolbar widget here: https://github.com/Rob--W/toolbarwidget-jplib
I don't know too much SDK but I helped someone with something that does. Check this out:
var my_wid = widgets.Widget({
id: "my-widget",
label: "CLIIIICK",
content: "CLICK ME",
width: 100,
onClick: function()
{
require('sdk/window/utils').getMostRecentBrowserWindow().gBrowser.contentDocument.documentElement.innerHTML = 'hi';
}
});
what this does is it shows a panel with 0 width and height, you can put stuff in there, and when it shows it executes the onShow function to change the html of the current document. its not recommended to use innerHTML, addons arent accepted. Im just showing you a quick and dirty copy paste example. One that is different from the sdk doc page "Modifying the Page Hosted by a Tab"

Resources