I want to create a node with JSTree.
The HTML:
<div id="tree">
<ul>
<li>a<ul>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</li>
</ul>
</div>
and the JQuery:
var root = $("#tree").jstree();
$("#tree").jstree(true).create_node(root,"root1");
It displays the tree but not create the root1. What's missing?
Thanks a lot
To add a node at the root level you have to use # as the parent id. Try this:
$("#tree").jstree(true).create_node("#","root1");
Related
Here's my code and I want to add another css class toggleable-content to the existing code:
<sly data-sly-resource="${'item' # resourceType='components/header'}"></sly>
This code would look something like this:
<section aria-label="aria label">
<ul class="row">
<li class="col">
<div class="body px-3">
<h2 class="h3">
body
</h2>
<p>body text</p>
</div>
</li>
</ul>
</section>
I want to remove section tag and add another css class toggleable-content to the <ul> tag. Below is what I'd like to achieve:
<ul class="row toggleable-content">
<li class="col">
<div class="body px-3">
<h2 class="h3">
body
</h2>
<p>body text</p>
</div>
</li>
</ul>
I was wondering how to use slightly to achieve the above? I tried something below but it doesn't work:
<sly data-sly-resource="${'item' # resourceType='components/header', cssClassName='toggleable-content'}"></sly>
Assuming the section markup is managed by the included resource (components/header) then you cannot do it directly. Indirectly, with AEM, you can pass a parameter (through request attributes) and retrieve it in the components/header model, then add the section conditionally (using data-sly-unwrap for example).
Or you re-organize your code and switch from resource inclusion to template calling and pass the parameter directly using data-sly-call.
I masked(mask-extension) a couple of plug-ins. When the image is generated in the template, it is always wrapped in following divs:
<div id="c63" class="frame frame-default frame-type-image frame-layout-0">
<div class="ce-image ce-center ce-above">
<div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
<div class="ce-outer">
<div class="ce-inner">
<div class="ce-row">
<div class="ce-column">
<figure class="image"><img class="image-embed-item"
src="fileadmin/user_upload/bla" width="975"
height="678" alt=""></figure>
</div>
</div>
</div>
</div>
</div>
</div>
Is there any way to remove all those wrappers? I simply want to have the image.
Sidenotes:
1. f:image does not work, I cannot access the proper uid for it to show. (This is perhaps an issue with mask)
2. I cannot find the tt_content.stdWrap.innerWrap > in my typoScript, as I do not know where mask puts it. It is neither in the netup.ts nor in the NewContentElementWizard.ts
You need to overwrite the fluid_styled_content partial in Resources/Private/Partials/Media/Gallery.html.
How to overwrite, you can read here: https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/8.7/Configuration/OverridingFluidTemplates/
I am looking to change just a few attributes for the default Liferay 7 theme:
Left Justify the navbar
Hide the Search control in the navbar
Allow a second level to each menu
It seems this is best done using a Themelet? Curious if someone could point me to an existing implementation I could use as a starting point for such a customization.
Thanks,
Randy
To allow a seconde level or ( Child of Child) you should add another loop inside each element. Here is the FreeMarker code to put into navigation.ftl, and you can add you CSS on it.
<nav id="navigation" role="navigation">
<div class="row">
<div class="col-md-9">
<ul class="nav1">
<#list nav_items as nav_item>
<li>${nav_item.getName()}
<#if nav_item.hasChildren()>
<div class="fulldrop">
<#list nav_item.getChildren() as nav_child>
<div class="col-xs-4">
<#assign navchild_name = nav_child.getName() />
<h3>${nav_child.getName()}</h3>
<br>
<#if nav_child.hasChildren()>
<ul>
<#list nav_child.getChildren() as nav_child>
<li>${nav_child.getName()}</li>
</#list>
</ul>
</#if>
</div>
</#list>
</div>
</#if>
</li>
</#list>
</ul>
</div>
</div>
</nav>
Strange issue, I am struggling for couple days. I have a simple knockoutjs sortable page that binds to 2 lists as below. I would like to move copy an item from list A to B. I tried passing helper: 'clone' in options as in documentation, but it doesn’t create a copy and moves the original item.
Here is the http://jsfiddle.net/a5FL5/13/, that shows the problem. Try moving item from list A to B, and it moves the original item, and no copy is created.
I haven’t been able to figure out what the issues. Any help is appreciated.
<div class="A">
<ul data-bind="sortable: { data:stagingList.filteredTodos , options: {helper: 'clone', connectToSortable: '.okay'}}">
<li data-bind="text: itemlist"> </li>
</ul>
</div>
<div class="B">
<ul data-bind="sortable: { data: dayList.dfilteredTodos }">
<li class="okay" data-bind="text: itemlist"> </li>
</ul>
</div>
Regards
Srini
I've my markups as
<div id="home" class="current">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller">
<ul id="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<!-- Events Details -->
<div id="events">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller"> <!-- stuffsss --></div>
</div>
<div class="footer">Footer</div>
</div>
For iScroll (http://cubiq.org/iscroll) to work, I need the #scroller as ID (as per the javascript Code I'm using to initialize iScroll.
//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
But since I can't have two different elements with the same ID (please notice I've got two elements with same id scroller in my markup above), some conflicts are there and the iScroll isn't working properly.
I want to be able to implement the iScroll on the markup by changing the id as classes. I tried to change them into classes and see if it works but I couldnt get it right.
Can anyone help me change the codes so that it works by implementing classes instead of the the id??
Rob is right, but you can change your code to scroller classes as you said.
Then initialise your scrollers within unique wrappers like this:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
I'm not totally clear on what you are trying to achieve but if you want two parts of your page to scroll I would suggest changing the IDs to be unique and instantiate two iScrolls with the different IDs.
I am sure you have figured it out, but for other users still struggling with similar layout (multiple scrollers) and want to make them work. Here is the answer from other thread
https://stackoverflow.com/a/7584694/1232232
but for this to work you need to assign ID's to your classed (div containers)
like
<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
Note: Remember not to assign same ID to multiple elements, always use classes for that purpose.