Page automatically go to the top when opening a dynamic jquery dialog box first time - ms-word

I am developing a Task pane word add-in using JavaScript API, I have used below code to create a jQuery dialogbox dynamically using a function:
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">'
+ dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
position: {
my: "center",
at: "center",
of: window
},
buttons: {
OK: function() {
if (typeof(okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function() {
if (typeof(cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}
But when i open it first time to call myConfirm function, the page scroll goes to top and when i scroll down to click on dialog-box it again send the scroll back to top then i need to again scroll down, now i am able to click on dialog-box buttons. it works fine after first.
I need to set dynamically text of box and function on button clicks so i am creating it dynamically. I have also test it on Internet Explorer, it's working fine.
Please advice how i can fix it for word add-in.

You can try below code when you are calling your function :-
onclick="myConfirm();return false;"
Just add "return false;" after your function name as shown above.
Edit 1:-
Or you can return false from your function as well.
Edit 2 :-
$form.show().dialog({
close: function (event) { event.preventDefault(); }
resizable: false,
etc....
});

Related

Open tui imageeditor in a modal

hello i search a solution to load tui image editor in a html modal
i have a form with many image, i want to add a button to edit it, and it will be open a modal with image inside ...
my idea is to add script in page and js event in button ... but i don't known how
some on can help me ?
// Image editor
var imageEditor = new tui.ImageEditor('#tui-image-editor', {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'SampleImage'
},
theme: blackTheme, // or whiteTheme
initMenu: 'filter',
hideHeader: 1,
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
usageStatistics: false
});
window.onresize = function() {
imageEditor.ui.resizeEditor();
}
</script>
Regards

Leaflet Draw preventing click on elements while is active

I have several days fighting this with no luck. I'm using leaflet 1.4.0 along with leaflet.draw 1.0.4. Instead of using the L.control.draw UI, I'm using my own buttons to create polygons and rectangles. It works perfectly on desktop browsers (except IE, of course), but fails on iPads, Android tablets (I've not checked on phones), even if you switch the latest Chrome to emulate a mobile device (using the 'toogle device toolbar' on the dev tools) it fails.
I have created this jsfiddle to illustrate the problem: https://jsfiddle.net/fsv8jegd/2/
Using Chrome with the 'toggle device' off, click on the 'start poly' button. Cursor changes to a cross and a label 'click and drag to draw rectangle'. Click on the 'cancel' button, the cursor goes back to the regular arrow.
Now turn on 'toggle device' on Chrome dev tools and choose 'responsive' or any of the 'iPhone' or 'iPads'. Click on the 'start poly' button. Cursor changes to the cross. Try to click on the 'cancel' button. Nothing happens. It doesn't receive the click event. The only way to cancel this is actually drawing the rectangle.
Any ideas?
Thanks!
html:
<div id="map"> </div>
<button class='buttons' type="button" style="top:0" onclick="startpoly()">START POLY</button>
<button class='buttons' type="button" style="top:20px" onclick="cancelpoly()">CANCEL</button>
css:
#map { height: 200px !important; width: 80%; }
.buttons {position: absolute; left: 0; z-index: 999999}
JS:
polygon_query_options = { shapeOptions: { stroke: true, color: '#6e83f0', weight: 4, opacity: 0.9, fill: true, fillColor: null, fillOpacity: 0.2, clickable: false, dashArray: '10,10' } };
$(document).ready(function() {
map = L.map('map', { preferCanvas: true, zoomControl: true, zoom: 10, maxZoom: 20, center: [29.8, -95.5]});
var drawnItems = new L.FeatureGroup();
drawnItems.addTo(map);
drawnItems.bringToFront();
L.Browser.touch = true;
var baseMapGroup = new L.featureGroup();
basemapLayer = L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', { attribution: 'CartoDB', maxZoom: 20, maxNativeZoom: 20 });
basemapLabelLayer = L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png', { attribution: 'CartoDB', maxZoom: 20, maxNativeZoom: 20 });
basemapLabelLayer.addTo(map);
basemapLabelLayer.bringToBack();
basemapLayer.addTo(map);
basemapLayer.bringToBack();
map.on('draw:created', function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
});
});
function startpoly() {
polygonDrawer = new L.Draw.Rectangle(map, polygon_query_options);
polygonDrawer.enable();
};
function cancelpoly() {
if (polygonDrawer != undefined) { polygonDrawer.disable(); }
};
I found this is a bug on the leaflet.draw library. So I followed the trail, and in the line 1260 of the leaflet.draw 1.0.4 the following code causes the problem:
document.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });
I replaced that line with this code:
var tempMap = document.getElementById("map");
tempMap.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });
Basically instead of preventing the touchstart event on the document, now is applied only to the map object.
Hope this helps anyone out there.

Leaflet sidebar not opening on load

I'm using the leaflet-sidebarv2 plugin to create a sidebar for a cartodb/leaflet map. I'm running into problems that I a.) can't get the options to work – close button, autoPan, etc) and b.) can't use setContent to dynamically set data.
The sidebar functions as expected. The problem is modifying it seems to have no effect. I also get an error "Uncaught TypeError: undefined is not a function" on the setTimeout and setContent lines.
cartodb.createLayer(map, {
user_name: {{user_name}},
type: 'cartodb',
sublayers: [{
sql: 'select * from {{table_name}}',
cartocss: '#layer',
interactivity: 'cartodb_id, name',
auto_bound: true
}]
})
.addTo(map)
.done(function(layer) {
var barData;
barData = layer.createSubLayer({
sql: 'select * from {{table_name}}',
cartocss: '#layer {marker-fill: #bababa; marker-opacity: 0.3; marker-width: 4px; }',
interactivity: 'name, location'
});
//on click
barData.on('featureClick', function(e, pos, pixel, data) {
//log active data
console.log("Name: " + data.name + " # " + data.location);
$('#map').css('cursor', 'pointer');
});
barData.setInteraction(true);
//hover pop-up
var infobox = new cdb.geo.ui.InfoBox({
width: 100,
layer: layer,
template: '<p class="cartodb-infobox">{{name}}</p></br><p>{{location}}</p>',
position: 'top|right' // top, bottom, left and right are available
});
$("body").append(infobox.render().el);
// leaflet-sidebar> closeButton not engaging
var sidebar = L.control.sidebar('sidebar', {closeButton: true});
map.addControl(sidebar);
//content not showing up anywhere
sidebar.setContent('test <b>test</b> test');
// sidebar still collapsed at reload
setTimeout(function () {
sidebar.show();
}, 500);
});
}
window.onload = main;
Any suggestions on what I might be doing wrong? I've got all the right pieces loaded in the head.
You seem to be using the wrong API. The setContent() method and the options hash is part of the leaflet-sidebar library API, but not of sidebar-v2.

Magnific Popup - Delay popup for 100 seconds & make close work like checkmark

I am not a javscript coder so I need some help on this.
I would like the popup to load after 100 seconds.
I would like that if the user clicks on the close X that the popup closes for 30 days for that user...much like the click in dismissal does now.
If you can help me out with this I would be very happy :).
Here is the code I am using for my Magnific Popup:
var et_popup_closed = $.cookie('etheme_popup_closed');
$('.etheme-popup').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
if(et_popup_closed != 'do-not-show') {
$('.etheme-popup').click();
}
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
if($('#showagain:checked').val() == 'do-not-show')
$.cookie('etheme_popup_closed', 'do-not-show', { expires: 30, path: '/' } );
});
to initialize the popup with delay, use setTimeout
$(window).load(function () {
setTimeout(function(){
$.magnificPopup.open({
items: {
src: '#ID' //ID OF INLINE ELEMENT
},
type:'inline',
mainClass: 'my-mfp-zoom-in'
});
}, 100000); // equals 100 seconds
});
you can change the type:'inline' part by anything (like type:'image') and change the src
you can view a demo here (opens after 18 seconds after window load)
for the cookie part, i have been been trying to figure it out too..

How to destroy() my popup correctly in Sencha Touch

I am having difficulties implementing the destroy method on my popup. Everything works fine, the below code works for having one popup that changes its contents depending what is clicked on. But I notice that my content (media) still plays when hiding the popup. I'd like to destroy it completely, and re-create on click. I've not really found anything in the forums that helps me achieve this, so I think it will help others too :-)
There are a couple of things confusing me, as there is already a click listener on the markers, which initiates the popup, where should I put the destroy code? Should I be declaring it as a separate function outside the popup, then calling it on beforehide somehow?
function addMarker(country)
{
if (true)
{
var image = new google.maps.MarkerImage(country.image48Path);
var marker = new google.maps.Marker({
map: map.map,
title: country.title,
position: country.position,
//draggable: true,
icon:image
});
var goToCountryWrapper = function (button, event)
{
goToCountry(country, this.popup);
};
google.maps.event.addListener(marker, 'click', function()
{
if (!this.popup)
{ ---> Should I be placing destroy code here?
this.popup = new Ext.Panel(
{
floating: true,
modal: true,
centered: true,
width: 800,
height: 600,
styleHtmlContent: true,
scroll: 'vertical',
items:[(new countryOverlay(country)).overlayPanel,
{
xtype:'button',
margin: 20,
ui:'action-round',
text:'Click here to view more promo videos',
handler:goToCountryWrapper,
scope : this
},],
layout: {
type: 'auto',
padding: '55',
align: 'left'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
title: country.title
}],
---> Should I be placing a listener here for beforehide, destroying here?
});
};
this.popup.show('pop');
});
}
};
---> Should I be placing the destroy code after, as a seperate function?
Thanks,
Digeridoopoo
I presume you want to destroy it when you hide the popup? If so, you should listen tot he hide event and then destroy it then.
this.popup.on('hide', function() {
this.popup.destroy();
}, this);
Check this
hideOnMaskTap:true,
listeners : {
hide: function() {
this.destroy();
}
},