I'm trying to applying custom CSS to each slide in my Cycle2 carousel.
The attribute, to add to the carousel's conatining div, is:
data-cycle-slide-css
The doc's says that the value should be an 'object hash'.
I'm not sure what this means.
I've tried giving it the value:
"{margin:-30px;}"
But that's not working.
Any ideas?
data-cycle-slide-css='{"margin":"-30px"}'
You can see an example of this syntax in the Offset Stack section of the Shuffle demo here: http://jquery.malsup.com/cycle2/demo/shuffle.php
Related
I use Django 1.11 for my blog.
I illustrate all acticles in my first page by a title, an image and a few words.
For the few words, I'm using this method :
{{post.text|safe|linebreaks|truncatewords:"50"}}
I use a text editor and sometimes, I use for example italic text :
<i/>Italic text</i>
Let's imagine the value of truncatewords is on "1". It means it returns :
<i/>Italic
There is my problem. Some HTML tags are still opened. It means that the italic text never end and It will be applied for the rest of the code.
Do you know if a trick or workaround exists ?
Thank you.
I'm making a custom multifield breadcrumb component with this code.
<ul class="breadcrumb-list">
<li class="breadcrumb-item" data-sly-repeat.textItem="${properties.text}">
<a class="breadcrumb-link" href="${properties.link['textItemList.index']}">${textItem}</a>
<p class="works">${properties.link[textItemList.index]}</p>
<p class="doesn't work">${properties.link['textItemList.index']}</p>
<span>//</span>
</li>
</ul>
I've added the paragraph elements to show how my properties display.
This is the html output:
If I remove the single quotes as in p class="works", the value displays the breadcrumb item's link value. If I add the single quotes as in p class="doesn't work", nothing displays.
You'd think that removing the quotes from the same value in the href would display my link as the href; however, when i remove the quotes in the href value, it removes the anchor tag altogether. when i add them back in, i can still see the anchor tag, but there is no href attribute at all, only the breadcrumb-link class.
How can I get the href value to show a link?
AEM evaluates al href before rendering the resulting html.
If the link is invalid it will not put anything under href
If the expression is invalid it will wipe out all the section
Have you tested with valid links?
This will not work only with plain text.
when i add them back in, i can still see the anchor tag, but there is no href attribute at all, only the breadcrumb-link class. - That is the expected behaviour. Because you have an array of links and putting the quotes will try to obtain an entry in the array by the 'textItemList.index' key, like you would do in a map, instead by the index. Nothing is found of course, so the anchor point is rendered without the href attribute.
when i remove the quotes in the href value, it removes the anchor tag altogether. - That is not the expected behaviour. Since you exemplify that inside the paragraph it works, then I suppose this is a display context issue. HTL should implicitly uses the uri context for href attribute values and text for content inside HTML elements according to the documentation.
Try explicitly mention the context like href="${properties.link[textItemList.index] # context = 'uri'}" or href="${properties.link[textItemList.index] # context = 'text'}", or check the contexts mentioned in the doc - unsafe should ultimately do the job.
None of this context worked for me, and Im facing the same issue, if I remove the single quote "'" it will display the href just ok, but since my href includes it none of the context mentioned above is doing the job.
Is there any solution for this out there?
We're creating a page in Orchard CMS using the 'List' Content Type. We want to add some hyperlinks at the top of the list, that will jump down the page to specific items in the list.
We specifically don't want to just link to the individual page for the list item, but jump down to where it is in the list, and because the list items are rendered using the same View part, we can't of course just hard code the bookmarks.
We've been customising the View Part in VS and know that the list item title is generated using the code:
#Display(Model.Header)
And this generates < h1 > and < a > tags to wrap around the title like this:
< h1 shape-id="5" >< a href="/Orchard/Contents/Item/Display/36" shape-id="5" >Marketing< /a >< /h1 >
However, we can't find a way to get the Display() method to include a 'name=' clause which we can then use as the bookmark.
We've also tried adding a new tag just above the exiting code, e.g.:
< a name="#Model.Header" >< /a >
#Display(Model.Header)
But of course the Model.Header is an object reference, and not some text, so this failed. After this we've got lost with various ways trying to find a property of the Model object to fetch the Title as text but couldn't.
There must be a way to overload the Display() method to get it to include the 'name=' clause, anyone got any ideas?
Model.Header is just a zone. What really renders the title is a shape that was added to that zone. You should really use Shape Tracing (part of the Designer Tools module) to understand what the hierarchy of shapes looks like. You don't need to "overload the display method". What you need is to override the template for the shape that is rendering the title (which is not Model.Header but something inside it).
You might want to read this: http://weblogs.asp.net/bleroy/archive/2011/03/27/taking-over-list-rendering-in-orchard.aspx and this http://weblogs.asp.net/bleroy/archive/2011/05/23/orchard-list-customization-first-item-template.aspx
Try:
<a name="#Model.Header.Items[0].Title" />
It's not pretty, but it worked for me when I dropped this in an alternate template for a biography content type I created (Views/Content-Bio.Summary.cshtml).
Based on Bertrand's suggestion, instead you can try:
<a name="#Model.Title" />
in your template alternate.
I want to add action points to a page via a template. This requires that the page with the action points contains this code:
<onlyinclude><includeonly>
</includeonly>#AP1 blah</onlyinclude> ... blah blah blah <onlyinclude><includeonly>
</includeonly>#AP2 blah</onlyinclude>... blah
But I want this via a template, so that a user only has to add something like:
{{subst:Action point|<action>}}
using the template: {{Action point}}.
The problem is adding the </onlyinclude> to a page. I can add <onlyinclude> using:
`<onlyinclude><onlyinclude></onlyinclude>`
I've tried adding hidden comments, using <noinclude> and <includeonly> but nothing seems to work.
Any ideas? The solution I'm looking for is where (as the above link explains) I can add text (meeting minutes) with action points on one page, and on another view only the action points.
This is a monstrous hack, but it works. You will need a recent version of MediaWiki that supports safesubst:.
Create the page Template:Startinclude with the content <onlyinclude><onlyinclude></onlyinclude>.
Create the page Template:Endinclude with the content </onlyinclude>.
Create the page Template:Ap with this content:
Head
<includeonly>{{safesubst:Startinclude}}</includeonly>
Body
<includeonly>{{safesubst:Endinclude}}</includeonly>
Foot
And now {{subst:Ap}} expands to this:
Head
<onlyinclude>
Body
</onlyinclude>
Foot
For a live demo, enter {{subst:User:Jpatokal/Ap}} on any Wikipedia page, it uses this template.
Wouldn't <onlyinclude> and </onlyinclude> work just as well as <onlyinclude><onlyinclude></onlyinclude> and </only<noinclude></noinclude>include>?
You could apply the following trick, within the template in order to transclude and substitute <onlyinclude> or <noinclude>:
<{{{fwd|onlyinclude}}}>Some text...</{{{fwd|onlyinclude}}}>
Some text...
<{{{fwd|noinclude}}}>Some text...</{{{fwd|noinclude}}}>
After the substitution the {{{fwd|}}} variable will be expanded at its place with the default value and you will get the desired tags. I'm using fwd as shortcut of forward, but you could choice different name.
Here is how to insert a category in to a page by template substitution using this approach - the template content should be:
<{{{fwd|noinclude}}}><includeonly>[[Category:CatName|?]]</includeonly></{{{fwd|noinclude}}}>
Lets say i have
input string as
<div id="infoLangIcon"></div>ARA, DAN, ENGLISHinGERMAN, FRA<div id="infoPipe"></div><div id="infoRating0"></div><div id="infoPipe"></div><div id="infoMonoIcon"></div>
so i want to check if inforating is 0 and then remove the div and previous div also. The output is
<div id="infoLangIcon"></div>ARA, DAN, ENGLISHinGERMAN, FRA</div><div id="infoPipe"></div><div id="infoMonoIcon"></div
Regex is not your best option here. It is not reliable when it comes to HTML.
I suggest you use DOM functions to do this (I gave you a Javascript example, you have not provided a language to be used). If I understood correctly, if there is an element with the ID of infoRating0, you want to remove it and its previous sibling. This little snippet should do that:
if (document.getElementById('infoRating0')) {
var rating0=document.getElementById('infoRating0'),
rParent=rating0.parentNode;
rParent.removeChild(rating0.previousSibling);
rParent.removeChild(rating0);
}
Also, your HTML is invalid. You can only use an ID once in your HTML. You have two divs with the same ID (infoPipe) which you should REALLY fix. Use classes instead.
jsFiddle Demo