Wish all his examples were in the downloadable code

RickBlacker · June 19th, 2009, 06:51 PM

Working in chapter 2. The area where prev() and next() are used.
I can't get mine to work. As far as I can tell, i've typed mine is line for line as his example shows.

It appears that the UL is not getting the css assigned to it because it still has all the decoration.

Would like to see if what he typed actually works.

richard.york · June 19th, 2009, 07:10 PM

All of the examples should be in the download. I'll look at the download package and make sure they're all there.

If you post all the code you're using I can give you a hand with troubleshooting it.

RickBlacker · June 19th, 2009, 07:17 PM

Quote:

Originally Posted by richard.york

All of the examples should be in the download. I'll look at the download package and make sure they're all there.

If you post all the code you're using I can give you a hand with troubleshooting it.

Hi, i found the code. It was in the Figures folder. I didn't see it until just now.

Thanks for the offer on helping...

My HTML

Code:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang='en'>
<head>
<title>Example</title>
<metahttp-equiv='content-type'content='text/html; charset=utf-8'/>
<metahttp-equiv='content-language'content='en-us'/>
<scripttype="text/javascript"src="../JS/jquery-1.3.2.js"></script>
<!-- Rename the files here -->
<scripttype="text/javascript"src="../JS/Example2-2.js"></script>
<linktype="text/css"href="../CSS/Example2-2.css"rel="Stylesheet"/>
</head>
<body>
<h4>Colors</h4>
<ulid='tmpColors'>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
<liid='tmpYellow'>Yellow</li>
<li>Orange</li>
<li>Purple</li>
</ul>
</body>
</html>

My CSS

Code:

body
{
font: 16pxsans-serif;
}
h4
{
font-size: 16px;
margin: 005px0;
}
ul#tmpColors
{
list-style: none;
margin: 0;
padding: 0;
}
 
ul#tmpColorsli
{
margin: 1px;
padding: 3px;
}
 
li.tmpSibling
{
background: #165b91;
color: Fuchsia;
}

My JavaScript

Code:

var tmpExample = {
ready: function() {
$('li#tmpYellow').prev().addClass('tmpSibling');
}
};
$(document).ready(tmpExample.ready);

RickBlacker · June 19th, 2009, 07:20 PM

Hmm.. sorry about the formatting... I thought you were supposed to wrap HTML, CSS, and JavaScript in the <code> tags when you post, but that didn't seem to help

richard.york · June 19th, 2009, 07:35 PM

OK, after some investigation I found that there was some stuff missing from the download. There's supposed to be a folder with the jQuery source code, and another folder containing various images that I use throughout the book. I have notified the Wrox folks about that, and they should have an updated download posted soon.

As for the code that you posted, it looks like it should work. I'm guessing that you may have the path to jQuery or the CSS file wrong?

richard.york · June 19th, 2009, 07:45 PM

I posted the updated download on my own site as well:

http://www.deadmarshes.com/jQuery%20Book.zip

RickBlacker · June 19th, 2009, 07:51 PM

Quote:

Originally Posted by richard.york

As for the code that you posted, it looks like it should work. I'm guessing that you may have the path to jQuery or the CSS file wrong?

Hi Richard... I've tried browsing in both IE 8 and Firefox. I've used Firebug and I can see that both JS files are being found, I can also tell that the style is being applied to the html. However, only part of it... The body itself is getting the style specified in the stylesheet... However, the UL is not getting any formatting other that what it inherits from BODY

Odd.

richard.york · June 19th, 2009, 08:10 PM

Alright, well, I'm not sure what to suggest then. It works for me, I cleaned up the code and tested it and got the expected outcome.

I put everything in the same folder though.

So I still feel like something isn't loading, or perhaps there is something else we aren't thinking of here. You might try typing in the path to each file directly in the browser and verify that each file loads visually.

There is nothing in Firefox's error console?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang='en'>
  <head>
    <title>Example</title>
    <meta http-equiv='content-type' content='text/html; charset=utf-8' />
    <meta http-equiv='content-language' content='en-us' />
    <script type="text/javascript" src="jQuery.js"></script>
    <!-- Rename the files here -->
    <script type="text/javascript" src="test.js"></script>
    <link type="text/css" href="test.css" rel="Stylesheet"/>
  </head>
<body>
  <h4>Colors</h4>
  <ul id='tmpColors'>
    <li>Red</li>
    <li>Blue</li>
    <li>Green</li>
    <li id='tmpYellow'>Yellow</li>
    <li>Orange</li>
    <li>Purple</li>
  </ul>
 </body>
</html>

Code:

var tmpExample = {
  ready: function()
  {
    $('li#tmpYellow').prev().addClass('tmpSibling');
  }
};

$(document).ready(tmpExample.ready);

Code:

body {
  font: 16px sans-serif;
}
h4 {
  font-size: 16px;
  margin: 0 0 5px 0;
}
ul#tmpColors {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul#tmpColors li {
  margin: 1px;
  padding: 3px;
}
li.tmpSibling {
  background: #165b91;
  color: Fuchsia;
}

RickBlacker · June 19th, 2009, 08:40 PM

Ok ok ok....

I'm an IDIOT!!!!

I was referencing the wrong JS and CSS files. I was referencing the old ones from the 2-2 example.

DAMN, that was driving me nuts, but glad I found it.

And Richard? Thanks for you AWESOME help and support!

richard.york · June 19th, 2009, 08:47 PM

No worries man, we've all been there.