Convertir jquery Script en Prototype Scriptaculous?

Question

Salut, j'ai hAVE mon code ici dans jquery pour mon panneau de discussion de pied de page Et c'est un conflit avec Scriptaculous. Je veux qu'il se convertisse en pur js ou en utilisant Prototype Scriptaculous. Une aide? Merci!

$ (document) .ready (function() {

$.fn.adjustPanel = function(){ 
    $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); 

    var windowHeight = $(window).height(); //Get the height of the browser viewport 
    var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel 
    var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel) 
    var ulAdjust = panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel) 

    if (panelsub >= panelAdjust) {  //If subpanel is taller than max height... 
     $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust subpanel to max height 
     $(this).find("ul").css({ 'height' : ulAdjust}); //Adjust subpanel ul to new size 
    } 
    else if (panelsub < panelAdjust) { //If subpanel is smaller than max height... 
     $(this).find("ul").css({ 'height' : 'auto'}); //Set subpanel ul to auto (default size) 
    } 
}; 
//Execute function on load 
$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel 
$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel 

//Each time the viewport is adjusted/resized, execute the function 
$(window).resize(function() { 
    $("#chatpanel").adjustPanel(); 
    $("#alertpanel").adjustPanel(); 
}); 


    //Click event on Chat Panel + Alert Panel 
$("#chatpanel a:first, #alertpanel a:first,#alertpanel2 a:first,#likes a:first,#twiter a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel... 
    if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active... 
     $(this).next(".subpanel").hide(); //Hide active subpanel 
     $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger 
    } 
    else { //if subpanel is not active... 
     $(".subpanel").hide(); //Hide all subpanels 
     $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active 
     $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger 
     $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger 
    } 
    return false; //Prevent browser jump to link anchor 
}); 

//Click event outside of subpanel 
$(document).click(function() { //Click anywhere and... 
    $(".subpanel").hide(); //hide subpanel 
    $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger 
}); 
$('.subpanel ul').click(function(e) { 
    e.stopPropagation(); //Prevents the subpanel ul from closing on click 
}); 

Answer 1

Vous pouvez use jQuery with other libraries

Answer 2

Utilisez jQuery noConflict

Exemple:.

var j = jQuery.noConflict(); 
// Do something with jQuery 
j("div p").hide(); 
// Do something with another library's $() 
$("content").style.display = 'none'; 

Answer 3

Remplacez votre code ci-dessus cette

<script type="text/javascript"> 

    $.noConflict(); 



jQuery(document).ready(function($) { 
// Code that uses jQuery's $ can follow here. 


/////////////////////////////////////////////////////////////////////////////// 

$(document).ready(function(){ 


$.fn.adjustPanel = function(){ 
    $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); 

    var windowHeight = $(window).height(); //Get the height of the browser viewport 
    var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel 
    var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel) 
    var ulAdjust = panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel) 

    if (panelsub >= panelAdjust) {  //If subpanel is taller than max height... 
     $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust subpanel to max height 
     $(this).find("ul").css({ 'height' : ulAdjust}); //Adjust subpanel ul to new size 
    } 
    else if (panelsub < panelAdjust) { //If subpanel is smaller than max height... 
     $(this).find("ul").css({ 'height' : 'auto'}); //Set subpanel ul to auto (default size) 
    } 
}; 
//Execute function on load 
$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel 
$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel 

//Each time the viewport is adjusted/resized, execute the function 
$(window).resize(function() { 
    $("#chatpanel").adjustPanel(); 
    $("#alertpanel").adjustPanel(); 
}); 


    //Click event on Chat Panel + Alert Panel 
$("#chatpanel a:first, #alertpanel a:first,#alertpanel2 a:first,#likes a:first,#twiter a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel... 
    if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active... 
     $(this).next(".subpanel").hide(); //Hide active subpanel 
     $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger 
    } 
    else { //if subpanel is not active... 
     $(".subpanel").hide(); //Hide all subpanels 
     $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active 
     $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger 
     $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger 
    } 
    return false; //Prevent browser jump to link anchor 
}); 

//Click event outside of subpanel 
$(document).click(function() { //Click anywhere and... 
    $(".subpanel").hide(); //hide subpanel 
    $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger 
}); 
$('.subpanel ul').click(function(e) { 
    e.stopPropagation(); //Prevents the subpanel ul from closing on click 
}); 


/////////////////////////////////////////////////////////////////////////////// 

}); 




    </script>