I know there are a couple of examples out there but I was not able to accomplish what I need. I need get the text from a field and transform it to an outlining view like the one in word. Can this be accomplished? Just anything would help. I need to create this on ServiceNow if you need more info but anything in CSS/Javascript/HTML can be transferred to it. Thanks!
In MS Word Outline view means outlining a selection : In css we can achieve that as following :
HTML :
<div>This is some text to be outlined</div>
CSS :
::selection {
color: white;
background: blue;
}
Related
I have the following HTML markup:
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
When I use the CSS selector h1 I get Hello World.
I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.
Is there any CSS selector which I can take only the text node? Specifically the World in this example?
The current state of CSS can't do this, check this link: W3C
The problem here is that the content you write to the screen doesn't show up in the DOM :P.
Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.
Check my fiddle and then check the DOM source: JSfiddle
Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.
Bit of a workaround:
h1 {
color: red;
}
h1 * {
color: lime;
}
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?
The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.
What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:
h1 {
background:black;
color:white;
}
h1 div.sponsor {
background:white;
color:black;
}
Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.
I don't believe it would be possible with pure CSS to style just "World" in this situation.
I also met same problem, where I can't touch the markup and have no control with js.
I needed to hide a text nodes in a div element, but the element to remain visible.
So here is my solution:
markup:
<div id="settings_signout_and_help">
<a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>
Home
Sign out
</div>
css:
#settings_signout_and_help {
font-size: 1px !important;
}
#settings_signout_and_help a {
font-size: 13px !important;
}
Hope this helps guys!
I had a similar problem where I had to remove the "World" text from html generated by a C# function.
I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.
I don't know how to do it with just CSS, but...
Using JQuery, you could select all the elements inside except the stuff inside its child element
$("h1:not(h1 > div)").css()
and put whatever CSS effect you want inside there.
I want to add a ¶ Plicrow sign (CSS entity 00B6) and the ↵ newline character (CSS entity 21B5) to my Froala Editor boxes so that my users can have some idea of what is going on. Other RT editors seem to provide this out of the box but, though I have found Froala to be an excellent and well-engineered product, this is missing.
I found this excellent SO answer visualize line-break and paragraph break with symbols in html similar to word. However, the cross-browser solution injects a span before the br's. I am looking at a contentEditable element housing a rich text editing plugin and I am wary that such an injection will mess up the content one way or another.
There is a working codepen here which uses the non-cross browser CSS only solution from the above question.
Sorry I can't provide a snippet as per my open question as follows...
Set up a SO snippet for Froala Editor.
This is what it looks like.
Question - how to get this behavior cross-browser with either a pure CSS solution or a js solution that will not screw up Froala.
I am hoping that this JSFiddle will help you resolve your issue.
https://jsfiddle.net/ba40L987/
#froala-editor-p
{
border:1px solid #0000ff;
}
p::after
{
content: '\00B6';
color: #6495ED;
opacity: 0.9
}
br {
content: " ";
}
br::after
{
content: '\21b5\000a';
color: #6495ED;
white-space: pre;
}
Kindly let me know if this helps.
I have a factory I call that returns some HTML. I would like to display this HTML in a section of my app, but I don't want its CSS to affect the site's, nor do I want the site's to affect it. It needs to be an iframe more or less but I feel like there's a better way to do it in Angular.
I essentially have something like this (Angular 1.2)
var promise = myFactory.getHtml();
getTemplate.then(function(data) {
$scope.mine.html = $sce.trustAsHtml(data.data);
});
I can display this HTML no problem, but it looks terrible inside of my app. How can I make it independent?
Select your element (say using an id selector) and use the following rule to reset all its properites
all: initial;
see https://developer.mozilla.org/en/docs/Web/CSS/all
and then apply the specific properties for your div. For example
CSS
div {
color: red;
background-color: blue;
}
#a {
all: initial;
color: blue;
}
HTML
<div id="a">asdf</div>
The fact that it is an angular template need not come into the picture.
I have a PHP page that is bringing in results from a Database and displaying them on a page. Certain images have a red 'ball' to the left of their name to dictate that they have more information to be seen.
For example, there is 30 on one page, 12 of which have a red ball. I need to be able to manipulate the positioning of the first ball and leave the others as they are.
<img class="premium-icon" src="../../images/ball.png" alt="Premium Listing" />
<a href="page.php?cmd=auth&src=book&id=968365&a=CVTYJH5kavEbhwSDs" target="_blank" alt="" title="">
<p><span style="">Result</span></p>
</a>
This is how they are layed out, each image has the same class and I'm unable to stop this.
I'm looking for a pure CSS solution, however a Javascript one would be appreciated.
Thankyou for any help.
EDIT
A little bit more information, all of this is brought in from a Database so I don't know if in the final product the first image will even have a premium-icon. This is all in case that image does, as that image needs to be moved. So, it will always be the first-child as I'm only trying to select the first ever premium-icon.
You can use the first-of-type pseudoclass: http://jsfiddle.net/WAG6e/.
Edit: As BoltClock mentions, :first-of-type ignores the class, so actually you'd need to build your HTML such that the first img is the one you want to style. Then, it's a matter of specifying the tag name:
img:first-of-type {
border: 1px solid red;
}
The pseudo-class that you are looking for is the :first-child. According to w3schools, it works on all major browsers, since you have a <!DOCTYPE> declared.
So, a sample CSS to your problem:
img.premium-icon:first-child {
margin-left: 10px;
}
Remember that if your img isn't the first child on the results container, then the desired pseudo-class will be :first-of-type, but it only works on IE9+.
But, as pointed by #ptriek, :first-of-type can't be used together with class names. Then, you would need to change your HTML.
Personally, what I always do is a class name like .first on the desired element, set on my serverside code, so my CSS will be simple and working on all browsers:
img.premium-icon.first {
...
}
What about img:first-child { ... } ?
$('.premium-icon:first')
use that
Assuming class "premium-icon" is reserved for the relevant pictures, this JS could help:
var a=document.getElementsByClassName("premium-icon");
if (a) if (a.length>0) {manipulate_image(a[0]);}
I am looking a multi columns combo box by using HTML + JavaScript only. Is there any example or library available? As I came across some solution, they are in ASP.NET, but not pure HTML + JavaScript.
Here is an example but it is implemented using Java Swing.
If jQuery is an option, here's a plugin that looks like it can deliver this:
Jquery Multi Column Selectbox
Flexbox is probably the best one I have ever used with jQuery, with paging and JSON support :
http://flexbox.codeplex.com/
It's a real combo box, as it displays the results by typing. It can be easily restyled through the CSS.
Eg. to modify the rows :
.ffb .content .row {
border-bottom: 1px solid #828790;
clear: both;
color: #000000;
height: 20px;
}
border-bottom may be removed to get rid of lines between rows.
http://dev.sencha.com/deploy/dev/examples/form/combos.html Shows ExtJS's combo box. Their combo box can be customized with template to be used for rendering each entry. All you'd need to do is to specify a template that contains a few spans with a set width.
If you're willing to use ExtJS (not free), write it in here, and I'll show you an example