1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.



JQuery - Image Mouseover / Text

Discussion in 'Solved Support Topics' started by DIOGENES, Jul 30, 2012.

  1. Offline

    DIOGENES New Member

    Member Since:
    Jul 30, 2012
    Total Posts:
    2
    Likes Received:
    0
    Gender:
    Female
    Hi all,

    Firstly, thank you so much for taking a look at my post. I'm in dire need of some help, and I'm a novice coder at that.
    Board software: Jcink.
    Problem With: Image mouseover code.
    Problem:
    I'm struggling with a jQuery code at the moment that's supposed to work like so: when an image is moused-over, a caption should fade in over the image with its own background color, covering up part of the original image. This is NOT a tooltip. This is what the working code should look like in a JsFiddle:

    http://jsfiddle.net/dYxYs/828/

    On my Jcink board, the text appears on the image with mouseover, but the nice fade-in transition is missing. This is because (at least, I think) the jQuery script itself isn't working at all. I don't know if you have to separately activate jQuery or what, but whatever jQuery scripts I've tried haven't worked on the board. [It's not an update issue because the code uses the oooollld 1.6 version. Apparently Jcink has updated to 1.7.1.]

    Evidence: All pertinent codes can be found on the JsFiddle [I've copy/pasted them verbatim onto the board wrappers and style sheet], but I'll reproduce them here as well.

    WRAPPERS - HEAD [red = pertinent script]
    <html>
    <head>
    <title><% TITLE %></title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <% CSS %>
    <% JAVASCRIPT %>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

    <script src="http://planetnexus.net/files/?id=76dc240c17" type="text/javascript"></script>


    <script type="text/javascript">
    $(function(){
    $('.slide-out-div').tabSlideOut({
    tabHandle: '.handle', //class of the element that will become your tab
    pathToTabImage: 'http://i.imgur.com/q7jQf.png', //path to the image for the tab //Optionally can be set using css
    imageHeight: '33px', //height of tab image //Optionally can be set using css
    imageWidth: '127px', //width of tab image //Optionally can be set using css
    imageZIndex: '100',
    tabLocation: 'top', //side of screen where tab lives, top, right, bottom, or left
    speed: 300, //speed of animation
    action: 'click', //options: 'click' or 'hover', action to trigger animation
    topPos: '0px', //position from the top/ use if tabLocation is left or right
    leftPos: '10px', //position from left/ use if tabLocation is bottom or top
    fixedPosition: true //options: true makes it stick(fixed position) on scroll
    });

    });

    </script>


    <script type="text/javascript">
    $('.text').hide().removeClass('text').addClass('text-js');

    $('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
    });​
    </script>

    <link href='http://fonts.googleapis.com/css?family=Open Sans Condensed:300' rel='stylesheet' type='text/css'>

    </head>
    ...........

    PERTINENT CSS:


    .thumb {
    position: relative;
    width: 150px;
    height: 100px;
    border: 2px dashed #444;
    margin: 10px;
    float: left
    }
    .text, .text-js {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #999;
    background: rgba(0,0,0,0.3);
    text-align: center
    }
    .thumb:hover .text {
    display: block
    }​


    HTML IN POST: [without stars]
    [*dohtml]<div class="thumb">
    <img src="http://dummyimage.com/150x100/ccc/fff" />
    <div class="text">text text text text text text text</div>
    </div>[/dohtml*]


    Again, thanks so much for any help with this. I'm really stuck as to what to do.

    -Dio
    DIOGENES, Jul 30, 2012
    #1
  2. Offline

    kismet "hack it 'til it works"

    • Graphics Artist
    • 'D Contributor
    Member Since:
    Feb 9, 2008
    Total Posts:
    7,630
    Likes Received:
    1,369
    Gender:
    Female
    Location:
    the internet
    • Awards
    Can you link me to your live site? It's much better for debugging than just code.
    kismet, Jul 30, 2012
    #2
  3. Offline

    DIOGENES New Member

    Member Since:
    Jul 30, 2012
    Total Posts:
    2
    Likes Received:
    0
    Gender:
    Female
    DIOGENES, Jul 31, 2012
    #3
  4. Offline

    kismet "hack it 'til it works"

    • Graphics Artist
    • 'D Contributor
    Member Since:
    Feb 9, 2008
    Total Posts:
    7,630
    Likes Received:
    1,369
    Gender:
    Female
    Location:
    the internet
    • Awards
    .text never gets removed and .text-js never gets added. So here's what I recommend trying. Change the caption's JS to this:
    Code: Select
    $(function(){
  $('.text').hide().removeClass('text').addClass('text-js');
  $('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
  });
});​
    kismet, Jul 31, 2012
    #4

Share This Page