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>
Related
I have created a layout page which has a top menu and a side navbar. My problem is when I've created a new razor view (content page). It seems to be centering from the whole page not taking into account the sidebar. Also my div container in my content page does not user all the screen. Am I missing something. I thought if I create my layout page with a side bar the content page would use the remaining page.
Thanks for any help,
Layout Code:-
<body>
<nav id="menuBar" class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#" style="color:white;">Building ********</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListUsers">Users</a>
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListRoles">Roles</a>
</div>
</li>
}
</ul>
<ul class="navbar-nav ml-auto">
#if (signInManager.IsSignedIn(User))
{
<li class="nav-item">
<form method="post" asp-controller="account" asp-action="logout">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto;">
Logout #User.Identity.Name
</button>
</form>
</li>
}
else
{
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a asp-controller="account" asp-action="register" class="nav-link">Register</a>
</li>
}
<li class="nav-item">
<a asp-controller="account" asp-action="login" class="nav-link">Login</a>
</li>
}
</ul>
</div>
</nav>
#*Sidebar*#
<div id="sidebar-wrapper">
</div>
<div class="container mt-3 mb-3">
#RenderBody()
</div>
#RenderSection("Styles", required: false)
#RenderSection("scripts", required: false)
</body>
I've added an image of the layout I am trying to achieve.
You can try this code below:
<div class="row">
<div class="col-md-3">
<nav id="menuBar" class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#" style="color:white;">Building ********</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-pills flex-column">
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListUsers">Users</a>
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListRoles">Roles</a>
</div>
</li>
}
#if (signInManager.IsSignedIn(User))
{
<li class="nav-item">
<form method="post" asp-controller="account" asp-action="logout">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto;">
Logout #User.Identity.Name
</button>
</form>
</li>
}
else
{
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a asp-controller="account" asp-action="register" class="nav-link">Register</a>
</li>
}
<li class="nav-item">
<a asp-controller="account" asp-action="login" class="nav-link">Login</a>
</li>
}
</ul>
</div>
</nav>
</div>
<div class="col-md-9">
#RenderBody()
</div>
</div>
Result:
i have a list like
lst = [
['img1','img2','img3','img4','img5'],
['img6','img7','img8','img9']
]
and a template like
<div class="row"> -- 1st row
<div class="col-lg-3" data-aos="fade-up"> --col-lg-3
<a href="{{img1}}"> --img1
<img src="{{img1}}"> -- img1
</a>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100"> --col-lg-6
<a href="{{img2}}"> --img2
<img src="{{img2}}"> --img2
</a>
</div>
<div class="col-lg-3" data-aos="fade-up" data-aos-delay="200"> --col-lg-3
<a href="{{img}}"> --img3
<img src="{{img}}"> --img3
</a>
</div>
</div>
<div class="row"> ---2nd row
<div class="col-lg-8" data-aos="fade-up" data-aos-delay="100"> --col-lg-8
<a href="{{img2}}"> --img2
<img src="{{img2}}"> --img2
</a>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200"> --col-lg-4
<a href="{{img}}"> --img3
<img src="{{img}}"> --img3
</a>
</div>
</div>
please note few things:
every col-lg size is of different size
every and tag of a column contain 1 img
i want to iterate over the whole template but in a different way
eg: i can do this in python where i can iterator over list and assign the value as well
for data in lst:
it = iter(data)
print (next(it)) ---where print will be replaced with img tag
print (next(it))
print (next(it))
print (next(it))
print (next(it))
but how can i do this in django template
Django's for-in template loop builds the DOM defined between the template tag loop for each item in data.
That being said, you could adapt your solution like so:
<div class="row align-items-stretch">
{% for img in data %}
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="{{ data.img }}" class="d-block photo-item" data-fancybox="gallery">
<img src="{{ data.img.url }}" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
{% endfor %}
</div>
If data contains three items/images, the output will be something like:
<div class="row align-items-stretch">
# 1st iteration
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">
<img src="link" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
# 2nd iteration
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">
<img src="link" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
# 3rd iteration
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">
<img src="link" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
</div>
I am working with ASP.net MVC 5, I have created a bootstrap carousel/slideshow with 4 images, I want to get the id of the active slide on this carousel. Then, when an user is clicking on an submit button, I can redirect him to another page recording the active slide id in the URL.
<form method="post">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class=""></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<a class="carousel-buttonleft" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-buttonright" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-inner" role="listbox" style="height:300px">
<div class="item active" align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>NORMAL SKIN</p>
</div>
</a>
</div>
<div class="item ">
<div align="center" class="carousel-image">
<img src="../images/saumon.png" alt="saumon1" />
</div>
<div class="carousel-caption">
<p>SILVER SKIN</p>
</div>
</div>
<div class="item " align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>DEEP SKIN</p>
</div>
</div>
<div class="item " align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>WITH SKIN</p>
</div>
</div>
</div>
</div>
Thanks.
sorry i'm currently using my phone. You must select by className.
In css :
.carousel-inner .item .active
In jQuery :
$('.carousel-inner .item .active')
then... .attr('id') and for the value .val() or .text()
In C#, I found this topic to show you how to iterate inside your page controls depending a specific className target :
StackOverflow
I'm having a strange problem with a Liferay Theme I'm doing. The theme is supposed to present two different menus from the list of navigation items that the portal provides. I wrote a portal_normal.vm in velocity markup and it works okay if the user is signed in to the portal, but not if he or she isn't.
Here's a couple of images of how the theme looks so far. The first one is wrong, it is how the theme gets rendered without logging in, and the second is ok.
I suspect there's something wrong in my markup but I need another pair of eyes to detect what may be the cause, please.
Here are the images:
And this is my velocity markkup in portal_normal.vm
<!DOCTYPE html>
#parse ($init)
<html class="$root_css_class" dir="#language ("lang.dir")" lang="$w3c_language_id">
<head>
<title>$the_title - $company_name</title>
<meta content="initial-scale=1.0, width=device-width" name="viewport" />
$theme.include($top_head_include)
#js ("$javascript_folder/jquery-1.11.1.min.js")
#js ("$javascript_folder/bootstrap.affix.min.js")
#js ("$javascript_folder/jquery.transit.min.js")
#js ("$javascript_folder/affix.js")
</head>
<body class="$css_class">
#language ("skip-to-content")
$theme.include($body_top_include)
#if ($is_signed_in)
#dockbar()
#end
#set ($teaser = $layout.getExpandoBridge().getAttribute("etiqueta-pagina"))
#if(!$teaser.contains("teaser"))
#set ($header_class = "header-inside")
#else
#set ($header_class = "")
#end
#if($is_signed_in)
#set ($header_dockbar ="con_dockbar")
#set ($logo_dockbar = "con_dockbar")
#else
#set ($header_dockbar ="")
#set ($logo_dockbar = "")
#end
<div class="container-fluid" id="wrapper">
<header id="banner" role="banner" class="$header_class">
<div id="heading">
<h1 class="site-title $logo_dockbar" id="logo">
<a class="$logo_css_class" href="$site_default_url" title="#language_format ("go-to-x", [$site_name])">
<img alt="$logo_description" height="$site_logo_height" src="$site_logo" width="$site_logo_width" />
</a>
</h1>
<div class="header-nav" id="nav-super">
#if ($show_site_name)
<span class="site-name" title="#language_format ("go-to-x", [$site_name])" id="logo-label">
$site_name
</span>
#end
<ul aria-label="#language ("site-pages")" role="menubar">
#foreach ($nav_item in $nav_items)
#set ($nav_item_attr_has_popup="")
#set ($nav_item_attr_selected="")
#set ($nav_item_css_class = "")
#set ($etiqueta = $nav_item.getLayout().getExpandoBridge().getAttribute("etiqueta-pagina"))
#if ($nav_item.isSelected())
#set ($nav_item_attr_selected="aria-selected='true'")
#set ($nav_item_css_class = "selected")
#end
#if ($nav_item.hasChildren())
#set ($nav_item_attr_has_popup="aria-haspopup='true'")
#end
#if($etiqueta.contains("perfiles"))
<li class="$nav_item_css_class" id="layout_$nav_item.getLayoutId()" $nav_item_attr_selected role="presentation">
<a aria-labelledby="layout_$nav_item.getLayoutId()" href="$nav_item.getURL()" $nav_item_attr_has_popup $nav_item.getTarget() role="menuitem"><span>$nav_item.icon() $nav_item.getName()</span></a>
</li>
#end
#end
</ul>
</div>
#if($teaser.contains("teaser"))
#*
*
*slider
*
*#
<div class="teaser-home">
<div class="carousel" id="main-slider">
<div class="carousel__content">
<div class="item">
<div class="text">
<h2>Cumplimos 40 años</h2>
<p>¡Estamos de fiesta!</p>
<small>
<a href="http://40aniversario.cide.edu">
Consulta los eventos en el micrositio del 40 aniversario
</a>
</small>
</div>
<img class="slide-full-image" src="$images_folder/slider-aniversario.jpg">
</div>
<div class="item">
<div class="text">
<h2>Dossier Académico</h2>
<p>
De la Torre de Marfil a la pertinencia
<br>
<small>
David Arellano Gault | Jesús F. Hernández Galicia
</small>
</p>
<small>
Consultar el dossier
</small>
</div>
<img class="slide-full-image" src="$images_folder/slider-dossier.jpg">
</div>
<div class="item">
<div class="text">
<h2>Prof. Juan Rosellón:</h2>
<p>Financial Transmission Rights</p>
<small>
Ver video
</small>
</div>
<img class="slide-full-image" src="$images_folder/slider-juan-rosellon.jpg">
</div>
<div class="item">
<div class="text">
<h2>Diplomado en Alta Dirección</h2>
<p>21 de noviembre de 2014 al 15 de febrero de 2015</p>
<small>
Consultar Información
</small>
</div>
<img class="slide-full-image" src="$images_folder/slider-alta-direccion.jpg">
</div>
<div class="item">
<div class="text">
<h2>Dr. Claudio López-Guerra:</h2>
<p>Democracy and Disenfranchisement</p>
<small>
Ver video
</small>
</div>
<img class="slide-full-image" src="$images_folder/slider-claudio-lopez.jpg">
</div>
<div class="item">
<div class="text">
<h2>Estefanía Vela</h2>
<p>El Protocolo LGBTI de la SCJN</p>
<small>
Ver video
</small>
</div>
<img class="slide-full-image" src="$images_folder/slider-estefania-vela.jpg">
</div>
<div class="item">
<div class="text text-right">
<h2>
Novedades Editoriales
</h2>
<small>
Visita la Librería CIDE
</small>
</div>
<img class="slide-full-image" src="$images_folder/slider-libros.jpg">
</div>
<div class="item">
<div class="text">
<h2>
Curso de Amparo: Análisis y aplicación práctica.
</h2>
<small>
Consulta este curso en línea
</small>
</div>
<img class="slide-full-image" src="$images_folder/slider-curso.jpg">
</div>
<div class="item">
<div class="text">
<p class="text">
Generamos conocimiento científico con estándares internacionales en ciencias sociales que contribuye a explicar la realidad y resolver problemas
<small>
<a href="http://boletininvestigacion.cide.edu/">
Consulta nuestras investigaciones recientes
</a>
</small>
</p>
</div>
<img class="slide-full-image" src="$images_folder/slider-2.jpg">
</div>
<div class="item">
<div class="text small">
<h2>
Programa de difusión de los temas publicados en el apartado de Transparencia Focalizada
</h2>
<p>
En favor de la transparencia, el
<acronym>cide</acronym>
ofrece orientación acerca de 5 temas básicos (Programas Docentes, Datos Abiertos, Boletín de Investigación, Becas, Suscripciones y Venta de Publicaciones, Proyectos de inversión)
</p>
<small>
<a href="/transparencia_focalizada.html">
Detalles del programa
</a>
</small>
</div>
<img class="slide-full-image" src="$images_folder/slider-transparencia.jpg">
</div>
</div>
<div class="carousel__nav">
PrevNext</div>
#*
*
*Fin del slider
*
*#
#end
</div>
</div>
#if (!$is_signed_in)
<a data-redirect="$is_login_redirect_required" href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>
#end
#if ($has_navigation || $is_signed_in)
#parse ("$full_templates_path/navigation.vm")
#end
</header>
<div id="content">
<h2 class="page-title">
<span>$the_title</span>
</h2>
#if ($selectable)
$theme.include($content_include)
#else
$portletDisplay.recycle()
$portletDisplay.setTitle($the_title)
$theme.wrapPortlet("portlet.vm", $content_include)
#end
</div>
<footer id="footer" role="contentinfo">
<div class="pie">
<ul class="footer-cols">
<li id="footer-info">
Centro de Investigación y Docencia Económicas
<p class="privacy-policy-link">
Política de privacidad
</p>
Carretera México- Toluca 3655 Col. Lomas de Santa Fe 01210 México, D.F.
Conmutador: 5727-98-00 Lada sin costo: 01 800 021 2433 (CIDE) | ©
Localización
</li>
<li>
<h2>Aspirantes</h2>
<ul>
<li><a href="https://msicidepdn.cide.edu/opa_solicitudes/">
Registro en línea
</a></li>
<li>
<a href="http://www.cide.edu/v2/resultadosdeadmision.html">
Resultados de Admisión
</a>
</li>
<li>
<a href="http://www.cide.edu/v2/curso_de_nivelacion.html">
Curso de nivelación
</a>
</li>
<li>
<a href="http://www.cide.edu/semana-de-oyentes.php">
Semana de oyentes
</a>
</li>
<li>
<a href="http://www.cide.edu/v2/programas_docentes.html">
Programas Docentes
</a>
</li>
</ul>
</li>
<li>
<h2>Investigadores</h2>
<ul>
<li>
<a href="http://www.cide.edu/v2/divisiones_academicas.html">
Divisiones Académicas
</a>
</li>
<li>
<a href="#">
Programas Interdisciplinarios
</a>
</li>
<li>
<a href="#">
Programas Especiales
</a>
</li>
<li>
<a href="http://www.cide.edu/v2/publicaciones.html">
Publicaciones
</a>
</li>
<li>
Boletín de Investigación
</li>
<li>
<a href="https://msicidepdn.cide.edu/rh_dtsactualiza_externos/" target="_blank">
Profesores externos
</a>
</li>
</ul>
</li>
<li>
<h2>Estudiantes</h2>
<ul>
<li>
Licenciatura
</li>
<li>
Maestrías
</li>
<li>
Doctorado
</li>
<li>
Educación Continua
</li>
</ul>
</li>
<li>
<h2>Recursos</h2>
<ul>
<li>
Biblioteca
</li>
<li>
Librería
</li>
<li>
BIIACS
</li>
</ul>
</li>
<li>
<h2>Administrativos</h2>
<ul>
<li>
<a href="http://portal.cide.edu/">
Intranet
</a>
</li>
<li>
<a href="http://cide.edu.mx/directorio.php">
Directorio telefónico
</a>
</li>
</ul>
</li>
<li id="transparencia">
<h2>Transparencia</h2>
<ul>
<li>
<a href="http://www.cide.edu/v2/transparencia.html">
Normatividad en materia de transparencia
</a>
</li>
<li>
<a href="http://www.cide.edu.mx/comitedeinformacion.htm">
Comité de información
</a>
</li>
<li>
<a href="http://www.cide.edu.mx/transparencia_focalizada.html">
Transparencia focalizada
</a>
</li>
<li>
<a href="http://www.cide.edu/v2/sfp-cide/indicadores.php">
Indicadores de Programas Presupuestarios
</a>
</li>
<li>
<a href="http://www.cide.edu.mx/sfp-cide/recomendaciones.htm">
Recomendaciones Dirigidas al CIDE
</a>
</li>
<li>
<a href="http://www.cide.edu.mx/sfp-cide/estudiosyopiniones.htm">
Estudios y Opiniones
</a>
</li>
<li>
<a href="http://www.cide.edu.mx/sfp-cide/rendiciondecuentas.htm">
Rendición de Cuentas
</a>
</li>
<li>
<a href="http://www.cide.edu.mx/sfp-cide/participacion-ciudadana.php">
Participación Ciudadana
</a>
</li>
</ul>
</li>
<br style="clear:both" />
</ul>
<br style="clear:both" />
</div>
<br style="clear:both" />
</footer>
</div>
$theme.include($body_bottom_include)
$theme.include($bottom_include)
</body>
</html>
Thanks in advance for taking the time to read this.
By the way, the line that's apparently not getting read is this one #if($etiqueta.contains("perfiles"))
<li class="$nav_item_css_class" id="layout_$nav_item.getLayoutId()" $nav_item_attr_selected role="presentation">
<a aria-labelledby="layout_$nav_item.getLayoutId()" href="$nav_item.getURL()" $nav_item_attr_has_popup $nav_item.getTarget() role="menuitem"><span>$nav_item.icon() $nav_item.getName()</span></a>
</li>
#end
or if you don't care about permissions on this custom field you can as well try to use following method:
$nav_item.getLayout().getExpandoBridge().getAttribute("etiqueta-pagina",false))
This method ignores custom field permissions.
br,
Pawel
From the code it seems like you have created a custom attribute for page and based on that you are processing something in vm file. You need to assign guest view permission for custom attribute you created from liferay control.
HTH
I am trying to implement a YUI2 Menu component into a JSF. I coded it in a normal HTML file and it works.
(source: alvinsim.com)
But when i ported the code to JSF, it didn't show properly. I think it is because JSF couldn't find the YUI2 skin.
(source: alvinsim.com)
I am using Netbeans 7.2, Java JDK6, and Glassfish3. My project structure is like this.
(source: alvinsim.com)
Below is my JSF code.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>YUI2 Menu</title>
<h:outputStylesheet name="styles.css" library="css" />
<!-- ===== YUI Library Implementation ===== -->
<!-- Fonts CSS - Recommended but not required -->
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/yui/fonts/fonts-min.css" />
<!-- <h:outputStylesheet name="yui/fonts/fonts-min.css" /> -->
<!-- Core + Skin CSS -->
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/assets/skins/sam/menu.css" />
<!-- <h:outputStylesheet name="yui/menu/assets/skins/sam/menu.css" /> -->
<!-- Dependencies -->
<script src="#{facesContext.externalContext.requestContextPath}/resources/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="#{facesContext.externalContext.requestContextPath}/resources/yui/container/container_core-min.js">
</script>
<!-- <h:outputScript name="yui/yahoo-dom-event/yahoo-dom-event.js" />
<h:outputScript name="yui/container/container_core-min.js" /> -->
<!-- Source File -->
<!-- <script src="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/menu-min.js"></script> -->
<h:outputScript name="yui/menu/menu-min.js" />
<!-- ===== END ===== -->
</h:head>
<h:body>
<div id="mymenubar" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#file">File</a>
<div id="file" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
New File <em class="helptext">Ctrl + N</em>
</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">New Folder</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#open">Open <em class="helptext">
Ctrl + O</em>
</a>
<div id="open" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 1</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 2</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 3</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 4</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Print <em class="helptext">Ctrl + P</em>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#">Edit</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Undo<em class="helptext">Ctrl + Z</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Redo<em class="helptext">Ctrl + Y</em></a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Cut<em class="helptext">Ctrl + X</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Copy<em class="helptext">Ctrl + C</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Paste<em class="helptext">Ctrl + V</em>
</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Delete<em class="helptext">Del</em></a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Select All<em class="helptext">Ctrl + A</em>
</a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Find<em class="helptext">Ctrl + F</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Find Again<em class="helptext">Ctrl + G</em>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#">Very Long Menu</a>
<div id="longMenu" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Very, very long Item 1</a>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 2</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 3</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 4</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 5</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 6</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 7</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 8</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 9</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 10</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 11</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 12</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 13</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 14</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 15</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 16</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 17</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 18</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 19</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 20</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script>
YAHOO.util.Event.onDOMReady(function () {
// Instantiate a MenuBar, passing in the id of the HTML element
// representing the MenuBar.
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
autosubmenudisplay: true,
maxheight: 300
});
// Render the MenuBar instance
oMenuBar.render();
});
</script>
</h:body>
In my code, I did change from using the <link /> tag to <h:outputStylesheet /> tag (and same for the JavaScript), and it still doesn't work.
Can someone point me where I am doing it wrong?
After several rounds of debugging using firebug and IE9's own debugging tool, and code switching, I finally realized why it didn't work. It was a simple mistaken which was overlooked when porting my code from HTML to JSF.
The reason it didn't work is because I left out the code to load the YUI skin in the <h:body /> or parent element. So the <h:body /> tag should look like <h:body styleClass="yui-skin-sam">.
And the end result is below
(source: alvinsim.com)