Actualización de DIV con contenido XML en el control deslizante

Question

El concepto de lo que estoy tratando de hacer es bastante simple. Tengo una grilla de logotipos de la empresa cargados a través de XSLT desde un documento XML, cada uno con sus propios enlaces únicos a los perfiles de la empresa.

Tengo un div por separado en la página, esencialmente un cuadro de "vista previa". Lo que quiero hacer es esto:

Doy la vuelta a un logotipo, y carga el nombre de la empresa y una breve descripción en la vista previa div. Este contenido se carga a través de XML.

He estado jugando con la función Jquery load(), cambiando el documento de destino para cargar en Hover — y casi obtiene lo que quiero, pero carga todo el documento XML de destino en el div.

¿Cómo puedo separar estos datos XML de destino en divs separados? (que he diseñado de manera diferente) Supongo que usaría Ajax de alguna manera. Quiero cargar el nodo <name> en name_div, y el nodo <desc> en el description_div, y hacer que se actualicen al pasar el mouse. Gracias de antemano por la ayuda!

Éstos son algunos ejemplos de código que estoy trabajando con:

archivo portfolio.xml (este archivo es mi página principal, mostrando la parrilla y vista previa div, ejemplo utiliza 3 empresas):

<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> 

las siguientes pantallas que XSLT de código en la página:

<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> 

Ésta es la estructura HTML de la "vista previa div":

<div id="preview"> 

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

</div> 

Todos los 3 logotipos de la empresa se cargan en la página, cada uno de los cuales muestra una imagen vinculada cargada desde. El efecto deseado es al pasar el cursor, mostrar los contenidos en el div "nombre de vista previa" y el contenido de en el div "preview-desc".

---

Déjame intentar ser un poco más específico. He aquí algunos ejemplos:

archivo portfolio.xml (este archivo es mi página principal, mostrando la parrilla y vista previa div, ejemplo utiliza 3 empresas):

<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> 

Las siguientes pantallas que XSLT de código en la página :

<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> 

Esta es la estructura HTML de la "vista previa div":

<div id="preview"> 

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

</div> 

Los 3 logotipos de la empresa se cargan en la página, y cada uno muestra una imagen vinculada cargada desde <logo-thumb>. El efecto deseado es al pasar el cursor, mostrar los contenidos de <name> en el div "preview-name" y los contenidos de <sdesc> en el div "preview-desc".

Answer 1

Estrictamente hablando, usted load() puede tomar un selector después de la url y solo devolver una parte de la llamada ajax.

Por lo tanto, algo así como:

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

Ahora, por lo que la red llama cada vez que quiera ver algo no es muy eficiente. Probablemente quiera almacenar en caché el resultado en una variable.

Answer 2

Preservar la semántica de la página y la estructura de la hoja de estilo, trato de hacer algo como esto:

<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> 

Luego, en hojas de estilo CSS, puede utilizar :hover pseudoclass y + combinador para mostrar u ocultar avance. Hay algunos problemas con la compatibilidad de navegador cruzado. Debería consultar Stu Nicholls site para obtener una mejor semántica y ejemplos de CSS.

Answer 3

Anotaría el nombre y el desc en el ancla como parte del ancla o su imagen secundaria, tal vez usando la etiqueta ALT para el nombre y la etiqueta REL para la descripción.

Al pasar el puntero sobre cualquier delimitador, utilizaré jQuery [.attr()] para obtener los valores de los atributos que contienen el nombre y la descripción que desea y escupirlos en sus respectivos DIV de destino.

(Ver 'Receta Categorías' en http://www.masterchef.com.au/home.htm por ejemplo similar)