I want to transform this <ul> into a DataTable:
<ul>
<li><a href="#"> <p:graphicImage
name="images/child_M.png" library="ultima-layout" width="72" />
<span class="name">Joshua Williams</span> <span class="email">joshua#pf-ultima.com</span>
</a></li>
<li><a href="#"> <p:graphicImage
name="images/child_M.png" library="ultima-layout" width="72" />
<span class="name">Emily Clark</span> <span class="email">emily#pf-ultima.com</span>
</a></li>
<li><a href="#"> <p:graphicImage
name="images/child_F.png" library="ultima-layout" width="72" />
<span class="name">Susan Johnson</span> <span class="email">susan#pf-ultima.com</span>
</a></li>
<li><a href="#"> <p:graphicImage
name="images/child_F.png" library="ultima-layout" width="72" />
<span class="name">Kelly Stark</span> <span class="email">kelly#pf-ultima.com</span>
</a></li>
</ul>
Where I want to replace the name and email values with the correct ones, that come from a list (from the value element of the Datatable).This <ul> element layout is very good, since the text is on the right, good font and the image on the left and I want to replicate it within a DataTable.
Related
I'm trying to make a 2 columns layout with bootstrap 4.5
It should display as 2 columns when seen on larger display, then in smaller display the different divs should be stacked in 1 column. I followed the "Nesting columns" section of this example: https://getbootstrap.com/2.3.2/scaffolding.html
This is my aspx code:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="MainPage.aspx.vb" Inherits="Efesto_2.MainPage" ValidateRequest="false" Culture="it-IT" UICulture="it-IT" MaintainScrollPositionOnPostback="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efesto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="Content/bootstrap.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<script src="Scripts/jquery-3.5.1.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="Content/fontawesome-all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<script type="text/javascript">
function ShowPopup() {
$("#btnShowPopup").click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true" EnablePartialRendering="false"></asp:ScriptManager>
<nav class="navbar navbar-expand-md navbar-light fixed-top text-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="MainPage.aspx" runat="server" id="MenuHome">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Clienti.aspx" runat="server" id="MenuClienti">Clienti</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="MenuChiamate" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Chiamate
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="RichiesteEmail.aspx">Richieste Email</a>
<asp:LinkButton class="dropdown-item" runat="server" ID="lnkNuovaChiamata" UseSubmitBehavior="false" OnClientClick="javascript:window.open('chiamata.aspx?RFRic=0&id=0&azione=inserisci','_blank','left=20,top=20,width=620,height=700,status=no, menubar=no, toolbar=no,scrollbars=yes,resizable=1');">INSERISCI NUOVA</asp:LinkButton>
<a class="dropdown-item" href="ElencoChiamate.aspx">Elenco chiamate</a>
<a class="dropdown-item" href="kanban.aspx">Attività</a>
<a class="dropdown-item" href="Interventi.aspx">Interventi</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="MenuMagazzino" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Magazzino
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="GestioneProdotti.aspx">Gestione prodotti</a>
<%--<asp:LinkButton runat="server" ID="LinkButton1" UseSubmitBehavior="false" OnClientClick="javascript:window.open('chiamata.aspx?RFRic=0&id=0&azione=inserisci','_blank','left=20,top=20,width=620,height=700,status=no, menubar=no, toolbar=no,scrollbars=yes,resizable=1');">INSERISCI NUOVA</asp:LinkButton>
<a class="dropdown-item" href="ElencoChiamate.aspx">Elenco chiamate</a>
<a class="dropdown-item" href="kanban.aspx">Attività</a>
<a class="dropdown-item" href="Interventi.aspx">Interventi</a>--%>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="VulcanoPage.aspx">Vulcano</a>
</li>
<li class="nav-item">
<asp:LinkButton class="nav-link" Text="Logout" runat="server" ID="btnLogout" OnClick="btnLogout_Click" />
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="MenuStrumenti" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding-right: 8em;">Strumenti
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="ModuloServizi.aspx" target="_blank">Modulo Servizi</a>
</div>
</li>
</ul>
<%--<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>--%>
</div>
</nav>
<div class="alert alert-danger alert-dismissible" runat="server" id="divAlert" style="display: none;">
×
<asp:Label runat="server" ID="lblAlertTitolo" Font-Bold="true"></asp:Label><br />
<asp:Label runat="server" ID="lblAlertMessaggio"></asp:Label>
</div>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="conditional">
<ContentTemplate>
<div style="padding: 2rem; padding-top: 6rem;">
<div class="row">
<div class="span9">
<div class="col9">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Chiamate giorno</h4>
</div>
<div class="card-body">
<div>
<asp:TextBox runat="server" ID="txtData" Type="date" ToolTip="Data" required="required" AutoPostBack="true" autocomplete="off"></asp:TextBox>
<asp:DropDownList ID="ddlUtenti" runat="server" AppendDataBoundItems="true" CssClass="tendina tendina-auto" ToolTip="Scegli tecnico" AutoPostBack="true" OnSelectedIndexChanged="ddlUtenti_SelectedIndexChanged">
<asp:ListItem Value="-1">Tutti</asp:ListItem>
</asp:DropDownList>
</div>
<br />
<div class="content">
<div id="divChiamateGiorno" class="scrollDiv">
<asp:GridView ID="grdChiamateGiorno" runat="server" AutoGenerateColumns="False" DataKeyNames="idchia,dalle,alle,idstato" DataSourceID="SqlChiamateGiorno" AllowSorting="True" CssClass="tablestyle">
<AlternatingRowStyle BackColor="WhiteSmoke" CssClass="altrowstyle altezzaMinima" Height="50px" Width="100%" />
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<HeaderStyle Font-Bold="True" BackColor="LightGray" HorizontalAlign="Center" VerticalAlign="Middle" Height="30px" CssClass="headerstyle" />
<RowStyle CssClass="rowstyle altezzaMinima" Height="50px" />
<Columns>
<asp:BoundField DataField="tecnico" HeaderText="Tecnico" SortExpression="tecnico" />
<asp:BoundField DataField="ragsoc" HeaderText="Cliente" SortExpression="ragsoc" ItemStyle-Width="30%" />
<asp:BoundField DataField="rdescr" HeaderText="Richiesta" SortExpression="rdescr" ItemStyle-Width="50%" />
<asp:BoundField DataField="prior" HeaderText="Priorità" SortExpression="prior" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="app" HeaderText="Appuntamento" SortExpression="app" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="assremota" HeaderText="Remoto" SortExpression="assremota" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="Classif" HeaderText="Class." SortExpression="Classif" ItemStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="idchia" HeaderText="idchia" InsertVisible="False" ReadOnly="True" SortExpression="idchia" Visible="false" />
<asp:BoundField DataField="tipo" HeaderText="tipo" SortExpression="tipo" Visible="false" />
<asp:BoundField DataField="rforo" HeaderText="rforo" SortExpression="rforo" Visible="false" />
<asp:BoundField DataField="dalle" HeaderText="dalle" SortExpression="dalle" Visible="false" />
<asp:BoundField DataField="alle" HeaderText="alle" SortExpression="alle" Visible="false" />
<asp:BoundField DataField="idstato" HeaderText="idstato" SortExpression="idstato" Visible="false" />
<asp:BoundField DataField="Bloccato" HeaderText="Bloccato" SortExpression="Bloccato" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:TemplateField HeaderText="" ItemStyle-Width="5%">
<ItemTemplate>
<div class="tooltip">
<i id="collapse3" runat="server" class="fa fa-caret-square-o-left fa-lg" aria-hidden="true"></i>
<span class="tooltiptext" style="width: 170px;" id="litGestioneGiorn" runat="server"></span>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:SqlDataSource ID="SqlChiamateGiorno" runat="server" ConnectionString="<%$ ConnectionStrings:dbVulcanoConnectionString %>" SelectCommand="select utenti.nome as tecnico, Richieste.IDRic as idchia, richieste.descr as rdescr, ISNULL(richieste.assistremota,0) as assremota, Clienti.RagSociale as ragsoc, richieste.descr as descr, richieste.priorita as prior, richieste.tipo as tipo, richieste.rforologio as rforo, ISNULL(statoric.appuntamento,0) as app, ISNULL(statoric.oradalle,0) as dalle, ISNULL(statoric.oraalle,0) as alle, statoric.ID as idstato, left(isnull(Clienti.punta,''),2) as classif, right(left(isnull(Clienti.punta,''),3),1) as Bloccato from clienti inner join richieste on clienti.idcliente = richieste.rfcliente inner join statoric on statoric.rfric = richieste.idric inner join stati on stati.idstato = statoric.rfstato inner join utenti on utenti.idutente=statoric.rftecnico where statoric.attuale = 1 and (statoric.rfstato < 14 or statoric.rfstato=41) and statoric.dataass = #data and (#tecnico = -1 or statoric.rftecnico = #tecnico) order by app desc, oraalle asc, prior desc"><%--statoric.dataass between #data and coalesce(#data2, #data)--%>
<SelectParameters>
<asp:ControlParameter ControlID="txtData" DefaultValue="17/01/2017" Name="data" PropertyName="Text" Type="DateTime" />
<asp:ControlParameter ControlID="ddlUtenti" DefaultValue="0" Name="tecnico" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<p>
</p>
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td></td>
<td align="right">
<asp:Button runat="server" name="Stampa" type="button" class="gbutton" ID="btnStampa" Text="Stampa" />
<%--onclick="printdiv('divChiamateGiorno');" --%>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row" style="padding-top: 1rem;">
<div class="col-12">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Calendario</h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Consuntivazione rapida</h4>
</div>
<div class="card-body">
</div>
</div>
<div class="row" style="padding-top: 1rem;">
<div class="col-12">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Chiamate aperte</h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row" style="padding-top: 1rem;">
<div class="col-12">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Attività</h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
<%-- PER APRIRE I MENU DELLA NAVBAR SUL MOUSEOVER --%>
<script type="text/javascript">
$(document).ready(function () {
$(".dropdown, .btn-group").hover(function () {
var dropdownMenu = $(this).children(".dropdown-menu");
if (dropdownMenu.is(":visible")) {
dropdownMenu.parent().toggleClass("open");
}
});
});
</script>
<script>
function chiudiAlert() {
__doPostBack('chiudiAlert');
}
</script>
and this is what I get:
and this what I want:
Ok I ended up using container-fluid and col-lg
I've made a language menu (switch) for TYPO3 7.6 with Fluid only, no TypoScript. Just a Dropdown, see screenshot below. I also used the Ext:vhs, here's my code example:
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<ul id="languageMenu" class="dropdown menu" data-dropdown-menu>
<!-- german L:0 -->
<f:if condition="{v:page.language()}==0">
<li class="de">
<f:link.page pageUid="{page.uid}" additionalParams="{L:0}">
<f:image src="EXT:myext/Resources/Public/Icons/Flags/de.svg" width="18" height="14" alt="" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.de" />
</f:link.page>
<ul class="menu languageSubMenu">
<li class="en">
<f:link.page pageUid="{page.uid}" additionalParams="{L:1}">
<f:image src="EXT:myext/Resources/Public/Icons/Flags/gb.svg" width="18" height="14" alt="" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.en" />
</f:link.page>
</li>
</ul>
</li>
</f:if>
<!-- english L:1 -->
<f:if condition="{v:page.language()}==1">
<li class="en">
<f:link.page pageUid="{page.uid}" additionalParams="{L:1}">
<f:image src="EXT:hellocode/Resources/Public/Icons/Flags/gb.svg" width="18" height="14"
alt="{f:translate(key: 'LLL:EXT:hellocode/Resources/Private/Language/locallang.xlf:language.en')}" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.en" />
</f:link.page>
<ul class="menu languageSubMenu">
<li class="de">
<f:link.page pageUid="{page.uid}" additionalParams="{L:0}">
<f:image src="EXT:myext/Resources/Public/Icons/Flags/de.svg" width="18" height="14" alt="" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.de" />
</f:link.page>
</li>
</ul>
</li>
</f:if>
</ul>
At the moment the language switch is always shown. If there's no page translation, I'll get an 404 Error. Of course, the missing page aren't exist. How can I hide my language switch, if there's no translation?
In past I used USERDEF1 with TypoScript, but I need a solution with Fluid. I also see there's a viewhelper v:condition.page.isLanguage but this isn't working for me or I don't know how?! Is it possible to do this with Fluid or vhs?
I would be grateful for any advice. Otherwise I have to write typoscript again ...
You don't need extension for that. The viewhelpers languageMenu is enough.
Here the code I use, ok for accessibility, working with bootstrap 4 :
<div class="navbar-nav mr-auto dropdown show">
<v:page.languageMenu
hideNotTranslated="1"
order="0,1,2,3"
layout="name"
defaultLanguageLabel="Français"
defaultIsoFlag="fr"
labelOverwrite="FR,EN,NL,ES"
as="menu">
<ul class="navbar-nav mr-auto">
<f:for each="{menu}" as="langMenu">
<li class="nav-item>
<f:if condition="{langMenu.current}=1">
<f:link.page pageUid="{page.uid}"
id="dropdownMenuLink"
class="dropdown-toggle nav-link lang px-3 flag-nav--{langMenu.flag}"
additionalAttributes="{data-toggle:'dropdown', aria-haspopup:'true', aria-expanded:'false'}"
lang="{f:if(condition: '{langMenu.current}=1', then: '{langMenu.flag}')}"
title="<f:switch expression='{langMenu.flag}'>
<f:case value='fr'>français actif, changer de langue</f:case>
<f:case value='gb'>english activate, modify language</f:case>
<f:case value='nl'>Engels activeren, taal wijzigen</f:case>
<f:case value='es'>Español activo, cambio de idioma</f:case>
</f:switch>"
>
{langMenu.label}
</f:link.page>
</f:if>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" aria-expended="false">
<f:for each="{menu}" as="langMenu">
<f:switch expression='{langMenu.flag}'>
<f:case value='fr'>{v:variable.set(value: '0', name: 'langparam')}</f:case>
<f:case value='gb'>{v:variable.set(value: '1', name: 'langparam')}</f:case>
<f:case value='nl'>{v:variable.set(value: '2', name: 'langparam')}</f:case>
<f:case value='nl'>{v:variable.set(value: '3', name: 'langparam')}</f:case>
</f:switch>
<li>
<f:link.page pageUid="{page.uid}"
class="dropdown-item"
lang="{langMenu.flag}"
title="<f:switch expression='{langMenu.flag}'>
<f:case value='fr'>Passer le site en français</f:case>
<f:case value='gb'>Go to english version</f:case>
<f:case value='nl'>Ga naar de nederlandse versie</f:case>
<f:case value='es'>Salta el sitio en español</f:case>
</f:switch>"
additionalParams="{L:'{langparam}'}"
>
{langMenu.label}
</f:link.page>
</li>
</f:for>
</ul>
</li>
</f:for>
</ul>
</v:page.languageMenu>
</div>
I can only propose to use https://typo3.org/extensions/repository/view/sr_language_menu
You can simply use it like that: https://bitbucket.org/reelworx/rx-typo3-sitesetup/src/e34b675a223f02580838fe7d5d118d7f07fd8a68/Resources/Private/Layouts/Default.html?at=master&fileviewer=file-view-default#Default.html-48
Of course it is fully Fluid based, so you can override all templates to your needs.
You can use vhs and the ViewHelpers LanguageMenu
[https://fluidtypo3.org/viewhelpers/vhs/master/Page/LanguageMenuViewHelper.html][1]
This question already has answers here:
JSF -- <ui:repeat /> over a java.util.Set?
(3 answers)
Closed 6 years ago.
I am trying to make the bootstrap collapse(accordion) according to the last example in this page.
http://www.w3schools.com/Bootstrap/bootstrap_collapse.asp
Now in this example, the number of divs are hard coded, 3 in this case.
I want to make the same based on the number of values in a JAVA Set .
From my knowledge, i am trying to use ui:repeat like this
<ui:repeat value="#{myBean.apples}" var="apples">
</ui:repeat>
where apples is a set(unique list) of integers.
Here is the complete code:
<h:panelGroup layout="block"
rendered="#{researcherQueriesDetailBean.offerPersonDTO.size() > 0}">
<div class="panel-group" id="accordion" role="tablist"
aria-multiselectable="true">
<ui:repeat value="#{researcherQueriesDetailBean.offerMakers}"
var="offerMakers">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="#accordion" href="#sample-list"
aria-expanded="false" aria-controls="sample-list">
Sample Availability </a>
</h4>
</div>
<div id="sample-list" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"></div>
</div>
</div>
</ui:repeat>
</div>
</h:panelGroup>
I am having trouble in placing the ui:repeat in the code so that the accordion panels are repeated according to the number of elements in the set.Is it even possible to do it this way? Any code reference in this case would be helpful.
Thanks.
According to your code:
<ui:repeat value="#{researcherQueriesDetailBean.offerMakers}"
var="offerMaker">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="#accordion" href="#sample-list"
aria-expanded="false" aria-controls="sample-list">
Sample Availability </a>
</h4>
</div>
<div id="sample-list" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"></div>
</div>
</div>
</ui:repeat>
You are doing the iteration over offerMakers but I don't see you using the objects for anything, when you say to iterate over a set of Integers but i don't think you understand how a set behaves.
Anyways, if you iterate with this code, you will only get one iteration, change you <ui:repeat with the following and you will see what I mean:
<ui:repeat value="#{researcherQueriesDetailBean.offerMakers}"
var="offerMaker">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="#accordion" href="#sample-list"
aria-expanded="false" aria-controls="sample-list">
OFFERMAKER VALUE IS: #{offerMaker}
</a>
</h4>
</div>
<div id="sample-list" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"></div>
</div>
</div>
</ui:repeat>
If you wanted to create dinamic accordions depending on the amount of elements(size) in you Set then you might want something like this:
<c:forEach begin="0" end="#{researcherQueriesDetailBean.offerMakersSize}" var="i">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading#{i}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="#accordion" href="#hh#{i}"
aria-expanded="false" aria-controls="sample-list">
Collapsible group #{i}
</a>
</h4>
</div>
<div id="hh#{i}" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading#{i}">
<div class="panel-body">some info #{i}</div>
</div>
</div>
</c:forEach>
Where your ResearcherQueriesDetailBean would have the following method:
public Integer getOfferMakersSize(){
return offerMakers.size();
}
The following code outputs the ui:repeat tag on the genereated html, and its breaking my layout.
<nav role="navigation" class="f_left f_xs_none d_xs_none t_xs_align_l">
<ul class="horizontal_list main_menu clearfix">
<ui:repeat value="#{categoryBean.rootCategories}" var="cat">
<li class="relative f_xs_none m_xs_bottom_5">
<a href="#{cat.url}" class="tr_delay_hover color_light tt_uppercase">
<b>#{cat.name}</b>
</a>
</li>
</ui:repeat>
</ul>
</nav>
Here the Output generated by the code above:
<nav role="navigation" class="f_left f_xs_none d_xs_none t_xs_align_l">
<ul class="horizontal_list main_menu clearfix"><ui:repeat>
<li class="relative f_xs_none m_xs_bottom_5">
<a href="florestal" class="tr_delay_hover color_light tt_uppercase">
<b>Florestal</b>
</a>
</li></ui:repeat><ui:repeat>
<li class="relative f_xs_none m_xs_bottom_5">
<a href="jardinagem" class="tr_delay_hover color_light tt_uppercase">
<b>Jardinagem</b>
</a>
</li></ui:repeat><ui:repeat>
<li class="relative f_xs_none m_xs_bottom_5">
<a href="pragas-urbanas" class="tr_delay_hover color_light tt_uppercase">
<b>Pragas Urbanas</b>
</a>
</li></ui:repeat>
</ul>
</nav>
BalusC, thanks for JSF version tip, I looked the Mojarra changelog and I found a bug on ui:repeat, I updated to Mojarra 2.2.7 and the problemn was solved.
This question already has answers here:
How to scroll to top of page with JavaScript/jQuery?
(28 answers)
Closed 10 years ago.
I want that when the user clicks to the thumbnail on the gallery, page should scroll to top automatically. Here is the code:
<div id="gallery" class="content">
<div class="wrapper">
<div class="slideshow-c``ontainer">
<div id="slideshow" class="slideshow"></div>
</div>
</div>
</div>
<div id="thumbs" class="navigation">
<h3>Gallery</h3>
<ul class="thumbs noscript">
<li>
<a class="thumb" href="images/slider-img1.jpg" title=""> <img src="images/page1-img1.jpg" alt="" /><span></span> </a>
</li>
<li>
<a class="thumb" href="images/slider-img2.jpg" title=""> <img src="images/page2-img1.jpg" alt="" /> <span></span></a>
</li>
<li>
<a class="thumb" href="images/slider-img3.jpg" title=""> <img src="images/page2-img2.jpg" alt="" /> <span></span></a>
</li>
<li class="last">
<a class="thumb" href="images/slider-img4.jpg" title=""> <img src="images/page3-img1.jpg" alt="" /> <span></span></a>
</li>
<li>
<a class="thumb" href="images/slider-img5.jpg" title=""> <img src="images/page1-img2.jpg" alt="" /> <span></span></a>
</li>
<li>
<a class="thumb" href="images/slider-img6.jpg" title=""> <img src="images/page1-img3.jpg" alt="" /> <span></span></a>
</li>
<li>
<a class="thumb" href="images/slider-img7.jpg" title=""> <img src="images/page1-img4.jpg" alt="" /><span></span> </a>
</li>
<li class="last">
<a class="thumb" href="images/slider-img8.jpg" title=""> <img src="images/page1-img5.jpg" alt="" /> <span></span></a>
</li>
<li>
<a class="thumb" href="images/slider-img9.jpg" title=""> <img src="images/page1-img6.jpg" alt="" /><span></span> </a>
</li>
<li>
<a class="thumb" href="images/slider-img10.jpg" title=""> <img src="images/page1-img7.jpg" alt="" /> <span></span></a>
</li>
<li>
<a class="thumb" href="images/slider-img11.jpg" title=""> <img src="images/page1-img8.jpg" alt="" /> <span></span></a>
</li>
<li class="last">
<a class="thumb" href="images/slider-img12.jpg" title=""> <img src="images/page1-img9.jpg" alt="" /> <span></span></a>
</li>
<li class="last2">
<a class="thumb" href="images/slider-img13.jpg" title=""> <img src="images/page1-img10.jpg" alt="" /> <span></span></a>
</li>
<li class="last2">
<a class="thumb" href="images/slider-img14.jpg" title=""> <img src="images/page1-img11.jpg" alt="" /> <span></span></a>
</li>
<li class="last2">
<a class="thumb" href="images/slider-img15.jpg" title=""> <img src="images/page1-img12.jpg" alt="" /><span></span> </a>
</li>
<li class="last last2">
<a class="thumb" href="images/slider-img16.jpg" title=""> <img src="images/page1-img13.jpg" alt="" /> <span></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="block"></div>
You have your href in your tags set to the image itself. Isn't that just loading the image on it's own page?
You can use ids to target specific areas of your page to scroll to.
Scroll
More page content
<div id="someid">
Content to scroll too
</div>