Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Exclamation ContentHover Configuration Issues

    I'm currently trying to apply ContentHover to a BLOCK link and have the hover element display below the link - kind of like a dropdown.

    It seems I'm currently having some display issues - could someone please enlighten me as to why when the link is hovered the ContentHover doesn't activate, but instead is displayed somewhat below.

    See Example HERE.

    Thanks for your help in advance.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,217
    Thanks
    23
    Thanked 605 Times in 604 Posts
    You have four anchors with the same id
    <a id="ch-slide" class="btn">Roof & Floor Truss</a>
    must use four different ids for them.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    sunfighter, Thanks for the response - I've made those changes; yet there's still a slight display issue.

    I'm trying to make the content hover actually "drop down" from below my LINK yet for some reason it's displaying 'beside" it.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,217
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Your images are only 64px in height and your trying to display something that is 300px in height. So your going to have problems.
    You can change the height of the image, but in this case it makes it look bad.
    You can change what is displayed.
    Code:
    <div class="contenthover">
    <a href="#" class="mybutton">See More</a>
    </div>
    Or you can put your images inside of a div that has a height of 300px and target the div by moving the id from the image to the div. I do that below.
    Please notice also how I handled the jquery. Combining the ids save re-writing the function four times.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    .contenthover { padding:20px 20px 10px 20px; }
    .contenthover, .contenthover h3, contenthover a { color:#fff; }
    .contenthover h3, .contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; }
    .contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
    .contenthover a.mybutton:hover { background:#34742d }
    </style>
    </head>
    
    <body>
    <div id="ch-slide1" style="height:240px;width:300px;"> <!--  this div holds the image and has the ID    -->
    <img src="http://webbetasite.com/carp/images/img-btn-roof-floor-truss.png" width="265" height="67" class="btn" alt="">
    </div>
    <div class="contenthover">
        <h3>Lorem ipsum dolor</h3>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
        <p><a href="#" class="mybutton">Lorem ipsum</a></p>
    </div>
    
    <div id="ch-slide2" style="height:240px;width:300px;">
    <img src="http://webbetasite.com/carp/images/img-btn-roof-floor-truss.png" width="265" height="67" class="btn" alt="">
    </div>
    <div class="contenthover">
        <h3>Lorem ipsum dolor</h3>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
        <p><a href="#" class="mybutton">Lorem ipsum</a></p>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="inc/contenthover.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$('#ch-slide1, #ch-slide2').contenthover({
    	    overlay_background:'#000',
    	    overlay_opacity:0.8
    	});
    });
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Sunfighter - thank you for your response; I'm sorry I took so long to respond - I'll take a look at this below code w/ the DIVs as that was what I was trying to accomplish after my first speed bump.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •