Find errors

Hello,

I am trying to take an open source javascript slider and place it on another site but its not working for some reason. What is a good tool to figure what is going on and if anyone can specifically how I can use that tool to pin point the error?

Firebug: http://getfirebug.com

Click the insect at bottom right and then click console. Load the page and any errors will appear in the console. You might need to interact with the slider to trigger the errors, which will appear in real time in the console. Alternatively, use console.log(someVar) to spit out the valued of variables - often a lot better than using alert().

You should of course read the documentation for Firebug as well.

the problem here is that slider is just nothing but a big gray block. i can’t do any interaction at all.

What am I supposed to do with that information?

You’re not giving much to allow others to help you.

  1. Try what I suggested.
  2. If it doesn’t work, ask again, posting a link or some useful and relevant code.

If you can’t satisfy those pretty obvious requirements, nobody is going to want to or be able to help you.

well this is what the slider should be:

orangestonephotography.com/working/slider/

and here is how the slider is working now:

http://www.orangestonephotography.com/working/noslider/3.html

If one page works and the other doesn’t, what are the differences?

Looking in the head sections:

working page

<script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="assets/js/jquery.functions.js"></script>
<script src="assets/js/jquery.easing.js" type="text/javascript"></script>
<script src="assets/js/jquery.colors.js" type="text/javascript"></script>
<script src="assets/js/jquery.cycle.js" type="text/javascript"></script>
<script src="assets/js/functions.js" type="text/javascript"></script>

non-working page

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="assets/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="assets/js/jquery.functions.js"></script>

Are the “easing”, “colors”, and “cycle” files needed?

Maybe the order of referencing them makes a difference if a file has a dependency on another.

they should not be needed, no.

Firebug is the best… also if you use a Javascript framework most the time it will have a debugger.

I redone the code a bit but still the same error. Here is the code:

http://silver163.pastebin.com/m1efbd211

Site:

http://www.orangestonephotography.com/1/4.html

please help.

Firebug is the best… also if you use a Javascript framework most the time it will have a debugger.

i am using firebug but its not giving me any answers.

i am using jquery but i dont know where their debugger is.

With the inline styles it’s not easy to read, but if you turn off CSS the images show OK. Turn CSS back on, the “grey box” returns. Load the page with javascript disabled, and the “grey box” is there.

So the javascript could have something to do with it, but it would be worth the effort to check the CSS too.

yeah i resolved this issue already. Thanks everyone!

To satisfy my curiousity and benefit anyone having similar symptoms that may find this thread, the problem was ??? and you solved it by ???

Firebug is NOT the best way to debug JavaScript.

The built in developer tools in IE8, Opera, Firefox, Safari, and Chrome provide a full featured JavaScript debugger. The Venkman extension provides an identical option for Firefox.

That will allow you to run similar debugging tests in all five browsers using debuggers that function the same way.

My gods! We have consistency? How on earth did that happen?

it was conflict between two scripts. I had a script for the tabs to slide down and the slider itself. Both were fighting so I just put them into one script and ran that.

Huh, I didn’t know there were echos on the internet.

I don’t really know how that happened. It isn’t quite identical across all browsers yet though since Firefox have yet to build the functionality into the browser itself so you still need to install the extension (the same as you need to install the developer toolbar plugin to get the same functionality in IE6 and IE7)

Thank you for sharing that. There is some progress towards using namespaces in various scripts to prevent such conflicts, but as it is now conflicts sure can be troublesome, as you have experienced first-hand.

Is anyone currently having problems with their Google chrome browser crashing, from the shockwave flash plug in currently not working? I’m having serious issues over here…