I have a define statement that uses inline styling. When I try to call it with a sprintf function, it fails with Too Few Arguments. The define looks like this
define('TEXT_HEADING', '
<div style="float:left; width:60%; height:44px">
<p>Title Goes here</p>
<p>Show results: %s</p>
');
The call like this:
echo sprintf(TEXT_HEADING, 14);
If i remove the style statement, it works as expected. The original code is quite large and has many inline styles. Moving those to classes may allow it to work but isn't an option. is there a way to get this to work as shown?
You need to escape your literal percent sign, try replacing
width:60%
with
width:60%%
Related
I'm having an issue where an unordered list created by data-sly-list is adding whitespace that isn't represented in the DOM or by any class. If I manually code the list rather than letting data-sly-list handle it, the whitespace isn't added.
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<div data-sly-unwrap data-sly-list.slidesNode="${resource.listChildren}">
<div data-sly-unwrap data-sly-list.states="${slidesNode.listChildren}">
<li data-sly-test="${states.valueMap.flag}">
<sly data-sly-use.htmlpaths="${'htmlpaths.js' # thePath=states.valueMap.path}" data-sly-unwrap>
${states.valueMap.name}
</sly>
</li>
</div>
</div>
</ul>
</div>
If I hardcode the list like the following, there's no whitespace
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<li>Accessibility
</li>
<li>Accessibility
</li>
<li>Accessibility
</li>
<li>Accessibility
</li>
</ul>
</div>
There's also a htmlpaths.js involved:
"use strict";
use(function() {
var path = this.thePath;
var httpRegex = /http/;
var hashRegex = /#/;
if (path !== undefined && (httpRegex.test(path) === false && hashRegex.test(path) === false)){
path = path + '.html';
}
return {
href: path
}
});
The only difference I see is that its run through Sightly iterating. Is there any fix to this? In addition to listing I'm trying to break them into columns with the following CSS
li {
width:25%;
float:left;
display:inline;
}
This works perfectly fine on the hardcoded list, but on the Sightly iterated one it creates all kind of weird spacing issues that change based on screen width
This whitespace isn't accounted for at all in the DOM. I'm not sure what to do.
More weirdness:
If the margin top is set to -9 or higher, it looks like the above screenshot. But if its set to -10 or lower, it looks like this
It's like its a breakpoint, it goes from one extreme to the other on that one pixel change. No change otherwise. It's bizarre.
It's a little weird behavior in sightly, when you have some extra spaces in your HTML code, it will display with extra spaces in the HTML.
Try to remove all the spaces in the HTML as shown below and try it.
<div class="bullets"><ul class="columns unordered-list" id="stateList"><sly data-sly-list.slidesNode="${resource.listChildren}"><sly data-sly-list.states="${slidesNode.listChildren}"><li>${states.valueMap.name}</li></sly></sly></ul></div>
You can use HTML formatter in your IDE or online tools like below to format the HTML for a readable format
https://www.freeformatter.com/html-formatter.html.
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<sly data-sly-list.slidesNode="${resource.listChildren}">
<sly data-sly-list.states="${slidesNode.listChildren}">
<li>${states.valueMap.name}</li>
</sly>
</sly>
</ul>
</div>
This should get rid of the extra spaces in your HTML.
Also, it is best to use sightly tags wherever we need some conditions to check or embed them directly in the actual div tag or html tags instead of using data-sly-unwrap.
You can also use sling models to get the required data and check all the conditions(including appending html) in the backend and send the data just to display and avoid all the conditions in sightly.
Using data-sly-unwrap or a sly tag still adds an empty line in the generated HTML. Even though most browsers ignore those spaces, they might cause issues in some cases. If you want the HTL output to look similar to your hardcoded HTML, try placing the use statement and anchor tag in a single line as shown below.
<div class="bullets">
<ul class="columns unordered-list" id="stateList" data-sly-list.slidesNode="${resource.listChildren}">
<li data-sly-repeat.states="${slidesNode.listChildren}" data-sly-test="${states.valueMap.flag}"><sly data-sly-use.htmlpaths="${'htmlpaths.js' # thePath=states.valueMap.path}">${states.valueMap.name} </sly></li>
</ul>
</div>
Also, a few tips
The sly tag doesn't need a data-sly-unwrap. It is automatically
removed in the generated HTML.
data-sly-list can be added to the parent ul tag itself instead of introducing an extra div tag and then unwrapping it.
Use data-sly-repeat instead of data-sly-list wherever possible. I was able to bring down the generated HTML of one of our complex pages from 20k lines to 12k lines, as data-sly-repeat doesn't introduce additional white spaces.
Solution
The issue is on line 7 of your HTL template:
${states.valueMap.name}
You have a space at the end of the inner HTML of your tag ;)
Unrelated
Regarding your htmlpaths.js script, are you aware of Transformers in AEM? You can use them to implement a global Link Rewriter which will fix links when a page is rendered, much like your script does. You can see an example here: https://helpx.adobe.com/experience-manager/using/aem63_link_rewriter.html
If you decide to keep htmlpaths.js, you may want to review it because I'm afraid there might be some problems with it. Of course, I don't know your requirement so it's just a suggestion :)
I have a HTML like this in my QWebView
<div class='a' id='root'>
<div id='x'>...</div>
<p> ...
<p>
...
<div id='x2'>...</div>
<div>
<a href='go/xxxx'>go</a>
</div>
</div>
How do I select the a? I tried this selectores:
div[id='root'].a
div[id='root'] + a
but it didn't worked. Code:
QWebFrame* frame = webView->page()->mainFrame();
QWebElement button = frame->documentElement().findFirst("div[id='root'].a");
assert(!button.isNull()); // gets executed
Your selector is selecting the div with id='root' and class='a'. If you want to select the a tag inside of that div, you need to make your selector:
div[id='root'].a a
The additional 'a' at the end of the selector tells jquery to select the a inside of the div.
You can switch to using XPath 2.0 in Qt to have more expressive freedom, but then you need to process your HTML as XML.
To resolve, add a descendant selector1 for a. I.e., change this div[id='root'].a into this:
div[id=root].a a
As an alternative, if there's a bug in Qt, try:
div[id=root][class=a] a
Or (which is potentially a bit wider):
div[id~=root][class~=a] a
These last two are just alternatives in case for some reason the original fix to your code (adding the a descendant selector) didn't work.
The code snippets above doesn't use quoted strings, this is optional.
1 adding a was seen in stevenc4's answer), after my original (wrong) solution. Kudos to him :)
I will have users input text in a textbox to set as their identifier, however, they can only enter 1 line of text. I have no way of changing that.
I would like to add CSS that takes the string of text and edits a | character and changes it to a <br>
The string of text they will type will be something like this: 1234-5678-1234 | Jim
I want it to show up like this:
1234-5678-1234
Jim
I'm guessing the code might look like this:
p:contains('|') {code for an enter and float right}
I would be posting this as comment but I need 50 rep :)
Just this: What you are trying to do needs JS. You should give RegExp a try. There's not a way to do that using pure css.
It is not possible to select an element on the basis of its textual content, except for the special case of empty content. There was once (in 2001) a draft suggesting a :contains(...) selector, but this feature was removed as the draft progressed (to eventually become Selectors Level 3 recommendation).
Still less is there a way to select something inside an element based on its content.
Besides, adding <br> would not be possible. You cannot add tags or elements with CSS, only textual content via pseudo-elements.
Moreover, if the input is read in an input element, you cannot make its content displayed in two lines. If the user input is actually echoed an in different element, like p element, then it is programmatically copied there, so the question is why the change is made there. You can modify the content with JavaScript, and it would be rather simple to replace any | by <br> in the content of a p element.
You should give a try using <div contenteditable="true"></div>. You would be able to solve your issue, using JS by wrapping and adding tags as necessary. Also, textbox wont support multiline & formatting.
A good read for contenteditable attribute on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
I did some testing and created the following RegExp: Example Here
<input type="text" id="demo" value="123-456-7890 | John Doe" size="35">
<button onclick="myFunction()">Try it</button>
<p style="text-align:left;" id="number"></p>
<p style="text-align:right;" id="name"></p>
<script>
function myFunction() {
var str = document.getElementById("demo").value;
strnum = str.indexOf('|');
var name = str.slice(strnum+1);
var number = str.slice(0,strnum);
document.getElementById("number").innerHTML = number;
document.getElementById("name").innerHTML = name;
}
</script>
Is this what you want?
I have a <p>Example string</p> With some text inside. I want to use css to search for a word within that paragraph.
I know this is possible if you have e.g. All you have to do then is:
a[href*="test"]{}
But when I try to do this with my paragraph I can't seem to get it to work. I've tried:
[p*="string"]{}
p[*="string"]{}
The short answer is NO, this is not possible using CSS only, what you are using is element[attr=val] selector which only selects elements with that particular attribute with that specific values. You need to use jQuery or Javascript with a regex to track the pattern and apply styles to its elements.
On the other hand you can create custom attributes with a prefix of data- so for example you can do something like
<p data-custom="Holder Text">Want to change this</p>
<p data-custom="Holder Text">Want to change this</p>
<p data-custom="Holder Text 2">Dont Touch This</p>
p[data-custom="Holder Text"] {
color: red;
}
Demo
But again, this won't make sense here, you can simply assign the classes if you are aware what elements need to be changed.
You cannot this using CSS only, however you can check this blog post about how to achieve this using jQuery.
Basically you should use :contains selector:
$("p:contains('John')")
Can I define a class name on paragraph using Markdown? If so, how?
Dupe: How do I set an HTML class attribute in Markdown?
Natively? No. But...
No, Markdown's syntax can't. You can set ID values with Markdown Extra through.
You can use regular HTML if you like, and add the attribute markdown="1" to continue markdown-conversion within the HTML element. This requires Markdown Extra though.
<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>
Possible Solution: (Untested and intended for <blockquote>)
I found the following online:
Function
function _DoBlockQuotes_callback($matches) {
...cut...
//add id and class details...
$id = $class = '';
if(preg_match_all('/\{(?:([#.][-_:a-zA-Z0-9 ]+)+)\}/',$bq,$matches)) {
foreach ($matches[1] as $match) {
if($match[0]=='#') $type = 'id';
else $type = 'class';
${$type} = ' '.$type.'="'.trim($match,'.# ').'"';
}
foreach ($matches[0] as $match) {
$bq = str_replace($match,'',$bq);
}
}
return _HashBlock(
"<blockquote{$id}{$class}>\n$bq\n</blockquote>"
) . "\n\n";
}
Markdown
>{.className}{#id}This is the blockquote
Result
<blockquote id="id" class="className">
<p>This is the blockquote</p>
</blockquote>
Raw HTML is actually perfectly valid in markdown. For instance:
Normal *markdown* paragraph.
<p class="myclass">This paragraph has a class "myclass"</p>
Just make sure the HTML is not inside a code block.
If your environment is JavaScript, use markdown-it along with the plugin markdown-it-attrs:
const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);
const src = 'paragraph {.className #id and=attributes}';
// render
let res = md.render(src);
console.log(res);
Output
<p class="className" id="id" and="attributes">paragraph</p>
jsfiddle
Note: Be aware of the security aspect when allowing attributes in your markdown!
Disclaimer, I'm the author of markdown-it-attrs.
If your flavour of markdown is kramdown, then you can set css class like this:
{:.nameofclass}
paragraph is here
Then in you css file, you set the css like this:
.nameofclass{
color: #000;
}
Markdown should have this capability, but it doesn't. Instead, you're stuck with language-specific Markdown supersets:
PHP: Markdown Extra
Ruby: Kramdown, Maruku
But if you need to abide by true Markdown syntax, you're stuck with inserting raw HTML, which is less ideal.
Here is a working example for kramdown following #Yarin's answer.
A simple paragraph with a class attribute.
{:.yourClass}
Reference: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists
As mentioned above markdown itself leaves you hanging on this. However, depending on the implementation there are some workarounds:
At least one version of MD considers <div> to be a block level tag but <DIV> is just text. All broswers however are case insensitive. This allows you to keep the syntax simplicity of MD, at the cost of adding div container tags.
So the following is a workaround:
<DIV class=foo>
Paragraphs here inherit class foo from above.
</div>
The downside of this is that the output code has <p> tags wrapping the <div> lines (both of them, the first because it's not and the second because it doesn't match. No browser fusses about this that I've found, but the code won't validate. MD tends to put in spare <p> tags anyway.
Several versions of markdown implement the convention <tag markdown="1"> in which case MD will do the normal processing inside the tag. The above example becomes:
<div markdown="1" class=foo>
Paragraphs here inherit class foo from above.
</div>
The current version of Fletcher's MultiMarkdown allows attributes to follow the link if using referenced links.
In slim markdown use this:
markdown:
{:.cool-heading}
#Some Title
Translates to:
<h1 class="cool-heading">Some Title</h1>
It should also be mentioned that <span> tags allow inside them -- block-level items negate MD natively inside them unless you configure them not to do so, but in-line styles natively allow MD within them. As such, I often do something akin to...
This is a superfluous paragraph thing.
<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>
And thus with that I conclude.
I am not 100% sure if this is universal but seems to be the case in all MD editors I've used.
If you just need a selector for Javascript purposes (like I did), you might just want to use a href attribute instead of a class or id:
Just do this:
Link
Markdown will not ignore or remove the href attribute like it does with classes and ids.
So in your Javascript or jQuery you can then do:
$('a[href$="foo"]').click(function(event) {
... do your thing ...
event.preventDefault();
});
At least this works in my version of Markdown...