xslt rollover image displays dropdown of text per image

Molly 94 posts 134 karma points

Jun 25, 2013 @ 14:47

XSLT

Hi There,

I have a scenarion whereby i have a document type named "All teams" and children of this doc type are "Team type" and children of these doc types are team members. E.g.

[Board]

[Team Member 1] [Team Member 2] [Team Member 3]

[Team]

[Team Member 1] [Team Member 2] [Team Member 3]

[Management]

[Team Member 1] [Team Member 2] [Team Member 3]

[div here that slides down displaying paragraph of text for each team member when their image is hovered over]

I've used this code from a source to get the gist of what i want

<html>
   <head>
     <style>
            .inlinestyle{
                display : inline; 
              padding : 10px;
              height : 500px;
              float : left;
            }
            .size{
               width : 100px;
               height : 100px;
              padding : 2px;
           }
            .innerDiv{
               height : 300px;
              width : 320px;
               display : none;
          }
            .innerDivClass{
              padding : 2px;
               font : normal 12px Verdana;
              display : inline;
            }
        </style>
       <script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script>
           $(document).ready(function(){
                $(".size").mouseover(function(){
                 var id = $(this).attr("name");
                   var divEle = $("#"+id);
                  var content = $(this).attr("_content");
                  divEle.css("display","none");
                    var imgSrc = $(this).attr("src");  
                 var child = getChildElement(divEle);
                 var img = child[0];
                  var div = child[1];
                  img.attr("src", imgSrc);
                 div.text(content);
                   divEle.slideDown();
              });
          });
          function getChildElement(divEle){
                var img = $("img", divEle);
              var div = $("div" , divEle);
             var a = $("a", divEle);
              if(img.length < 1 && div.length < 1 && a.length < 1){
                   img = $("<img>");
                  img.css({"width" : "320px", "height" : "300px"});
                    div = $("<div>");
                  div.addClass("innerDivClass");
                   a = $("<a>");
                  a.attr("href","#");
                  a.css("float", "right");
                 a.text("Read More");
                 divEle.append(img);
                  divEle.append(div);
                  divEle.append(a);
                }
                return [img,div,a];
          }
        </script>
  </head>
    <body style="background-color:red;">
       <!-- Change the _content value in the each img tag as your wish , this going to be display below the image -->
     <!-- Change src of img tag as your wish-->
     <div class="inlinestyle">
          <img class="size" name="cont1" src="http://i35.tinypic.com/2vmvwqe.jpg" _content="Pencil Art 1"/>
          <img class="size" name="cont1" src="http://blog.westervillelibrary.org/teens/wp-content/uploads/2008/02/pencil-art-seethe.jpg" _content="Pencil Art 2"/>
           <img class="size" name="cont1" src="http://www.drivakos.com/pencil-art-boywithsnake.jpg" _content="Pencil Art 3"/>
         <div id="cont1" class="innerDiv"></div>
      </div>
     <div class="inlinestyle">
          <img class="size" name="cont2" src="http://i35.tinypic.com/2vmvwqe.jpg" _content="Pencil Art 1"/>
          <img class="size" name="cont2" src="http://blog.westervillelibrary.org/teens/wp-content/uploads/2008/02/pencil-art-seethe.jpg" _content="Pencil Art 2"/>
           <img class="size" name="cont2" src="http://www.drivakos.com/pencil-art-boywithsnake.jpg" _content="Pencil Art 3"/>
         <div id="cont2" class="innerDiv"></div>
      </div>
     <div class="inlinestyle">
          <img class="size" name="cont3" src="http://i35.tinypic.com/2vmvwqe.jpg" _content="Pencil Art 1"/>
          <img class="size" name="cont3" src="http://blog.westervillelibrary.org/teens/wp-content/uploads/2008/02/pencil-art-seethe.jpg" _content="Pencil Art 2"/>
           <img class="size" name="cont3" src="http://www.drivakos.com/pencil-art-boywithsnake.jpg" _content="Pencil Art 3"/>
         <div id="cont3" class="innerDiv"></div>
      </div>
 </body>
</html>

So far my xslt looks like this :

<xsl:template match="/">
        <!-- Process all Team Type children of $currentPage -->
  <xsl:apply-templates select="$currentPage/TeamType" />
    </xsl:template>
<xsl:template match="TeamType">
        <h2><xsl:value-of select="@nodeName" /></h2>
          <div class="inlineStyle">
        <!-- Process all Team member children of this Team Type -->
<xsl:apply-templates select="teamMember" />
          <div>
             <xsl:attribute name="id"><xsl:value-of select="@nodeName" /></xsl:attribute> 
        <xsl:attribute name="class">innerDiv</xsl:attribute>
                    </div>             
 </div>
   </xsl:template>
     
   <xsl:template match="teamMember">
                  <img>
                   <xsl:attribute name="name"><xsl:value-of select="../@nodeName"/></xsl:attribute>
                     <xsl:attribute name="class">size</xsl:attribute>
                   <xsl:attribute name="src"><xsl:value-of select="profileImage"/></xsl:attribute>
                      <xsl:attribute name="alt"><xsl:value-of select="@nodeName"/></xsl:attribute>
                     <xsl:attribute name="_content"><xsl:value-of select="dropdownText" disable-output-escaping="yes" />
</xsl:attribute>
                 
</img>
                                     
      </xsl:template>
</xsl:stylesheet>

My aim is for it to render like so :

<div class="inlinestyle">
            <img class="size" name="Board" src="http://i35.tinypic.com/2vmvwqe.jpg" _content="paragraph of content for"/>
          <img class="size" name="cont3" src="http://blog.westervillelibrary.org/teens/wp-content/uploads/2008/02/pencil-art-seethe.jpg" _content="Pencil Art 2"/>
           <img class="size" name="cont3" src="http://www.drivakos.com/pencil-art-boywithsnake.jpg" _content="Pencil Art 3"/>
         <div id="cont3" class="innerDiv"></div>
      </div>

But it seems to be rendering the following and not closing div properly and includes the footer and messes up the flow and only displays one team member description for both team members i have there, and it's not closing the <div class="innerStyle"> before it starts the new Team Type in this case "Team"

<h2>Board</h2>
<div class="inlineStyle">
<img name="Board" class="size" src="/media/1209/paulkennedy.jpg" alt="PaulKennedy" _content="paragraphs of text in here" />
<img name="Board" class="size" src="/media/1224/dr-mark-nugent.jpg" alt="DrMarkNugent" _content="paragraphs of text in here" />
<div id="Board" class="innerDiv" /></div>
<h2>Team</h2>
<div class="inlineStyle">
<div id="Team" class="innerDiv" /></div>
</div></div>

It needs to render like:

<h2>Board</h2>
<div class="inlineStyle">
<img name="Board" class="size" src="/media/1209/paulkennedy.jpg" alt="PaulKennedy" _content="paragraphs of text in here" />
<img name="Board" class="size" src="/media/1224/dr-mark-nugent.jpg" alt="DrMarkNugent" _content="paragraphs of text in here" />
<div id="Board" class="innerDiv" /></div>                                                   </div>

<h2>Team</h2>
<div class="inlineStyle">
<div id="Team" class="innerDiv" /></div>
</div>

Not really sure where my xslt is going wrong. Any help would be appreciated Thanks Molly

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Jun 25, 2013 @ 15:20

Hi Molly,

I think you almost there, but when I started work with XSLT I experienced, that you can´t have empty div elements. What I
experienced was the same like you, that the markup, closed the tags to early. The way I solved is this time was use the non-breaking-space ( ) tag to not leave the div empty.

You could try give it a shot to see if it´s this that mess your markup too.

  <xsl:template match="/">

      <!-- Process all Team Type children of $currentPage -->
      <xsl:apply-templates select="$currentPage/TeamType" />
    </xsl:template>
    <xsl:template match="TeamType">
      <h2>
        <xsl:value-of select="@nodeName" />
      </h2>
      <div class="inlineStyle">
        <xsl:apply-templates select="teamMember" />
        <div>
          <xsl:attribute name="id">
            <xsl:value-of select="@nodeName" />
          </xsl:attribute>
          <xsl:attribute name="class">innerDiv</xsl:attribute>
          &nbsp;
        </div>
        
      </div>
      
     
     </xsl:template>

  <xsl:template match="teamMember">
    <img>
      <xsl:attribute name="name">
        <xsl:value-of select="../@nodeName"/>
      </xsl:attribute>
      <xsl:attribute name="class">size</xsl:attribute>
      <xsl:attribute name="src">
        <xsl:value-of select="profileImage"/>
      </xsl:attribute>
      <xsl:attribute name="alt">
        <xsl:value-of select="@nodeName"/>
      </xsl:attribute>
      <xsl:attribute name="_content">
        <xsl:value-of select="dropdownText" disable-output-escaping="yes" />
      </xsl:attribute>

    </img>

  </xsl:template>

Hope this can be helpful.

/Dennis

Copy Link

Molly 94 posts 134 karma points

Jun 25, 2013 @ 15:28

Thank you Dennis! That has fixed my footer issue with closing div's so thank you.

Now my only issue i have it the dropdown text doesn't change from the first team member when i hover over the other members and disable-output-escaping="yes" doesn't work on the _content attribute so i'm not sure how i'd go about another way of having the text dropdown.

Thanks

Molly

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Jun 25, 2013 @ 20:33

Hi Molly,

Good to hear that you get further.

I have some questions. If I understand correctly what you are trying to do is when the mouse is entered the image the _content attribute should be set.

Did you get some data out in the _content attribute, or is it just empty at all?

Looking forward to hear from you. And hopefully will can solve this together.

/Dennis

Copy Link

Molly 94 posts 134 karma points

Jun 25, 2013 @ 21:51

Yes that's my aim. the content attribute should show below all TeamTypes and their Children (team members). When it shows the disable-output-escaping isn't working so it renders as html showing <p> tags etc.

I tried placing the dropdownText into the innerDiv which shows the text rendered fine but doesn't change relative to each team member it just continues to show the first team member.

I can send you the site link over email to see what it looks like and what i'm aiming for, incase I am not explaining it very well.

Thank you very much for helping out!

Molly

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Jun 25, 2013 @ 22:48

Hi Molly,

I think a link could be very fine, so I can see the markup, and maybe you also could descibe the content structure for me aswell. You are talking about the teamTypes and their children. But as you've probably seen. I sit in Denmark and the time is here 22:45, right now. I can see that you are from New York. so if you emailed me a link to the site.

I will see if I can help you with a solution tomorrow. You can email me at: denaaen[at]gmail.com.

But you could give this a try:

<xsl:value-ofselect=".//dropdownText"disable-output-escaping="yes"/>

and see if it outputs the specfic dropdown for all of them.

/Dennis

Copy Link

Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib

Jun 25, 2013 @ 22:53

Hi Molly,

The reason you can't get HTML into the _content attribute is simply because that's not valid XML, so the XSLT processor will force the escaping - an attribute can only contain text.

Your sample only says "paragraphs of text in here" - but do you really mean for it to be like this: ?

<img src="..." _content="<p>One paragraph of text here.</p><p>Another para here.</p>" />

- 'coz tha's just not going to happen...

If you're aiming for this type of output (for the same content as above):

<img src="..." _content="One paragraph of text here. Another here." />

- you should be able to have the StripHtml() extension do that for you...

/Chriztian

Copy Link

Molly 94 posts 134 karma points

Jun 26, 2013 @ 12:05

Thanks for your reply. That makes sense and yes that is my aim.

Here is what i have right now (ignore the image sizes as they'll be the same size in the end)

http://adcpostemp.co.uk.173-248-172-179.serv14.temphostspace.com/about-us/team.aspx

my aim is to have it like this (functioning) :

http://frcgroup.co.uk/frc_board.php

I'm currently in UK right now Dennis. Thanks in advance

Molly

Copy Link

Molly 94 posts 134 karma points

Jun 27, 2013 @ 14:32

I've managed to eliminate the javascript and just use css so that solves the dropdown and format of the text. I need now to finally have the div that contains the text for each member to display underneath all members from each team type instead of right now shifting the rest of the team members to underneath the div containing the text.

I've put together screenshots to explain better. What i'm looking for now is guidance on how to write my xslt so that the div will display each team members text content below all members

This is what my aim is :

This is what i have currently:

Thanks in advance

Molly

Copy Link

Molly 94 posts 134 karma points

Jun 27, 2013 @ 14:43

It might help if i show my css and xslt :

CSS:

.size{width : 140px;height : 140px;padding : 0}
a.profileHover{margin-right:30px;}
a.profileHover:nth-last-child(1){margin-right:0}
.innerDiv {
width:990px;
clear:both;
position:relative;
height:500px;
bottom:0
}
a.profileHover:hover + .innerDiv {
display: block;
}

XSLT:

<xsl:template match="/">
<!-- Process all Team Type children of $currentPage -->
<xsl:apply-templates select="$currentPage/TeamType" />
</xsl:template>
<xsl:template match="TeamType">
<h2>
<xsl:value-of select="@nodeName" />
</h2>
<div class="inlineStyle">
<xsl:apply-templates select="teamMember" />          
</div>   
</xsl:template>
<xsl:template match="teamMember">
<a class="profileHover"> <img >
<xsl:attribute name="name">
  <xsl:value-of select="../@nodeName"/>
</xsl:attribute>
<xsl:attribute name="class">size</xsl:attribute>
<xsl:attribute name="src">
  <xsl:value-of select="profileImage"/>
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="@nodeName"/>
</xsl:attribute>
</img></a>
<div>
<xsl:attribute name="class">innerDiv</xsl:attribute>
<xsl:value-of select="dropdownText" disable-output-escaping="yes" />
</div>
</xsl:template>

Right now i know that where i've placed the dropdownText it is within each teamMember template so it won't render how i'd like, i just don't know where to put it.

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Jun 27, 2013 @ 15:14

Hi Molly,

Right now you are pintet into the div called innerDivClass. As I see you have to move the text it before the splitCol div ends, and maybe you also have to change the xpath axes to get the text out of Umbraco.

Good resources to learn an work with XPath could be http://our.umbraco.org/wiki/reference/xslt/xpath-axes-and-their-shortcuts or another could be Chriztian Steinmeier´s XPath Axes Visualizer .

And then change the css to the new structure.

I hope this can help you Molly in some way

/Dennis

Copy Link

Molly 94 posts 134 karma points

Jun 27, 2013 @ 15:22

Thank you Dennis.

Whilst working on it i realised that due to the size of the team member profile images if the block of text was to display underneath all of the team - on smaller browsers you wouldn't be able to see the hovered text so i've changed my layout to have all team members on the left column and the block of text positioned absolute on the right side which is working great.

Thank you again for helping me to this point.

Molly

Copy Link

is working on a reply...

Flag this post as spam?

XSLT rollover image displays dropdown of text per image