Thread

To keep this simple: I have a page with 1 blog entry in the centre (title, image, intro text). On the right hand side of the page is an archive list of older blog titles (just the title).

I want to be able to ‘hover’ on an archive list title, this would then replace the content of the current blog entry in the centre of the page with the contents of the hovered archive entry. This means the user can *in theory* hover down the archive list over blog titles that seem interesting to them and then if the further content that flashes up on hover looks like a good read they can just click down and get taken to that page with the relevant blog post on.

Has anyone done this before or any good ideas as to where to start. I’m thinking of maybe using AJAX within jQuery but not sure how to tie it into EE. It’s pretty simple to use the .html and .replaceWith within jQuery to change the HTML of a div but not so sure how I would tie that into it fetching the relevant EE tags and info etc

Any help to get started would be great!

I would suggest setting up a template which pulls the entry data using exp:channel:entries tag and formats it in the relevant HTML. Then using an ajax request you can send over the entry_id of the hovered entry title to the template and use that in exp:channel:entries tag to get the corresponding full entry.

Here’s something like what I would have.

Main template

<div id="focus-entry">
    {exp:channel:entries channel="my_channel" limit="1"}
    <h1>{title}</h1>
    {image}
    {body}
    {/exp:channel:entries}
</div>

<ul id="channel-entries">    
    {exp:channel:entries channel="my_channel"}
    <li><a href="#" rel="{entry_id}">{title}</a></li>
    {/exp:channel:entries}
</ul>

Template 002 - Set this template to parse php on input

<?php 
$id = $_POST['id'];
?>

{exp:channel:entries channel="my_channel" limit="1" entry="<?php echo $id; ?>"}
<h1>{title}</h1>
{image}
{body}
{/exp:channel:entries}

Javascript

$(function(){
    $('#channel-entries a').hover(function(){
        var entryID = $(this).attr('rel');
        $.ajax({
               type: "POST",
               url: "url/to/template-002",
               data: "id="+entryID,
               success: function(data){
                     $('#focus_entry').html(data);
               }
         });
    });
});

I haven’t tested this but it would be the route I go down. Hope it helps.

Nice idea. I’ll give this a go and post my findings.

It works first time but there is just a small problem in that it’s not pulling the correct data across. I’ll just run through what I did, as I understood it.

I set up a separate template called ‘archive’ with just the entries that I need for the data to be inserted on hover. I set the template up to allow PHP and then set the template to parse php on input so it reads the top variable first before it deals with the EE tags.

<?php 
$id = $_POST['id'];
?>

{exp:channel:entries channel="blog" limit="1" entry_id="<?php echo $id; ?>"}
      <span>{entry_date format="%j %M %Y"}</span>
      <h1><a href="http://{title_permalink}">{title}</a></h1> 
      
        <div id="livePostInner">
          {exp:antenna url='{video}' max_width="400" max_height="170"}
          
          {exp:imgsizer:size src="{image}" width="400" height="170"}
          {sized}
          {/exp:imgsizer:size}
        
        </div>
        
        "{intro}"
        
        <a href="http://{title_permalink}class=readMore">read more</a>

      <div id="feedback">
        <ul>
          <li class="comments"><a href="#"> 5 Comments</a></li>
          <li class="twitter"><a href="#">Share On Twitter</a></li>
          <li class="facebook"><a href="#">Share On Facebook</a></li>
        </ul>
      </div>
      {/exp:channel:entries}

I then set up a rel tag for the link in the archive list, this sets the relationship between the current document and the linked document, in this case the entry ID.

<ul id="archive">
    {exp:channel:entries channel="blog"}
      <li><a href="http://{title_permalink}rel={entry_id}">{short_title}  / {entry_date format="%Y"}</a></li>
    {/exp:channel:entries}
  </ul>

I then, on my index page, set the jQuery. So on hover it get’s the data from the rel tag and assigns that to a variable called entryID. It then initiates the ajax by sending over the entryID to the template and if successful replaces the html in the #livePost div.

<pre><code>$(’#archive a’).mouseenter(function(){
var entryID = $(this).attr('rel');
$.ajax({
type: "POST",
url: "http://site.com/index.php/archive",
data: "id="+entryID,
success: function(data){
$('#livePost').html(data);
}
      });
  });</code></pre>

When I check the Console in Firebug, the post data says it’s pulling the right source ‘Source id=1”, so that is correct, it should be getting the post with the entry=1 as the current index page is displaying the latest blog, entry ID 2. However when I check the response, it lists all the right data fields it’s bringing across, but it just seems to bring across the current blog information (entry=2). I changed some of the static HTML to check that something was actually happening, I changed the comment count in the archive template to a different number and that changes on hover so it is pulling the data across, it just seems to be pulling in the wrong entry data even though it says it’s bringing in the right entry ID.

Any ideas as to where it could be going wrong?

Thanks for the help so far!

I also changed it from .hover to .mouseenter as it was sending the ajax request again when the mouse left the link due to the .mouseleave being fired from the .hover

Hmmm, if I remove the

limit="1"

from the channel tag then it works, sort of. It loads all the blog posts on hover but just puts them in a long vertical list, one after another.

So it’s fetching the data correctly, not sure how I can control so it only loads and shows one per hover/request?