Showing image on mouseover in sharepoint 2010 Rss Feed WebPart

Question

0.00/5 (No votes)

See more:

SharePoint2010

Hi,

Whenever i move my mouse on Rss Feed webpart title i am showing hide image, when i click on that image that specific item disabling perfectly.

Here my problem is when i move mouse to any other titles also image showing only on first link .

Please find the my code.

XML

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes"/>
  <xsl:param name="TITLE"/>
  <xsl:template match="rss">
    <script language="javascript" defer="true">
      <![CDATA[
        function showImg(x) {
        document.getElementById('hideimg').style.visibility = 'visible';
        }
        function hideImg(x) {
        document.getElementById('hideimg').style.visibility = 'hidden';
        }
        function hideTitle(x) {
        document.getElementById('divItem').style.display = "none";
        }
    ]]>
    </script>
    <div id="titlediv" style="background:#fff; padding:0; font-size:10px;">
      <xsl:for-each select="channel/item">
        <div id="divItem">
        <a href="{link}" target="_new" onmouseover="showImg(this)" onmouseout="hideImg(this)">
          <xsl:value-of select="title" />
          <img src = "../photogallery/hide1.png" style="visibility:hidden" height="15px" width="15px" id="hideimg" onclick="hideTitle(this);return false;"></img>
        </a>
        <br/>
        <xsl:value-of disable-output-escaping="yes" select="description"/>
        <br/>
        </div>
      </xsl:for-each>
    </div>
  </xsl:template>
  <xsl:template match="description">
    <xsl:value-of select="."/>
    <br/>
  </xsl:template>
</xsl:stylesheet>

Please let me where i did the mistake, Thanks in advance.

Thanks,
Nagendra.

Posted 27-Oct-15 2:22am

Member 8307222

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2015-10-27T09:01:00

The id attribute is supposed to be unique across the entire document. You are creating multiple elements with the same ID (hideimg and divItem). When you pass that ID to getElementById, only the first matching element will be returned.

Fixing the image is simple - you can do this with CSS, with no script required.

Fixing the hideTitle function will require navigating the DOM from the passed-in element to the grandparent <div> element. You could use jQuery for this, or the raw javascript solution from this StackOverflow answer[^].

HTML

<style>
<![CDATA[

.rss-feed
{
    background: #fff; 
    padding: 0; 
    font-size:10px;
}
a.rss-title > img
{
    visibility: hidden;
}
a.rss-title:hover > img
{
    visibility: visible;
}

]]>
</style>

<script defer="defer">
<![CDATA[

function closest(elem, selector) {

   var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector;

    while (elem) {
        if (matchesSelector.bind(elem)(selector)) {
            return elem;
        }
        
        elem = elem.parentElement;
    }
    
    return false;
}

function hideTitle(x) {
    var item = closest(x, ".rss-item");
    if (item) { item.style.display = "none"; }
}

]]>
</script>

<div class="rss-feed">
    <xsl:for-each select="channel/item">
        <div class="rss-item">
            <a href="{link}" target="_new" class="rss-title">
                <xsl:value-of select="title" />
                <img src = "../photogallery/hide1.png" onclick="hideTitle(this);return false;" />
            </a>
            <br />
            <xsl:value-of disable-output-escaping="yes" select="description"/>
            <br />
        </div>
    </xsl:for-each>
</div>

Member 8307222 · Answer 2 · 2015-11-25T03:14:00

Hi Richard,
i am calling hide function in img tag

XML

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes" />
  <xsl:param name="TITLE" />
  <xsl:template match="rss">
    <style>
      <![CDATA[ 
      .rss-feed
      {
          background: #fff; 
          padding: 0; 
          font-size:10px;
      }
      a.rss-title > img
      {
          visibility: hidden;
      }
      a.rss-title:hover > img
      {
          visibility: visible;
      } 
     ]]>
    </style>
    <script defer="defer">
      <![CDATA[

        function hide(elements) {
            elements = elements.length ? elements : [elements];
            for (var index = 0; index < elements.length; index++) {
              elements[index].style.display = "none";
  }
}
  
]]>
    </script>

    <div class="rss-feed">
      <xsl:for-each select="channel/item">
        <div id="itemlink" class="rss-item">
          <a href="{link}" target="_new" class="rss-title">
            <xsl:value-of select="title" />
            <img src="../photogallery/hide1.png" height="10px" width="10px" onclick="hide(this); return false;" />
          </a>
          <br />
          <xsl:value-of disable-output-escaping="yes" select="description" />
          <br />
        </div>
      </xsl:for-each>
    </div>
  </xsl:template>
  <xsl:template match="description">
    <xsl:value-of select="." />
    <br />
  </xsl:template>
</xsl:stylesheet>

Thanks,
Nagendra.

Showing image on mouseover in sharepoint 2010 Rss Feed WebPart

2 solutions

Solution 1

Solution 7

Add your solution here

Preview 0