Dear All,

I am trying to place a popeye (like a inline lightbox) within a jquerytools vertical scrollable. the popeye does popup as it should but when I try to scroll up or down, the popeye stay the same place as everything else are scrolling.

I am very new to CSS and Javascript, just experimenting with different effects, please point me to a right direction and sorry if this is a very stupid question.

BTW, I am trying this on squarespace and the code are cut and paste from other sample sites.

Best Regards.

2 answers

Mottie 1134
This was chosen as the best answer


I was looking at this and it appears that popeye attaches the image to the body of the page. I tried using CSS to make it work, but alas there was no simple solution. So I ended up modifying the popeye plugin.

This demo is the result of my modifications (I modified the vertical scroll demo). There are a few things to note:

  1. The popeye image must now be wrapped inside a div that has a style of "position: relative"
  2. One additional CSS definition needs to be included to prevent expanded popeye windows from showing up under the popeye image directly below it.
  3. The very last image in the demo needs a spacer. The reason is when you expand the popeye, it would otherwise be hidden inside the vertical scroll window.

Here is an example basic HTML structure:

<div class="cell">
 <div class="subcell-left">
  <div class="popeye">
     <a href="Big-Image.jpg">
      <img src="Thumbnail-Image.jpg" alt="Add Caption Text Here" />
  </div> <!-- end popeye div -->
 </div> <!-- end subcell-left div -->
 <div class="subcell-right">
   Whatever text you want to add goes here
   <a href="#">Link for more info</a>
 </div> <!-- end subcell-right div -->
</div> <!-- end cell div -->

I also zipped all the files used in the demo for you to download if you need.

Answered over 9 years ago by Mottie
  • Thanks for the great help!!! Everything works as expected~! snackmoore over 9 years ago
  • Just ran into this same issue, and your JS was a great drop-in replacement! Thanks so much, this saved me a lot of debugging time. Liam Morley over 9 years ago
  • I also find it helps to make the z-index for ppy-expanded '101', so it's above any of the other layers. In your demo, if you expand one image and then mouse over where the next set would otherwise be, you'll see the .ppy-tools div show up. Liam Morley over 9 years ago
  • Thanks Liam! I've updated the files and it's working great :) Mottie over 9 years ago
Shree 5

I am also kinda new to CSS but what I noticed was that the div for popeye (with id #popeye1) is being added directly to body element. Please try to add the div for popeye inside the div with id #contentWrapper.

and then please tell the results.

Answered over 9 years ago by Shree
  • Thanks a lot... it works now... snackmoore over 9 years ago
  • Actually... is still not working... I was scrolling the entire page instead.... would that be some tag in the css that got the popeye fixed on the same position? snackmoore over 9 years ago