Is it possible to have 2 different styles for Popups in Leaflet? 2 different popups (in terms of style and content) will be triggered on user interaction, one on mouseover and one on click.
Problem: I tried overiding the CSS style for .leaflet-popup-content-wrapper' in the stylesheets which works for one popup style, that was not able to switch the CSS styles at runtime to switch back and forth between 2 CSS styles, probably because the popup DOM elements were not loaded yet.
marker.on('mouseover', function() {
marker.bindPopup('<b>Hello world</b>');
marker.openPopup();
})
marker.on('click', function() {
marker.bindPopup('<b>Click click</b>');
marker.openPopup();
// Failed attempt to switch style
$('.leaflet-popup-content-wrapper').addClass('new-style');
})
The bindPopup method can be passed an "options" parameter which can contain a "className" attribute that will be added to the div for the popup:
marker.on('mouseover', function() {
marker.bindPopup('<b>Hello world</b>',{className: 'mouseover-popup'});
marker.openPopup();
})
marker.on('click', function() {
marker.bindPopup('<b>Hello world</b>',{className: 'click-popup'});
marker.openPopup();
})
Related
I am using v5 of TinyMCE. By default, the style selected is 'Paragraph', as shown in this image :
[tinyMCE toolbar, as the user sees before he mades any format configuration]
But I know my users will all prefer to use 'Div' style. So I would like 'Div' to be selected by default. The toolbar should therefore appear like in this image :
[tinyMCE toolbar, as I want it to be configured by default]
Is it possible ?
I haven't find my answer in tinyMCE documentation.
Same question if you want for instead "bold" button to be selected by default, etc.
Thank you !
To replace the default <p> blocks with <div>, use forced_root_block: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#forced_root_block/
tinymce.init({
// ...
forced_root_block : 'div'
});
To select the bold button by default, you could use execCommand: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
tinymce.init({
// ...
setup: function(editor) {
editor.on('init', function() {
this.execCommand('Bold');
});
}
});
Example fiddle combining both: https://fiddle.tiny.cloud/YShaab/1
In most of my grids, if I want to perform a "custom operation" that displays some data in a jqGrid modal form and allow the users to click "submit" to do something, I am able to simply leverage the existing "Edit" operation and tweak it to my needs.
However, I am working on a grid where the Add, Edit, and Delete operations are all in use, and I need an additional "custom operation" that opens a jqGrid modal form to display a couple of the columns along with a submit button to send the key ID to the target URL.
Normally this is very easy to simply re-task the Edit function, but since Edit is in use, I'm not sure how to do this. Does jqGrid have a proper method for creating new custom operations that display modal forms just like Edit does?
In the end, I was not able to find a way to do this through "core" jqGrid features and ended up simply adding a new button to the grid which opens my own custom modal box.
The multi-select features of jqGrid were also used to allow the user to select multiple records to be passed off to this custom function when the new button is clicked.
Here was the code for adding the button to jqGrid. The AJAX call retrieves the HTML content for the modal that is being populated (in JSON format):
.navButtonAdd('#listAllSupplierPurchasesGridPager', {
caption: "Mark Paid",
buttonicon: "ui-icon-add",
onClickButton: function () {
var s;
s = $("#listAllSupplierPurchasesGrid").jqGrid('getGridParam', 'selarrrow');
if (s.length > 0) {
// Make AJAX call to get the dynamic form content
$.ajax({
cache: false,
async: true,
type: 'POST',
url: "/TargetItems/MarkPurchasesPaidRequest",
data: {
PurchaseIds: JSON.stringify(s)
},
success: function (content) {
// Add the content to the div
$('#MarkPurchasePaidModal').html(content);
// Display the modal
$("#MarkPurchasePaidModal").dialog("open");
},
error: function (res, status, exception) {
alert(status + ": " + exception);
},
modal: true
});
}
},
position: "first"
})
The jQuery for setting up the basic modal box:
$("#MarkPurchasePaidModal").dialog({
autoOpen: false,
width: 768,
autoheight: true,
show: {
effect: "blind",
duration: 250
},
modal: true
});
And the div HTML to hold the modal:
<div id="MarkPurchasePaidModal" role="dialog" title="Mark Purchases Paid" class="container"></div>
I am a beginner in jQuery and JavaScript. I have the following problem: Every time I try to open an div area it is immediately collapsing. The HTML is:
<ul class="information"><li><a class="opener" href="#">opener</a> <div class="slide-block"> ...
The JavaScript:
jQuery(".information .opener").on("click", function(event){
var opener = jQuery(this);
// Show/hide the content by toggling active class
opener.parent().find(".slide-block").slideToggle("fast",function(){
opener.parent().toggleClass("active");
});
// Return false to subdue the click
return false;
});
In think it has to do with an upgrade of jQuery...
Thanks in advance
Julius
Because i have different tabs, masonry is not loading the hidden items, so when i click on a new tab the images stack onto each other, i know this question has been asked before and answered with trigger masonry by clicking the tab, but how would i go about doing this without messing up the first tab.
Currently calling masonry with
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 260
});
});`
$(window).load(function(){ $('#container').masonry(); });
and the same for tab 2 but with a different ID - #container2
the tab one works perfectly but tab two stacks the images, until you resize the browser which fixes it and works as normal
Do it like this:
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 260
});
});
var masonryUpdate = function() {
setTimeout(function() {
$('#container').masonry();
}, 500);
}
$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);
Never worry about it again! Or, you may call it again after other animations, like:
$('#something').slideDown(600, masonryUpdate);
Even if you don't, just click anywhere in the page and masonry will update.
Yes, you can reload masonry view on onclick event as following :-
Use $container.masonry('reload'); if it is work for you. In my case It was not work. I have done using setTimeout(function(){ $container.masonry() }, 400); . call masonry in setTimeout function.
$(document).ready(function($) {
var $container = $('#youContainerId');
$("#TabId").live("click",function(){
//$container.masonry('reload');
setTimeout(function(){ $container.masonry() }, 400);
});
});
I have a static html form layout where i add extjs form fields using the "renderTo" config. In order to have form validation and simple submit methods i want to add the fields to a form panel. As the layout is managed by the html frame i don't want the form to be rendered by the panel (panel has html frame as contentEl and this should be used as is).
In extjs3 i could achieve this by adding the field not to the panel but to the BasicForm (formpanel.getForm().add(...)) but in extjs4 this method seems to be gone.
How can i do this using extjs4?
Thanks in advance.
Since you already have a Panel that uses the contentEl to render HTML into its body, I recommend to stick with this approach:
Replace the panel with an Ext.form.Panel instance - the configuration, particularly the contentEl config - can remain unchanged.
The code provided here will override a standard Ext class (Ext.layout.Layout) and introduce support for a 'renderItemTo' config property on child items of any Ext container or panel instance (including Ext.form.Panel).
The value of the config property should be the ID of an already rendered DOM node, e.g. a DIV element that is part of the HTML fragment used in as the contentEl of the parent container's body.
Ext.require(['Ext.layout.Layout'], function() {
Ext.override(Ext.layout.Layout, {
renderItem: function (item, target, position) {
if(item.renderItemTo) {
// render 'renderItemTo' components into the specified DOM element
item.render(item.renderItemTo, 1);
// don't allow container layout to seize the component
item.layoutManagedHeight = 2;
item.layoutManagedWidth = 2;
} else {
// just use standard Ext code for non-renderItemTo components
this.callOverridden(arguments);
}
},
isValidParent: function(item, target, position) {
// signal Ext that we are OK with were our 'renderItemTo' component is right now
// otherwise it would get moved during the layout process
return item.renderItemTo ? true : this.callOverridden(arguments);
}
});
});
Usage:
var panel = Ext.create('Ext.form.Panel', {
contentEl: 'form', // the DOM element ID that holds the HTML fragment for the body
title: 'My FormPanel with special FX',
items: [
{
xtype: 'textfield',
renderItemTo: 'text1', // the ID of a DOM element inside the HTML fragment
fieldLabel: 'Label 1',
},
{
xtype: 'textfield',
renderItemTo: 'text2', // the ID of a DOM element inside the HTML fragment
fieldLabel: 'Label 2'
}
]
});
I uploaded a working example to JSFiddle (note: resize the window if you experience a render problem - this is related to JSFiddle, not my override).
After digging through the layout system of ExtJS 4.1 i implemented a custom layout which moves the items after rendering to the desired position in the fixed markup. The result is the same as for the ExtJS 4.0.7 version from this thread. It seams to work for the ExtJS standard fields. I have some problems with my custom fields though.
Ext.define('Ext.ux.layout.Fixed', {
extend: 'Ext.layout.container.Auto',
alias: 'layout.uxfixed',
afterRenderItem: function(item) {
// move items with renderToFixedMarkup to desired position
if (item.renderToFixedMarkup) {
var target = Ext.getDom(item.renderToFixedMarkup);
this.moveItem(item, target);
}
},
isValidParent: function(item, target, position) {
// items with renderToFixedMarkup property are always positioned correctly
return (item.renderToFixedMarkup) ? true : this.callOverridden(arguments);
}
});
It can be used by setting "layout: 'uxfixed'" on the panel and the "renderToFixedMarkup" config on the items.