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.
Related
My CSS code is causing Codemirror to display incorrectly. See below:
How can I prevent my styles from affecting the elements created by Codemirror so that Codemirror will display correctly?
Even if I manage to tweak my CSS code so that both my page and Codemirror display correctly, it will be a nightmare in the future because any future styles may affect Codemirror. Also my CSS file is generated dynamically depending on values given by the client, which further complicates things.
One possible solution is to create a class called not-codemirror and apply it to every single element on my site, other than elements for Codemirror. This seems like overkill to me, especially considering most pages will not be using Codemirror. All pages share the same CSS file.
Also, I would prefer a non-jQuery solution, if possible. Thanks
EDIT
I now have it displaying as this:
It should look like this:
I added:
display: inline;
margin: 0;
padding: 0;
to .CodeMirror span in codemirror.css.
Codemirror markup has a specific class .CodeMirror (at least in latest version it's present);
So if you want other styles not to clash you can use .not :
clashing-selector:not(.CodeMirror)
You know the problem lies in conflicting CSS declarations, so I would suggest giving each of yours or Codemirror's tags which are conflicting a class to clear up confusion. It's pretty clear that Codemirror should be the one you change since it sounds like you are fairly well bound by your site's dynamic CSS. This 'targeted' solution is a lot simpler than attacking your entire site with not-codemirror tags (and thankfully, does not involve any jQuery), and I don't think it will be that difficult to figure out what to change in Codemirror's source if you are relatively familiar with your own CSS.
If it turns out you run into issues with specificity as well, you may be able to justify using an !important tag, but I would try to stay away from that on principle.
Preamble: Possible duplicate to my question can be found found here, although for me, this question was not sufficiently answered. A work-around is given, but a definitive answer to the question of whether or not it is possible, is not provided.
The question:
On my website, when a user clicks a button (or area of screen), I want that area to "flash" a couple of times before returning to its original state. (I think this gives the user a reassuring feel of something having been activated, as in some circumstances, they may have short delay before the feedback is given.)
Anyway, I've managed to get this working using a bit of JavaScript and jQuery, and you can see the results here >>.
As you may notice, the problem is that after the flashing is done, the element doesn't return to its original state. Rather, it keeps its last "flash" state, and overrides the underlying CSS styling which originally styles the object when the page loads.
I style the element with the following jQuery:
$jq_obj.css('background-color',flash_fg_color_).css('color',flash_bg_color_);
And I 'attempt' to un-style it with:
$jq_obj.removeAttr('background-color').removeAttr('color');
I've also tried:;
$jq_obj.css('background-color','').css('color','');
Despite the documentation saying that this should remove styling, it doesn't.
Is there a solution, or do I have to revert to the work-around solution referred to in my preamble? The nice thing about the JavaScript option is that it becomes a lot more versatile when you want to play around with the animations a bit.
Thanks,
===EDIT 2014-06-28===
As a demonstration of why the class solution is untidy, please see this fiddle: http://jsfiddle.net/Y9L4x/ (inspired by #BiffMaGriff 's proposed solutin here: http://jsfiddle.net/rte3G/)
The problem is that the elements being flashed could already be CSS-ed up to the hilt with multiple classes.
I recognise that I can remove styling classes first, before applying the "flash" classes, complicate the JavaScript and/or the CSS rules, etc. etc.
But the whole point of looking for a non-class-solution is that this option becomes extremely verbose in a real world situation, and you tend to have to program each flashing object individually, rather than the tidy one-JavaScript-function-fits-all that I'm searching for.
You are going to want to do your styles as classes.
.activated{
background-color: red; //or whatever else
}
and then with your jquery you can just toggle them a few times with the delays I assume you already have in your javascript.
$jq_obj.toggleClass('activated');
Try this:
$jq_obj.attr('style','');
The direct answer to the question appears to be a simple "No".
You cannot tell JavaScript to style an object, and then at a later stage, ask JavaScript to give styling responsibility back to CSS.
However, another messy work-around is to re-draw the HTML inside the element which contains your flashing-object.
$jq_flashing_obj.parent().html(original_html_);
This has the slight overhead of having to wrap your flashing object inside a div or span element, to ensure that the parent element contains nothing but your flashing element.
<div class="multiple-children">
link 1
<span class="wrapper">Click me to watch me flash</span>
link 3
</div>
You then, of course, have to capture the outerHTML of your flashing-object before the flashing starts.
original_html_ = $jq_obj[0].outerHTML;
The resulting JavaScript is a little bit verbose, as you see here: http://jsfiddle.net/CgsLs/ . However, it does have the following benefits:
Reusable on all clickable elements regardles of CSS :hover and other messy styling
Can optionally define the flash-color of the element inside the JS
Independent of CSS, meaning that the code is in one file, and therefore more maintainable
There are down-sides too
Requires the use of JQuery on() function (as opposed to simple click event handler)
Anyhoo... it may not be a solution for everyone. In some cases (maybe even most cases) the class option might be simpler.
But this is one other possible method of tackling this inherent shortcoming in JavaScript/Browser technology.
I'm looking for a good way to model something keeping track of different overlapping CSS groups, similar to the following:
This is just a test sentence for an example.
(This is) just a (test sentence) for an example.
(This is just) a test (sentence for an example.)
Depending on what radio buttons are selected, I'd like to to enable different CSS styles for each of the groups in parenthesis. So for #2 for example, (This is) will always have a different default style, and will highlight red when moused over, but only when option 2 is selected. There will be a lot of different options, so I'd like to avoid having multiple copies of the source text if necessary.
The problem is that you can't have spans overlap. The only way I could thing of doing this is giving each word multiple css classes, like:
group2_word1,group3_word1, etc..., and then do a lot of javascript coding to simulate the behavior I want. This sounds like a terrible idea to me.
Is there a better way?
I remember a javascript library that was able to do word/letter based inline text styling but I do not remember the name. All I could find out by now is a lib called rangy. Maybe you want to give it a try. I will try to find the other lib too and report back if I find it.
Take a look at the CSSClassApplierModule that could do just what you are looking for.
I am working with an unnamed javascript plug-in.
During a certain operation of said plugin, under a specific circumstance, the plugin changes the style attributes of certain elements on my page.
Without delving into the plugin code itself (I want to avoid that if possible), is there a way to prevent the style attributes of those elements from being altered? I'm thinking perhaps a block somehow, or a way to lock the current style attribute to prevent changes?
I'm leaving the plugin unnamed because, while it would be great if someone actually could walk me though editing a plugin's code to meet my needs, I strongly doubt that's going to happen. And if there is a solution that fits my above perimeters, it would be much more useful and easier to implement.
Thanks in advance for any advice.
You could always add !important to the style rules that you wish to prevent the plugin from overriding (I'm assuming that it inserts inline styles.)
Like this (fiddle)
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.