1

I have:

    <!DOCTYPE html>
<html>
<head>

    <title></title>


<link rel="stylesheet" type="text/css" href="/temp/css/menu.css" />

<link rel="stylesheet" type="text/css" href="/temp/css/bottomchatdiv.css" />

<link rel="stylesheet" type="text/css" href="/temp/css/centercontent.css" />

<link rel="stylesheet" type="text/css" href="/temp/css/basics.css" />


    <script type="text/javascript" src="jquery-1.7.js"></script>

<script type="text/javascript" src="jquery.ba-bbq.js"></script>

<script type="text/javascript" src="jquery.ba-bbq-addtl.js"> </script>

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript">
function getusto(anchorid) {
  $(anchorid).scrollTo();
} 
</script>

<script type="text/javascript" src="hide&show.js">

</script>




</head>
<body >


<div class="bbq">
  <div class="bbq-nav bbq-nav-top menu">
   <a class="mainitem menu_links" href="">Welcome</a>   <br> 

<a class="menu_links" href="#" onclick="getusto('welcome'); return false;">Welcome</a><br> 
<a class="menu_links" href="#" onclick="getusto('guidelines'); return false; ">Guidelines</a> 

<br>  
<hr style="width:48%"/>
<br>  



<a class="mainitem menu_links" href="#Regular-Visitors-&-Ops.html">Regulars & Ops</a> <br>

</div>

<br>  

<div class="bbq-content centercontent">

    <!-- This will be shown while loading AJAX content. You'll want to get an image that suits your design at http://ajaxload.info/ -->
        <div class="bbq-loading" style="display:none;">
      <img src="/shell/images/ajaxload-15-white.gif" alt="Loading"/> Loading content...
    </div>

    <!-- This content will be shown if no path is specified in the URL fragment. -->
    <div class="bbq-default bbq-item">

default welcome text here.

    </div>

  </div>


</div>


</body>
</html>

Now, the problem is Regular-Visitors-&-Ops.html page wouldn't load, but it was loading! So I tinkered with my undos until I found that not including prototype.js let that link work via jquery bbq's way.

What gives? How do I get both prototype.js & jquery bbq coexisting? I need both for different things..

to get this up & running you need an additional Regular-Visitors-&-Ops.html file in the same directory, say:

<!DOCTYPE html>
<head>
</head>
</body>
this is the additional file.
</body>
</html>

As well as jquery, jquery bbq's two scripts (I named one myself), & prototype.js.

now if you do set this up - takeaway prototype & the Regular-Visitors(...) link works. problem is, i am using prototype.js. so either how do i get these two to work, or more easily, how i do implement a scrollTo function (can't use anchors, due to jquery bbq hogging the anchors/hashes (e.g. "#welcome" in "index.html#welcome") WITHOUT USING PROTOTYPE.JS? there should be one right?

Jav_Rock
  • 22,059
  • 20
  • 123
  • 164
lakitu
  • 77
  • 8

2 Answers2

5

By including prototype.js after jQuery, Prototype will override the value of the global $ variable. You just need to use:

var $j = jQuery.noConflict();

You can then use $j in place of $ in jQuery contexts and $ for prototype contexts. Here's the documentation: http://api.jquery.com/jQuery.noConflict/.

jabclab
  • 14,786
  • 5
  • 54
  • 51
  • hm - it is over my head what i would need to change. can you either explain, or give an easier way to deal with this? if not that's cool, that sounds like the solution. it's just i am using jquery-bbq.. would i just 'replace' all `$`s with `$j` in the jquery bbq js files (lol! peter piper picked a pack ...) - & also where do i put `var $j = jQuery.noConflict();`? – lakitu Jan 18 '12 at 09:17
  • You shouldn't need to change anything in the plugin itself, it should be built in a way which uses the `jQuery` variable rather than the shorthand `$`. You just need to put the `var $j = jQuery.noConflict();` at the top of **your** script. Hope that helps :-) – jabclab Jan 18 '12 at 09:19
  • As the `.scrollTo()` is a prototype function you should just be able to use `$(anchorId).scrollTo();`. The `$j` should be used for jQuery stuff. – jabclab Jan 18 '12 at 09:28
  • Are you using Prototype *just* to make use of scrollTo()!? That's like buying an entire Snap-on tool closet just because you need to tighten a screw ;) – danwellman Jan 18 '12 at 09:40
  • well sweet fricking moon falling! something else broke unexplainably, so i fixed that.. hmm. ANYWAY - like i said, another option for scrolling would help. you said jquery has one, Dan? would that be the most aerodynamic way to do this - most streamlined? give your votes NOW =P p.s. thanks for waiting for me, anyone who did. would love to get this done tonight, this is the tipping point, everything after this should be easy . . . should. =) – lakitu Jan 18 '12 at 09:56
  • http://demos.flesler.com/jquery/scrollTo/ does this let me specify by id? i can't tell – lakitu Jan 18 '12 at 10:00
  • I should think it would take an ID, something like: `jQuery("#yourId").scrollTo({...})`. – jabclab Jan 18 '12 at 10:02
  • alright - well to both of you, using that linked pages' example, i added the js file to the directory & formed this - but it's not working: `` can you guys help me thru the last leg of this? – lakitu Jan 18 '12 at 10:11
  • Instead of `"#" + $(anchorid)` you just need `"#" + anchorid`. – jabclab Jan 18 '12 at 10:16
  • hm - are you sure - i tried that & can't get it to work. i have `function getusto(anchorid) { $.scrollTo( "#" + anchorid, 800, {easing:'elasout'} );; } ` - am i screwed up somehow? – lakitu Jan 18 '12 at 10:48
  • Should work as far I can see from the demo (haven't used this plugin myself). Are you sure an element exists with an `id` of the passed in `anchorid`? Minor point but you've got two semi-colons at the end there too. – jabclab Jan 18 '12 at 10:56
  • thanks for the help man - i gotta get to bed. i'll resume tomorrow – lakitu Jan 18 '12 at 11:00
4

jQuery and Prototype both use the $ character so they will conflict.

If you wish to use them both together you will need to make use of jQuery's noConflict() method to release the $ alias back to Protoype

There is also a scrollTo jQuery plugin

danwellman
  • 9,068
  • 8
  • 60
  • 88
  • I think this is probably the best approach. Drop Prototype if you;re only using it for `scrollTo` and just use the jQuery plugin. – Zack The Human Jan 18 '12 at 21:06