Jump to content


Photo
- - - - -

Problems implementing CSS & JS to create hover overlay


  • Please log in to reply
5 replies to this topic

#1 create

create

    Advanced Member

  • Members

  • 47 posts
  • LocationUK
  • Country: Country Flag

Posted 01 July 2014 - 05:31 PM

Hi there,

 

I'm using the Pagelines framework on a website that I'm building and I'm having problems trying to create a hover overlay over a grid of images.

 

This is what I am trying to achieve:

 

Please Login or Register to see this Hidden Content

 

The instructions to implement this is here:

 

Please Login or Register to see this Hidden Content

 

I want to feature a grid of 16 images (4x4) on the page, have this effect when you hover and then link each image to relevant page content when you click through.

 

So far, I have added the CSS and saved and uploaded a JS file via FTP. Since I only want this to feature on one page, I tried inserting a link to the JS in the page content. I have created a layout using the grid system and just need a few pointers on how to implement the code into my layout to get it to work correctly. 

 

Heres a link to the pageā€¦ 

Please Login or Register to see this Hidden Content



#2 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 01 July 2014 - 05:38 PM

I wouldnt have the js like that in the framework folder, if you update framework later you will lose your js file.

 

Its only 29 lines why not just add the script inline?

 

Also all the $'s will need to be replaced with jQuery like this:

jQuery(this).closest(".img").removeClass("hover");



#3 create

create

    Advanced Member

  • Members

  • 47 posts
  • LocationUK
  • Country: Country Flag

Posted 01 July 2014 - 10:42 PM

Hi Simon, thanks for coming back on this.

 

So to be clear, you would place the JS inline above my page content? I see what you mean about keeping it in the framework folder regards update - hadn't thought of that :)  

 

Regards adding the mark-up to my layout - thats where I'm struggling to implement it correctly. The layout is styled with the Grid System and I'm looking for an example for how to deconstruct the instructions and make it work for this page.

 

Grateful for any feedback.

 

Thanks

 

James



#4 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 01 July 2014 - 10:51 PM

Well in regards to the JS, you have 3 options.

 

1. Use PHP to only add the js to that page.

2. Put the script inline into your content.

3. Add the js to you header scripts area, but add some logic to the js so it only runs on that page.

 

 



#5 create

create

    Advanced Member

  • Members

  • 47 posts
  • LocationUK
  • Country: Country Flag

Posted 01 July 2014 - 10:55 PM

I'll try it inline initially and see how that goes.

 

Still stumped with the mark-up



#6 create

create

    Advanced Member

  • Members

  • 47 posts
  • LocationUK
  • Country: Country Flag

Posted 02 July 2014 - 11:21 AM

For the mark-up this is what i've tried unsuccessfully...
 
<div class="span3"><div id="effect-1" class="effects clearfix">
    <div class="img">**MY IMAGE AND HYPERLINK HERE</a><div class="overlay">
            <a href="#" class="expand">+</a>
            <a class="close-overlay hidden">x</a></div>
<div class="span3"></div>
 
Tried previewing in several browsers to see if thats what is causing the issue and it doesn't work in any...