I've checked the CKEditor documentation but cannot find an option to 'lock' paragraphs of text together to stop them becoming separated between page breaks. In MS Word, it's called 'keep with next'. E.g.
CKEditor seems pretty feature rich so I wonder if I can't find it because of a terminology problem, or if it's some custom function I need to code?
This is not a full answer, as it only contains what is needed, but not the final solution.
But hopefully it will help for further searching.
CKEditor can only do things that are provided by CSS itself.
What you are looking for is to set the page-break-after style property to avoid.
That can be solved in different ways:
Having a class like keep-with-next and define a rule for that class with page-break-after: avoid, and setting that class for the element using CKEditor.
Having a plugin that sets page-break-after: avoid as inline style.
I am working on a themes library accompanied by a demo page. The demo page has to use styles from the library (for demonstration) but without utilising the whole elements.
For example, take the following style; (external stylesheet)
div.major.minor { /* styling statements */ }
It is obvious that a browser will not match the first div since both classes are required. The latter will be matched, of course.
<div class="minor"> </div>
<div class="major minor"> </div>
But this is exactly what I want to achieve; i.e. the browser should somehow ignore that the style targets div's with both classes, and apply the style to the first one as well.
The following is not feasible, since it's not 'logical' to put extra selectors in the library only to use them in the demo page.
div.major.minor, div.demo.minor { /* styling statements */ }
The solution can even utilise JavaScript, there isn't a requirement to stick to HTML/CSS only. Any workaround will do.
As a last resort, (if no better solution is found) I will replicate the styles I want from the library in an extra stylesheet for the demo page. But of course I want to avoid this, since there's to much repeating code involved.
Thanks for your help :)
Since the stylesheet you are working on is going to be a library, you'd better not mess it up just to style your demo page.
These are two separate things and a separate CSS file would ensure that everything goes as planned. Anything else would require more effort than it's really worth and it might make things go downhill.
I have a simple html snippet that I add to the document during runtime. I am using jQuery's selectors but that should irrelevant to the issue I am facing.
When using:
$("#elementID").html()
The code is displayed but with no CSS applied. The behaviour make sense since the CSS has already been loaded and applied.
My questions are:
- Is there away to "refresh" a DOM element in order to re-apply CSS on it after its html content has been changed?
- or is there a way to apply CSS on the code I have in the JavaScript before adding it to the DOM element?
I am aware of various JS\html templates library but at this stage I am trying to minimize the dependency on extra libraries, specially since that the snippets I am generating\injecting are very simple and I dont mind them staying in the JS code
Jamil
You are wrong. CSS is applied all the time (during runtime) - look at this jsFiddle example. You messed up with something else.
Are you sure css is not applied? Because it should be. If you add a new element to the DOM, it should just take on the styling from any css files you have loaded. How are you applying the css?
.trigger('create') on the element will force a re-rendering of the element if needed
I have created a Javascript based element that can be embedded into websites. The Javascript itself adds the HTML code into a pre-defined HTML container and dynamically loads the necessary CSS file that contain the element's visual definitions.
The problem starts when the site itself has its own definitions for general items. For example: The site's CSS defines a certain list style which is applied on the element's list because the element's CSS doesn't define an explicit list style or if the site's CSS overrides the element's CSS definition.
For the time being, I was able to solve this specific issue by explicitly defining the list's style and adding the !important definition. However, I would definitely want to go for a more robust solution that will assure that:
1. CSS definitions from the site's CSS that are not explicitly defined in the element's CSS will not be applied on the element
2. I will not need to explicitly add the !important definition to every one of my CSS definitions
Is there a general way in which I can specify that a site's CSS will not be applied on a certain element or that only a certain CSS will be applied to a specific element?
Any help will be greatly appreciated.
You need to use a localised reset.
Grab an existing CSS reset, such as Eric Meyer's Reset Reloaded and namespace all the selectors with your parent element, e.g. #something a { ... }.
I was going to put up the same answer as Alex, but he beat me - but I was also going to add:
If you're not going to use #alex's suggestion then ultimately you have to explicitly style all of your elements the way that you want them to appear; using selectors that keep your styles local too (and don't interfere with the parent site) - in the same way that the localised reset is suggested.
Update
Or you could do what Google Translate and many other widget-type things do, usually a no-no but in dynamic scenarios I think perfectly acceptable; since the visual style of your elements is not just important to you but to the container site: use inline styles.
Final update
So I thought I'd just double check what Google Translate does. And of course it's an iFrame inject in addition to using inline styles. They no doubt use inline styles to maximise compatibility and so that the browser doesn't have to make another request to get the stylesheet; and they would be using an iFrame so they can ensure a consistent look and feel.
Consider both of those points in tandem - and weigh that up against the amount of work that might be required in resettting all the styles for a minority portion of the page; or defining rules for every CSS property you need to control - which, let's face it, is basically all visual CSS properties.
The iFrame solution actually seems to offer the best solution - if you can use it; hence I've +1'd the first comment by #roberkules on your question.
Lately I found myself using jQuery and JavaScript a lot, often to do the same things that I did before using CSS.
For example, I alternate table rows color or create buttons and links hover effects using JavaScript/jQuery. Is this acceptable? Or should I keep using CSS for these kinds of things?
So the real question is:
When I'm using too much jQuery? How can I understand when I'm crossing the line?
You're crossing the line if you're using jQuery to do things that can be done easily without jQuery. jQuery's purpose is to make life easier, but it shouldn't be at the expense of compatibility or usability.
jQuery most certainly shouldn't be used as a replacement for CSS -- think of the users who have JavaScript disabled.
I know this image is overused, but someone had to throw it in here:
Image Credit - bobince.
I don't think there is a "line" here, I think there are some straightforward things and some grey areas there you have to balance what you want. Advanced features, performance, compatibility, think of these are a triangle, it's hard to do all 3 as best as possible at the same time.
If CSS can do it, of course do it in CSS. If it can't be done in CSS use jQuery, but do't use jQuery where the overhead isn't needed, e.g. $(this).attr("id") can usually be this.id, many things are available strictly on the DOM and still in a cross-browser way.
When are you using it too much? When it's not needed, sometimes you need jQuery for cross-browser CCS3 selectors, sometimes you're using a CSS selector that's already available put it in the stylesheet. There are a hundred other examples, but if you can get by in a cross-browser clean way without it, then there's no need, things like fading aren't trivially done. If you need to include jQuery at all, there's no reason not to use .fadeIn() once you have (the code's been included, why duplicate it?)
JavaScript vs No JavaScript
As said in comments here your site should offer all the basic functionality without javascript, this usually isn't a problem, e.g. capturing a click and loading the content via AJAX...if you don't capture it they do a full page reload, this is an easy fallback to the standard behavior. However, all the "bells and whistles"? This is opinionated for sure, but I don't think you should bend over backwards to offer all the functionality without JavaScript. The user turned it off, they don't get the fancy stuff, that's fine...look at SO as an example, disable javascript disables a lot of non-essential features, you can browse around just fine, but commenting, voting, mainly actions aren't necessarily available without JavaScript.
If you turn off java script on your browser and your site/application does not run or look functionally with out it, then you have a problem.
JS is great, but it should never stop a user from using something you have built, IF it is disabled.
If it's something that is easily do-able in CSS, then ditch jQuery and do it in CSS. That way you don't have to depend on javascript execution for the look/feel of your application.
You use too much jQuery if you could set one class attribute instead of a lot style attributes. For example:
/** Select 400 rows and change the background colour **/
$('#table tr').css('backgroundColor', 'blue');
Instead of:
/** jQuery **/
$('#table').addClass('blueRows');
/** CSS **/
#table tr.blueRows {
background-color: blue;
}
To avoid jQuery styling, you could also set a class to the body so it's easier to style with CSS for Javascript-enabled browsers:
/** jQuery **/
$(document).addClass('JS-enabled');
/** CSS **/
body #table tr{
background: #FFF;
}
body.JS-enabled #table tr {
background: blue;
}
jQuery most often gets applied after the document has been loaded. I guess that if you can achieve the same thing with plain CSS, CSS is the way to go. Less load on the browser, and if someone doesn't have jQuery enabled at least there's still (some) style because of the CSS.
For example, I alternate table rows color or create buttons and links hover effects using JavaScript/jQuery. Is this acceptable? Or should I keep using CSS for these kind of things?
Really, it depends on your browser support. You can do zebra-striping on tables really simply with this code:
table.classname tr:nth-child(even) td {
background-color: #ddd;
}
But this doesn't work in Internet Explorer at all (although it should in the upcoming version 9). So if you need everything to look the same cross-browser, use jQuery instead.
For link hover effects, assuming you mean colour changes, etc. and not fancy animation, definitely use CSS since this is supported everywhere.
Ok, don't mark me as a troll...
If your web-app wont work in an environment that doesn't have JavaScript enabled or isn't compatible with JQuery, then just go with whatever is easiest for you to manage. There is no benefit to having visual support for an application if it doesn't actually work otherwise at all.
Tho if you want to make it work later without JavaScript support, then you should prob try to use css. But if you don't plan for no-JavaScript support, and it works, go with whatever is easiest for you