Updating DIV with XML content on Hover (JQuery)

Answer 1

Strictly speaking, you load() can take a selector after the url and only return a part of the ajax call.

So, something like:

$('#name_div').load('/path/yourXmlFile.xml name:first');

Now, making network calls every time you want to look at something is not very efficient. You probably want to cache the output into a variable.

Answer 2

Let me try to be a bit more specific. Here are some examples:

portfolio.xml file (this file is my main page, displaying the grid and preview div, example uses 3 companies):

<portfolio>
    <company>
        <name>ABC Company</name>
        <sdesc>Consumer products</sdesc>
        <logo-thumb>abcco.jpg</logo-thumb>
        <link>abcco.xml</link>
    </company>

    <company>
        <name>DEF Company</name>
        <sdesc>Communications firm</sdesc>
        <logo-thumb>defco.jpg</logo-thumb>
        <link>defco.xml</link>
    </company>
    <company>
        <name>GHI Corporation</name>
        <sdesc>Electronic products</sdesc>
        <logo-thumb>ghico.jpg</logo-thumb>
        <link>ghico.xml</link>
    </company>
</portfolio>

The following XSLT displays that code on the page:

<xsl:for-each select="portfolio/company">
     <xsl:sort select="name" />

       <div class="invest-port-thumb">
         <a>
         <xsl:attribute name="href">
              <xsl:value-of select="link" />
         </xsl:attribute>

         <img>
         <xsl:attribute name="src">
              <xsl:value-of select="logo-thumb" />
         </xsl:attribute>
         </img>
         </a>
       </div>

</xsl:for-each>

This is the HTML structure of the "preview div":

<div id="preview">

<div id="preview-name"> [Name to display here] </div>
<div id="preview-desc"> [Description to display here] </div>

</div>

All 3 company logos are loaded into the page, each displaying a linked image loaded from <logo-thumb>. Desired effect is to on hover, display the contents of <name> in the "preview-name" div, and the contents of <sdesc> in the "preview-desc" div.

Answer 3

Preserving the semantics of your page and the structure of your stylesheet, I try to do something like this:

<xsl:for-each select="portfolio/company"> 
     <xsl:sort select="name" /> 
     <div class="invest-port-thumb"> 
       <a href="{link}"><img src="{logo-thumb}" /></a>
       <div class="preview"> 
         <div class="preview-name"><xsl:value-of select="name" /></div> 
         <div class="preview-desc"><xsl:value-of select="sdesc" /></div> 
       </div> 
     </div> 
</xsl:for-each>

Then, in CSS stylesheet, you can use :hover pseudoclass and + combinator to show or hide preview. There ara some problems with crossbrowser compatibility. You should check Stu Nicholls site for better semantics and CSS examples.

Answer 4

I would feed the name and desc into the anchor as part of the anchor or it's child image, perhaps using the ALT tag for the name and REL tag for the description.

On hover over any anchor, I'll use jQuery [.attr()] to grab the attribute values containing the name and description you want and spit that into your respective target DIVs.

(See 'Recipe Categories' in http://www.masterchef.com.au/home.htm for similar example)