In the past, I typically added my dialog as HTML as shown on the first example.
I never liked having to maintain both the HTML page and the JavaScript page, and am thinking of using either the second or third example (which one is more jQueryish?).
What are the pros and cons of both solutions? For instance, will the second or third solution cause new DOM to be created, and if so will this cause any issues? Or will they improve performance as more likely the JavaScript will be cached? Or anything else???
$("#click1").click(function() {$("#dialog").dialog("open");});
$("#dialog").dialog({
autoOpen : false,
modal : true,
buttons : [
{
text : 'CANCEL',
click : function() {$(this).dialog("close");}
}
]
});
$("#click2").click(function() {$("<div title='mytitle2'>hello2</div>").dialog({
modal : true,
buttons : [
{
text : 'CANCEL',
click : function() {$(this).dialog("close");}
}
]
});
});
$("#click3").click(function() {jQuery('<div/>', {title: 'my title3',text: 'hello3'}).dialog({
modal : true,
buttons : [
{
text : 'CANCEL',
click : function() {$(this).dialog("close");}
}
]
})
});
<p id="click1">Click1</p>
<p id="click2">Click2</p>
<p id="click3">Click3</p>
<div id="dialog" title="my title1">
hello1
</div>
Best case is to separate HTML and JS. What is the main reason that you dont like this solution?
What if you must send your templates to a designer team that have to restructure some DIVs? Most likely they have no-, or very little idea of Javascript, and dont know what to do.
Pros example 1:
Structured files. Separating backbone (HTML) and UI functionalities (JS)
More performant, because JS have not to create some DOM objects. They already are given in the HTML file, and JS has just to select it
Designer team can use the html templates whitout knowledge of JS
Contras Example 2&3
It have not the benefits of the explained example 1 pros
Benefits between Examples 2&3
It could be that Example 3 is more performant. Because internally JS must split your written html string, into objects to create the new DOM object. But you should test it in a loop.
Contras example 3
Writing jQuery instead of the alias $ all the time, results you longer code. Why not stay using $?
Related
This is kind of an academic question because I've all but given up, but maybe we can learn a few things about CKEditor5 by trying to solve it!
I'm using a pretty bare-bones installation of CKEditor from https://ckeditor.com/ckeditor-5/online-builder with just some basic styling features.
My use case is pretty basic but my users need to enter certain special characters and I want to include support for material icons (from Google)
Something along these lines
If you're not familiar with material icons, they use a special font and some CSS wizardry to display icons similar to font awesome. They are here: https://fonts.google.com/icons?icon.set=Material+Icons they come in two varieties, icons and symbols which are very similar but we're concerned with icons in this case.
The syntax for the icons is
<span class="material-icons-outlined">
emoji_emotions
</span>
and it uses some font wizardry to make that turn into something like
You can also use a single entity such as to accomplish the same behaviour and it's the option I've opted for in my implementation.
My chosen markup is
<material-icon class='material-icons'></material-icon>
A little redundant I know but I wanted to separate them from just spans.
Anyway, out of the box CKEditor doesn't allow pasting unknown elements and strips it down to just the html entity so you need to add a new schema, something like this
export default function schemaCustomization(editor) {
// Extend schema with custom HTML elements.
const dataFilter = editor.plugins.get('DataFilter');
const dataSchema = editor.plugins.get('DataSchema');
// Inline element
dataSchema.registerInlineElement({
view: 'material-icon',
model: 'materialIcon',
modelSchema: {
inheritAllFrom: '$inlineBlock'
},
attributeProperties: {
copyOnEnter: true,
},
});
// // Custom elements need to be registered using direct API instead of config.
dataFilter.allowElement('material-icon');
dataFilter.allowAttributes({ name: 'element-inline', classes: /^.*$/ });
}
This will register the element with the editor and allow it to be accepted into the document.
Then you add it to your options, alongside the previous htmlSupport plugin and you're good to go!
options = {
toolbar: {
items: [],
},
htmlSupport: {
allow: [
{
name: 'material-icon',
classes: /^.*$/,
},
],
disallow: [
/* HTML features to disallow */
],
},
extraPlugins: [schemaCustomization],
removePlugins: []
};
A lot of documentation I used comes from here: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/schema.html
However, there's one problem!!
The element remains editable and if someone clicks inside the material-icon tag and starts entering text, it gets messed up.
I need a way to make the material-icon element be somehow self-contained or atomic and only allow a single character inside.
I've been playing around with all kinds of settings but I'm not sure which are the correct ones and where they're even meant to go.
For now I've switched to just using unicode emoji but they really don't look as nice.
I've tried a lot of the settings and options from https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/schema.html and I think there are multiple ways to register these sorts of elements.
I was expecting it to work somehow but the ability to edit within the tags and break the layout is an unintended side effect.
Does anyone have any experience with the latest version of CKEditor and performing these sorts of low-level mechanics? Any help is appreciated!
Hi every one I have been looking for a language translator in drop down with country icons, I dont know if I can use google or not ? but I found really good http://www.jqueryscript.net/text/jQuery-Plugin-To-Translate-Webpage-In-A-Given-Language-localizationTool.html
So I have decided to use this but I am having problem with the multiple languages.
Could any one help me with adding more languages into the drop down .
Here is the code
<script>
$('#selectLanguageDropdown').localizationTool({
'defaultLanguage' : 'en_GB',
'ignoreUnmatchedSelectors': false,
'showFlag' : true,
'showLanguage': true,
'showCountry': true,
'labelTemplate': '{{country}} {{(language)}}',
'languages' : {
},
'strings' : {},
'onLanguageSelected' : function (/* je*/) { return true; }
});
</script>
I just need to add more languages to the drop down, I could not understand the documentation at the website please help/suggest me for language translator with icon drop down and which takes less space .
Thank you.
The main problem in this plugin is that i have to write the content in other language to convert the text. i want to translate the whole website, how can i write everything in all languages. can any one suggest me something like google translator in this design ???
I am creating a UI, in which user can add / delete items (of similar layout).
It starts with one item and you can click 'add' to add more. The UI consists of several different types of items.
What I am doing currently is populating a single item item 1 ( of each type ) and on add event, I clone the item 1, replace the changes done by user in item 1 and append the clone to the container.
In simple words, instead of dynamically creating html with jQuery, I am cloning html of a div. But in this approach , I had to change a lot of things to keep to give the new item to initial state.
So, I want to avoid the replacing the edits done by user, so I was thinking something like below,
<script type="text/template" id="item_type1">
<div>
<div>Box</div>
</div>
</script>
<script type="text/template" id="item_type2">
<div>
<div>Box2</div>
</div>
</script>
And on add event, I want to do something like $('#item_type1').html() and $('#item_type2') to create new items.
I know there are sophisticated libraries like handlebar and mustache and underscore has its own way of implementing templates.
But I am not using any of these already and thus do not want to included them just to copy content. I dont want anything special. I am not passing variables. I am just cloning some markup to use again and again.
Is this way to insert html in script tags , going to work in all browsers ? and is it a good way ?
EDIT:
Its for the wp plugin and I assume js is turned on , else the plugin wont work anyways.
What about:
Your HTML should be, for example:
<script type="text/template" id="item_type1">
<div>
<h1>Box1</h1>
<p>
</p>
</div>
</script>
And your code would be:
var templateHtml = $('#item_type1').html();
var $item = $(templateHtml);
$('body').append($item);
$item.on('click', function() {});
This is an easy way that will work on all browsers.
Step 1: Create an HTML file with your template inside of it
Step 2: Using jQuery's load() method, call your HTML template into a div element in the main HTML file:
$("#main-div").load("yourtemplate.html")
Step 3: Be amazed
Is this a good idea? It depends:
If it's a self contained application on a known environment with a determined supported browser and with equally determined settings (like if JavaScript is on or not) then yea, sure. Why not?
If it's open to the public in every single browser possible with many different configurations, then no, it's a horrible idea. If your user doesn't have JavaScript enabled, then your content doesn't show up. Also, if one of your scripts break in production, then you are again left with no content. You can learn this lesson from when Gawker made this same mistake
I am very new to sencha and probably do not know how everything you need. I'm trying to extract some contents of an HTML page using ajax. For example, the text in a div with id = "content".
I want to put this content extracted in a panel or container Sencha.
This is the view that I have:
Ext.define("myapp.view.Main", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
html: FUNCTION_TO_GET_CONTENT .join("")
}
]
}
});
I would like to know if there is any way to get the contents of the HTML page displayed in a panel, but I do not know how. Can someone please help me understand this and how I can best address this?
UPDATE:
Basically what I would like to do is to replicate the result of this JQuery statement:
$("#mylocaldiv").load("sourcePage.html #mainDiv");
and then append the result to the html property in the tab panel.
First, add an alias to your view (make sure it's preceded by widget.
Ext.define("myapp.view.Main", {
extend: 'Ext.tab.Panel',
alias: 'widget.Main',
...
});
Then get your view by doing either:
myView = Ext.Viewport.down('Main');
or
myView = Ext.ComponentQuery.query('Main');
Now you can access your items like so:
myView.items.items
And since your panel is the only item, it will be item zero. You can then use it's setHtml method to append html:
myView.items.items[0].setHtml('your html here');
In terms of loading an html file into the panel, I believe Sencha removed Ext.dom.Element.load(). I would use a simple Ajax request and then append the result into the panel in the success callback. See here: load an html file into a panel
sencha is not a good tool for building large applications, so better to choose another one. I was tried it and it sucks my time and no use at all, the windows panels and many more developed using images not with css. if we build large apps with that we may decline the performance of app.
Can anyone suggest a lightbox that will display at least two images side by side when activated?
My idea is to use this instead of a dropdown menu. When "Books" is hovered on my menu, I'd like to have a lightbox open, showing two images....side by side, each with a link that will allow the user to select "Fiction" or "Non-Fiction".
I realize that some people may ask why would I want to do this instead of using a more practical solution like dropdown.
I'm a fan of fancyBox, but really any lightbox that supports HTML content would work. Instead of boxing an img, however, just box a div or some container with two images instead (of course, you'll need some CSS to make it look nice).
I would use a light box that supports Iframes. Build your page, stile it, and off you go.
In addition to the answers provided earlier, I found the following answer useful:
Two-page view with jQuery.fancyBox
The problem is resolved as proposed here, however a concrete code example is given.
$('#start-photo-book').on('click', function() {
var book = [];
$.each( $("#photo-book").children(), function( key, value ) {
book.push({
content : $( value ).clone(),
type : 'html'
})
});
$.fancybox.open( book, {
loop : false,
smallBtn : false
});
});