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)
Related
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.
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 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