how to rewrite code for jquery 1.9 [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 9 years ago.

please help me to rewrite js code for jquery 1.9 library. before i was using 1.4. icture. tried to use 2 libraries in one page with no conflict. no result.

jQuery.noConflict()

var ddpowerzoomer={
    dsetting: {defaultpower:2, powerrange:[2,7], magnifiersize:[75, 75]},
    mousewheelevt: (/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel", //FF doesn't recognize mousewheel as of FF3.x
    $magnifier: {outer:null, inner:null, image:null},
    activeimage: null,

    movemagnifier:function(e, moveBol, zoomdir){
        var activeimage=ddpowerzoomer.activeimage //get image mouse is currently over
        var activeimginfo=activeimage.info
        var coords=activeimginfo.coords //get offset coordinates of image relative to upper left corner of page
        var $magnifier=ddpowerzoomer.$magnifier
        var magdimensions=activeimginfo.magdimensions //get dimensions of magnifier
        var power=activeimginfo.power.current
        var powerrange=activeimginfo.power.range
        var x=e.pageX-coords.left //get x coords of mouse within image (where top corner of image is 0)
        var y=e.pageY-coords.top
        if (moveBol==true){
            if (e.pageX>=coords.left && e.pageX<=coords.right && e.pageY>=coords.top && e.pageY<=coords.bottom)  //if mouse is within currently within boundaries of active base image
                $magnifier.outer.css({left:e.pageX-magdimensions[0]/2, top:e.pageY-magdimensions[1]/2}) //move magnifier so it follows the cursor
            else{ //if mouse is outside base image
                ddpowerzoomer.activeimage=null
                $magnifier.outer.hide() //hide magnifier
            }
        }
        else if (zoomdir){ //if zoom in
            var od=activeimginfo.dimensions //get dimensions of image
            var newpower=(zoomdir=="in")? Math.min(power+1, powerrange[1]) : Math.max(power-1, powerrange[0]) //get new power from zooming in or out
            var nd=[od[0]*newpower, od[1]*newpower] //calculate dimensions of new enlarged image within magnifier
            $magnifier.image.css({width:nd[0], height:nd[1]})
            activeimginfo.power.current=newpower //set current power to new power after magnification
        }
        power=activeimginfo.power.current //get current power
        var newx=-x*power+magdimensions[0]/2 //calculate x coord to move enlarged image
        var newy=-y*power+magdimensions[1]/2
        $magnifier.inner.css({left:newx, top:newy}) //move image wrapper within magnifier so the correct image area is shown
    },

    setupimage:function($, imgref, options){
        var s=jQuery.extend({}, ddpowerzoomer.dsetting, options)
        var $imgref=$(imgref)
        imgref.info={ //create object to remember various info regarding image 
            power: {current:s.defaultpower, range:s.powerrange},
            magdimensions: s.magnifiersize,
            dimensions: [$imgref.width(), $imgref.height()],
            coords: null
        }
        $imgref.unbind('mouseenter').mouseenter(function(e){ //mouseenter event over base image
            var $magnifier=ddpowerzoomer.$magnifier
            $magnifier.outer.css({width:s.magnifiersize[0], height:s.magnifiersize[1]}) //set magnifier's size
            var offset=$imgref.offset() //get image offset from document
            var power=imgref.info.power.current
            $magnifier.inner.html('<img src="'+options.largeimagesrc+'"/>') //get base image's src and create new image inside magnifier based on it
            $magnifier.image=$magnifier.outer.find('img:first')
                .css({width:imgref.info.dimensions[0]*power, height:imgref.info.dimensions[1]*power}) //set size of enlarged image
            var coords={left:offset.left, top:offset.top, right:offset.left+imgref.info.dimensions[0], bottom:offset.top+imgref.info.dimensions[1]}
            imgref.info.coords=coords //remember left, right, and bottom right coordinates of image relative to doc
            $magnifier.outer.show()
            ddpowerzoomer.activeimage=imgref
        })
    },


    init:function($){
        var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;" />')
            .append('<div style="position:relative;left:0;top:0;" />')
            .appendTo(document.body) //create magnifier container and add to doc
        ddpowerzoomer.$magnifier={outer:$magnifier, inner:$magnifier.find('div:eq(0)'), image:null} //reference and remember various parts of magnifier
        $magnifier=ddpowerzoomer.$magnifier
        $(document).unbind('mousemove.trackmagnifier').bind('mousemove.trackmagnifier', function(e){ //bind mousemove event to doc
            if (ddpowerzoomer.activeimage){ //if mouse is currently over a magnifying image
                ddpowerzoomer.movemagnifier(e, true) //move magnifier
            }
        }) //end document.mousemove

        $magnifier.outer.bind(ddpowerzoomer.mousewheelevt, function(e){ //bind mousewheel event to magnifier
            if (ddpowerzoomer.activeimage){
                var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
                if (delta<=-120){ //zoom out
                    ddpowerzoomer.movemagnifier(e, false, "out")
                }
                else{ //zoom in
                    ddpowerzoomer.movemagnifier(e, false, "in")
                }
                e.preventDefault()
            }
        })
    }
} //ddpowerzoomer

jQuery.fn.addpowerzoom=function(options){
    var $=jQuery
    return this.each(function(){ //return jQuery obj
        if (this.tagName!="IMG")
            return true //skip to next matched element
        if (typeof options=="undefined")
            options={}
        if (options.largeimage && options.largeimage.length>0){ //preload large image?
            options.preloadimg=new Image()
            options.preloadimg.src=options.largeimage
        }
        var $imgref=$(this)
        options.largeimagesrc=(options.preloadimg)? options.preloadimg.src : $imgref.attr('src')
        if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined
            ddpowerzoomer.setupimage($, this, options)
        else if (this.complete){ //account for IE not firing image.onload
            ddpowerzoomer.setupimage($, this, options)
        }
        else{
            $imgref.bind('load', function(){
                ddpowerzoomer.setupimage($, this, options)
            })
        }
    })
}

jQuery(document).ready(function($){ //initialize power zoomer on DOM load
    ddpowerzoomer.init($)
})

tried to use 2 library in one page with noConflict but no result. all other scripts uses 1.9 library

Answer 1

<script src="jquery.1.4.js"></script>
<script>
    var $14 = window.jQuery;
</script>

<script src="jquery.1.9.1.js"></script>
<script>
    var $ = window.jQuery;
</script>

<script>
    // Code with 1.4
    console.log( $14('body').html() );

    // Code with 1.9.1
    console.log( $('body').html() );
<script>

Answer 2

U can use jQuery Migrate plugin to guide you. Here it is: Downloading jQuery Just include it in check the Browser console for warnnings, errors... Include uncompressed jQuery Migrate plugin. With compressed I had problems in Liferay.

Answer 3

If you're upgrading to jQuery 1.9 from an older version, the most important thing you need to know is that a whole bunch of old features were removed in 1.9.

These features had already been deprecated in previous versions, so using them hasn't been recommended for a while, but they were kept around to aid backward compatibility.

If your code is still using these features, you have three options:

1. Downgrade back to jQuery 1.8.

2. Rework your code to use the correct techniques instead of using the deprecated features.

3. Download the migration library that the jQuery devs released at the same time as jQuery 1.9. This library contains all the old code that was removed from the main jQuery library, and thus makes it compatible again with code that uses the deprecated features.

   This would probably be the best solution for you in the short term, to get you back up and running, but longer term you should be thinking about fixing your code (ie my point 2 above).