Issue following code example - Build Your Own Website the Right Way; Ch.11

[Molly_O]

I'm following through the chapters of this book, and had success replicating the example website from the book, but the exercises from the JQuery chapter aren't working, and I can't find out why.

My code is EXACTLY as shown in the book, for both the website pages and the common.js file. But, I went ahead and tried copy and pasting the provided book code for the .js file, but that was redundant because I had typed that code the same.

A few of the provided text fields do get their example text from the common.js functions, so the contact.html page is retrieving the javascript just fine, but I don't understand why the rest of the input fields, and the caption-hiding for the gallery page, just aren't working.

I've viewed these pages in current versions of Firefox and Chrome, from both my hard-drive stored page, and the same page uploaded to my live server.

If there is any other aspect I didn't mention where things could go wrong, please ask. I just don't know what else to look for.

[ralph.m]

Hi Molly_O. Welcome to SitePoint.

Do the examples in the code archive work for you?

[Molly_O]

I've realized I did something very silly.

With ralph's suggestion, I had downloaded the related files from the code archive, and experimented a little with them - testing the archive files, switching JQuery version files, linking to my .js file in the archive page. That all worked as intended. It was when I opened the gallery.html page from the archive and my hand-typed file to compare them, did I realize my mistake: the archive file had HTML5 tags, and mine didn't. I forgot I skipped over the chapter for putting HTML5 tags into the example site pages, because I wanted to concentrate on learning the more standardized markup, before trying out the newer, less widely supported HTML5 tricks. The functions in the JQuery chapter refer to the HTML5 tags introduced in the chapter I glazed over.

So ... I guess I can do one of two things now: go back to the chapter I missed and put in the HTML5 tags I didn't want to do before, or go outside the book and change my code to work with the tags I already used. Would anybody suggest I go ahead and use the new HTML5 tags, or figure out more javascripting to work with what I already have?

[ralph.m]

You mentioned that you've uploaded this to your live server. Would you mind posting a link? That would be the easiest way to help.

[Molly_O]

I've figured out a workaround for my situation. I've uploaded the corrected files to my test site, so you can see the end effect I wanted - http://www.mollyroseodell.com/testsite/gallery.html Here's some snippets of the solution I've discovered.

the markup.

<span>
	<div class="galleryphoto">
		<img src="gallery/turtle-face.jpg" width="400" height="300" alt="A close-up, straight-on shot of a turtle feeding on the coral"/>
		<p>"I was right next to him as he bit chunks of coral off for dinner - what a sound!" So describes club member Paul who took this shot in Fiji. <span class="photocredit">[Photographer: Paul Spencer]</span></p>
	</div>
</span>

the script.

$(document).ready(function(){
// Making the gallery captions appear on hover
	$(".galleryphoto p").hide();
	$("span").each(function(){
		$(this).hover(function(){
			$(this).find(".galleryphoto p").slideDown('medium');
		},function(){
			$(this).find(".galleryphoto p").slideUp('medium');
		});
	});
});

This works as expected - when the cursor rolls over an image, a paragraph of text slides out underneath it, and slides back when the cursor rolls off. I've experimented with putting different elements, classes, and id's in the quoted areas of the script, and what I've shown here is what I found to work. I'm satisfied that I found something to work, but is this the efficient and cleanest way to code this interaction in JQuery?

It looks like this thread is no longer about an issue with a Sitepoint's book code, and more a delving in Jquery experimentation ...

[ralph.m]

From a quick look, the only problem I see is that <span> is not the right element to use here. It's what's known as an inline element—meaning that it belongs inside another block-level element like a <p>. HTML4 and under does not allow an inline element to wrap around a block element like a div.

In this instance, you don't need the extra element anyhow. You can just do this:

HTML

<div class="galleryphoto">
  <img src="gallery/turtle-bite.jpg" width="400" height="258" alt="A turtle swims..."/>
  <p>This turtle was spotted swimming around the Great Barrier Reef ...</p>
</div>

and then the JS can be a tad simpler:

jQuery

$(document).ready(function(){
// Making the gallery captions appear on hover
	$(".galleryphoto p").hide();
	$(".galleryphoto").each(function(){
		$(this).hover(function(){
			$(this).find("p").slideDown('medium');
		},function(){
			$(this).find("p").slideUp('medium');
		});
	});
});

[Molly_O]

From a quick look, the only problem I see is that <span> is not the right element to use here. It's what's known as an inline element—meaning that it belongs inside another block-level element like a <p>. HTML4 and under does not allow an inline element to wrap around a block element like a div.

In this instance, you don't need the extra element anyhow. You can just do this:

It seems like that's how it should work, but I've tried that before I added the span tags (and tested it again just now), but the Jquery slider doesn't work with the rollover target being ".galleryphoto." it also didn't work when I added 'id="galleryphoto" ' to the photo-containing div tag, and had the jquery target that. i experimented with different targets, until i added the span tags around each photo and found that to just work. I thought it was an odd solution, that could cause more problems if I had more code elsewhere that globally affects the span tag. Though, I'm still confused that the more obvious and simpler solution, that you suggested, wasn't working, and the odd workaround I found does.

If there is still something else in the website files that's interfereng, I don't know where to look for it or to even recognize it.

[ralph.m]

I tested that code I posted above and it worked nicely. Perhaps post your attempt at it so we can see what's wrong.