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 15 of 15
  1. #1
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    838
    Thanks
    15
    Thanked 9 Times in 9 Posts

    jQuery rollover hover effect makes link dissapear

    I modified the original code just a little and now have
    Code:
    $('#special a').bind('mouseover', function(){
    			$(this).parent('div').css({position:'relative'});
    			var img = $(this).children('img');
    			$('<div />').text(' ').css({
    				'height': img.height(),
    				'width': img.width(),
    				'background-color': 'black',
    				'position': 'absolute',
    				'background': 'url(delete.png) center no-repeat black',
    				'top': 0,
    				'left': 0,
    				'opacity': 0.5
    				}).bind('mouseout', function(){
               			$(this).remove();
    				}).insertAfter(this);
        		});
    With my html being:
    Code:
    <table cellpadding="10"  cellspacing="0" border="0">
    	<tr>
        	<td valign='top' style='padding: 5px; margin: 0px;'>
            	<div id='special' align='center'>
                	<a href='../../iMaGeGaLlEry/Test/47143_147210328635837_100000406113729_301983_2857122_n.jpg'>
    					<img border='0' src='../../thumb.img.php?album=../../iMaGeGaLlEry/Test&im=47143_147210328635837_100000406113729_301983_2857122_n.jpg' class='hover'>
    				</a>
    			</div>
            </td>
            <td valign='top' style='padding: 5px; margin: 0px;'>
             	<div id='special' align='center'>
                	<a href='../../iMaGeGaLlEry/Test/47377_147210731969130_100000406113729_301987_7618538_n.jpg'>
                    	<img border='0' src='../../thumb.img.php?album=../../iMaGeGaLlEry/Test&im=47377_147210731969130_100000406113729_301987_7618538_n.jpg' class='hover'>
    				</a>
    			</div>
    		</td>
            <td valign='top' style='padding: 5px; margin: 0px;'>
            	<div id='special' align='center'>
                	<a href='../../iMaGeGaLlEry/Test/154973_591749991437_32600476_34231000_8211372_n.jpg'>
                    	<img border='0' src='../../thumb.img.php?album=../../iMaGeGaLlEry/Test&im=154973_591749991437_32600476_34231000_8211372_n.jpg' class='hover'>
    				</a>
    			</div>
    		</td>
    		<td valign='top' style='padding: 5px; margin: 0px;'>
    	        <div id='special' align='center'>
        	    	<a href='../../iMaGeGaLlEry/Test/being-erica-full.jpg'>
                    	<img border='0' src='../../thumb.img.php?album=../../iMaGeGaLlEry/Test&im=being-erica-full.jpg' class='hover'>
    				</a>
    			</div>
    		</td>
    	</tr>
    </table>
    Now, the rollover sort of works exactly the way I want it to (I want to show a red X over top of the main image. The image is read from the directory, modified using GD to a thumbnail size and then displayed so the sizes may vary depending on the original.

    However, the link disappears and I cannot click on the link. I eventually want it so I can delete the image by clicking on it. How can I get my link back YET keep the hover image?

    Also, on a side note there is about 1-2 pixels at the bottom of every image that if landed on just right creates another overlay over the first overlay giving it two overlays on one image. How would I fix that as well. Thanks.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    #1: You can’t have the same ID more than once in a document. Instead, make it a class.

    #2: Divs are block-level elements and are technically not allowed in anchors. Although it doesn’t matter here validation wise it could have a different outcome in different browsers. Instead, use a span or something, or at least make your anchors display as block-level elements, too.

    #3: Don’t mix JS and CSS (unless you need to get or set values dynamically). Instead, apply a class (if necessary at all) to the newly appended element and style it with CSS then.

    #4: Why don’t you just do it like this:
    Code:
    $('.special a').append('<span />');
    $('.special a span').css({
      width: $(this).siblings('img').width(),
      height: $(this).siblings('img').height()
    });
    … and then:
    Code:
    .special a {
      display: block;
      position: relative;
    }
    .special a span {display: none;}
    .special a:hover span {
      display: block;
      background: black url(delete.png) center no-repeat;
      top: 0;
      left: 0;
      opacity: 0.5;
    }
    Last edited by VIPStephan; 03-06-2011 at 10:24 AM.

  • Users who have thanked VIPStephan for this post:

    dniwebdesign (03-08-2011)

  • #3
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    838
    Thanks
    15
    Thanked 9 Times in 9 Posts
    I tried your method, however at present time I get
    Code:
    Error: missing } after property list
    Source File: http://www.example.coom/files.php?album=Test
    Line: 47, Column: 41
    Source Code:
       width: $(this).siblings('img').width();
    I am not sure exactly where I'm missing the } ... It's currently the exact same as you posted.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Oops, I’m sorry, the semicolons are wrong there. I’ve corrected my previous post.

  • #5
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    838
    Thanks
    15
    Thanked 9 Times in 9 Posts
    That's what I thought... However when I made that change it gives this error now
    Code:
    Error: a.parentNode is null
    Source File: http://www.adrenalinejunkiesinc.ca/ctrl_panel/PhotosManager/jquery-1.4.2.min.js
    Line: 98
    My HTML now looks like
    Code:
    <table cellpadding="10"  cellspacing="0" border="0">
    	<tr>
    		<td valign='top' style='padding: 5px; margin: 0px;'>
    			<div align='center'>
    				<span class='special'>
    					<a href='../../iMaGeGaLlEry/Test/47143_147210328635837_100000406113729_301983_2857122_n.jpg'>
    						<img border='0' src='../../thumb.img.php?album=../../iMaGeGaLlEry/Test&im=47143_147210328635837_100000406113729_301983_2857122_n.jpg' class='hover'>
    					</a>
    				</span>
    			</div>
    		</td>
    		<td valign='top' style='padding: 5px; margin: 0px;'>
    			<div align='center'>
    				<span class='special'>
    					<a href='../../iMaGeGaLlEry/Test/47377_147210731969130_100000406113729_301987_7618538_n.jpg'>
    						<img border='0' src='../../thumb.img.php?album=.....
    	and so on...
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I didn’t say “Make the elements named ‘special’ a span”, they can stay a div.
    But anyway, this happens when I don’t test code that I propose. I realize now that the “this” keyword doesn’t work since it’s not within a function. You’d have to change it to:
    Code:
    $('special a span').siblings…
    Or wrap it in an each() function.

  • Users who have thanked VIPStephan for this post:

    dniwebdesign (03-08-2011)

  • #7
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    838
    Thanks
    15
    Thanked 9 Times in 9 Posts
    I've reset it so the class is in the div again... no more span tags except for the appended ones. However, this still does not seem to work.

    Was I suppose to add/replace what I had or completely ignore what I had before?
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    OK, the script should look like this:
    Code:
    $('.special a').append('<span />');
    $('.special a span').css({
      width: $('.special a span').siblings('img').width(),
      height: $('.special a span').siblings('img').height()
    });
    the CSS like this:
    Code:
    .special a {
      position: relative;
      display: block;
    }
    .special a span {display: none;}
    .special a:hover span {
      display: block;
      background: black url(delete.png) center no-repeat;
      top: 0;
      left: 0;
      opacity: 0.5;
      position: absolute;
    }
    and the HTML like in your first post, only that the mentioned ID attributes have to be replaced with class attributes.

  • Users who have thanked VIPStephan for this post:

    dniwebdesign (03-08-2011)

  • #9
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    838
    Thanks
    15
    Thanked 9 Times in 9 Posts
    Hey man...
    It seems to be working correctly now (only after the page is completed loading but I can work on that part). However, it only reads the width and height from the first image. Not all of the images are the same size so I get some with the overlay not covering the whole image. (I've included and example)

    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Ah dammit! Yeah, these are things I find out myself step by step when I’m sitting over such a task. Of course my last version wouldn’t work like that. As I mentioned earlier in this case you’ll have to use an each() loop. Try this:
    Code:
    $('.special a').append('<span />');
    $('.special a span').each(function() {
      $(this).css({
        width: $(this).siblings('img').width(),
        height: $(this).siblings('img').height()
      });
    });

  • Users who have thanked VIPStephan for this post:

    dniwebdesign (03-08-2011)

  • #11
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    838
    Thanks
    15
    Thanked 9 Times in 9 Posts
    That seems to have it working... just a few small bugs to work out.

    #1: I stated this one earlier and I cannot see why it is doing this. When the page first loads there is a little red square that shows instead of the default red x. If I refresh the page in my browser it works as it should (with exception of #2).


    #2: The taller photos has their overlay over to the left. I currently have the image centered in the cell. The overlay is left justified and I cannot manage to move it over using any of my CSS tricks.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    For the first one it would help to see the page itself. The second one is because the anchors are set to display as block elements, and hence, they are filling the entire width of each cell. The appended span elements are positioned absolutely at the top left of the anchor while the images are centered; that’s why. You’ll have to position the spans left: 50% and margin-left by half of their width (do that with JS) to center them, too.

  • Users who have thanked VIPStephan for this post:

    dniwebdesign (03-08-2011)

  • #13
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    838
    Thanks
    15
    Thanked 9 Times in 9 Posts
    I have given the spans a float of 50% and given the spans a margin-left of half of the width and it positions the overlay exactly to the right of the images.
    Code:
    		$('.special a span').each(function() {
    		  $(this).css({
    			width: $(this).siblings('img').width(),
    			height: $(this).siblings('img').height(),
    			left: '50%',
    			'margin-left': ($(this).siblings('img').width()/2)
    		  });
    		});
    I'm pretty sure this is correct.

    I have sent you some login information for the page.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Oh, I get it. The problem is that the images take some time to load and since they have no specific dimensions set in the HTML (or CSS) the script calculates the image dimensions before they are actually loaded, hence getting them wrong and therefore setting the span’s dimensions wrong, too. Properly calculating image dimensions has always been a problem in one or another browser, I’ve found that the safest way is to set the width and height attributes of the image elements so they have specific dimensions right from the beginning for JS to pick that up. The reason why it’s red is because the X is right in the middle and that’s what you see of the X when the container is so small.

    And the margin must be negative, by the way. Sorry if I forgot to mention this.

  • Users who have thanked VIPStephan for this post:

    dniwebdesign (03-08-2011)

  • #15
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    838
    Thanks
    15
    Thanked 9 Times in 9 Posts
    Ha, it works. I tried making the "left" negative and everything else but never thought to make the margin negative. :\

    I've also fixed the red square problem my allowing the script to resize the spans when I rollover them instead of on the page load. Th image should be there if someone is rolling over it.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com


  •  

    Posting Permissions

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