using html and styling within javascript - javascript

Hello I am building a flask web application and including a web text editor called ckeditor into it.
I figured out how to include custom resume templates into my application by modifying a file called default.js. I think anyone who knows a lot about javascript could help me out, without knowing about ckeditor specifics
My issue is that I want to style the html such as name in the h1 tag etc but am not sure how to do this. The default.js file uses a javascript array to render templates. How would I link a css stylesheet to the html I have in default.js and actually have it be styled. Any help would be appreciated!
Here is the script I have in that default.js, which currently renders one template
// Register a template definition set named "default".
CKEDITOR.addTemplates( 'default',
{
// The name of the subfolder that contains the preview images of the templates.
imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
// Template definitions.
templates :
[
{
title:'Resume Simple',
image:'resume1.jpg',
html:
'<h1>Name</h1>' +
'<p>[Address, City, ST Zip Code][Telephone][Email]'+
'<h3>Education</h3>'+
'<p>[Degree][Date Earned][School]</p>'+
'<h3>Skills & Abilities</h3>'
}
]
});

You can style these elements like any other HTML elements with CSS, either by directly targeting the HTML tags or by adding CSS classes to the HTML code located in the default.js file, like this (notice the class="name"):
templates :
[
{
title:'Resume Simple',
image:'resume1.jpg',
html:
'<h1 class="name">Name</h1>' +
'<p>[Address, City, ST Zip Code][Telephone][Email]'+
'<h3>Education</h3>'+
'<p>[Degree][Date Earned][School]</p>'+
'<h3>Skills & Abilities</h3>'
}
]
Your CSS could look like this:
/*styling the HTML element*/
h1{
color:red;
...
}
/*or styling the class*/
.name{
color:red;
}
You will either place it directly in a <style> HTML element in your page, or in a CSS file.
Here you can learn more about CSS http://www.w3schools.com/css/

Related

CKEditor - how to get the template attributes

I'm using CKEditor's template plugin to load the templates in the editor. In the templates I've defined likt this.
templates: [
{
title: "Quickclick 1",
image: "template1.png",
description: "Quickclick 1 template",
html_et: "<span>test1</span>",
html:' <span>test</span>'
}]
When the user selects a template, the html is loaded which is fine. But also, it would be great if there is a way to get the property of the current selected template from the CKEditor instance.
I need to get the html_et property value in this case. I didn't find anything in the documentation related to this. Any help would be appreciated.
#Lingasamy Sakthivel that is not how you define templates in CKEditor.
If you want to use templates, you need to create a file like the default one in templates plugin: https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/templates/templates/default.js
NOTE: when defining my test template file, I have named the file my_template.js and have given the same name to template definition CKEDITOR.addTemplates( 'my_templates', {... for simplicity.
Now, Once you have the file ready, you can assign it to editor. To do that you need to specify path to your file (full or relative to context of your application) and definitions that should be loaded.
In the example below I'm loading the default CKEditor file as well as my custom one:
var editor = CKEDITOR.replace( 'editor1', {
language: 'en',
templates_files : [
'/myApp/ckeditor/plugins/templates/templates/default.js',
'/myApp/ckeditor/my_templates.js'
],
templates : 'default,my_templates'
});
This is for files - https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-templates_files
This is for definitions - https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-templates
Now the hard part. You have written you want to know which template was selected but to be honest I don't know any way in which you could do that except for changing plugin code.
When template definition is loaded, templates inside it are loaded one by one
and assigned an onclick handler. This is IMHO the place we you could add your custom code for getting the html_et property - https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/templates/dialogs/templates.js#L53-L55.
To do that you would need to get the source version of the editor, make changes in template plugin and then building your editor (recommended approach):
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_source.html
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_build.html
Alternatively you can download CKEditor without the templates plugin (can be done using online builder where you can remove templates plugin from your build). Next you need to manually download that plugin, make your changes and add that plugin to editor by dropping plugin folder inside ckeditor/plugins folder and using the extraPlugins setting.
Can you try like this?
var editor = CKEDITOR.replace('editor1', {
templates: [
{
title: "Quickclick 1",
image: "template1.png",
description: "Quickclick 1 template",
html_et: "<span>test1</span>",
html:' <span>test</span>'
}
]
});
alert(editor.config.templates[0].html_et);

Custom Javascript and css added to Wordpress, however, still not working

The content of the site that I am currently developing centers around an ancient Tibetan scripture. My goal is to provide the user with a basic interactive translation of the text. Most important is for the user to be able to experience the text in both the English and Tibetan languages. I decided to utilize a simple highlighting scheme to show how the English word/phrase is derived from the Tibetan script and vice versa. When hovering over a particular word/phrase both the Tibetan script and English equivalent are highlighted.
This is accomplished by adding a span around every word/phrase and linking the two by putting each word/phrase in the other language's title attribute.
For starters, I have this on JSFiddle for reference JSFiddle Mockup.
I created highlight.js and added it to the /assets/js folder of my Wordpress Theme using the following:
$('span[title]').hover(
function() {
$(this).addClass('highlight');
$('span:contains("'+$(this).attr('title')+'")').addClass('highlight');
},
function() {
$(this).removeClass('highlight');
$('span:contains("'+$(this).attr('title')+'")').removeClass('highlight');
}
);
I then added the following to the Custom.css file of my wordpress theme:
span {
}
.highlight {
background:yellow;
}
I then added the following to the "mthemes_enqueue_scripts()" function of my functions.php file.
wp_register_script( 'highlight', get_template_directory_uri().'/assets/js/highlight.js' );
wp_enqueue_script( 'highlight' );
Here is a link to the page Page with Javascript
The Javascript is not functional. I've used a couple of tools to try and validate that the css is being loaded from my Custom.css file, and it is. Using View Source I've been able to confirm that the highlight.js is being loaded along with my other JS.
Any help remedying this problem is GREATLY appreciated. What am I missing?
Try this:
jQuery('span[title]').hover(
function() {
jQuery(this).addClass('highlight');
jQuery('span:contains("'+jQuery(this).attr('title')+'")').addClass('highlight');
},
function() {
jQuery(this).removeClass('highlight');
jQuery('span:contains("'+jQuery(this).attr('title')+'")').removeClass('highlight');
}
);
It looks like you're loading jQuery after the custom js file. The highlight.js seems to be written in jQuery so maybe load it in the footer instead.
Your page raise a javascript error : "Uncaught ReferenceError: $ is not defined".
In wordpress you must use 'jQuery' instead of '$' to call jquery functions. So replace all instances of '$' by 'jQuery' in highlight.js.

Separate JS and CSS list output of media class object for Django form in template

I have simple question here. I know how to use django media in order to put js and css files which is specified in media class like this:
In forms.py for model
from django import forms
class CalendarWidget(forms.TextInput):
class Media:
css = {
'all': ('pretty.css',)
}
js = ('animations.js', 'actions.js')
In template file
{{ form.media }}
However I want to put separately JS and CSS. It means I want to put CSS at head section and JS before body tag. So how I can achieve it using build in tags? Is it possible?
P.S. I cannot find out information from django documentation. (Perhaps, I look in wrong place). So give me a hint.
You can use {{form.media.css}} and {{form.media.js}} separately to put them at required places.
Reference docs subsets-of-assets.

Modulizing CSS Stylesheets with RequireJS

I have created a template like so:
// template.tpl
<div>
<input id="an_input"></input>
</div>
and some CSS:
// stylesheet.css
input {
background: #000000;
}
Finally this is a slimmed down module:
define([
'jquery',
'text!template.tpl',
'text!styleshet.css'
], function($, html, css){
var view = $('#sample_div');
view.append($(html));
var regex = /^([^\s\}])/gm;
var styles = css.replace(regex, '#'+view.attr('id')+' $1');
var style = $('<style>\n'+styles+'\n</style>');
view.prepend(style);
});
What is essentially happening, is the template is being loaded and put into the #sample_div. Shortly after the CSS file is being loaded as text, then every item is prefixed with the ID of the view.
Once the CSS is prefixed, the style tag is created and placed inside the view.
Now, this works perfectly, OK it isn't pretty, nor does it leave much margin for error. However I wrote this code to help demonstrate what I need.
I need to be able to load templates with view specific stylesheets, where the styles in the sheet will only ever apply to the view and will only override global styles.
The problem with the above example is that it is a hack, a regex against the CSS, and the building of a new style tag, this is not how I want to do it. I have been looking into javascript CSS parsers for a cleaner solution, and although JSCSSP caught my eye, it put to many functions into the global namespace, and jquery.parsecss only seems to work with styles already within the document.
Does anyone have any experience with what I am trying to achieve?
Most loaders out there have CSS plugins that handle the insertion for you:
RequireJS CSS plugin
https://github.com/tyt2y3/requirejs-css-plugin
CurlJS CSS plugin is bundled with the main distribution:
https://github.com/cujojs/curl/tree/master/dist

Add onclick with css pseudo-element after

Is it possible in my css file to do something like that?:
.myclass:after{
content:"click me";
onclick:"my_function()";
}
I want to add after all instances of myclass a clickable text, in the css style sheet.
Is it possible in my css file to do something like [see code above]?
No
The important question to ask is why.
HTML has control of the data within the webpage. Any CSS or JS is specified via the HTML. It's the Model.
CSS has control of the styles, there is no link between CSS and HTML or JavaScript. It's the View.
JavaScript has control of the interactions within the webpage, and has hooks to any and all DOM nodes. It's the Controller.
Because of this MVC structure: HTML belongs in .html files, CSS belongs in .css files, and JS belongs in .js files.
CSS pseudo-elements do not create DOM nodes. There is no direct way for JavaScript to access a pseudo-element defined in CSS, and there's no way to attach an event to said pseudo-elements.
If you've got a set structure in place, and can't add the additional content necessary to produce new links within the HTML, JavaScript can dynamically add the new elements necessary which can then be styled via CSS.
jQuery makes this very simple:
$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);
Well,
using expression it might actually be possible for internet explorer only.
Otherwise:
No. Not at all, that's not what css is made and intended for.
If something can be done with jQuery, then it is sure that it is possible to do it without that. Lets see a data model:
<div id="container">
<div id="hasblock" onclick='clickFunc(this, event)'></div>
</div>
We need some stylesheet:
<style>
div#container { width:100px; height:50px;position relative; border:none;}
div#hasblock {width:100px; height:50px;position absolute;border:solid black;}
div#hasblock::after {content:"Click me"; position: absolute; border:solid red;
top:80px;left:0px;display:block;width:100px;height:20px; font-size:18px;}
</style>
And a code:
<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");}; }
</script>
Use jQuery's After:
http://jsfiddle.net/PCRnj/

Categories

Resources