How to convert javascript inline code to jQuery?

Question

I have this working jQuery + inline javascript which causes a conflict with existing jQuery.

<script>
var jq=jQuery.noConflict(); 
function goto(id, t){   
    jq(".contentbox-wrapper").animate({"left": -(jq(id).position().left)}, 600);
    jq('#slide a').removeClass('active');
    jq(t).addClass('active');   
}
</script>

<a class="active" href="#" onClick="goto('#kr', this); return false">

<a class="active" href="#" onClick="goto('#en', this); return false">

(I've tried to resolve the conflict as you can see but I believe the conflict arises from the inline javascript.)

How can I convert this inline javascript? Thanks.

what do you mean when u say it has conflict with the existing jquery? — Raghu
– Raghu, Commented Mar 26, 2013 at 18:44

techfoobar · Accepted Answer · 2013-03-26 18:44:01Z

1

You can bind it like:

<script>
//var jq=jQuery.noConflict();   
function goto1(id, t){   
    ...
    return false; // return false to prevent the link's default action
}

// means once your DOM is ready, and a.active is available to be bound
$(document).ready(function() { 

    // bind all clicks on a.active to the function 'goto1'
    $('a.active').click(goto1);
});
</script>

Variable names like goto can be potential causes of confusion later on. Changed it above to goto1.

answered Mar 26, 2013 at 18:44

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

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

Comments

Roko C. Buljan · Accepted Answer · 2013-03-26 18:58:58Z

0

Inline JS (embed into HTML) is hardly maintainable, I'd suggest:

HTML:

<div id="parent"> <!-- or any other parent el. -->
    <a href="#">Anchor</a>
</div>

jQuery:

(function($){ // remap $ to jQuery

  $(function(){ // DOM ready

    $('#parent').on('click', 'a', function( ev ){
       ev.preventDefault();
       var krPos = $('#kr').position().left;
       $(".contentbox-wrapper").animate({"left": -krPos }, 600);
       $('#slide a').removeClass('active');
       $(this).addClass('active'); 
    });

  });

})(jQuery);

edited Mar 26, 2013 at 18:58

answered Mar 26, 2013 at 18:48

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

3 Comments

user1106925 Over a year ago

You can remove the outer function, and just do jQuery(function($) { // DOM ready. The jQuery function will be passed to the $ parameter of the .ready() callback, giving you the scope protection you want.

Roko C. Buljan Over a year ago

@amnotiam But I'll leave it like it is cause you can put other things like $(window).load(function(){ and others - always inside the first function (remapper) perimeter.

Matthew Over a year ago

I am clueless as the above code does not animate/move to #kr & #en.

Community · Accepted Answer · 2017-05-23 12:11:06Z

0

$('.active').on('click', function() {
var $this = $(this);        
var id = $this.attr('href');
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
$('#slide a').removeClass('active');
$this.addClass('active');
return false;
 });

huangism answered it for me. https://stackoverflow.com/users/1058134/huangism

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Mar 26, 2013 at 19:34

Matthew

1132 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to convert javascript inline code to jQuery?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related