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...
Related
Two instances of a partialview are loaded on a page.
Partialview has a textarea with id 'newNote'. Hence, when page loads we have two textarea elements with same id - 'newNote' but under two different containers.
<html>
<div id='container1' style="display:none">
--partialview
<textarea id='newNote'/>
</div>
<div id='container2'>
--partialview
<textarea id='newNote'/>
</div>
</html>
I want to convert textarea to tinymce Rich text editor based on the active container (in above case container 2).
Can someone pls tell me how to handle two instances with same id.
You should never have two elements on the same page with a non-unique id
HTML4
HTML5
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>
Is it possible, using Foundation Framework, to make a scrollable sticky div like this (StyckyScroll)?
For example:
<div class="row">
<div class="eight columns">
Very long content here
</div>
<div class="four columns">
Small but SCROLLABLE CONTENT here
</div>
</div>
The problem is that the sticky div gets out of the parent container.
Thank you in advance.
Foundation supports a couple types of sticky navigation. If you're looking for a navbar-type implementation, check out the docs on their top bar module (docs and example at: http://foundation.zurb.com/docs/components/topbar.html)
You can implement a sticky navbar in foundation by wrapping the normal top bar module like so:
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
YOUR NAVBAR MARKUP HERE
</nav>
</div>
If you're looking for sticky navigation that's less omnipresent than the top-bar, you can also use their Magellan plugin (docs and example at: http://foundation.zurb.com/docs/components/magellan.html)
I'm trying to create a custom widget that would internally be
represented by a simple DIV and a BUTTON element, but which would accept
other widgets inside it, pretty much like HTMLPanel.
So, I want something like this...
<div class="XXX">
<button class="YYY"></button>
{other widget(s) here}
</div>
...encapsulated inside some widget, say WrapperWidget. Then, I could use
this WrapperWidget inside some other (multiple) ui.xml files:
<ns:WrapperWidget>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</ns:WrapperWidget>
How is that achievable in GWT?
Thanks!
I don't use UI binder, so I can't help you there.
To nest widgets, one would usually use a Composite http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/Composite.html
I am trying to add 3 buttons in a div which has "info" class as shown
below( this is basically footer section). Code is shown below
<div class='info'>
<a class="button" href="#">Full Site</a>
<a class="button" href="#">Feedback</a>
<a class="button" href="#">Contact Us</a>
</div>
I want to show these 3 buttons at left, center and right.
(Above code just shows "Contact Us" button on top of the page). How do
I fix this?
I'm no jQTouch/CSS expert, but I believe this is related to the button class you're using for each link.
The button class absolutely positions items at the top, which is why your buttons aren't appearing in the footer. Additionally all three buttons are being positioned in the exact same spot, but you're only seeing the last/latest one - the Contact Us button.
The CSS file that contains this class is located within each of the theme folders (apple, default or jqt). Each one has a theme.css file.
Again, not being a strong CSS person... my advice would be to create a new class. Keep the attributes you like from the existing button class, but maybe remove the position aspects of it. This will largely depend on what kind of look and feel you want to keep/maintain.
Additionally, it may be easier for you to place your buttons within an unordered list. This gives you some more flexibility when trying to position things through CSS.
<div class='info'>
<ul class="newULClass">
<li><a class="newButtonClass" href="#">Full Site</a></li>
<li><a class="newButtonClass" href="#">Feedback</a></li>
<li><a class="newButtonClass" href="#">Contact Us</a></li>
</ul>
</div>