I am getting some external html page where all the data is coming in lowercase. with css, i tried to capitalize the first intial of the complete label tag but i am unable to do it, it makes complete uppercase like this:
.fontmodal {
text-transform:capitalize !important;
}
but that did not worked...
<table><fieldset><div><label>DATA</label></div></fieldset></table> - This is the current Structure
Now i am trying to same in jquery, i am not sure what and how to proceed.
Here is my code what i am trying:
$('#Container2').find("table>label").css(textTransform,'capitalize');
See below:
label {
text-transform: lowercase;
}
div::first-letter {
text-transform: uppercase;
}
<table>
<fieldset>
<div>
<label>DATA</label>
</div>
</fieldset>
</table>
If you can't change the HTML and need to apply the capital letter on the first letter, you need to change the default display property of the <label> tag :
:first-letter :
has only an effect on elements with a display value of block,
inline-block, table-cell, list-item or table-caption. In all other
cases, ::first-letter has no effect. (source MDN)
label {
display: inline-block;
text-transform: lowercase;
}
label::first-letter {
text-transform: capitalize;
}
<table>
<fieldset>
<div>
<label>DATA</label>
</div>
</fieldset>
</table>
You simplify it and do something like below.
$(document ).ready(function() {
$("label").addClass("capitalizer"); // Adjust specificity as needed
});
.capitalizer {
font-weight: bold;
font-size: 72px;
display: inline-block;
color: red;
}
.capitalizer::first-letter {
text-transform: capitalize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>data</label>
</div>
Note: I prefer .addClass because .CSS adds inline css to your HTML and that's not advisable.
You can achieve this using the CSSS selector :first-letter.
The subtly I have found is that it doesn't appear to be supported on the <label/> tag (didn't work in my demo code, anyhow)
But we can get round that:
label {
text-transform: lowercase;
}
div:first-child:first-letter {
text-transform: uppercase;
color: red;
}
DEMO: http://jsfiddle.net/30trmm3w/1
I don't get what's wrong a simple CSS rule should do the trick :
#Container2 label {
text-transform: capitalize;
}
Related
I am trying to create a placeholder in span element, and when user focus on the text the placeholder disappear and user are able to type something on it.
If you run the code below in other browser such as Chrome and Edge, the placeholder disappear correctly when you focus on the text, however on Firefox, you can't seems to focus or edit the text. I would like to know what's the difference between Firefox browser and others, and would also prefer if this can be resolve via CSS instead of Javascript.
HTML:
<body contenteditable="true">
<span style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;" data-runningid="1.1" data-placeholder="Enter new paragraph here..." class="newParagraphPlaceholder" data-mce-style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;">
</span>
</body>
CSS:
.newParagraphPlaceholder {
display: inline-block;
}
.newParagraphPlaceholder:empty::before {
content: attr(data-placeholder);
color: grey;
}
Kindly refer to the demo here: https://jsfiddle.net/6L8gyfk7/2/.
Take note that there's a body with attribute contenteditable='true' tag wrapping the span tag that I need to preserve.
Because in Mozilla the -moz-user-focus is set to none by default, you can check this by going to console --> computed
You can fix this by
-moz-user-focus: select-after;
Something I don't get from your code though is why you're using so much styling within your ? You get the same result if you do
<span class="newParagraphPlaceholder"data-runningid="1.1" data-placeholder="Enter new paragraph here..."></span>
.newParagraphPlaceholder {
display: inline-block;
font-size: 16pt;
font-weight: bold;
}
Might be just me though, but with a long batch of code you're into a big struggle to adjust certain areas because it isn't properly written down in CSS.
I removed contenteditable from body to span and it woked and if you want to check browser support for css Property you can check here
Codepen Link
.newParagraphPlaceholder {
display: inline-block;
outline: none
}
.newParagraphPlaceholder:empty::before {
content: attr(data-placeholder);
color: grey;
}
<!-- html is the same -->
<body >
<span contenteditable="true" style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;" data-runningid="1.1" data-placeholder="Enter new paragraph here..." class="newParagraphPlaceholder" data-mce-style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold; color: #000; "></span>
</body>
Not sure if anyone has come across this. I'm using PrismJS syntax highlighter to highlight code. Application is written in Reactjs and what I'm trying to do is inside a WYSIWYG editor I'm wrapping user selected text with pre + code when user wants to insert code block. PrismJS seems to tokenize elements correctly as you would expect:
But as you can probably see from the image above, everything is put into a single line. Rather then nice code block:
I'm not sure what's wrong, using css from prismjs site:
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
#media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #dd4a68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
Here is outputted html:
EDIT:
If adding word-wrap: pre-wrap this is the outcome:
I had a similar issue when initializing the element manually. I stumbled upon this discussion, which had a fix that worked for me: https://github.com/PrismJS/prism/issues/1764
HTML - Load script with flag data-manual:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js" data-manual></script>
JS - Add the following hook:
Prism.hooks.add("before-highlight", function (env) {
env.code = env.element.innerText;
});
Prism.highlightElement(code);
Working example:
https://codepen.io/Ukmasmu/pen/xxZLwxG?editors=1010
Try to update the CSS file with:
white-space: pre-wrap
https://github.com/PrismJS/prism/issues/1237
In case this is helpful for anyone else, I have a textarea that updates a code block as you type, and this worked for me:
<textarea onkeyup="this.onchange();" onchange="document.getElementById('query-highlighted').textContent = this.value; Prism.highlightAll();"></textarea>
<pre><code class="language-sql" id="query-highlighted"></code></pre>
Namely, I used .textContent = instead of .innerText = (the latter didn't preserve the line breaks as expected).
I was aided by Sever van Snugg's answer and the issue he linked.
1. Activate normalize whitespace plugin
I suggest you activate normalize whitespace plugin and set the break-lines property instead of manipulating prism.css file to using white-space: pre-wrap like this:
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
'break-lines': 60, //max number of characters in each line before break
});
I'm using the above approach in my blog, and it works like a charm. You can adjust the break-lines value according to your preferences of course.
2. Insert a line break tag <br> to break a line at will
Now that you set the break-line property after a certain maximum number of characters, you probably want to break some lines at will for cleaner code. To do so you need to insert a <br> tag where you want to have a break line.
NOTE: if you're using an html parser to parse dynamic content with prism
If you're using a parser to parse you dynamically generated html code as a string (from a database for example) and prims is not parsing your <br> tags you'll have to use before-sanity-check prism hook like this:
Prism.hooks.add('before-sanity-check', function (env) {
env.element.innerHTML = env.element.innerHTML.replace(/<br>/g, '\n');
env.code = env.element.textContent;
});
before highlighting, what the above code does is replacing <br> tags with \n since prism can't parse <br> as a line break.
Similar to the answer by Sever van Snugg, I use the following solution where the forEach loop highlights all the code nodes according to the style rules of the Prism CSS stylesheet used (because I have several code tags on a single page). I locate these scripts in the bottom of my HTML body:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js" data-manual></script>
<script>
Prism.hooks.add("before-highlight", function (env) {
env.code = env.element.innerText;
});
code = document.getElementsByTagName('code');
Array.from(code).forEach(el => { Prism.highlightElement(el) });
</script>
I tried to mixed Markdown and Prismjs the trick is to replace '\n' with '\r\n' to keep breaklines.
from bs4 import BeautifulSoup
...
code_tag = soup.new_tag('code class="lang-%s"' % lang)
code_tag.string = code.string.replace('\n','\r\n')
code.replaceWith(code_tag)
I have a variable which has two classes. I am wanting to remove the small class before the html() pushes the div to DOM.
As of right now, the div is rendering with the small class. I am wanting that to be removed.
I have tried switching the order of the removeClass to place it before the html(), but that didn't work.
$('#review').removeClass('small').html(prev);
Does anyone know how I can do this?
var prev = "<div class='big small'>Hello</div>";
$('#review').html(prev).removeClass('small');
.big {
color: red;
font-size: 2rem;
}
.small {
color: blue;
font-size: 1.1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>
UPDATE
I tried to make my question really basic for simplicity, but it turns out, the array I had in my actual code made this more complex.
$('body').on('change', '.option-check', function() {
var calSelectionImg = [];
$('.calendar-check:checked').each(function() {
calSelectionImg.push($(this).data('calendar-img'));
});
$('#pg-img-review').html(calSelectionImg);
});
.cal-selected-img {
color: red;
font-size: 2rem;
}
.small {
color: blue;
font-size: 1.1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Hello</div>">
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Goodbye</div>">
<div id="pg-img-review" class="margin15"></div>
You're modifying #review, not your new code. So, I added appendTo. It's a minor restructure, but it fixes the issues with minimal complications.
var prev = "<div class='big small'>Hello</div>";
$(prev).removeClass('small').appendTo("#review");
.big {
color: red;
font-size: 2rem;
}
.small {
color: blue;
font-size: 1.1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>
In the example you've given, the HTML in prev is just a string. You need to parse it into a DOM object before you can call a function such as .removeClass() on it.
jQuery provides a number of options for parsing HTML elements, but as a vanilla JS over jQuery proponent, I often favour this particular approach:
var tempDiv = document.createElement('div');
tempDiv.innerHtml = "<p class='small'>The string of HTML</p>";
var parsedElement = tempDiv.firstChild;
I can then call the jQuery method parsedElement.removeClass("small") or Vanilla JS parsedElement.classList.remove("small") to successfully remove the class.
var prev = "<div class='big small'>Hello</div>";
$('#review').html(prev).find('.small').removeClass('small');
.big {
color: red;
font-size: 2rem;
}
.small {
color: blue;
font-size: 1.1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>
You may need this:
var prev = "<div class='big small'>Hello</div>";
$('#review').html(prev);
$(".big").removeClass('small');
Add your DIV first, and then remove the class you don't need later.
Don't worry
$(".big").removeClass('small');
would cause any problem. If there is no CLASS [small], the DOM will ignore the js.
That's all.O(∩_∩)O~
I am trying to get the pre tag to break on the line breaks like how I have it displayed. Instead its putting the vv section on the first, not breaking in the middle of the comments comment section, etc. Is there some CSS for this that might be helpful?
.testingZone {
margin-left: 20px;
}
.testingZone a {
color: blue;
}
.testingZone a:hover {
color: gold;
}
.testingZone pre {
font-family: monospace;
white-space: normal;
}
<div class="testingZone">
<pre>
<!-- Note: comment comment comment.
Comment Comment/Comment, more comments "comment"-->
<vv:aaa vv:bbb="sss" vv:ccc="SectionA;SectionB;SectionC=SectionD;SectionE=SectionF.SectionG.SectionH;,SectionI=SectionJ;SectionK=SectionL;SectionM=SectionN;SectionO=SectionP.SectionQ.SectionR;SectionS=/;"/>
<vv:aaa vv:bbb="iii" vv:ccc="\SectionT\SectionU\_SectionV,\SectionW\SectionX,\SectionY\_SectionZ"/>
</pre>
</div>
Instead of white-space: normal;, use white-space: pre-line;. This allows runs of white-space to be combined within a line, but doesn't allow lines to be merged. This will merge all the leading spaces on each line into a single space.
.testingZone {
margin-left: 20px;
}
.testingZone pre {
font-family: monospace;
white-space: pre-line;
}
<div class="testingZone">
<pre>
<!-- Note: comment comment comment.
Comment Comment/Comment, more comments "comment"-->
<vv:aaa vv:bbb="sss" vv:ccc="SectionA;SectionB;SectionC=SectionD;SectionE=SectionF.SectionG.SectionH;,SectionI=SectionJ;SectionK=SectionL;SectionM=SectionN;SectionO=SectionP.SectionQ.SectionR;SectionS=/;"/>
<vv:aaa vv:bbb="iii" vv:ccc="\SectionT\SectionU\_SectionV,\SectionW\SectionX,\SectionY\_SectionZ"/>
</pre>
</div>
There's no way to totally ignore all the white-space at the beginning of each line. See MDN for descriptions of all the white-space styles.
You need to remove the white-space rule on the .testingZone pre tag or set it to the default for <pre> tags, which is 'pre'.
So basically: Change
.testingZone pre {
font-family: monospace;
white-space: normal;
}
to
.testingZone pre {
font-family: monospace;
}
or to
.testingZone pre {
font-family: monospace;
white-space: pre;
}
This my element that I want to select in jquery
.box3 span.info:before{
content:"15 vacatures";
margin:0;
padding:0 0 28px 0;
font-family: 'MaisonNeueMono';
letter-spacing: normal;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
position:relative;
}
I tried this but it just doesn't select it, also doesn't work with just putting ".info":
So how do I select this element?
$(".box3 span.info:before").hover(function(){
$(".box3 h1").fadeOut();
});
Remove the :before,it is just the css part , it is not rendered with element, it is just use to add css before the element.
you just need to write this:
$(".box3 span.info").hover(function(){
$(".box3 h1").fadeOut();
});
The pseudo element before is not part of the selector, just leave it out:
$(".box3 span.info").hover(function(){
$(".box3 h1").fadeOut();
});
Additionally you may want to separate the style & content insertion like this:
.box3 span.info {
margin:0;
padding:0 0 28px 0;
font-family: 'MaisonNeueMono';
letter-spacing: normal;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
position:relative;
}
.box3 span.info::before{
content:"15 vacatures";
}
You do not need psuedo selector here. you need to use:
$(".box3 span.info").hover(function(){
$(this).closest('.box3').find('h1').fadeOut();
});
You can't select pseudoelements with jQuery as those are not real DOM objects thus are not existing in jQuery context.
That said your :before pseudoelement can't be selected with jQuery.
If you need more explanation search on SO, example:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery