Build Your Own Business Website header image

An Example of Troubleshooting a Java Script Error

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is an example of where I troubleshoot a java script error that a member is having on her site. We identify the characteristics of the error and then search the java script for those characteristics until we locate the source of the problem. The value of this video is in watching the process of troubleshooting.

Video Transcript

Rick: We’ll start off actually by addressing an issue that we addressed last night on a question on a members’ site, on Cathy’s site, on the earlebaum.org site and let me go over to that right now, here… the problem here on her site is she has this navigation menu here that is not supposed to do this with her colors, right? Her colors aren’t supposed to do that on this menu and if we take a look at the… inspect this in Firefox and… I’m sorry, in Firebug, you can see that if we’re selecting this a element, that it has an element style background color of that dark green and color fff even though she has specifically named you know, given this selector, nav menu 5 a, a background color of white and a color of green. It’s being displayed this way and this element style is taking priority.

Now, last night, I presume that this problem is being caused by java script because element.style is typically what a java script produces when it grabs a hold of some element and then changes its CSS. It usually returns kind of a notation, element.style with its new colors. And if we turn these colors off for a moment, I just turned it off for that one in particular, it looks like it’s supposed to look right now. So this is definitely the place causing the problem.

And what I didn’t notice the first time I took at this though was that here in the link, there is an inline style that is defining this color. So inline, inside of a reference is style = color rgb255255. That’s the white color of the text and then background color rbg such and such. That’s the green color. And it’s this inline style that is actually governing right now, the display of this menu items.

And so, Cathy, I’m going to unmute your microphone here for a moment.

Cathy: Hello.

Rick: Hi Cathy. So what are the chances that in the plugin that you used to create this menu that you have put this information in that plugin?

Cathy: It could very well be… the thing is that I removed the plugin.

Rick: So this right now is simply a manually created list item?

Cathy: No. Was that manually created? It’s just from the menu itself. I created a menu and then it’s listed from a menu in a widget.

Rick: So this is a WordPress menu that you’ve placed in a widget. And as far as you can tell, you haven’t done any styling to that menu or any styling to that link in there.

Cathy: No, I have not.

Rick: As far as you can tell.

Cathy: Correct.

Rick: Okay, let’s see, control F5. Let’s see what this thing looks like once it’s refreshed.

Cathy: And that’s how it’s supposed to look.

Rick: Right. Just a second here… while it refreshes… you know, while I was looking at this this morning, I guess I assumed you were still using that drop down plugin and I thought that might be coming from that drop down plugin. Holy smokes, let’s try this again.

Cathy: And I don’t know if it’s residue from that.

Rick: Yeah, I don’t know if it’s residue from that either. Earlebaum… let’s just turn this off for a second and let’s turn it back on. Okay and so now, if we look at that, it does not have an element reference. So this is definitely being caused some java script then and it’s not due to an inline change. And it’s some java script that… let’s see, let’s just go up to this top one and we’ll select it and then you can see it turning yellow when I come down to this, right? You see that?

Cathy: Yes.

Rick: There is some java script that is taking over the display of this color. And I guess, we’ll have to… I’m still going to have to go back and look at this more later on today to see if I can figure out which java script it is. But it’s definitely a java script and not… when I saw it early this morning, I said, “Oh great, this is inline color, the style that’s been defined and it’s that style that’s really causing the problem.” But I see that that style, this inline style is actually being created by some java script element in here that is essentially saying, “Take this a reference and on hover, give it this set of colors.” And you know, we could probably search… let’s try that. Let’s just search the source for this.

Cathy: Okay.

Rick: Okay control F and we’re going to view source. We’re going to search for… so it doesn’t exist anywhere in the source, this call to rgb 13. It doesn’t not exist in the source which means it exists in an external stylesheet or I mean, an external java script. And so, let’s see if we can find those java scripts, images, CSS… no, it was information. View java script…

Cathy: Okay, cool. I was wondering how…

Rick: Control F and V… what the heck? It’s saying it’s not found in here either. Let’s just, let’s try some that we know is here. Yeah, toggle is definitely there. So let’s see, let’s go back to this and… well, let’s just look for background color then. Okay, register results, this is the checkout. That’s definitely not it. Next, what is this? This is function, jQuery cycle plugin with transition definitions. I want to use this in the cycle plugin 4.

Cathy: That looks like it’s for the gallery.

Rick: Okay, clear type background color hack… that’s not it anyway, it doesn’t matter. Background color, let’s see… next, slides… let’s get this. It might be interesting to see whether or not…if you can’t find this. Okay so, js main js fonts colors… so this is your custom one, right? That you had somebody create for you?

Cathy: Yes.

Rick: Okay so, it’s that green right there.

Cathy: There you go.

Rick: So I would say that this is being created by that piece of java script and you should have them take a look at it and see how to prevent that from acting on the menu unless you want it to act on the menu.

Cathy: Okay.

Rick: Because that’s definitely where the problem is then. You can see that it is taking this… well, I just… background color, content area page, background color, menu sidebar, menu container LI a, remove the style attribution and then replace it with this color and that color…yeah, okay. Right. So that’s what happening here. It’s this thing right here grabbing that menu sidebar menu container LI a and changing it. And this always acts after your CSS has already been loaded and applied so that’s why the problem exists. Okay?

Cathy: Okay. The file name itself, where’s that referenced?

Rick: The file name, this is the file name. It says thesis_18, fonts colors… this must be a new folder that’s in your thesis_18 directory. And then the folder inside of that is JS and then the file name is main.js.

Cathy: Okay.

Rick: Okay?

Cathy: Okay.

Rick: And the chances are, he can… there’s probably just a little tweak in there someplace that makes it…yeah.

Cathy: Okay. And then also, what I’ve noticed too is if you go to Ways to Help, there are certain links that flicker. So if you click on Ways to Help…

Rick: It’s probably due to the fade but which ones are you referring to?

Cathy: Scroll down towards the end… okay, stop. Move on to Volunteer Jobs.

Rick: Right here?

Cathy: See how it blinks on and off?

Rick: Yeah, that’s because it’s also caused by the java script and it may even be that one piece of java script but that is java script cycling around you know, in and out, in and out, in and out changing it from the default color to white. So it looks like it’s flashing but it’s actually just changing colors.

Cathy: Okay, so that would be more than likely controlled by the same file?

Rick: More than likely, yeah.

Cathy: Okay.

Rick: Yeah. So you can see all of your… actually, it’s not true. It’s not going to white. What’s happening is it’s disappearing. And so, what’s happening is it’s not… it’s being displayed or not being displayed based on whatever logic there is under the hovering over it.

Cathy: That’s it and what’s weird is it is just a link. If you take a look at it, there’s nothing attached to it. There’s no… it’s just a regular link.

Rick: Yeah so you’re talking about this h2 right here. That link, right?

Cathy: Yes.

Rick: Well, it’s undoubtedly related to… so if we hover over it… oh pardon me, I’m not hovering over the right one, am I? Let’s see, inspect that element, IRS form… okay so it’s this one right here. So if we hover over it… well, I don’t know. That’s an odd behavior. I’d ask him to take a look at that too. I mean, there might be something else causing that but it’s sort of hard to… because the initial java script really does address these things, right? It changes font colors. My guess is that there is some unintended you know, consequence of either making this an h2 tag or making an h2 strong or h2 link strong or something like that that’s grabbing this and cycling through, turning it on and off.

Cathy: Okay. So again, somewhere within the java script itself.

Rick: Yeah, it’s definitely a java script behavior, right. That’s not an HTML or CSS behavior. Okay?

Cathy: Okay, thank you very much.

Rick: You’re welcome. Good luck.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment