All geek questions in one place

The plugin highlights 0.7 incompatible with jQuery 1.9.1 or jQuery-UI 1.10.3 & # 8594; TypeError: $ .css (...) - undefined

Changes in jQuery or jQuery-UI are not compatible with the jquery.illuminate.0.7 plugin

The jquery.illuminate.0.7 plugin works in Chrome 30, firefox 22, and IE 10 . He uses

  • jquery_1.6.1.min.js
  • JQuery-ui_1.8.13.min.js
  • jquery.illuminate.0.7.js

But changing the version of jQuery and jQuery-UI leads to the fact that the demo highlight plugin works only in chrome 30 . Demo uses

  • jquery_1.9.1.js and
  • JQuery-ui_1.10.3.js
  • jquery.illuminate.0.7.js

In firefox 22, it causes the following error:

TypeError: $.css(...) is undefined pointing to jquery.illuminate.0.7.js:223

HTML and js code

 <script> window.onload = function(){ $("#illuminate").illuminate({ 'intensity': '0.3', 'color': '#98cb00', 'blink': 'true', 'blinkSpeed': '1200', 'outerGlow': 'true', 'outerGlowSize': '30px', 'outerGlowColor': '#98cb00' }); }; </script>

The corresponding html is just a button

 <button type="submit" class="btn" id="illuminate" >submit</button>

What i tried

I looked at the source code of the highlight plugin to see where the error occurs. The $.cssHooks.boxShadowBlur method contains this js:

 $.cssHooks.boxShadowBlur = { get: function ( elem, computed, extra ) { return $.css(elem, support.boxShadow).split(rWhitespace)[5]; }, set: function( elem, value ) { elem.style[ support.boxShadow ] = insert_into($.css(elem, support.boxShadow), value, 5); } };

The github jquery page still contains the corresponding function (see line 111):

 jQuery.fn.extend({ css: function( name, value ) { ....

My question

  • Is there any violation in jQuery.js or jQuery-ui that could be responsible for $.css(...) failing
  • What can I do to make the plugin compatible with the latest version of jQuery and jquery-ui (1.10.3) the latest version (or at least 1.9.1)

Updates and pointers for now

Dave asked how to load javascript libraries. I load them synchronously in the following order:

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="jquery.illuminate.0.7.js"></script>

User Sumurai noted that he may be related to obsolete curCSS . I found the following code in jQuery 1.9.1:

 jQuery.extend({ // Add in style property hooks for overriding the default // behavior of getting and setting a style property cssHooks: { opacity: { get: function( elem, computed ) { if ( computed ) { // We should always get a number back from opacity var ret = curCSS( elem, "opacity" ); return ret === "" ? "1" : ret; }//if }//get }//opacity },//cssHooks // more properties for jQuery.extend ....

So jQuery 1.9.1 still uses curCSS for cssHooks.opacity . The plugin indicator light adds another property to cssHooks: $.cssHooks.boxShadowBlur . But as far as I can tell, this method has nothing to do with cssHooks.opacity . Therefore, curCSS should not have an effect.

+4
source share
1 answer

Well, well, that required debugging.

The problem is that highlighting assumes jQuery does not support the box-shadow property, but a newer version of jQuery. This means that when vendor prefixes are not available (they are not in the latest FireFox), you get either an infinite loop or the undefined property. Fortunately, the highlight passed with the undefined BoxShadow property instead of the infinite loop that proceeded from using BoxShadow (as I found out, which led to several browser freezes).

So what is the problem, what is the fix? Remove the violation code from the backlight. All cases of support.boxShadow should be changed simply by 'boxShadow' , and the cssHooks.boxShadow block cssHooks.boxShadow been removed. You can also remove the bit that sets support.boxShadow in the first place.

My test case is: http://jsfiddle.net/JbTcs/2/ and it works in FireFox and Chrome, and they tell me IE10. Source code for backlight:

 /* * jQuery Illuminate v0.7 - http://www.tonylea.com/ * * Illuminate elements in jQuery, Function takes the background color of an element * and illuminates the element. * * TERMS OF USE - jQuery Illuminate * * Open source under the BSD License. * * Currently incompatible with FireFox v.4 * * Copyright © 2011 Tony Lea * All rights reserved. * * Redistribution and use in source and binary forms, with or without modification, * are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright notice, this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * * modified version * */ (function($){ $.fn.illuminate = function(options) { var defaults = { intensity: '0.05', color: '', blink: 'true', blinkSpeed: '600', outerGlow: 'true', outerGlowSize: '30px', outerGlowColor: '' }; var options = $.extend(defaults, options); var original_color = ''; var new_color = ''; var dead = false; $.fn.illuminateDie = function() { dead = true; options.intensity = '0.05'; options.color = ''; options.blink = 'true'; options.blinkSpeed = '600'; options.outerGlow = 'true'; options.outerGlowSize = '30px'; options.outerGlowColor = ''; $(this).css({'boxShadow': '0px 0px 0px', 'background-color': "#" + original_color}); } function toggleIllumination(obj, original_color, new_color, outerGlow) { if(rgb2hex(obj.css('background-color')).toUpperCase() == original_color.toUpperCase()) { obj.animate({"background-color": "#" + new_color, 'boxShadowBlur': outerGlow }, parseInt(options.blinkSpeed), function(){ if(!dead) toggleIllumination($(this), original_color, new_color, outerGlow); }); } if(rgb2hex(obj.css('background-color')).toUpperCase() == new_color.toUpperCase()) { obj.animate({"background-color": "#" + original_color, 'boxShadowBlur': '0px' }, parseInt(options.blinkSpeed), function(){ if(!dead) toggleIllumination($(this), original_color, new_color, outerGlow); }); } } function colorAdd(hex, percent) { percentHex = parseInt(Math.round(parseFloat(percent)*16)); return hexAdd(hex[0], percentHex) + hexAdd(hex[1], percentHex) + hexAdd(hex[2], percentHex) + hexAdd(hex[3], percentHex) + hexAdd(hex[4], percentHex) + hexAdd(hex[5], percentHex); } function hexAdd(val, val2) { result = parseInt(val, 16) + val2; if(result > 15) return 'F'; return result.toString(16).toUpperCase(); } function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } return this.each(function() { obj = $(this); if(obj.is("input")){ if(obj.css('border') == ''){ obj.css('border', 'none') }; } dead = false; original_color = rgb2hex(obj.css('background-color')); if(options.color == ''){ new_color = colorAdd(original_color, options.intensity); } else { new_color = options.color.replace('#', ''); } var BlurColor = ''; if(options.outerGlowColor == ''){ BlurColor = new_color; } else { BlurColor = options.outerGlowColor.replace('#', ''); } obj.css('boxShadow','0px 0px 0px #'+BlurColor); var firstColor = ''; var firstBlur = ''; if(options.blink == 'true'){ firstColor = original_color; firstBlur = '0px'; } else { firstColor = new_color; firstBlur = options.outerGlowSize; } var outerGlow = ''; if(options.outerGlow == 'true'){ outerGlow = options.outerGlowSize; } else { outerGlow = '0px'; } obj.animate({"background-color": "#" + firstColor, 'boxShadowBlur': firstBlur }, parseInt(options.blinkSpeed), function(){ if(options.blink == 'true') toggleIllumination($(this), original_color, new_color, outerGlow); }); }); }; var div = document.createElement('div'), divStyle = div.style, support = $.support, rWhitespace = /\s/, rParenWhitespace = /\)\s/; div = null; function insert_into(string, value, index) { var parts = string.split(rWhitespace); parts[index] = value; return parts.join(" "); } $.cssHooks.boxShadowBlur = { get: function ( elem, computed, extra ) { return $.css(elem, 'boxShadow').split(rWhitespace)[5]; }, set: function( elem, value ) { elem.style[ 'boxShadow' ] = insert_into($.css(elem, 'boxShadow'), value, 5); } }; $.fx.step[ "boxShadowBlur" ] = function( fx ) { $.cssHooks[ "boxShadowBlur" ].set( fx.elem, fx.now + fx.unit ); }; })(jQuery);
+2
source

Source: https://habr.com/ru/post/1495188/

More articles:


All Articles