I am trying to create a series of resource boxes that will be displayed on page as an image and title.
When an image (resource) is selected (clicked on) a dropdown box containing a brief description of the resource will be displayed, and a button for more info.
When the resource is clicked on again it will display the full description of the resource, and two buttons: one to remove the info and one for less info.
I have used XSLT to select the content for each resource based upon the XML provided when a user inputs a resource.
XSLT:
<div id="newContainer">
<div class="hidden">
<xsl:value-of select="/Properties/Data/Group[@Name='Header']/Datum[@Name='Title']"/>
</div>
<ul id="initialContent">
<xsl:for-each select="/Properties/Data/Group[@Name='List Item']">
<li>
<xsl:attribute name="class">
<xsl:value-of select="Datum[@Name='Title']"/>
</xsl:attribute>
<a href="#">
<img>
<xsl:attribute name="src">
<xsl:value-of select="Datum[@Name='Source']"/>
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="Datum[@Name='Alt']"/>
</xsl:attribute>
</img>
<xsl:value-of select="Datum[@Name='Title']"/>
</a>
</li>
</xsl:for-each>
</ul>
</div>
<div id="briefDescription">
<xsl:if test="@class=Datum[@Name='Title']">
<xsl:for-each select="/properties/Data/Group[@Name='List Item']">
<a>
<xsl:value-of select="Datum[@Name='Description']"/>
<xsl:value-of select="normalize-space(substring(title,1,50))" disable-output-escaping="yes"/>
<xsl:if test="string-length(title) > 50">..</xsl:if>
</a>
</xsl:for-each>
</xsl:if>
</div>
XML:
<Data>
<Datum Exposed="true" ID="ResourceTitle" Name="Title" Type="String">Title</Datum>
<Group Exposed="true" ID="Resource" Name="List Item" Replicatable="true">
<Datum Exposed="true" ID="ResourceName" Name="Name" Type="String">Resource Name</Datum>
<Datum Exposed="true" ID="ResourceSource" Name="Source" Type="File"><![CDATA[$URL_PREFIX/assets/sites/hea1/pages/hea-building.jpg]]></Datum>
<Datum Exposed="true" ID="ResourceLink" Name="Link" Type="File"><![CDATA[Http://www.bbc.co.uk]]></Datum>
<Datum Exposed="true" ID="ResourceAlt" Name="Alt" Type="String">Alt Text</Datum>
<Datum Exposed="true" ID="ResourceDescription" Name="Description" Type="Textarea">Introductory Text</Datum>
</Group>
</Data>
I have then used jQuery to get the boxes to slide down, slide up, hide etc.
I am having trouble ensuring that the XSLT formats the correct resource information, when a resource is selected.
Can I use jQuery to identify a class and then use XSLT to check that class against an XML node? For example:
function getClassName() {
$('li').click(function(){
var chosenClass = $(this).attr('class');
alert(chosenClass);
});
}
<xsl:when test ="$chosenClass and Datum[@Name='Title']">
I have given the selected resources a unique ID and used the XSLT to set a var class name that is provided by the XML node name Name.
The following jQuery is what I have so far. It does what it should until I try and set the class at the id $('#briefDescription').
$(document).ready(function () {
getClassName();
displayContent();
infoMsgRemove();
removeInfo();
moreInfo();
});
var briefInfo = $('#briefDescription');
var moreInfo = $('#moreInfo');
var fullInfo = $('#fullDescription');
var newBriefInfo = newBriefInfo;
function getClassName() {
$('a').click(function () {
var chosenClass = $(this).attr('class');
var selectedClass = chosenClass;
alert(selectedClass + ' chosen');
briefInfo.addClass(chosenClass);
var newBriefInfo = briefInfo.addClass(chosenClass);
var createdBriefInfo = newBriefInfo;
alert('class added'+ briefInfo.text());
});
}
function displayContent() {
$('#initialContent').click(function (e) {
if (newBriefInfo.is(':hidden')) {
newBriefInfo.slideDown('fast');
moreInfo.show('li');
} else {
fullInfo.slideDown('fast');
moreInfo.hide('li');
}
e.preventDefault();
});
}
function moreInfo() {
$('#moreInfo').click(function () {
if (fullInfo.is(':hidden')) {
fullInfo.slideDown('fast');
moreInfo.hide('li');
}
});
}
function infoMsgRemove() {
$('#noInfo').click(function () {
fullInfo.hide();
briefInfo.hide();
alert('msg hidden');
});
}
function removeInfo() {
$('#lessInfo').click(function () {
fullInfo.slideUp('fast');
moreInfo.show('li');
});
}
I have created a JSFiddle that hopefully goes someway to showing what i am trying to do.
In the function getClassName the alert;
alert('class added'+ briefInfo);
retuns 'class added [object object]'
.
I think this is because the HTML is being populated by a string representation of an object?