I'm working on a browser script that scans a page for keywords, highlights them, and when the user hovers over them - creates a tooltip that gets filled using AJAX and PHP. The only problem I've run into is that the CSS of the website the tooltips are displayed on is interfering with the CSS of the tooltip content.
The tooltip uses an <img>, <p> and <table> with <tr> and <td>. My PHP file echoes these elements back with ID's which I have styled in my CSS file. My CSS displays properly on some sites like Wikipedia, but others mess up the padding/margins/alignment. For example, certain websites may align <td> center, while I would like it aligned left. I have already added "!important" to many of the ID's used.
Question: How do I keep a website's CSS from interfering with the styles of my tooltip?
One thing you could do is to use a id for your tooltip container.
You just need to keep in mind that id have to be unique. So you must not have two tooltips on your page.
<div id="my-tooltip-2986234">
the content of the tooltip
</div>
Then for your css file your create something like this:
#my-tooltip-2986234 * {
/*reset all style properties here (you can take this of a css reset script)*/
}
Because id a have a higher weight then rules without an id this should overwrite all stylings of the foreign page inside of your tooltip container.
You will also need to prefix all your rules for the tooltip with that id.
#my-tooltip-2986234 a {
/*style for your a*/
}
You indeed could still have problems with !important rules of the foreign site. But creating your styling code that way would minimize the conflicts. Your can still think of adding !important rules to your rules. But at least for the things I created prefixing the rules with an id was sufficient.
Another solution - but not as elegant as the one above - is to create an iframe container where you write your content to. That way you would have complete sandboxing of your css rules. But because I didn't use iframe for a long time I don't know right now where the pitfalls in the various browsers are (You need to create an iframe without a src, because of cross domain policies, which used to cause problems in some browsers).
Related
I'm writing a source code highlighter, and I'd like to highlight and make clickable a non-standard piece of code area.
For example, I'd like all the colored areas to be separately clickable.
As I understand it, implementing this with CSS is impossible. Though I can dynamically assign equal CSS classes to each span which belongs to same area (and modifying those via class selector). But then I have a problem, that each of those spans must be clickable. So I should also attach JS events to each span.
Overall this sounds like a zillion of spans with zillion of events, am I correct? Is there better solution?
I am building a web app where - as part of the UI - I have an occasional, temporary need for some extra elements in the DOM, which are therefore dynamically inserted. When they have served their purpose, they are hidden and then for good measure removed using jQuery's .remove().
For some reason, removing the elements creates a jump and a relocation of the viewport contents (reside within an iFrame) as if it is re-rendered despite the fact that the elements are hidden and therefore should not have any influence on the rendering of the content.
I have tried to remove the elements from the console instead of in my script and the jump still occurs. I have also seen a similar effect in Firefox.
I might end up keeping the elements if there is no solution, but if any of you have experience with a similar scenario and know of a solution, I would be very interested to hear it. Thank you very much.
UPDATE
After much scrutiny, I have finally pinned down the cause of this "error". It originates at the beginning of the content, which starts out with a h1 headline. The headlines have been styled with a top padding, except for the first child, where it is set to zero with a h1:first-child rule.
Now, the dynamic elements are inserted at various locations including before the first headline. Apparently, the dynamic element now becomes the first-child even though it is not rendered and therefore the general padding rule for the headlines becomes active and the headline receives a top padding. This causes it to jump up when the dynamic element is removed and it again gets a top padding of zero.
So I know the cause of this but I am not sure how to best solve the problem since the content as well as the styling is dynamic - ie. I do not control it and therefore can not simply replace the first-child rule with something more suitable.
IMHO it is completely unintuitive that the first-child rule is affected by elements that should be taken out of the document flow with display:none. It should only take "visible" elements into account.
I am aware of the fact that layout and function of a site should be strictly separated. Layout should be done with CSS and functions of the site, like expand mobile menu on click, should be done with JS.
Reference:1. & 2.
What I often see happening for responsive layouts is having column classes for the various media queries, where just the class name is different, however the width values are identical.
This then leads to HTML in the form of
<div class="container small-query-columns-4 medium-query-columns-6 large-query-columns-12><p>Responsive paragraph..</p></div>.
Would it be acceptable to instead of always defining the same width for columns for various media queries to just make a minimal CSS grid, where the column classes widths are defined once and then dynamically pass those per media query with Enquire?
I know this ruins the above given separation from layout (CSS) and function (JS), though it would mean much cleaner HTML, and this per each media query plus much less CSS as well. Enquire also only calls once per media query so the hit on the amount to download would also be much less with a minimal CSS file. Yes, of course, this means the site is JS depended.
That's not bad idea but I think that it is not good idea too. I had thought about something similar few weeks ago. I wanted to make CSS which will be compiled in browser via JS in few loops and then appended to head section. But after deep thinking I decided to not doing that.
I know that you can make fallbacks and some fancy stuff so it works in every browser with or without js, but I have looked at my grid. It takes less than 10KB. It's interesting idea, but it isn't worh so much work as it will take. Keep your HTML organised and you won't run into issue with too many css classes. You have to let someone who use your "framework" do define widths at certain breakpoints. Easiest thing to do is just write a class name.
Consider that when you use for example bootstrap and want to have 12 columns on mobile, you just don't define it and it automatically falls into that width. Many times it just enough to define max 2 breakpoints with css classes.
When I think about enquirejs I think that it can be used for hiding sliders on mobile for example. When you just display: none it still running and changing classes. If you have something similiar what should be removed because mobile is not good environment for running something, you can disable it by using enquire. Another example is mansory grid, which you can start and disable via enquirejs.
Basically you can use it if you have something already js-depended and want to customize it on diffrent screens, or give diffrent behavior, because if you just set something on window load or document load, you have an issue with someone who resizes window. Here you can use it.
I'm working on a CMS system where the user has the ability to select between a number of different templates for their site. When they select from the list of templates on the left I want the middle of the page to show the preview of the template and the right side to show a property inspector for manipulating things like colors, font sizes, sections, etc. Clicking on an element inside the preview changes what is focused and thus changes the property inspector.
The big challenge is that the templates are designed by 3rd party designers and the CSS is designed with the expectation that there is no other CSS (like the CSS for the CMS). I might force them to restrict everything their design to work on any page and to always have a top level DIV that I can just inject into the page.
I could IFRAME it but that is not ideal because DOM manipulation becomes more complicated.
Ultimately I have full control over the template structure and how they are made but I'd like to keep it as simple as possible for designers.
What's the best way to go about structuring this kind of setup?
Given the requirements of no iframe (which would be the right way), I see 2 solutions:
Put the template in a div with a certain class/id and preprocess the CSS to prefix every selector with that class.
Use the Shadow DOM, but then you would only target Chrome.
At the moment I've been using the css line-height property in the parent div to increase the line spacing, and this works fine for the text, and even <input> elements. The only problem is any custom controls like the JQuery spinner or Chosen will try to fill up this entire line height (as they're set to display:inline-block)
Currently it appears like this:
How do I get these widgets to appear the same height as the text? I mean the default <input> elements can, so surely it's possible?
Find the element class/id and on your own style.css you can customize it's property with !important But use of !important is not considered as a good practice. (But if there's issue on one-or-two places, i think that is Ok)
Another way can be, why not making changes on jquery ui css that you are linked to.