I'm processing a document and I need to generate xml:id attributes for select elements. I've run a modified identity transform on a scaled back sample document and I'm getting some extra attributes in the output. I think that it's a namespace issue but I'm not sure how to handle it.
I know that I should probably write templates for every potential element in the input document, but I don't know what all of them might be. Is there a way to handle this without resorting to writing an exhaustive template list?
Apologies if there's too much example; the problem in the output below is the part="N" appearing in every <p>. I'm using XSLT 2.0 and Saxon EE 9.5.0.2. Thanks for your time & trouble.
Input:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-model href="http://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_lite.rng" type="application/xml" schematypens="http://relaxng.org/ns/structure/1.0"?>
<?xml-model href="http://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_lite.rng" type="application/xml"
schematypens="http://purl.oclc.org/dsdl/schematron"?>
<TEI xmlns="http://www.tei-c.org/ns/1.0">
<teiHeader>
<fileDesc>
<titleStmt>
<title>Title</title>
</titleStmt>
<publicationStmt>
<idno>1234</idno>
</publicationStmt>
<sourceDesc>
<p>Information about the source</p>
</sourceDesc>
</fileDesc>
</teiHeader>
<text>
<body>
<div type="book">
<div type="chapter" n="1">
<pb facs="003" n="1"/>
<head type="main">The Book's Title</head>
<head type="subhead">Chapter I.</head>
<p>Mauris suscipit ultricies odio, nec tincidunt justo laoreet et. Suspendisse nisi velit, dignissim et risus id, pulvinar rutrum tellus. Phasellus metus justo, lobortis eu lorem quis, tincidunt tempor ipsum. Proin suscipit suscipit massa. Sed nec bibendum sapien, id tempus metus. Nunc eu laoreet quam. Nam sagittis ac lorem sit amet venenatis.</p>
</div>
<div type="chapter" n="2">
<head type="subhead">Chapter 2.</head>
<pb facs="005" n="3"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula quis lacus sagittis luctus nec nec erat. Nunc in ultrices purus, a semper est. Fusce bibendum pharetra ornare. Donec tristique molestie eleifend. Mauris dignissim arcu sed urna auctor condimentum. Pellentesque rhoncus ante ut imperdiet consectetur. Duis blandit tortor dolor, ut mattis risus laoreet at. Donec eu dui ut enim pulvinar pharetra eu eget metus. In tortor ante, varius faucibus leo nec, malesuada aliquam neque. Quisque gravida, velit et iaculis tin/cidunt, quam augue condimentum purus, non elementum nisi magna vel odio.</p>
</div>
<div type="chapter" n="3">
<head type="subhead">Chapter 3.</head>
<pb facs="007" n="5"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula quis lacus sagittis luctus nec nec erat. Nunc in ultrices purus, a semper est. Fusce bibendum pharetra ornare. Donec tristique molestie eleifend. Mauris dignissim arcu sed urna auctor condimentum. Pellentesque rhoncus ante ut imperdiet consectetur. Duis blandit tortor dolor, ut mattis risus laoreet at. Donec eu dui ut enim pulvinar pharetra eu eget metus. In tortor ante, varius faucibus leo nec, malesuada aliquam neque. Quisque gravida, velit et iaculis tincidunt, quam augue condimentum purus, non elementum nisi magna vel odio.</p>
</div>
</div>
</body>
</text>
</TEI>
XSLT:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns="http://www.tei-c.org/ns/1.0"
xpath-default-namespace="http://www.tei-c.org/ns/1.0"
exclude-result-prefixes="#all"
version="2.0">
<!-- adding xml:id values to P5 TEI -->
<!-- variables -->
<xsl:variable name="vID" select="/TEI/*/*/publicationStmt/idno[1]"/>
<xsl:variable name="vID-fileName" select="concat($vID, '_new.xml')"/>
<xsl:variable name="vID-primary" select="concat('ms', $vID)"/>
<!-- processing begins -->
<!-- identity transform -->
<!-- deep copy -->
<xsl:template match="#* | node()">
<xsl:copy>
<xsl:apply-templates select="#* | node()"/>
</xsl:copy>
</xsl:template>
<!-- add xml:id to document node -->
<xsl:template match="TEI">
<TEI xmlns="http://www.tei-c.org/ns/1.0" xml:id="{$vID-primary}">
<xsl:apply-templates/>
</TEI>
</xsl:template>
<!-- add xml:id to divs -->
<xsl:template match="div">
<div>
<xsl:if test="#type">
<xsl:attribute name="type">
<xsl:value-of select="#type"/>
</xsl:attribute>
</xsl:if>
<xsl:if test="#n">
<xsl:attribute name="n">
<xsl:value-of select="#n"/>
</xsl:attribute>
</xsl:if>
<xsl:attribute name="xml:id">
<xsl:value-of select="generate-id(.)"/>
</xsl:attribute>
<xsl:apply-templates/>
</div>
</xsl:template>
<xsl:template match="pb">
<xsl:variable name="vN" select="#n"/>
<xsl:variable name="vFacs" select="#facs"/>
<pb facs="{$vFacs}" n="{$vN}" xml:id="{generate-id(.)}"/>
</xsl:template>
</xsl:stylesheet>
Current output:
<?xml version="1.0" encoding="UTF-8"?><?xml-model href="http://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_lite.rng" type="application/xml" schematypens="http://relaxng.org/ns/structure/1.0"?><?xml-model href="http://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_lite.rng" type="application/xml"
schematypens="http://purl.oclc.org/dsdl/schematron"?><TEI xmlns="http://www.tei-c.org/ns/1.0" xml:id="ms1234">
<teiHeader type="text">
<fileDesc>
<titleStmt>
<title>Title</title>
</titleStmt>
<publicationStmt>
<idno>1234</idno>
</publicationStmt>
<sourceDesc default="false">
<p part="N">Information about the source</p>
</sourceDesc>
</fileDesc>
</teiHeader>
<text>
<body>
<div type="book" xml:id="d2e33">
<div type="chapter" n="1" xml:id="d2e35">
<pb facs="003" n="1" xml:id="d2e37"/>
<head type="main">The Book's Title</head>
<head type="subhead">Chapter I.</head>
<p part="N">Mauris suscipit ultricies odio, nec tincidunt justo laoreet et. Suspendisse nisi velit, dignissim et risus id, pulvinar rutrum tellus. Phasellus metus justo, lobortis eu lorem quis, tincidunt tempor ipsum. Proin suscipit suscipit massa. Sed nec bibendum sapien, id tempus metus. Nunc eu laoreet quam. Nam sagittis ac lorem sit amet venenatis.</p>
</div>
<div type="chapter" n="2" xml:id="d2e49">
<head type="subhead">Chapter 2.</head>
<pb facs="005" n="3" xml:id="d2e54"/>
<p part="N">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula quis lacus sagittis luctus nec nec erat. Nunc in ultrices purus, a semper est. Fusce bibendum pharetra ornare. Donec tristique molestie eleifend. Mauris dignissim arcu sed urna auctor condimentum. Pellentesque rhoncus ante ut imperdiet consectetur. Duis blandit tortor dolor, ut mattis risus laoreet at. Donec eu dui ut enim pulvinar pharetra eu eget metus. In tortor ante, varius faucibus leo nec, malesuada aliquam neque. Quisque gravida, velit et iaculis tin/cidunt, quam augue condimentum purus, non elementum nisi magna vel odio.</p>
</div>
<div type="chapter" n="3" xml:id="d2e60">
<head type="subhead">Chapter 3.</head>
<pb facs="007" n="5" xml:id="d2e65"/>
<p part="N">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula quis lacus sagittis luctus nec nec erat. Nunc in ultrices purus, a semper est. Fusce bibendum pharetra ornare. Donec tristique molestie eleifend. Mauris dignissim arcu sed urna auctor condimentum. Pellentesque rhoncus ante ut imperdiet consectetur. Duis blandit tortor dolor, ut mattis risus laoreet at. Donec eu dui ut enim pulvinar pharetra eu eget metus. In tortor ante, varius faucibus leo nec, malesuada aliquam neque. Quisque gravida, velit et iaculis tincidunt, quam augue condimentum purus, non elementum nisi magna vel odio.</p>
</div>
</div>
</body>
</text>
</TEI>
To answer you question of not writing out all of the elements where you want to add xml:id you could replace the templates:
<!-- add xml:id to document node -->
<xsl:template match="TEI">
<TEI xmlns="http://www.tei-c.org/ns/1.0" xml:id="{$vID-primary}">
<xsl:apply-templates/>
</TEI>
</xsl:template>
<!-- add xml:id to divs -->
<xsl:template match="div">
<div>
<xsl:if test="#type">
<xsl:attribute name="type">
<xsl:value-of select="#type"/>
</xsl:attribute>
</xsl:if>
<xsl:if test="#n">
<xsl:attribute name="n">
<xsl:value-of select="#n"/>
</xsl:attribute>
</xsl:if>
<xsl:attribute name="xml:id">
<xsl:value-of select="generate-id(.)"/>
</xsl:attribute>
<xsl:apply-templates/>
</div>
</xsl:template>
With:
<!-- add xml:id to all elements that do not need more adjustments -->
<xsl:template match="TEI | div">
<xsl:copy>
<xsl:apply-templates select="#*"/>
<xsl:attribute name="xml:id">
<xsl:value-of select="generate-id(.)"/>
</xsl:attribute>
<xsl:apply-templates select="node()"/>
</xsl:copy>
</xsl:template>
You can then extend the <xsl:template match="TEI | div"> with all elements you only want to place xml:id extra in it. Elements where you want to place xml:id and do other stuff can be written into a separate template or you add some kind of a xsl:choose
Regarding the <p part="N"> issue. This does not occur in Altova XMLSpy.
Related
I've got a long list of links in an offcanvas div. These are in the form because I want to use them to navigate a very long background page. (Effectively, it is a table of contents)
The offcanvas pops up happily. The navigation links work; jumping the background page to the correct position. Hurrah!
But... when you've selected and link and navigated the background page to a location and then close the offcanvas the background page resets to the top of the page! Argghh...
How can I keep the background page from resetting position, when I close the offcanvas?
Thanks for any help available.
div.head{
font-weight: bold;
margin-top: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="btn-group btn-group-sm" role="group" aria-label="spec_tools">
<a class="btn btn-outline-primary" data-bs-toggle="offcanvas" href="#offcanvasNav" role="button" aria-controls="offcanvasNav">Navigator</a>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavLabel">Navigator</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<strong>
<div>
Item0
</div>
</strong>
<div class="ms-2">
Item 1
</div>
<div class="ms-2">
Item 2
</div>
<div class="ms-2">
Item 3
</div>
<div class="ms-2">
Item 4
</div>
<div class="ms-2">
Item 5
</div>
</div>
</div>
<!-- Page Content -->
<div class="head" id="item0">Item 0</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus ullamcorper nunc eu luctus. Etiam congue placerat lorem, id congue massa ornare sed. Morbi imperdiet turpis eu urna semper tincidunt. Praesent ultrices mollis arcu vel elementum. Duis sollicitudin ultrices felis, nec vehicula massa congue in. Sed urna quam, sollicitudin ac felis et, ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>
<div class="head" id="item1">Item 1</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus ullamcorper nunc eu luctus. Etiam congue placerat lorem, id congue massa ornare sed. Morbi imperdiet turpis eu urna semper tincidunt. Praesent ultrices mollis arcu vel elementum. Duis sollicitudin ultrices felis, nec vehicula massa congue in. Sed urna quam, sollicitudin ac felis et, ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>
<div class="head" id="item2">Item 2</div>
<div>Phasellus at efficitur orci. In imperdiet ut purus a semper. Mauris cursus ipsum vel finibus efficitur. Sed sit amet sem euismod, volutpat lacus ac, euismod justo. Pellentesque tincidunt justo in quam vulputate tincidunt. Curabitur porttitor felis arcu, et pellentesque odio malesuada quis. Aliquam hendrerit sapien tortor, eu ornare lorem laoreet interdum. Suspendisse velit lectus, sagittis eget ex nec, dictum finibus ex. Proin eget mollis nisl. Suspendisse porttitor placerat gravida. Vestibulum nec tempor eros, a congue ipsum. Ut est libero, viverra semper dapibus et, consectetur non risus. Cras at mauris pulvinar mauris accumsan ullamcorper. Aliquam nec ex libero. Suspendisse rhoncus erat sit amet tellus congue, sit amet sodales leo faucibus. Fusce risus diam, ullamcorper sit amet pulvinar eu, tempor vulputate eros.</div>
<div class="head" id="item3">Item 3</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus ullamcorper nunc eu luctus. Etiam congue placerat lorem, id congue massa ornare sed. Morbi imperdiet turpis eu urna semper tincidunt. Praesent ultrices mollis arcu vel elementum. Duis sollicitudin ultrices felis, nec vehicula massa congue in. Sed urna quam, sollicitudin ac felis et, ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>
<div class="head" id="item4">Item 5</div>
<div>Phasellus at efficitur orci. In imperdiet ut purus a semper. Mauris cursus ipsum vel finibus efficitur. Sed sit amet sem euismod, volutpat lacus ac, euismod justo. Pellentesque tincidunt justo in quam vulputate tincidunt. Curabitur porttitor felis arcu, et pellentesque odio malesuada quis. Aliquam hendrerit sapien tortor, eu ornare lorem laoreet interdum. Suspendisse velit lectus, sagittis eget ex nec, dictum finibus ex. Proin eget mollis nisl. Suspendisse porttitor placerat gravida. Vestibulum nec tempor eros, a congue ipsum. Ut est libero, viverra semper dapibus et, consectetur non risus. Cras at mauris pulvinar mauris accumsan ullamcorper. Aliquam nec ex libero. Suspendisse rhoncus erat sit amet tellus congue, sit amet sodales leo faucibus. Fusce risus diam, ullamcorper sit amet pulvinar eu, tempor vulputate eros.</div>
Bootstrap is re-focusing and scrolling to the offcanvas trigger element when the offcanvas is closed. I've opened a bug report on this: https://github.com/twbs/bootstrap/issues/34447, however the behavior may be by-design.
Workaround:
Bootstrap currently checks to see if the trigger element is visible in the viewport when the offcanvas is hidden. Therefore, a workaround is to make the trigger element always visible on the page using fixed positioning...
For example,
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" data-bs-scroll="true" aria-labelledby="offcanvasNavLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavLabel">Navigator</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" tabindex="-1"></button>
</div>
<div class="offcanvas-body">
...TOC nav
</div>
</div>
<div class="container-fluid py-2">
<div class="row">
<div class="col-2">
<!-- fixed position trigger always visible -->
<button class="btn btn-outline-primary position-fixed" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav" role="button" id="btnTrigger" aria-controls="offcanvasNav">Navigator</button>
</div>
<div class="col">
<div class="head" id="item0">Item 0</div>
.. more page content
</div>
</div>
</div>
https://codeply.com/p/gALtKp3xd4
If anyone finds this still, using the "hidden" event of the offcanvas to stop the scroll to top worked for me:
let y = window.scrollY;
let offcanvas = document.getElementById('offcanvas');
offcanvas.addEventListener('hidden.bs.offcanvas', (e) => {
window.scrollTo(0, y);
});
Hi; i have a big problem jqueryui. i want to use jqueryui tab but error return öe. This error:
Microsoft Jscript runtimeerror: The value of the property '$' is null or undefined not a Function object. i have last version 1.8 . this error incredible. How to solve it?
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ChildSite_FullExtNet.Master" Inherits="System.Web.Mvc.ViewPage<GenSystem.Models.MinuteSchedule>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
<%=Html.ValidationSummary("Please correct the erros and try again.") %>
<% using (Html.BeginForm())
{
%>
<%=Html.HiddenFor(q=>q.JobSchedulerId) %>
<span><%:Html.LabelFor(m=>m.JobName) %>: <%:Html.TextBoxFor(m=>Model.JobName) %></span>
<span><%:Html.LabelFor(m=>m.StartDateTime) %>: <%:Html.TextBoxFor(m=>Model.StartDateTime) %></span>
<span><%:Html.LabelFor(m=>m.EndDateTime) %>: <%:Html.TextBoxFor(m=>Model.EndDateTime) %></span>
<span><%:Html.LabelFor(m=>m.RepeatCount) %>: <%:Html.TextBoxFor(m=>Model.RepeatCount) %></span>
<span><%:Html.LabelFor(m=>m.RepeatInterval) %> : <%:Html.TextBoxFor(m=>Model.RepeatInterval)%></span>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<%} %>
</asp:Content>
Most probably you have not included the java script files in the correct order.The jquery library must be loaded before the libraries for the ui.This can be solved if you include the files in the correct order.
I am trying to use jQuery tabs with cookies. I got it working but the CSS to style the tabs isn't working and I need some help to get it working. I downloaded jQuery and extratced it into a folder called development-bundle
Here is my link to the css but it's not working.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sticky Tab</title>
<link rel="stylesheet" href="development-bundle/externals/css/jquery-ui/ui-lightness/1.7.2/jquery-ui-lightness.css" media="screen" />
</head>
<body>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<script type="text/javascript" src="development-bundle/externals/jquery/core/1.4.1/jquery.js"></script>
<script type="text/javascript" src="development-bundle/externals/jquery/ui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript" src="development-bundle/cookies/jquery.cookies.js"></script>
<script type="text/javascript">
$( function()
{
var cookieName, $tabs, stickyTab;
cookieName = 'stickyTab';
$tabs = $( '#tabs' );
$tabs.tabs( {
select: function( e, ui )
{
$.cookies.set( cookieName, ui.index );
}
} );
stickyTab = $.cookies.get( cookieName );
if( ! isNaN( stickyTab ) )
{
$tabs.tabs( 'select', stickyTab );
}
} );
</script>
</body>
This is what am getting
But this is what am trying to achieve
Any suggestions on what am doing wrong here with my css link ??
You are not adding CSS classes to your markup.
http://jqueryui.com/tabs/
See the source for this example. Make sure your browser isn't reporting any errors.
Is it possible to make a Primefaces Layout Scrollable? I dont want to make my layoutUnits scrollable as I dont really want multiple scrollable elements on the pages. I would prefer for the page & content panels to resize according to the content, so the user can view the data in a linear fashion. I am currently using a full page primefaces layout:
<p:layout fullPage="true">
If this isnt possible then what is my best alternatives as I quite like the primefaces components but could live without its layout features.
Cheers
You can create a layoutUnit for center, then provide a style class in it, where in your css you can provide scrollable along to x and y position.
<p:layoutUnit position="center">
<div id="myScreen" class="right col scroll-x scroll-y">
<ui:insert name="content">My Screen Content Goes Here</ui:insert>
</div>
</p:layoutUnit>
And in cc file --
.col {
top: 0; bottom: 0;
}
.scroll-x {
overflow-x: auto;
}
.scroll-y {
overflow-y: auto;
}
Hope this would help.
as far as i can tell it cannot be done! I dumped the primefaces layout and went with a generic web layout...
Just put everything in a <p:scrollPanel> component inside the <p:layoutunit>, that will work (now that it's 2015 and we are on Primefaces v5.1.x!). Make sure you add absolute positioning and height to stretch the <p:scrollPanel> to the innards of the <p:layoutunit> - see below.
http://www.primefaces.org/showcase/ui/panel/scrollPanel.xhtml
<p:scrollPanel mode="native" style="position: absolute; height: 100%;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus.
</p>
<p>
Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci.
</p>
<p>
Sed tincidunt urna quis metus lacinia commodo. Praesent convallis eros vel quam scelerisque bibendum. Mauris eget dignissim libero. Pellentesque sagittis sem quis ipsum viverra, sed consequat mi consectetur. Donec facilisis dapibus ultrices. Donec luctus auctor lacus, at congue nisi aliquet eu. Praesent in justo at risus faucibus ultricies. Fusce et libero lectus. Donec elementum pharetra sapien, at placerat purus sodales et. Vivamus iaculis lacus sed placerat rhoncus. Mauris iaculis sit amet nunc at placerat. Donec consequat euismod lacinia. Etiam nec quam vehicula, cursus massa in, ullamcorper erat.
</p>
<p>
Praesent volutpat scelerisque vestibulum. In eu massa non neque rutrum commodo. Nunc vel enim nisi. Aenean leo ipsum, molestie vel justo nec, pharetra luctus dui. Nunc rhoncus turpis id lorem luctus consequat. Nulla condimentum adipiscing turpis consequat semper. Etiam ullamcorper velit nec hendrerit malesuada. Praesent venenatis leo sit amet arcu commodo, sit amet porta tellus suscipit. Quisque mi tortor, vestibulum in arcu non, pretium auctor libero. In commodo luctus placerat.
</p>
</p:scrollPanel>
I don't believe that layouts are right for what you want to do here. This is good for enabling templating on a single page and the such. You might be able to however put an iframe within a layoutUnit to emulate the same effect though I have never tried this personally and couldn't tell you if it will work or not.
How do I work with widgets? Here's what I've got so far:
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<div class="ui-widget">
<div class="ui-widget-header">
header
</div>
<div class="ui-widget-content">
content
</div>
</div>
</body>
</html>
I'm trying to make a nice little div with a shaded header.
As easy as 1, 2, 3 and 4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Html</title>
<!-- 1. Include the javascript files -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<!-- 2. Include the CSS files (you can change the theme changing /base/ -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
<!-- 3. Add the markup for the widget you want (see below) -->
<!-- 4. Call the jQuery UI javascript function that performs the magic -->
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<!-- 3. Add the markup for the widget you want -->
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
All you need added to your current code is the stylesheet to make those lovely classes have some meaning, like this:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css" type="text/css" rel="stylesheet" />
Here's your example with that theme (dot-luv)
For other themes, look at this question, just change the version number in the url from 1.7.0 to current, which is 1.8 as of this answer time. Alternatively, you can design your own theme in ThemeRoller and point to that stylesheet :)
The UI effect are mostly obtained with the use of css files.
You can use javascript to make some effects that play with add and remove class from an element.
JQuery UI is a good example of some effects.