Forums

Pagelist that shows description on hover

Permalink
I've a client looking for a pagelist that shows the page titles on the page but when a user hovers over the title, the description shows up. Ideally a solution like Dojo Page filterhttp://www.concrete5.org/marketplace/addons/dojo-page-filter-pro/... but without thumbnails.

Is there a solution like this in the marketplace or has someone done this already?
PassionForCreative
 
jero replied on at Permalink Reply
jero
This sounds like something you could do quite easily with a custom template, based on the original view.php, together with a little jQuery to do the mouse over stuff.
andrewsturm replied on at Permalink Reply
### EDIT ###
For anyone else reading this you should look at my working response below...
Here's a link:
http://www.concrete5.org/community/forums/customizing_c5/pagelist-t...

### END EDIT ###


I'd say a "custom template" for a pagelist that has some simple javascript to .show() and .hide() the description of the page. Reference the view.php as jero said...
You'll need some js:
<script type="text/javascript">
$(function(){
     $('[id^=pageTitle-]').each(function(){
     var titleID = parseInt(this.id.split('-')[1], 10);
       $('[id^=pageTitleDescription-]'+ titleID).mouseenter(function(){
          $('[id^=pageTitleDescription-]'+ titleID).show();
     });
});
</script>

You'll notice that the view file from the page list block has this in it's for each loop. You'll have to add an index number to each one of the "for each" loops like this...
<?php
$index = 1;
foreach ($pages as $page):
//...look at line 50 and change it accordingly
// notice the "id" ... has matching index numbers on the end
//Add a wrapper to the class so it won't have a conflict in css
<div id="pageListHover">
<h3 class="ccm-page-list-title" id="pageTitle-<?php print($index) ?>">
<a href="<?php  echo $url ?>" target="<?php  echo $target ?>"><?php  echo $title ?></a></h3>
<div class="ccm-page-list-description" id="pageTitleDescription-<?php print($index) ?>">
<?php  echo $description ?>
</div>
</div><!-- END pageListHover -->
$index += 1;


This will obviously push all content down below the title you hover over.
Add a position: absolute to your css like this

#pageListHover .ccm-page-list-description{
  position: absolute;
}


I am unable to test this code right now but I believe it will work. (famous last words)
Hope this helps!
PassionForCreative replied on at Permalink Reply
PassionForCreative
Hi Andrew,

Been playing with this for an hour and am having no luck what so ever. I've only started learning javascript using Code Academy at the minute so this is a bit over my head.

I've added the code as per your instructions but the show/hide doesn't work. I got this error when I view in firebug
missing ) after argument list
[Break On This Error]    
};
index.php?cID=149 (line 116, col 4)
missing ) after argument list
[Break On This Error]    
};
index.php?cID=149 (line 162, col 4)
missing ) after argument list
[Break On This Error]    
};
index.php?cID=149 (line 208, col 4)
missing ) after argument list
[Break On This Error]    
};)
Viewing 15 lines of 143 lines. View entire code block.


As I mentioned, I'm no Javascript expert so don't even know where to start. Here is what I've worked up so far (I've also added the position:absolute to my CSS:
<?php 
defined('C5_EXECUTE') or die("Access Denied.");
$rssUrl = $showRss ? $controller->getRssUrl($b) : '';
$th = Loader::helper('text');
//$ih = Loader::helper('image'); //<--uncomment this line if displaying image attributes (see below)
//Note that $nh (navigation helper) is already loaded for us by the controller (for legacy reasons)
?>
<script type="text/javascript">
$(function(){
     $('[id^=pageTitle-]').each(function(){
     var titleID = parseInt(this.id.split('-')[1], 10);
       $('[id^=pageTitleDescription-]'+ titleID).mouseenter(function(){
          $('[id^=pageTitleDescription-]'+ titleID).show();
     });
});
Viewing 15 lines of 55 lines. View entire code block.
andrewsturm replied on at Permalink Reply
Famous last words is right! I totally should of tested it. I even forgot the .hide() function. I'm straightening up the code now. I'll post it soon!
andrewsturm replied on at Permalink Reply
Without being sure where you wanted to display the description, I just made it appear next to the date. Also, you may want to ditch or wrap the <h4> because it wants to push anything next to it - down. Just make your own div class and size it like a <h4>.

here's the js...
<script type="text/javascript">
$(function(){
   $('[id^=pageTitle-]').each(function(){
   var titleID = parseInt(this.id.split('-')[1], 10);
      $('#pageTitle-'+ titleID).mouseenter(function(){
         $('#pageTitleDescription-'+ titleID).show();
      });
      $('#pageTitle-'+ titleID).mouseleave(function(){
         $('#pageTitleDescription-'+ titleID).hide();
      });
});
});  /*  <- this " }); " was missing and caused the error from before */
</script>


Here's the html/php... Note the inline style="display: none;"
<div id="pageListHover">
   <h4 class="ccm-page-list-title" id="pageTitle-<?php print($index) ?>">
      <a href="<?php  echo $url ?>" target="<?php  echo $target ?>"><?php  echo $title ?></a>
   </h4>
   <div class="ccm-page-list-description" id="pageTitleDescription-<?php print($index) ?>" style="display: none;"><?php  echo $description ?></div>
   <div class="ccm-news-list-date"><p><?php  echo $date ?></p></div>
</div><!-- END pageListHover -->


and the css...
.ccm-page-list-description{
   background-color: #eaeaea;
   z-index: 3;
   position: absolute;
   margin-left: 90px;
}
PassionForCreative replied on at Permalink Reply
PassionForCreative
Hi Andrew,

This is great. I've gotten it working, thanks very much. I have a question for you though. I can only add one per page. I have three page lists on my page, that are all for different sections of the site. I wanted to use this custom template for each list but the Show/Hide doesn't work on the second & third lists.

Any thoughts?

Thanks again,
Steve
andrewsturm replied on at Permalink Reply
Don't know if you've figured this out but an Idea popped in my head...
get the block's ID ?
$bID


<script type="text/javascript">
$(function(){
   $('[id^=pageTitle-]').each(function(){
   var blockID = parseInt(this.id.split('-')[1], 10);
   var titleID = parseInt(this.id.split('-')[2], 10);
      $('#pageTitle-'+ blockID + '-' + titleID).mouseenter(function(){
         $('#pageTitleDescription-'+ blockID + '-' + titleID).show();
      });
      $('#pageTitle-'+ titleID).mouseleave(function(){
         $('#pageTitleDescription-'+ blockID + '-' + titleID).hide();
      });
});
}); 
</script>

Here's the html/php... Note the inline style="display: none;"
<div id="pageListHover">
   <h4 class="ccm-page-list-title" id="pageTitle-<?php print($bID.'-'. $index)?>">
      <a href="<?php  echo $url ?>" target="<?php echo $target ?>"><?php  echo $title ?></a>
   </h4>
   <div class="ccm-page-list-description" id="pageTitleDescription-<?php print($bID.'-'. $index)?>" style="display: none;"><?php  echo $description ?></div>
   <div class="ccm-news-list-date"><p><?php  echo $date ?></p></div>
</div><!-- END pageListHover -->

and the css...
.ccm-page-list-description{
   background-color: #eaeaea;
   z-index: 3;
   position: absolute;
   margin-left: 90px;
}