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
Related
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/
I'm trying to find a way for modify CSS while HTML is running, so far I find that is possible just with a little script like this next...
$("button").click(function(){
$("p").css("color","red");
});
As I can concern this is an effective way to modify the local CSS stylesheet refered to our HTML while webpage is running (i.e. pushing a div button).
What I'm trying to do is modify an specific .class from CSS stylesheet of an jQuery plugin for replacing the standard right-click context menu.
I didn't found any way in JS to call an specific stylesheet for modify any .class or #id
So my HTML had the following definitions:
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<link rel="stylesheet" href="localstyle.css">
But when I try to update custom jQuery CSS with a script like this
$('#red').click(function(){
$('.contextMenuPlugin').css({'background-color': 'white'});
.contextMenuPlugin (native in jquery.contextmenu.css) isn't recognized, that script only work with a .class or a #id from my own stylesheet (localstyle.css).
I try things like using my local CSS embedded in HTML, and referencing jQuery CSS with an id but still nothing change. So there's the link of Github repo from jQuery plugin:
https://github.com/joewalnes/jquery-simple-context-menu
I try to make a live but JSfiddle dosn't work at all with this proyect, so if it helps or anyone want to check it, there's an pastebin of issue:
http://pastebin.com/u/27GRiS (4 files)
I hope someone help me clarify this, thanks in advance,
Federico.
The problem is that you think that
$('.contextMenuPlugin').css({'background-color': 'white'});
creates a stylesheet with
.contextMenuPlugin { background-color: white }
But it's not like this.
$('.contextMenuPlugin') gets all elements with class contextMenuPlugin in the moment you use it, and then, .css({'background-color': 'white'}) modifies the inline style of each element.
That means, if you create new elements with class contextMenuPlugin after that code, they won't be affected.
Then, you can:
Make sure that your target element exists when you use the code
Create a stylesheet with the desired CSS
Some time ago, I created a function which adds desired rules to an stylesheet, and allows you to reference and change/delete them. You can see it in this answer.
You should rethink your solution. Instead, add an additional class to your stylesheet that has the CSS changes you want.
Then, on clicking the button you can call addClass to add it to the appropriate elements.
Take your <script> code out of the <head> and put it at the end of the <body>.
Also you don't need this:
$(function() { ... })
if you already have this:
$(document).ready(function() { ... })
In other words, remove line 29 and line 27 (the $(function() { and });) from this file
In my website, the users have to enter markdown in a textarea, for which I am using a markdown editor. The problem is: it uses icomoon font, and my websites too. Both uses the same class to define the fonts, but not both uses the same icons. The question is simple: is there a way to define the editor.css for a special div?
Like that:
<div css="editor.css"></div>
Give the DIV a Class and then add a CSS file like this:
.markdown
{
color: red;
}
If you import a new css dynamic, the old styles will be overwritten.
Some help, for dynamic css loading: How to apply inline and/or external CSS loaded dynamically with jQuery
Namespace your editor styles
You can add a selector that namespaces your editor and allows you to style it:
<div class="editor-style">
<div id="cool-custom-editor">...</div>
</div>
In your css:
.editor-style .icon-thumbs-up { color: green; }
Using Scoped Styles (needs polyfill)
As mentioned in #adeneo's comment below your question there is the option of using scoped style tags.
Supposing your editor looks like this:
<div id="cool-custom-editor">...</div>
You can apply a specific style using the scoped attribute like so:
<div>
<style scoped>#import url(editor.css);</style>
<div id="cool-custom-editor">...</div>
<div>
Caveats
According to can I use the scoped attribute is only natively supported by Firefox 26+.
If you want to use it you will have to polyfill:
Plain JavaScript polyfill
jQuery scoped plugin
Further Reading
HTML5 Doctor - The scoped attribute
CSSTricks - Saving the day with scoped styles
HTML5Rocks - A new experimental feature - Scoped Styles
You dont need multiple files. You can give the div an id or class like so
<div class="div1">
<span></span
...
</div>
and now in you css you do this
.div1 span{
font:(whatever font);
}
I don't think so, no. At least not without using any js workarounds. The best solution would be to use kind of namespace for user-specific css classes.
No you can't do that.. I think you should solve the conflit by changing the icomoon class names in this file.
OK solved: renaming the classes in editor for icomoon was a lot easier than I dared tough.
not a good way but it can help:
$("[css]").each(function(i){
var elm = $(this);
$.when($.get(elm.attr("css"))).done(function(response) {
var newresponse=response.replace(/(.+{)/gi,".customCss"+i+" $1");
elm.addClass("customCss"+i);
elm.before('<style>'+newresponse+'</style>');
});
});
Does anyone know how i can make my textarea in a ckeditor object, use a class or custom style so i can show to the user something similar to what is getting rendered in the site?
Thanx
So i'm using bodyClass: 'class' in the config object, i use firebug and see the iframe body has my class applied, but it doesn't get the classes properties neither from my CSS, nor from contents.css (ckeditor)...
Well i was able to do it, adding an event to the object like this:
editor.on('instanceReady', function(){
$('#'+divname).find('iframe:first').contents().find('body').css({
'background-color':'#000000',
'font-family':'arial',
'font-size':'12pt',
'color':'#cdcdcd'
});
});
if anyone has the real solution, i think bodyClass should be it, i will gladly change my code.
Thanx
Simply edit the css file located at contents.css - edit the .cke_editable class to whatever suits your needs. Works 24/7
I'm building a Drupal theme up and want to know if there is a Drupalish way to add a css file only if the user has js turned off.
This would ideally go in the theme.info file to keep it neat!
Something like this would be ideal:
conditional-stylesheets[if no javascript][all][] = nojs.css
If this isn't possible then I'm going to keep all the css that needs JS out of the css files, and add it dynamically using JS but this seems a bit messy...
Any ideas?
You don't need conditional comments or noscript-tags for that. By default, Drupal adds a 'js' class to the html element and sets a cookie if javascript is enabled:
// Global Killswitch on the <html> element
if (Drupal.jsEnabled) {
// Global Killswitch on the <html> element
$(document.documentElement).addClass('js');
// 'js enabled' cookie
document.cookie = 'has_js=1; path=/';
// Attach all behaviors.
$(document).ready(function() {
Drupal.attachBehaviors(this);
});
}
(That's on line 296 in /misc/drupal.js.)
All css selectors that should only apply when js is enabled, can be prefixed with .js. If you want, you can put those css rules in a separate file, but you don't have to.
I don't know drupal that well, but it's a good question either way. According to W3Schools, the <noscript> tag is allowed only within the body element, so that is out.
Have you considered doing it the other way round? i.e. adding a script-specific CSS stylesheet using JavaScript? See starting points for that here.