I added a single parsys component in my template using the code:
<div class = "BodyText" style="margin-top:75px;" >
<cq:include path="vff1" resourceType="foundation/components/parsys"/>
</div>
But when I create a page, and add some text to the parsys component, the component still stays on the page (below the text I added).
Is there a way to remove it after adding some asset (text or image etc.)in to the parsys ?
The parsys is a drop area for components. You cannot drop components into the parsys then remove the parsys without also removing the components contained inside as the components are sub-nodes of the parsys node in the jcr.
In your case it seems that you would prefer to embed the text component into the template instead of the parsys
<div class="BodyText" style="margin-top:75px;">
<cq:include path="text" resourceType="foundation/components/text"/>
</div>
Remember the path attribute needs to be unique.
To add, the drop area appears only in author mode, if you want to check how it looks in publish mode you can select the preview mode in the sidekick. As such your publish site will be the live site in production
Agree with the answers given above. The correct answer will be just to summarize the above 2 answers.
The parsys component can't be just removed after adding components into it. If you don't want it, then add the desired component ins the jsp of the page. (Not recommended at all)
It is anyways visible only in the 'author' instance. The dotted-bordered component that displays 'Drag components or assets here' won't appear in the 'public' instance.
There is a way to remove the parsys, but I would advice to exercise this with caution.
First in your include parsys you check if the component you want to add into this particular parsys exist or not. If it does than you just directly include in that component into your page, and if not then you include the parsys.
Sample code:
<c:choose>
<c:when test="<COMPONENT_EXIST>">
<cq:include path="<Path to component>" resourceType="<component resource>" />
</c:when>
<c:otherwise>
<cq:include path="<parsys_path>" resourceType="foundation/components/parsys" />
</c:otherwise>
</c:choose>
Related
I have a 'container' component for housing child components. Essentially, a container for holding tabs of content, where the user can drag in as many 'tabs' as they choose.
The code is as such:
<!--/* Tab Container Component */-->
<div data-sly-test="${wcmmode.edit}"><h2>Drag a 'Tab Panel' below:</h2></div>
<ul data-sly-list.tab="${list of children in the tab-container parsys}">
<li>${tab.tabName}</li> //these will be the tabs using jQuery-UI
</ul>
<div data-sly-resource="${ #path='tab-container',resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>
And the 'tab' component:
<!--/* Tab Panel Component */-->
<div class="tab-panel">
<div data-sly-resource="${ #path='tab- panel',resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>
</div>
What I want to achieve is to use the container component to loop through the items in its parsys and pull out the property 'tabName' of each item. The node structure ends up as shown:
This might work in your case:
<ul data-sly-list.tab="${resource.listChildren}">
<li>${tab.name}</li> //these will be the tabs using jQuery-UI
</ul>
Basically, the tab-container is your parsys and resource.listChildren will list all the child resources/nodes. tab.name is provided by HTL which will give you tab_panel, tab_panel_1134.., etc.. Other properties inside of each tab-panel (tab) too can be accessed.
Another way to get directly to a resource is with data-sly-use:
with this you can reach any resource in AEM. Docs here (look for data-sly-use with resources).
Good Luck...
I am having a problem with my XSLT, I am using SharePoint 2010 and I am building a custom front-end that will pull data from lists and render the data in a nice manner. I have figured out how to use XSLT with HTML to render a SharePoint list, I wasn't able to add an image of my news feeds because my rep is too low but I will get it up!
Now here is where my problem starts:
I am using jQuery toggle to show/hide the body paragraph of this news feed. The Continue Reading button is where my issue is, every time I click on the "Continue Reading" button in the lower right of each news post, it show/hides all the news items, not just the one I click on.
I have tried using Bootstrap collapse and now I am using jQuery Toggle() however I run into the same issue! Take a look at my XSLT code snippet to display thee body paragraph and the corresponding jQuery code snippet that actives the show/hide toggle:
XSLT:
<tr class="spacer">
<td valign="top" class="td-newscontent">
<div class="news content">
<!-- start excerpt -->
<xsl:value-of select="#BodyExcerpt" disable-output-escaping="yes" />
<div class="moving">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- end news excerpt -->
<!-- start continue reading link -->
<xsl:text disable-output-escaping="yes"><![CDATA[<br class="continue-br" />]]></xsl:text>
<a class="butt pull-right continue-right">Continue Reading</a><br /><br />
<!-- end continue reading link -->
</div>
</td>
</tr>
Javascript (jQuery)
$(".moving").hide();
$(".butt").click(function() {
$(".moving").toggle("slow", function() {
});
});
.moving is the actual #body being shown/hidden
.butt is the "continue reading" button (I know butt was a bad name to use)
I have read a few things on the net about "this" but I am not sure how to use it.
First time posting so I couldn't post any images, but when you click on "continue reading" all the body news articles expand then you click it again and all the body news items contract, what I would like it to do is open just the one I am clicking on!
I have a lot going on, everything is housed in SharePoint, using HTML5, Css3, jQuery and XSLT. I started by using IDs but I switched to classes, not sure if that was a good idea but it functions, but not as intended.
Any help would be appreciative, I have been researching this issue for almost 2 weeks so I finally decided to ask some experts :) (Feel free to ask any questions or ask for more information, I will answer with everything I got!)
You are close, so well done for getting this far! Your problem lies in your JavaScript. If you look at the rendered code using your browser's developer tools (F12), you will find that all of the different body texts have the same class (moving) and all of the buttons have the same JavaScript onclick, which is to toggle everything of class .moving.
Thus the solution you are looking for is to match each button with its respective body text. There are two main ways you can do this.
You can give each text div and each button a unique ID by assigning it to some unique feature of the list item (SharePoint list items already have a unique identifier as the field ID). Using xsl:value-of within HTML attributes would violate XML rules, so you can use something called an Attribute Value Template, which is the bit in the curly braces:
<div id="newstext_{#ID}">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- etc... -->
<a onclick="$('#newstext_{#ID}').toggle('slow', function() {});">Continue reading</a>
Modify just the JavaScript to target the parent of the button. The following code selects the parent DOM element of the button, which should be the div of class .news, then finds the child of class .moving, then applying your toggle:
$(".butt").click(function() {
$(this).parent().find(".moving").toggle("slow", function() {
});
});
The second method is easier but can get complicated if you end up running a lot of JavaScript. It is easier (and more efficient) to select elements by ID, so personally I think the extra effort is worth it. I haven't tested this code so let me know if it doesn't work. On some of your other points:
no, butt is not a good name for a class - remember, you can use element types in your jQuery selectors, so there is no need to duplicate the type as the class. For example, $('a') selects all the anchor tags on the page.
IDs should be used when elements need to be uniquely identified (e.g. for scripts), classes when you are grouping elements together (e.g. for styles).
Cany anybody tell me how to render the following structure in
typo3 without developing a new extension.
<div class="sidebar-details">
<div class="sidebar-details-title">
<h4><span>MY TITLE</span></h4>
</div>
<div class="sidebar-details-body">
<p>
TEXT
</p>
</div>
</div>
What would be the best/recommended way to achieve this ?
Start using gridelements.
Gives you exactly what you want.
http://typo3.org/extensions/repository/view/gridelements
You can activate the RTE html mode and put it in its source or make use of HTML element, but that's depending on your needs.
If you want to keep RTE functions for editing the text what I mentioned first is the recommended way. Have done it several times myself.
If you are using Template mapping using Templavoila so, you can create FCE(Flexible content element) for it and you can map this part.
If you are using fluid template mapping so, you can create gridelement for it. and map all part.
I tried adding muultiple "par" components in my template's JSP. But only the one appearing first is visible on the page.
Is there is limitation of using paragraphs in a page ?
Just change the value for your path variable
<cq:include path="par1" resourceType="foundation/components/parsys" />
<cq:include path="par2" resourceType="foundation/components/parsys" />
this should help you in having multiple paragraph components
I need to allow add a div with a class attribute in tinyMCE in Umbraco. I can add a div, but all content in the div is just text. I need that text has a paragraph, and finally add a class attribute for the div.
It's a little hard to understand what you are asking, but I think this should help.
http://our.umbraco.org/wiki/recommendations/recommended-reading-for-content-editors/adding-styles-to-the-tinymce
You can basically associate a stylesheet with the tinyMCE and then add styles to it that will appear in the style dropdown
You may use
tinymce.activeEditor.execCommand('insertHTML', false, '<div class="section'></div>');
This will insert the specified html into the editor at the local caret position.
Be aware that your valid_elements and valid_children configuration settings won't strip out anything from the html that you insert.
If you can paste your template code then we can be more of a help to you.
What you want to do is wrap your <umbraco:Item field="aliasOfYourRTE" runat="server" />
with the div you want so in your case your code will look like this:
<div class="YOURCLASSNAMEHERE">
<umbraco:Item field="bodyText" runat="server" />
</div>
The umbraco RTE automatically spits out <p> </p> tags when content is inserted. Also, make sure you are publishing your node so that your content is viewable on the front end.
Hope this helps.
Go to Settings - Styles.
Open the stylesheet with the styles for the Format dropdown of TinyMCE in Data Type Richtexteditor.
Add a style with the Alias div.class, e.g. div.alert alert-danger.
If you then click in TinyMCE on a paragraph and then choose in the Format dropdown this style the paragraph is formatted as follows:
<div class="alert alert-danger"> ... </div>
Is this what you wished to do?