Develop Reference

Different font-family for two different parts of the same string

.my-link::after {
content: "text \2661";
font-family: Arial,sans-serif;
}
Looking at the code above I need to set the font-family for the content of the pseudo element.That's wouldn't be a problem.
But I need to set the font-family for the text part to Arial and the font family for the \2661 part to Helvetica.
Basically two different font-families for different parts of the same string.
Is there any way to achieve this with only CSS or Sass?
Otherwise I can just think of setting the font-family for the whole content of the pseudo element via CSS to Arial and then write a JavaScript function, which goes through the string inside the content of the pseudo element, find the \2661 part and changes its font-family to Helvetica.
Any suggestions, idea, hints etc would be appreciated.

Use a combination of before & after to achieve this. Ensure that the pseudos are floating right and they'll end up looking like they're both appearing after the link.
https://jsfiddle.net/zxwkjmt3/
This works assuming your links are display:inline-block;
.my-link {
display: inline-block;
}
.my-link::before {
content: '\2661';
float: right;
font-family: Helvetica,sans-serif;
}
.my-link::after {
content: 'text';
float: right;
font-family: Arial,sans-serif;
}
Link
Edit: It's worth noting, avoid thinking of pseudo's as nested elements, they are not. They'll give with a little extra flexibility but they're limited in what you can do, if possible nesting actual elements gives you the most flexibility.

Is it possible to make your own custom input types in an HTML form?

I was wondering if I could make something like this: <input type="secure">. I want to know if it is possible to make a custom input type for my website.
I was going to use it to do things that you cannot normally do and style it with CSS and make it do what I want with JavaScript. Here is any example:
CSS
#import url("https://fonts.googleapis.com/css?family=Roboto");
input[type="secure"] {
background-color: #b5d1ff;
border: 0.5px solid #f4a460;
height: 1.6rem;
color: black;
padding-left: 0.4rem;
padding-right: 0.4rem;
width: 8.62rem;
font-family: 'Roboto', serif;
}
I haven't currently decided what I want to do with JavaScript but I think you get the idea.

No, that's what classes are for. Even if 'technically you can', you'd be breaking compatibility and HTML standards compliance.

You can create such an input, but unknown type value will be treated by browser as default text (logged to console). If you inspect DOM, you'll see type="secure":
const s = document.createElement('input');
s.setAttribute('type', 'secure');
document.body.appendChild(s);
console.log(s); // <input type="secure">
console.log('type: ', s.type); // type: "text"

Yes, you can do this, but you don't really make a new type of input, you're simply creating a type that the browser/rendering engine doesn't know about and will ignore. But the CSS should apply to it as you have it.
However, I would suggest that you simply add a class to the input instead, if this is simply for styling purposes.
<input class="my-input" ...>
input.my-input {
...
}

Find and Replace all instances of a word with jquery

I have an article with many instances of the word "color". I set up a button with the class .colour so that if you want you can click it and change the spelling from "color" to "colour" throughout the page. I've written some jQuery to do this but it only changes one instance of the word color but not all. You'd have to keep repeatedly clicking the button to change all of them.
$(document).ready(function(){
$(".colour").click(function(){
$("body").children().each(function() {
$(this).html($(this).html().replace("color","colour"));
});
})
})
Is there a way to repeatedly loop the script until it changes all instances? Also is it possible to make it so it is not case-sensitive? I'm new to javascript and jquery so might be a noob question. Thanks
Here's a codepen of it: http://codepen.io/patrickaltair/pen/vcdmy

Have your replace use a regex with a global replace.
Change:
$(this).html().replace("color","colour")
to:
$(this).html().replace(/color/g,"colour");
codepen example

I for one am not a big fan of using .html() in such cases, so
$(document).ready(function(){
$(".colour").click(function(){
$("body *").contents().each(function() {
if(this.nodeType==3){
this.nodeValue = this.nodeValue.replace(/color/g, 'colour')
}
});
})
})
h2.colour, h2.color{
font-size:16px;
max-width: 200px;
margin: 1em auto;
text-align: center;
padding:0.4em;
color: #999;
background-color: #ccc;
#include border-top-radius(5px);
#include border-bottom-radius(5px);
#include transition (all 0.3s ease-in-out);
}
h2.colour:hover, h2.color:hover{
color: #000;
background-color: #aaa;
}
p{
max-width: 400px;
margin: 1em auto;
margin-top: 5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="text">
Seasonal Colors: Some colors are more appropriate at certain times of year than others. Pastels are usually associated with spring/summer, while autumn colors are rust, <span style="color:brown">brown</span>, <span style="color:green">green</span>, and <span style="color:firebrick">burgundy</span>. Wearing rust in the summer, or light yellow in the fall looks out of place. That color's place in society. Second lower case color.
</p>
<h2 class="colour">Colour</h2>
2 problems I see when using .html() are
It will replace the dom which means any event handlers/jQuery data attached to those elements will be lost
It will replace attributes also which may not be what you want. Notice that I added some color to your text but it's not lost after replacing "color" with "colour"

find all and replace
$(this).html().split('color').join("colour");

Use this:
Global search in string
str = str.replace(/find/g,”replace”);
Or global and case-insensitive search in string
str = str.replace(/find/gi,”replace”);

Font size in html using css

in my project I need to right some big text, so in my css file I wrote:
#wrong_answer
{
color: red;
font-size: 30;
font-weight: bold;
}
and in my js file:
function wrong_answer()
{
$("body").append("<p id='wrong_answer'>Is not correct</p>");
};
and finaly I got red text, but very-very small and if I change font-size the size of text doesnt changes.
so question is why cant I change font-size?

30 what? 30px, 30pt, 30%, 30em? You have an invalid property value there.
When using jQuery you can specify just an integer but that's because jQuery treats integers like pixel values, e.g.:
//this will work
$([selection]).css({ fontSize : 30 });
Here are some great docs for font-size: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
UPDATE
You can use your developer tools (Chrome/Firefox/Safari for sure) to inspect the CSS associated with an element. When an invalid property value is encountered, these developer tools will alert you to the fact.

You need to specify the "unit of size" . . .
font-size: 30px;

The CSS declaration font-size: 30 is invalid and ignored by conforming browsers. If you mean pixels, you need to say that:
font-size: 30px

Read this page for better understanding about fonts.
http://www.w3schools.com/css/css_font.asp

Should be font-size: 30px or something similar. You need to specify the unit type.

What is the equivalent in CSS: add content to an element is `content: "text to add";` as remove content from an element is `?????`

There is a custom namespace named Item: on the main wiki that I edit, and the complaint is that every page inside that namespace shows up as Item:This_item -- Item:That_item -- Item:Foo_item.
I went surfing through the web and the CSS for that skin, and came across:
span#ca-nstab-main:before,
span#ca-nstab-user:before,
span#ca-nstab-wp:before {
content: "[ ";
}
span#ca-talk:before {
content: "& ";
}
span#ca-talk:after {
content: " ]";
}
which takes the namespace name "I'll use main as the example" and the corresponding talk page name and makes them show up as [ main & talk ] instead of main talk.
I was wondering if there was something similar that would allow me to display Item:Foo as just Foo stripping the "Item:" off. I know that the items listed on the category page are in div#mw-pages a tags.
Perhaps even an in-line way to use JavaScript to strip the first five characters off? I say "in-line" because $wgAllowUserJs is set to false on this wiki.
Edit:
The wiki-core parses it out as:
<style type="text/css">
/*<![CDATA[*/
a[title^="Item:"] {
font-family: 'Lucida Grande', Geneva, Arial, Verdana, monospace;
font-size: 12px;
display: inline-block;
overflow: hidden;
text-indent: -2.1em;
}
/*]]>*/
</style>
How do I make the quotes not be parsed, is there a trick? Can I use single quotes instead of double like on the font-family line?

You could try something like this if you're only able to use CSS. (http://jsfiddle.net/zPJHU/)
li a {
/* monospace fonts may be more consistant cross browsers */
font-family: "Courier New", monospace;
font-size: 1em;
display:inline-block;
overflow:hidden;
text-indent: -2.9em; /* may have to play with this value */
}
li a:hover{
font-size: 1.8em; /* just for demonstration of font-size increase */
}
Demo markup:
<p>Hover over links to increase font-size</p>
<ul>
<li>Item:Wicket</li>
<li>Item:Chewbacca</li>
<li>Item:Obi Wan Kenobi</li>
</ul>

dunno if that works, but you could prepand and append a span open / close tag at the right position to have the following:
<span class="hideme">Foo:</span>Bar
as i've said i haven't tried it, but i don't know another way and there might be no possibility to cut content by just using css. javascript should do it.