Convert jQuery to Prototype (small code)?

Question

I have a site that runs n Vivvo CMS. It is based mainly on Prototype. I would like to implement on site this function, but is jQuery based. Allthough i use jQuery.noconflict, it still doesn't run.

I would like to convert the code below from jQuery to Prototype, can anyone help me?

$(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #wrap
  var h = $('#wrap').height();
  var y = $(window).scrollTop();
  if( y > (h*.25) && y < (h*.75) ){
   // if we are show keyboardTips
   $("#tips").fadeIn("slow");
  } else {
   $('#tips').fadeOut('slow');
  }
 });
});

Thank you.

Can show an example of using `jQuery.noconflict` that didn't work? — Jared Farrish, Sep 06 '11 at 00:31
Did you try using `jQuery.` where `$.` was used? (Or `jQuery` in place of `$`?) — Jared Farrish, Sep 06 '11 at 00:44
As well as calling `$.noConflict();` right after the jQuery include. — Jared Farrish, Sep 06 '11 at 00:54

score 6 · Answer 1 · edited May 23 '17 at 11:51

6

You certainly can use jQuery. instead of $. but it's an awful lot of extra typing ( :) ).

In the rare situations where I have to mix Prototype and jQuery, I prefer to handle it like this.

Put jQuery in noConflict mode

<script>jQuery.noConflict()</script>

Then wrap your jQuery code in this:

(function($) {

    //Now I can do jQuery stuff and use the $
    $(document).ready( function() {

    });

})(jQuery)

What you're doing is creating an anonymous function that calls itself and you're passing the jQuery object to the function as an argument.

The beauty is that everything inside the function is local only to that function so you don't have to worry about the $ inside the function stomping all over Prototype and you don't have to suffer the pain of converting jQuery code to Prototype.

edited May 23 '17 at 11:51

Community

1
1

answered Sep 06 '11 at 00:53

Mark Biek

146,731
54
156
201

I like the method you're describing... But *it's an awful lot of extra typing* is a matter of perspective, especially if it's easier to understand/get to work. – Jared Farrish Sep 06 '11 at 00:55
1

You'll save dozens of characters with my method! DOZENS! :) – Mark Biek Sep 06 '11 at 00:56
Ok, that's pretty funny. – Jared Farrish Sep 06 '11 at 00:57
Sorry to say that, but i tried lmost everything jquery documentation gives on noConflict. My question was not on getting it working with jQuery, but on converting it to Prototype. Thank you for your answer anyway. – Nalyk Calmis Sep 06 '11 at 02:12
@Mark Biek I tried your code, it still messes up my site. – Nalyk Calmis Sep 06 '11 at 02:17
@Mark Biek it messes the site when it comes to this part if( y > (h*.25) && y < (h*.75) ) – Nalyk Calmis Sep 06 '11 at 02:18
Here is the error missing ) after condition if ( y > (h*.25) && y – Nalyk Calmis Sep 06 '11 at 02:42
The problem was in less than char - <. I used the cdata trick and the page looks good, but the code still doesn't work. – Nalyk Calmis Sep 06 '11 at 02:59
1

Are you sure you're calling `noConflict()` **right after** the jQuery include? **Before** any Prototype code is run? – Hubro Sep 06 '11 at 10:42

Convert jQuery to Prototype (small code)?

1 Answers1