I wonder if there is any way to parse class name and interpolate part of it to mixin.
Example:
HTML
<div class="offset-37"></div>
<div class="offset-69"></div>
And Stylus (something like this):
offset-{#offset} {
left: #offset + '%';
}
And in the end I will have a first div with left offset of 37% and second with offset of 69%.
Thank you!
Stylus doesn't know anything about html structure. So, it is impossible.
Related
I'm new to SFCC and I was wondering what is the best practices with writing conditional CSS classes in the ISML template. I couldn't find anything in the documentation specifically for element parameters but I have seen some code which works but doesn't look right to me.
<div class="foo <isif condition="${bar}">baz</isif>"></div>
Is this the right way to conditionally add a CSS class?
This is the documentation I've found for isif
https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp?topic=%2Fcom.demandware.dochelp%2FScriptProgramming%2FDemandwareJavaScriptExpressionsinISML.html
This variant is a little bit shorter
<div class="foo ${bar ? 'baz' : 'someting else'}></div>
From my understanding you first need to write the isml condition and inside it the html div, something like this:
<isif condition="${bar}">
<div class="foo">baz</div>
</isif>">
I'm only a couple months new to SFF so forgive me if I'm wrong.
I'm using Stylus' interpolation like so:
for num in (1..12)
.foot:nth-of-type({num})
left 8.33% * num
&:after
content \'{num}\' // ??? This isn't working
The part that's getting me is the content property. It's supposed to set to 1-12 respectively matching the nth-of-type. But no matter what I try it seems to be blank. Is this possible? If so, what am I doing wrong?
It appears that putting num in () fixes the issue:
content \'(num)\'
Is there a way to append a property from this.props to an HTML element's attribute that already exists, and to do it inline (in the name of code-simplicity), without any variables/addons?
Something like this (but obviously this one and few other ways that I tried to append didn't work for me):
render() {
return (
<div className="entity" id="ent"+{this.props.index}>bla</div>
);
}
I do know that I could declare a variable before, append the prop to it and then use it as the attribute, but I have many lines like this and it will make my code bigger than I wanted it to be.
Thanks.
You can concatenate attributes as you usually do with strings:
<div className="entity" id={"ent" + this.props.index}>bla</div>
or (es6 syntax)
<div className="entity" id={`ent${this.props.index}`}>bla</div>
id={"ent" + this.props.index}
Or using interpolation instead of string concatenation.
id={`ent${this.props.index}`}
I want to set an image dynamically having the path of the image setted in a scope. The problem is that this is seen as a text, the value of selectedEvent.eventBannerImage is shown correctly, in my case the final url looks something like this:
background-image: url('/mydomain/images/banners\444b6e91-30fe-478b-a3d3-7984f0d35e69__1253402730_2873_full-269x300.jpg'), but it doesn't appear like a link as I need but just as a text. The image isn't shown.
<div style="background-image:
url('${pageContext.request.contextPath}/images/{{selectedEvent.eventBannerImage}}')">
please see here: http://jsbin.com/zehawu/1/edit
ng-style="{'background-image':
'url({{pageContext.request.contextPath}}/images/{{selectedEvent.eventBannerImage}})'}"
You will need to use a directive for the binding -- probably ng-style. Unfortunately, ng-style takes an expression, not a string, so you can't use concatenation inside of it.
<div ng-style="ctrl.bgImage">
// In the controller:
this.bgImage = {"background-image":
"url(" + this.pageContext.request.contextPath
+ "/images/" + this.selectedEvent.eventBannerImage + ")"
};
I'm trying to display the character count of various divs I have on a page.
I have this:
<div class="myText">Here is some text.</div>
<div class="myText">Here is some more text.</div>
I'd like to display the character count after each one. So the page would look like this:
Here is some text. 18
Here is some more text. 23
I know I can use jQuery:
$('.myText').text().length
combined with
document.write
but I have no idea how (I'm just starting to learn javascript). Also, the divs are generated by our CMS so there are going to be a lot of them and I'd like to get character counts for them all so maybe they each need different class names?
Any help would be appreciated.
$('.myText').each(function() {
var $this = $(this);
$this.append($this.html().length);
});