Some of codes don't work in sub folder pages

JavaScript
1

Hi.

Before anything; I’m sorry for my bad English guys.

I’m a novice web designer. For my training I start to make a sample website but I have a weird problem with my codes & I appreciate you if you can help me.

Here’s my problem…

I used jquery to make a “back to top” button, showing a welcome message, slider, gallery using colorbox &…

In the home page everything is fine but in the sub folder pages in the product folder some codes didn’t work at all. You could see that colorbox is working but back to top button and the top menu arrow don’t work properly & I really can’t find out what’s wrong with that. Some of them works & some don’t !

Could you please PLEASE help me to correct this problem.

This is my files :
http://up.vbiran.ir/uploads/2901713999018368023_same.rar

The original text was in rtl language, so I replaced it with Lorem Ipsum.

p.s: I know the codes is not so good because as I said I’m beginner. So I really appreciate you if you can help me to optimize and make my markup & code better.

thanks in advance.

2

Hi there,

You would do yourself a favour by learning how to use the console in situations like this, to debug problematic programs.
Here’s a brief tutorial.

In this case, looking at the console on gifts.html shows:

Uncaught TypeError: undefined is not a function custom.js:17

which is this code:

// Setup the Slider
$('.flexslider').flexslider({
  animation: 'fade',
  controlsContainer: '.flexslider'
});

And that’s the problem. There is no element with a class of “flexslider” on the gifts.html page, so $('.flexslider') retuns undefined.
You cannot call the flexslider() method on undefined, so the script throws an error and subsequent JS execution stops.

1 Like
3

Thanks for your help Pullo. It was very helpful.

But how can I prevent this kind of error to happen ? Using different JS file for each page ? I mean “home-page.js”, “gifts.js” and so on… or what…?

What is the best way ?

Again, sorry for these beginner questions and thank you for helping.

4

No probs :slight_smile:

You could program defensively:

if ($('.flexslider').length){
  $('.flexslider').flexslider({
    animation: 'fade',
    controlsContainer: '.flexslider'
  });
}

The length property will return 0 if the element doesn’t exist on the page, so the above code checks for the existence of a div with the class of “flexslider”, before trying to initialize the slider itself.

Otherwise, just include the slider initialization code on the pages where you need it directly (and not in an external JS file):

<script>
$('.flexslider').flexslider({
  animation: 'fade',
  controlsContainer: '.flexslider'
});
</script>
1 Like
5

Thanks a lot Pullo. You are GREAT man.