Hi I was displaying a confirm navigation when user closed my website like
I used below code to display custom navigation in my website
$(document).ready(function () {
var popit = true;
window.onbeforeunload = function () {
if (popit == true) {
popit = false;
return "Are you sure you want to leave?";
}
}
});
Can anyone suggest me how to customize confirm navigation.
No, it is not possible to style these as they are Browser generated UI. If you want to be able to style a confirmation box or an alert then you will need to use the <dialog> element or some other method - note you will not be able to stop the browser from unloading like you can with and alert or confirm
Related
I'm trying to add a custom button into the Elementor text widget toolbar next to other buttons like Bold, Italic, Underline etc. It seems that the ability to customize the instance using PHP may be disabled but that it is possible to do so using JavaScript instead.
I can get back the view by using the following code but I'm unable to get back the editor instance.
elementor.hooks.addAction( 'panel/open_editor/widget/text-editor', function( panel, model, view ) {}
I've tried the following suggestions but none seem to return anything after that.
// get active instances of the editor
let editor = tinymce.activeEditor;
var editor = elementor.editors.get(0).getEditModel().get('editor');
var activeEditor = view.getOption('editor');
The rest of the suggested code after getting the editor instance is as follows but I don't get this far.
// add a button to the editor buttons
editor.addButton('tooltip', {
text: 'tooltip',
icon: false,
onclick: (editor) => {
tooltipCallback(editor);
}
});
// the button now becomes
let button=editor.buttons['tooltip'];
// find the buttongroup in the toolbar found in the panel of the theme
let bg=editor.theme.panel.find('toolbar buttongroup')[0];
// without this, the buttons look weird after that
bg._lastRepaintRect=bg._layoutRect;
// append the button to the group
bg.append(button);
Tag manager code has been implemented within an iframe on a webpage. It has not been added to the webpage that contains the iframe.
Ive used tag manager to then implement a floodlight tag, and looking at the stats it seems to be double firing.
Do you know why this might be and how to fix it?
You have to create a blocker to avoid send data when you load this on an iframe, you can use this variable (Custom Javascript)
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
How to identify if a webpage is being loaded inside an iframe or directly into the browser window?
And create a blocker when this var is true
anyone using framework7 to create mobile website? I found it was great and tried to learn it by myself, now I meet this problem, after I create my App, I want to do something on the starter page initialization, here, my starter page is index.html, and I set data-page="index", now I write this below:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// in my browser console, no "index page" logged
if (page.name === 'index') {
console.log("index page");
});
// but I changed to any other page other than index, it works
// my browser logged "another page"
if(page.name === 'login') {
console.log('another page');
}
});
Anyone can help? Thank you so much.
I have also encountered with the same problem before.
PageInit event doesn't work for initial page, only for pages that you navigate to, it will only work for index page if you navigate to some other page and then go back to index page.
So I see two options here:
Just not use pageInit event for index page - make its initialization just once (just make sure you put this javascript after all its html is ready, or e.g. use jquery's on document ready event)
Leave index page empty initially and load it dynamically via Framework7's mainView.loadContent method, then pageInit event would work for it (that was a good option for me as I had different index page each time, and I already loaded all other pages dynamically from underscore templates)
I am facing same issue and tried all solutions in various forums.. nothing actually worked. But after lot of RnD i stumbled upon following solution ...
var $$ = Dom7;
$$(document).on('page:init', function (e) {
if(e.detail.page.name === "index"){
//do whatever.. remember "page" is now e.detail.page..
$$(e.detail.page.container).find('#latest').html("my html here..");
}
});
var me = new Framework7({material: true});
var mainview = me.addView('.view-main', {});
.... and whatever else JS here..
this works perfectly..
surprisingly you can use "me" before initializing it..
for using for first page u better use document ready event. and for reloading page event you better use Reinit event.
if jquery has used.
$(document).on('ready', function (e) {
// ... mainView.activePage.name = "index"
});
$(document).on('pageReinit', function (e) {
//... this event occur on reloading anypage.
});
The Portlets in Plone are quite handy but I'd like to be able to provide some method to users to be able to temporarily hide/show the portlets column. That is, by clicking a button, the portlets column should collapse and you see the content page in full width. Then clicking again and the portlets panel on the left expands and the main content page width shrinks to accommodate.
I've observed the HTML ID of the portlets column is "portal-column-one" and I tried adding a button to the page that runs javascript to set the visibility property of that element to "hidden" but this seemed to have no effect. I was able to go into Firebug and add style="visibility:hidden;" to the "portal-column-one" element and it had the effect of making the region invisible w/o resizing the page.
I am using Plone 4.1. I have the site configured with navigation portlet on all pages except the main page which has Navigation, Review List and Recent Changes.
So it seems it must be possible to embed some javascript in the page (I was thinking of adding this to the plone.logo page which I've already customized). But I guess its more complicated than the few stabs I've made at it.
Thanks in advance for any advice.
Solution (Thanks to input from Ulrich Schwarz and hvelarde):
The solution I arrived at uses JavaScript to set CSS attributes to show/hide the Portlets Column (Left side) and expand the content column to fill the space the porlets column filled.
I started by customizing the Plone header template to add a link for the user to toggle the view of the Porlets column. I also put the necessary javascript functions in this header.
To customize the header, go to the following page (need to be logged in as Admin of your Plone site):
http://SERVER/SITE/portal_view_customizations/zope.interface.interface-plone.logo
Where:
SERVER is the address and port of your site (e.g. localhost:8080)
SITE is the short name of your Plone Site
To create this page:
Go to Site Setup (as Admin)
Go to Zope Management Interface
Click on "portal_view_customizations"
Click on "plone.logo" (or at least this is where I choose to put the button so it would be located just above the navigation Portlet)
Add the following to the page:
<script>
function getById(id) {
return document.getElementById(id);
}
function TogglePortletsPanel() {
var dispVal = getById('portal-column-one').style.display
if( dispVal == "none") { // Normal display
SetPortletsPanelState("inline");
} else { // Full Screen Content
SetPortletsPanelState("none");
}
}
function SetPortletsPanelState(dispVal) {
var nav = getById('portal-column-one');
var content = getById('portal-column-content');
if( dispVal == "none") { // Normal display
nav.style.display='none';
content.className='cell width-full position-0';
// Set cookie to updated value
setCookie("portletDisplayState","none",365);
} else { // Full Screen Content
nav.style.display='inline';
content.className='cell width-3:4 position-1:4';
// Set cookie to updated value
setCookie("portletDisplayState","inline",365);
}
}
function InitializePortletsPanelState() {
var portletDisplayState=getCookie("portletDisplayState");
//alert("portletDisplayState="+portletDisplayState)
if (portletDisplayState!=null) SetPortletsPanelState(portletDisplayState);
}
function setCookie(c_name,value,exdays) {
//alert(c_name+"="+value);
// cookie format: document.cookie = 'name=value; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var exp= ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + escape(value) + exp + "; path=/";
}
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++) {
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name) return unescape(y);
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {oldonload(); }
func();
}
}
}
addLoadEvent(InitializePortletsPanelState);
</script>
<a style="font-size:50%;" href="javascript:TogglePortletsPanel();">Toggle Portlets Panel</a>
6. Save the page
Notes:
I got the names of the plone div elements using Firebug.
I also used Firebug to experiment with different settings to speed up prototyping. For example, editing the HTML inline to verify settings do as expected.
There is a slight but of delay until the Left Portlet panel is hidden. This is only obvious on Safari for me (which is probably due to how fast it is) but not on Firefox or IE.
Maybe it's just a matter of setting the right property: you want display:none, not visibility:hidden.
But even then, the content area will probably not reflow automatically, you'll need to (dynamically) change the class on it as well.
Specifically, you'll need to put classes width-full and position-0 on portal-column-content, instead of width-1:2 and position-1:4.
This must be achieved client side by javascript (jquery).
You must first read documentation about the css grid framework used by plone: deco.gs. The website is down so, git clone this repo: https://github.com/limi/deco.gs and open pages in a webbrowser
Note: you just have to change css classes on the containers.
Try adi.fullscreen, it respects Plone's css-structure as Ulrich Schwarz thoughtfully mentioned.
I've coded a script for this web page.
That allows me to use the thumbnails on the right hand side in order to switch the 'main video'.
All appears to work fine, however if you play one video and then switch to another, and then switch BACK to the video that was originally playing, then the volume is muted when you continue watching it.
I have noticed that you can get around it by clicking the volume tool inside the player, but the average user most likely won't figure this out.
I've tried using the setVolume() method on something like:
$('#media video')
But FF tells me that the method doesn't exist. Could this be because I'm just trying it from within one of my other js files whereas the media player script itself is setup with Wordpress? I'm using the WP plugin you see.
Has anyone else had this issue?
Here is my .js that switches the videos if that helps:
$(document).ready(function() {
// swap media
$('#media-feed .thumb a').click(function() {
var mediaId = $(this).prev('input').val();
$('#media .content').each(function() {
if($(this).css('display') == 'block') {
$(this).fadeOut(350);
}
});
$('#media-' + mediaId).delay(500).fadeIn(350);
return false;
});
// swap sidebar detail
$('#media-feed .thumb a').mouseenter(function() {
var mediaId = $(this).prev('input').val();
$('#media-feed .detail').each(function() {
if($(this).css('display') == 'block') {
$(this).slideUp(125, function() {
var currentDetail = $('#media-detail-' + mediaId);
currentDetail.slideDown(125, function() {
currentDetail.css('display', 'block');
});
});
}
});
return false;
});
});
Also another problem I'm having is in Internet Explorer (all versions). See above, where I said about switching from one video to another, in other browsers the videos automatically pause when you click on another thumbnail. However in IE the videos continue to play. So basically, you'd have to pause the video and THEN change main video by clicking one of the thumbnails. Again, not very user friendly.
Does anyone know of a way I can get it to function like in other browsers? I can see that even IE doesn't have this problem on this page where the Fancybox plugin is used.
So that makes me think there must be a way to solve it in IE on the home page.
If anyone has any advice on this too that would be great!
Thanks.