How do disable JavaScript inside an div?

Question

I have an problem with my JavaScript and I'm not sure how to deal with it.

So I'm using this script:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        $('nav a').click(function(){
        $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
        }, 700);
        return false;
        });
    });

The script is making a smooth scroll on my page which I think is really cool, so I don't want to delete it.

But my problem is, that I also have a simple gallery slider on my page, but the JavaScript will effect that gallery slider. It scrolls to the top when clicking on a link in href. The code for the gallery slider is:

            <div id="images">
                <img id="billede1" src="http://i.imgur.com/dL3io.jpg" />
                <img id="billede2" src="http://i.imgur.com/qASVX.jpg" />
                <img id="billede3" src="http://i.imgur.com/fLuHO.jpg" />
                <img id="billede4" src="http://i.imgur.com/5Sd3Q.jpg" />
            </div>
            <div id="slider">
                <a href="#billede1">1</a>
                <a href="#billede2">2</a>
                <a href="#billede3">3</a>
                <a href="#billede4">4</a>
            </div>

The thing is, I really like the simple code and I'm trying to be better, so I don't want to use some advanced code which I don't understand.

Is is somehow possible to disable the JavaScript not to be working in my div? Or maybe called it something else than the "href"?

I think my "href" is the problem.

So.. Here it is in fiddle: http://jsfiddle.net/62dsqLff/ and you can see the problem.

Really thanks. I appreciate it :-)

can you post your code in a jsfiddle.net and can you add your code to your post instead of posting images with a screenshot? — Stefan
– Stefan, Commented Dec 15, 2014 at 9:05
$('nav a') suggests that the smooth scroll should only work with links inside <nav> element. So if the slider is outside of nav it shouldn't be affected. — pawel
– pawel, Commented Dec 15, 2014 at 9:14
Hey All :-) I posted it on fiddle now: jsfiddle.net/62dsqLff Pawel - problem is that it also work outside the nav a but it shouldn't :( — user3172695
– user3172695, Commented Dec 15, 2014 at 9:25

Lal krishnan S L · Accepted Answer · 2014-12-15 09:23:49Z

1

Let me share a fiddle for you JSFIDDLE on this demo I am given new class called .nav for your navbar anchor tags. Then rewrite the script like below.

 $('a.nav').click(function () {
     alert( $($(this).attr('href')).offset().top);
     $('html, body').animate({
         scrollTop: $($(this).attr('href')).offset().top
     }, 700);
     // return false;
 });

answered Dec 15, 2014 at 9:23

Lal krishnan S L

1,7451 gold badge16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3172695 Over a year ago

I think I implemented the things you want me to do, but it doesn't seem to work :( jsfiddle.net/62dsqLff/3

Lal krishnan S L Over a year ago

It's working.... Please add jquery on js fiddle like this jsfiddle.net/62dsqLff/4

Lal krishnan S L Over a year ago

Your fiddle is working,, Bt u forgot to include jquery on that check his demo jsfiddle.net/62dsqLff/5.

user3172695 Over a year ago

I have tried in js fiddle and on my website. I'm quite sure that js fiddle told me I didn't have to include jquery. But anyways I still can't get it to work. Try to scroll manually down to my gallery slider and click on one of the number. You will see my problem afterwards. It scrolls up when I click on one of the numbers. I don't want it to do that.

user3172695 Over a year ago

So I tried to delete the entire script and the gallery slider still "scrolls up". This is weird. Check it out: jsfiddle.net/62dsqLff/6 I don't think it is the script anyway. Can I somehow lock " <a href="#billede1">1</a>" to only scroll up to end of div element. Not sure if I explained it right. lol

n1kkou · Accepted Answer · 2014-12-15 09:14:48Z

0

Use an id for that anchor, instead of a vague "nav a" which will trigger on any a inside your nav element.
Also prevent default action if you are using an a as a button.

The right way to create your "return top" script, is to target a button. Instead of nav a, create a button, give it an id, and target that id.

answered Dec 15, 2014 at 9:14

n1kkou

3,1402 gold badges26 silver badges34 bronze badges

Collectives™ on Stack Overflow

How do disable JavaScript inside an div?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related