Insert script via CSS content property - css

Is it possible to insert script tag using content property of CSS?
The example below inserts plain text instead of a html tag
#someDiv:before {
content:"<script>$(function(){ console.log('test');});</script>";
}

Content inserted with the content property will only ever be plain text. This is to prevent recursion. It also helps by preventing people from doing crazy things like inserting script elements with CSS.

Related

Hide content in Outlook with external CSS

I inherited a WordPress plugin that sends an RSS feed of content to Mailchimp to generate an email. This code (which I cannot find the source) is adding an extra logo image which is throwing off the formatting. I know I should add something like
<!--[if !mso 9]><!-->
to the code if I want to hide it in Outlook, but I cannot find the source to add this. I can only add external CSS. The usual display: none works in the other email platforms. Any advice on how to remove this extra image instance in Outlook via external CSS?
The code you provided is an HTML conditional comment. It can only work embedded in the HTML code. If you want to hide an element from an external stylesheet in the Outlooks on Windows (from 2007 and above), you can use the mso-hide:all property. It’s basically a display:none but for Word’s rendering engine. Although, contrary to display:none, this doesn’t always inherit to <table> children elements. In that case you could use a double selector like the following.
.your-element,
.your-element table {
mso-hide: all;
}

Flex s:text htmltext missing out/cutting the full html text

I am trying to implement htmlText for a text component as the returned string is in html format (with the html tags etc). If I put a text=.... i get the full text, but with the tags (which i want converted to html). So i use htmlText=.... and it formats it fine, but cuts half the text from the variable. The text im supposed to get back has tons of html tags, and maybe its cutting it somewhere because of the tag its not able to escape... How do i fix this? Any solutions?
Not all tags are supported in the htmlText property. Here's a list of the tags that can be handled :
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html#htmlText
An example though would make debugging easier :)

Drupal CKEditor HTML tags

When I apply bold CKEditor wraps the text in tags. When I select italic it puts tags. My default input format is Full HTML (also when creating content). In the Wysiwyg profiles I set CKEditor for Full HTML input. In the configuration of CKEditor, under Cleanup and output I selected Convert tags to styles.
This should use inline CSS, but it doesn't. It puts HTML that don't change the text. It stays like it's not formatted. What's wrong?
Filtered HTML should force it to display the content correctly using the html tags.

AJAX and CSS vs W3C (loading external content inside a div and <style>)

I'm having problems with the content loaded with AJAX inside a DIV.
I need custom CSS for the loaded content, but using <style> tag inside the div (or anywhere outside the <head>) does not respect the W3C standards.
Even more, in IE8 using <style> inside the div is not working as expected.
How can we solve this situation?
You could have the AJAX response modify the the contents of the <head> tag and add a new style tag. Your response would have two parts to it, the HTML and the CSS. The CSS should be added to the document before the HTML to ensure it is used.
Check out this post for adding CSS to the head: i prepend the css to the end of head tag
I'm assuming you have already been able to load something with AJAX into your page. Just convert your response to a JSON response with two parts, the CSS and the HTML. The JSON Spec might help too. You will need to escape any HTML or CSS that you send as a response.

Real Nested CSS? (Not Selector)

I am first time poster. A question. How do a make a css declaration that only works within one DIV, but, not overwriting the global css? I want to jQuery loading a page into a DIV, however, the page's CSS changed my own site's CSS. I don't want that. Also I can't just take out CSS because I want them looked as intended from the source.
Basically we are going to load an external HTML with its CSS style applied locally ONLY without it changing the style elsewhere. The external HTML is not using inline CSS since we don't have control over it. They are applied to class values or even all element type. We don't want their CSS declaration modifying our own existing CSS outside of the DIV container.
Is this even possible?
Thank You?
If I understand your question correct you would place an id in the div <div id="mystyle"> content </div>. In your CSS you would write #mystyle p { color:red; }. which have no effect on global paragraphs outside the "mystyle" div.
I guess you are asking how to apply an external stylesheet to just one div. There is no way to do this using just CSS. You might be able to emulate this using JavaScript, but it's going to take quite a bit of work. Here's an outline of how you might go about doing this:
Grab the stylesheet filename from the loaded HTML and then get the contents of the CSS file via AJAX.
Somehow parse the CSS and prefix your div ID to each CSS rule, so that it applies only within your div.
Inject the modified stylesheet as inline text into the loaded HTML.
Steps 1 and 3 are relatively simple, step 2 requires a CSS parser written in JavaScript. (There seems to be one available here although there is no documentation.)

Resources