I want to display names of every child pages of the parent of the current page except the current page in the component in aem. But my output is coming including the current page name.
<section id="touractivities">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="row buttontab">
<li class="col-md col-sm-4 col-6" data-sly-repeat="${CurrentPage.parent.listChildren}">
<div class="btnbggradient">
<a href="${item.path}.html" class="shadow">
<i class="icon-${item.name}"></i>
<h5 >${item.title}</h5>
</a>
</div>
</li>
</ul>
</div>
</div>
</div></section>
my aem structure:
required output:
output im getting:
The code is correct except that the bird watching li should not come while i am in bird watching page.
You can switch from data-sly-repeat to data-sly-list (so you can move it to the ul element). You can then use data-sly-test on the li element and check each item path against the current resource/page path:
<li data-sly-test=“${item.path != resource.path}” ...
<section id="touractivities">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="row buttontab" data-sly-list="${CurrentPage.parent.listChildren}">
<li class="col-md col-sm-4 col-6" data-sly-test="${item.path != currentPage.path}" >
<div class="btnbggradient">
<a href="${item.path}.html" class="shadow">
<i class="icon-${item.name}"></i>
<h5 >${item.title}</h5>
</a>
</div>
</li>
</ul>
</div>
</div>
</div></section>
Related
I want to display only those pages in the header which have child pages inside them. Using the following code
<nav class="wsmenu clearfix" data-sly-use.nav="in.gov.odishatourism.core.models.HeaderNavigation">
<ul class="wsmenu-list" >
<li aria-haspopup="true" data-sly-repeat="${nav.root.listChildren}" ><span class="wsmenu-click" ><i class="wsmenu-arrow fa fa-angle-down"></i></span>
<a class="" href="javascript:void(0);" data-sly-test="!${item.hasChild}">${item.title}</a>
<div class="wsmegamenu clearfix ">
<div class="container paddingmenu">
<div class="row">
<div class="menuimgdiv" data-sly-repeat.subcategory="${item.listChildren}">
<h3 class="title" data-sly-test.subcat="${subcategory.title}" >${subcat}</h3>
<ul>
<li data-sly-repeat.page="${subcategory.listChildren}"><a class="" href="${page.path # extension='html'}">${page.title}</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li aria-haspopup="true"> Dept of Tourism</li>
</ul>
<a class="wsdownmenu-animated-arrow"><span></span></a>
<div class="wsdownmenu-text">Navigation</div>
</nav>
gives the following output
But this code -
<nav class="wsmenu clearfix" data-sly-use.nav="in.gov.odishatourism.core.models.HeaderNavigation">
<ul class="wsmenu-list" >
<li aria-haspopup="true" data-sly-repeat="${nav.root.listChildren}" ><span class="wsmenu-click" ><i class="wsmenu-arrow fa fa-angle-down"></i></span>
<a class="" href="javascript:void(0);" data-sly-test="${item.hasChild}">${item.title}</a>
<div class="wsmegamenu clearfix ">
<div class="container paddingmenu">
<div class="row">
<div class="menuimgdiv" data-sly-repeat.subcategory="${item.listChildren}">
<h3 class="title" data-sly-test.subcat="${subcategory.title}" >${subcat}</h3>
<ul>
<li data-sly-repeat.page="${subcategory.listChildren}"><a class="" href="${page.path # extension='html'}">${page.title}</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li aria-haspopup="true"> Dept of Tourism</li>
</ul>
<a class="wsdownmenu-animated-arrow"><span></span></a>
<div class="wsdownmenu-text">Navigation</div>
</nav>
gives the output as shown below
The code
<a class="" href="javascript:void(0);" data-sly-test="${item.hasChild}">${item.title}</a>
is not working properly.
My site structure is as shown below
And the actual desired output is
You cannot use ${item.hasChild} in your test condition as the hasChild() method of the Page API requires you to pass a parameter. AFAIK, HTL doesn't support invocation of parameterized methods.
Since there is no direct API available to check if a page has child pages or not, you may need to do the following to validate if the page has child pages
<a class="" href="javascript:void(0);" data-sly-test="${item.listChildren && item.listChildren.hasNext}">${item.title}</a>
However, I would prefer building the entire navigation tree using Sling models or WCM Use API and not invoking so many methods in the HTL. That would make the code easier to maintain, change and test. YMMV
I want to optimize my working carousel and I want to use for:each.
Does anyone maybe see my error?
Working Quote Code
New not working Quote Code
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<f:for each="{field.person}" as="person" iteration=“iterator“>
<li data-target="#quote-carousel" data-slide-to="{iterator.index}" {'class="active"'->f:if(condition:iterator.isFirst)}></li>
</f:for>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner" role="listbox">
<f:for each="{field.person}" as="person" iteration=“iterator“>
<!-- Quote {iterator.index -->
<div class="item {'active'->f:if(condition:iterator.isFirst)}">
<blockquote>
<f:format.html>{person.expert}</f:format.html>
<small>{person.expertName}</small>
</blockquote>
</div>
</f:for>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control">
<span style="top: 25%;" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control">
<span style="top: 25%;" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Example of problem is here:
http://liveweave.com/fRs3PL
Basically, I have a modal being triggered from a dropdown, and for some reason the modal hides behind the grey shadow and then disappears altogether a moment later.
What is going on here?!
You need to take the revel modal (<div class="reveal">) and all of its contents and place it so that it is a child of only the <body> element. You don't want it to be contained inside of other elements.
<body>
<div class="row">
<div class="small-12 medium-3 columns">
<ul class="dropdown menu" data-dropdown-menu="" role="menubar" data-dropdownmenu="3z4e20-dropdownmenu" aria-selected="false" aria-expanded="false" data-is-click="false">
<li role="menuitem" class="has-submenu is-dropdown-submenu-parent is-down-arrow" aria-haspopup="true" aria-selected="false" aria-expanded="false" aria-label="Actions" data-is-click="false">
Actions
<ul class="menu submenu is-dropdown-submenu first-sub vertical" data-submenu="" aria-hidden="true" role="menu">
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a data-open="change-password-modal-0" aria-controls="change-password-modal-0" id="8p079l-reveal" aria-haspopup="true" tabindex="0">Change Password</a>
</li>
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">Disable</li>
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">Delete</li>
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">Transfer</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="reveal" id="change-password-modal-0" data-reveal="rcsjob-reveal" data-reset-on-close="true" aria-labelledby="8p079l-reveal" role="dialog" aria-hidden="true" data-yeti-box="change-password-modal-0" data-resize="change-password-modal-0">
<h1>Change Password</h1>
<p class="lead">You are changing the password for:</p>
<label>Password: <input type="text"></label>
<button class="close-button" data-close="" aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</body>
I have added a code of accordion in my project. Till yesterday it was working fine today accordion is not working because there is space between id as shown in screen-capture from my project.
.
My code to show the accordion is:
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
#foreach($data as $from)
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading{{$from->id}}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$from->id}}" aria-expanded="true" aria-controls="collapse{{$from->id}}">
{{$from->from}}
</a>
</h4>
</div>
<div id="collapse{{$from->id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{$from->id}}">
<div class="panel-body">
{{$from->body}}
</div>
</div>
</div>
#endforeach
</div>
</div>
Is there any changes i can make, to get rid of this error?
EDIT:
Controller that passes all variable.
public function show(){
$data = Email::latest()->get();
return view('emails.display',compact('data'));
}
I have the following list inside an ion-content:
<ul class="list">
<li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)">
<div class="dr-info-wrapper">
<img src="img/icons/ic_persona.png">
<section class="dr-info">
<h3>{{doctor.name}}</h3>
<h4 class="institution">{{doctor.institutions[0].name}}</h4>
<h4 class="address">{{doctor.institutions[0].address}}</h4>
<h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4>
</section>
<span class="ion-ios-information-outline info-icon"></span>
</div>
</li>
</ul>
I just need that list to scroll because I have other elements inside the same which I need them to be static/fixed (with no scroll). This is how the view looks right now:
The red part must not move/no-scroll the blue part is the part I want with scroll, thanks for any help!
The code for the complete html just in case is:
<ion-view id="doctors" view-title="Directorio médico" ng-controller="DoctorsDirController">
<ion-content class="content-dir-medico" scroll="false">
<div class="top-wrapper">
<section class="section-for-bg-img"></section>
<div class="dir-medico-grid-bg-img"></div>
<section ng-class="blurOptionsWrapper ? 'options-wrapper-blurred' : 'options-wrapper'">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CITIES FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="all-suboption">
<div class="description-and-dropdown-wrapper first">
<h4 ng-class="cityClicked ? 'mark-used' : 'mark-unused'">{{cityName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down" ng-disabled="blurOptionsWrapper"
ng-click="citiesPopover.show($event)">
<script id="popoverCities.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="city in cities | orderBy: 'id'" ng-click="cityClick(city)">
{{city.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
SPECIALTIES FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div ng-class="disableSpecialty ? 'disabled-suboption' : 'suboption'" class="all-suboption">
<div class="description-and-dropdown-wrapper">
<h4 ng-class="specialtyClicked ? 'mark-used' : 'mark-unused'">{{specialtyName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down"
ng-disabled="disableSpecialty || blurOptionsWrapper"
ng-click="specialtiesPopover.show($event)">
<script id="popoverSpecialties.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="specialty in specialties | orderBy: 'label'"
ng-click="specialtyClick(specialty)">
{{specialty.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
INSTITUTIONS FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div ng-class="disableInstitutions ? 'disabled-suboption' : 'suboption'" class="all-suboption">
<div class="description-and-dropdown-wrapper last">
<h4 ng-class="institutionClicked ? 'mark-used' : 'mark-unused'">{{institutionName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down"
ng-disabled="disableInstitutions || blurOptionsWrapper"
ng-click="institutionsPopover.show($event)">
<script id="popoverInstitutions.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="institution in institutions | orderBy: 'name' | unique: 'name'"
ng-click="institutionClick(institution)">
{{institution.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
</section>
</div>
<section class="search-instructions" ng-hide="hideSearchInstructions">
<img src="img/icons/ic_lupaesfera.png" class="search-icon">
<h4>Comienza buscando </br>por ciudad y especialidad</h4>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
RESULTS SHOW ALL DOCTORS, BASED ON CITY & SPECIALTY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<section class="results-area" ng-hide="hideDoctorsResults">
<div class="filter-results-info">
<h5>{{doctors.length}} resultados</h5>
<h6>Filtra resultados seleccionando una institución</h6>
</div>
<ul class="list">
<li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)">
<div class="dr-info-wrapper">
<img src="img/icons/ic_persona.png">
<section class="dr-info">
<h3>{{doctor.name}}</h3>
<h4 class="institution">{{doctor.institutions[0].name}}</h4>
<h4 class="address">{{doctor.institutions[0].address}}</h4>
<h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4>
</section>
<span class="ion-ios-information-outline info-icon"></span>
</div>
</li>
</ul>
</section>
I just used another ion-content covering the <ul class="list">and it solved my problem