I've just create a site using Wordpress 3.0 for a client - see it here: http://www.olwenshone.co.uk/

 

I'm still adding content to it and that's why there's hardly anything on the site at the moment. Anyway I'm having an issue with the homepage. I'm using a jQuery image text hover script to animate in the post info over the top of the image throughout the site and this works perfectly on the Work page but on the homepage it starts off in the middle of the large image, then when you rollover the image it pops down to the bottom where it's supposed to be.

 

Any ideas why???

 

The script for the homepage is:

$(document).ready(function(){
	//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
	//Vertical Sliding

	//Full Caption Sliding (Hidden to Visible)
	$('.boxgrid.captionfull').hover(function(){
		$(".cover", this).stop().animate({top:'514px'},{queue:false,duration:200});
		$(".backopacity").backOpacity({background:'#000000',opacity: '0.5'});
	}, function() {
		$(".cover", this).stop().animate({top:'550px'},{queue:false,duration:200});
	});
});

 

and this is the code on the page:

<div class="boxgrid captionfull">
<?php the_post_thumbnail('index-thumbnail'); ?>
<div class="cover boxcaption backopacity">
	<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
</div>
</div>

 

With this CSS:

/* HOME POST TITLE H3 SITTING ON TOP OF THE IMAGE */
#content-home .boxgrid{width: 1000px; height: 550px; background:#C1D0D7; overflow: hidden; position: relative; margin: 0px;}
#content-home .boxgrid img{position: absolute; top: 0px; left: 0px; border: 0px; }	
#content-home .boxcaption{position: absolute; background: #C1D0D7; height: 36px; width: 100%;}
#content-home .captionfull #content-home .boxcaption {top: 550px; left: 0px;}
#content-home .caption #content-home .boxcaption {top: 550px; left: 0px;}
#content-home .boxcaption h3 {padding: 5px 10px 5px 10px; font-size: 1.2em; margin: 0px; font-weight:normal;}
#content-home .boxcaption h3 a {color: #ffffff; padding: 5px 10px 5px 10px; text-decoration: none;}
#content-home .boxcaption h3 a:hover {color: #7294A5; padding: 5px 10px 5px 10px; text-decoration: none;}

 

I did initially want this to slide in from the left with opacity on the box, so you could see the image through it but I couldn't get it to work, so I opted to go for the same effect used on the Work page. If anyone has any idea of how I can fix the bug let me know.

 

Thanks

E

no jquery experts out there then - oh well nevermind...

On first glance it looks like line 176 of your css is the problem:

 

.captionfull .boxcaption {
left:0;
top:186px; /* should be 514px */
}

 

should be set to the same position as this

 

 $(".cover", this).stop().animate({top:'514px'},{queue:false,duration:200});

Nope - you're looking at the wrong bit of CSS - that CSS is for the jquery hover that happens on the work page - this needs to have 186px in place. I've dupliacted these styles and applied new settings for the homepage below this set within the CSS file.

 

Maybe I've done it all wrong and that's what's causing the issue. The images height on the homepage is 550px and the height of the caption box is 36px - hence the figure of 514px. Well that's my understanding of it as it works on the Work page and I just scaled up the maths to suit the homepage image, but it's not working.

I think you might need to listen to helpful people a bit more - he's 100% correct. It IS that line that causes the problems. Your attempt to use specific css to style the elements solely on the homepage has failed because it's completely wrong. This is your code:

 

#content-home .captionfull #content-home .boxcaption {
   top: 550px; left: 0px;
}
#content-home .caption #content-home .boxcaption {
   top: 550px; left: 0px;
}

 

That makes no sense at all - you've got a div with an id of "content-home" INSIDE another div with an id of "content-home"???? I think there should probably be a couple of commas in there, like this:

 

#content-home .captionfull, #content-home .boxcaption {
   top: 550px; left: 0px;
}
#content-home .caption, #content-home .boxcaption {
   top: 550px; left: 0px;
}

Oh, and there's a spelling mistake on the "Words" page - "practise" should be "practice" - you use an "s" if you want the verb, a "c" if you want the noun. You want the noun.

Oh, and there's a spelling mistake on the "Words" page - "practise" should be "practice" - you use an "s" if you want the verb, a "c" if you want the noun. You want the noun.

 

and a ; after space, not a ,

and an apostrophe on viewers

and the whole last paragraph needs some more thought.

Nope - you're looking at the wrong bit of CSS

 

I edited that line int the browser using Firebug - and it seemed to fix the problem.

I edited that line int the browser using Firebug - and it seemed to fix the problem.

 

Yeah, it will do, but editing that particular line will break his styling on the "Work" page - he's tried to produce css specific to the homepage but he's got it wrong - the commas in the example above should fix it.

Thanks sunwukung for testing this fix suggested and being so polite.

 

ooh a few cocky comments here from other folk that are not very appreciated - firstly I must re-stress that the site is still in progress, the content was supplied by the client and copied and pasted into the site and so spelling issues are not down to me and if the last paragraph of text needs a little more thought, then that's also down to the client.

 

Also I'm not a 'he' but a 'she'. Note that next to the word gender it says female!

 

Invisibleink - I do listen to folk on this forum and I'm very grateful for any help I can get with issues that arise with sites that I'm building - I wouldn't post on the forum if I wasn't looking for help.

 

I did take into account what sunwyukung but thought he was looking at the wrong bit of CSS so I pointed this out to him as I was under the impression that the code I pasted into my initial post was the code where the problem existed - I wasn't aware that I'd left a couple of comma's out of CSS as I've been too preoccupied figuring out and coding an easy way for the client to upload one large image into each post and for this to be scaled down and appear in three different places on the website at three different sizes - as well as dealing with jquery stuff that I'm not very familiar with as I've not delved into jquery very much. Spelling mistakes aren't part of this issue, I'm glad you've pointed them out, but it's a shame you've had to be so negative. Thanks for pointing the flaws in my CSS - I will go and correct them and hope not to offend you with my code in the future.

I'd also like to point out that this is the source of the jquery code:

http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

 

maybe you should contact the author with your comments about missing commas.

 

Anyway I've fixed the issue now - no comma's required. I was reading the original CSS as if it had comma's and so made up the additional CSS for the homepage with that in mind when it wasn't necessary - I took out the additional reference to content-home and that solved the issue. Just thought I'd post that up in case anyone else makes the same silly mistake that I did.

also 'practise' in this context is spelt correctly.

also 'practise' in this context is spelt correctly.

 

Sorry to disagree, but it should be practice. As in doctor's practice. If you were to practise the violin for example it would be correct. That said it's only in the UK we use practise as a verb anyway.

I'd also like to point out that this is the source of the jquery code:

http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

 

maybe you should contact the author with your comments about missing commas.

 

Anyway I've fixed the issue now - no comma's required. I was reading the original CSS as if it had comma's and so made up the additional CSS for the homepage with that in mind when it wasn't necessary - I took out the additional reference to content-home and that solved the issue. Just thought I'd post that up in case anyone else makes the same silly mistake that I did.

 

Errrr, he/she doesn't make any mistakes with his/her code. It's only where you've tried to make the css more specific that the problem has arisen. He/She hasn't needed to target specific pages.

 

As for finding a better way to fix the problem, congratulations! Did removing the commas work though?

 

also 'practise' in this context is spelt correctly.

Believe me, it ISN'T!!!!

 

Practice is a noun

 

Practise is a verb

 

You definitely need the noun - you've said "My practise" - "My" is a possessive adjective and therefore you need a noun after it, for example "My car is fast". Therefore, it should be "My practice".

 

You can't put a verb after a possessive adjective. You CAN use a gerund if you like, for example "My driving is terrible". "Driving" here is not a verb though, it's a gerund - it looks like a verb but acts like a noun.

 

Grammar lesson over.

Sorry to disagree, but it should be practice. As in doctor's practice. If you were to practise the violin for example it would be correct. That said it's only in the UK we use practise as a verb anyway.

 

 

No I have to disagree with you there again - in her text, she is not referring to having a practice like a doctor's surgery - she practises art - i.e she's an artist, so in this context saying 'My practise' is completely correct.