We Keep Coding

ScrollTop not working on update to jQuery 1.11.1

My website used to use jQuery 1.3.2, now I got courage and time to update it to jQuery 1.11.1 but still I have some problems.
The function bellow used to work but not anymore.
Anyone could help with it?
In scroll down when -user or admin- write a message.
I have added the jquery-migrate-1.2.1.min.js file also already.
The scroll did not run at all. It is halted on top.
<script type="text/javascript" src="'+PATH_xxx+'js/jquery.min.1.11.1.js"></script>
<script type="text/javascript" src="'+PATH_xxx+'js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="'+PATH_xxx+'js/jquery-ui-11.js"></script>
function ajax_message() {
$.post(BASE_URL+'chat/ajax_message', {}, function(result){
$("#mydiv").empty().append(result);
var count_p = $("#mydiv p").length
if ($('#roll-auto').attr('checked')) {
$("#mydiv").attr('scrollTop', count_p * 1500)
}
});
}

In jQuery 1.11.1 scrollTop isn't an attribute instead it's used as a function $().scrollTop(positionOnPageToMoveTo);
So just change:
$("#mydiv").attr('scrollTop', (count_p*1500))
To:
$("#mydiv").scrollTop(count_p*1500);

Removing render-blocking JavaScript for Jquery UI Library

I am attempting to try speed up my web page by "Removing render-blocking JavaScript" using this defer method:
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js/combination.js"; // replace defer.js with your script instead
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
I've combined all my javascript files into 1 called combinations.js but whenever I try combine this jquery library UI:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
with combinations.js, my jquery scripts don't work.
So Google Page speed is still saying that I need "Removing render-blocking JavaScript" for this library but how?
UPDATE:
When I add the Jquery UI Library to the top of my combination.js file and test it on CHROME and IE9 it works! The problem I now have above, is when I test it on Firefox (I've got version 35). So this seems to be a firefox issue

It looks like It was my history in firefox not re-loading my Jquery Library even when I did a full refresh (CRTL + F5). Strange, anyway if anyone happens to get this problem, delete all your history and load up your website up again. Amazing how such a simple solution can take up so much time.

jQuery Window Load in iOS 8

I recently updated my phone to iOS 8 and now I am experiencing really unusual behavior.
Here is a demo of the problem:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
alert("A");
jQuery(window).load(function(){
alert("B");
});
</script>
In Safari iOS 7, this brings up the dialog boxes "A" and "B". But when viewed in Safari iOS 8, only dialog box "A" shows up.
Any ideas on why window load would not be working in iOS 8?

I don't have a real solution for this, but if you have any or in your page, Safari on iOs8 do not trigger the load event.
So you have at least 2 solutions:
count your externals files like images, css, scripts and attach a
load event on them and wait for the last .load of those files
write your tag video/audio after the load events
//EDIT:
So I write this that helped me to still use video:
var $video = $('.player');
$video.each(function(){
this.outerHTML = this.outerHTML.replace('div', 'video')
});
$video = $('.player');
See Browser compatibility here to see if outerHTML fits with your compatibility https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML#Browser_compatibility

Use window.onload = function(){ }; on the behalf of jQuery(window).load(function(){ }); I am able to fix this issue on my project.

Jquery Validate Error on IE8-10

I have a checkout page in my e-commerce with jquery validate, in firefox/chrome it works correctly but in internet explorer 8 to 10, I receive the following error:
"object doesn't support this property or method jquery validate"
I have tried older/newer version of validate and jquery, jquery 1.10, 2.0, in 2.0 it does work with IE9 and 10, but we need support to IE8 and jquery 2.0x doesn't support anymore. And yes, I am instantiating correctly the validate.js but simply doesn't work!
Locally it works when I refresh the page, but when I navigate to the link I receive the error, it's completely insane!
Here my code:
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery-1.7.1.min.js"></script>
<script src="https://www.moip.com.br/transparente/MoipWidget-v2.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.bgiframe-2.1.2.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.placeholder.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.swfobject.1-1-1.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.jqzoom-core.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.meio.mask.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.validate.1.8.1.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.validate.additional-methods.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jcarousellite_1.0.1.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.cycle.all.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.easing.1.3.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.lazyload.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.popupWindow.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.colorbox.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/tools/tools.js"></script>
<script>
$(window).load(function(){
$('#identificacao').validate({ // I receive the error in this line
rules: {
email:"required",
senha:"required"
},
messages: {
email:"Por favor, entre com seu e-mail.",
senha:"Insira sua senha."
}
});
This was my last try, I tried version 1.7 with validate 1.8 (that worked in another e-commerce), and already tried last version of both, still get the error, I have no clue what happens, anyone had the same error?
I'm using this plugin of validate:
http://jqueryvalidation.org/

Quote OP:
object doesn't support this property or method jquery validate
and
"Locally it works when I refresh the page, but when I navigate to the link I receive the error, it's completely insane!"
Yes it's insane... it's Internet Explorer and it doesn't work reliably with $(window).load(). What you describe about refreshing the page is a symptom of this common issue.
See: http://api.jquery.com/load-event/
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
Try this instead...
$(document).ready(function() { // fires on DOM ready event
$('#identificacao').validate({
// your rules, options, etc.
});
});
See jQuery DOM ready event handler.
If you still need the $(window).load() event for some other reason, it's perfectly acceptable to place it inside of the DOM ready handler.
$(document).ready(function() { // <- fires when DOM is ready
$(window).load(function() { // <- supposed to fire when all assets have loaded
....
});
});

Cufon loaded asynchronously doesn't render in IE

I'm creating a site which uses Cufon and is particularly heavy in terms of page-weight due to a large amount of Javascript. Therefore I'm trying to load in the script asynchronously with head.js ( http://headjs.com/ ) like so:
head.js("http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js", function() {
head.js("/js/libs/cufon-yui.js", function() {
head.js("/js/shared/Stag_Bold_700.font.js" , function() {
Cufon.replace('h1', { fontFamily: 'Stag Bold' });
});
});
});
So Jquery is downloaded first, the subsequent cufon lib file and cufon font are downloaded in sequence and then Cufon is finally called to replace the H1. Obviously, this is a trimmed down example with fewer replacements but this still doesn't work when just attempting to replace the H1.
The problem is that ONLY in Internet Explorer (6/7/8), the text is not replaced but I can see that Cufon has definitely been called. I can ascertain this because the tag has the class "cufon-active cufon-ready" added to it. When I inspect the markup using the IE Developer toolbar, the cufon/cufoncanvas tags are there inside the selected elements but are, for want of a better word, invisible.
In IE9, the script behaves as intended similar to Chrome and Firefox. I have tried adjusting the Cufon drawing engine and have updated to the latest 1.09i version for good measure. If I move the Cufon calling statements to the document ready event instead of loading asynchronously, it works but I am trying to optimize page load and my site will be using a number of Cufon fonts as well as many other JS plug-ins. I've also tried using both labs.js and head.js to load the appropriate files asynchronously.

I had the same problem - I addressed this by using the browser detection of head.js to do the following:
if (head.browser.mozilla || head.browser.webkit || head.browser.opera ||
(head.browser.ie && (head.browser.version == '9.0'))) {
head.js('script/jquery.min.js',
'script/cufon.js', function () {
head.js('script/bebas_neue_400.font.js', function () {
Cufon.replace('h1', {
textShadow: '1px 1px rgba(0, 0, 0, 0.2)'
}).now();
// or a head.js('scripts/file.with.cufon.replacement.js');
});
});
} else {
// here we load scripts depending on GZIP support for this browser
document.write('\x3Cscript type="text/javascript" src="script/jquery.min.js">\x3C/script>');
document.write('\x3Cscript type="text/javascript" src="script/cufon.js">\x3C/script>');
document.write('\x3Cscript type="text/javascript" src="script/bebas_neue_400.font.js">\x3C/script>');
document.write('\x3Cscript type="text/javascript" src="script/file.with.cufon.replacement.js">\x3C/script>');
}
You could also use conditional comments (I didn't because I am also doing GZIP support detection in JavaScript and needed to adjust the scripts which are loaded dynamically.)
It's a hack, but should be useful enough until it's addressed within the library itself.
(I have also posted GIST with a more complete example here)

try calling
<script type="text/javascript"> Cufon.now(); </script>
just before </body> tag closes.

Try adding Cufon.now() after the Cufon.replace call, like so:
Cufon.replace('h1', { fontFamily: 'Stag Bold' });
Cufon.now();

I solved this in a way similar to CameraSchoolDropout's approach, except instead of using Document.write, I'm using IE conditional tags, and YepNope.js.
This issue on github says that they had problems using document.createElement('script'), and I just felt better using IE conditionals.
You can see an example page that I created at http://epraxadev.com/yepnope/
<head>
<style type="text/css">
#txt { visibility:hidden; }
</style>
<!--[if lte IE 8]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/adventor.cufon.js"></script>
<![endif]-->
<script src="js/modernizr.custom.js"></script>
<script>
yepnope([{
test: window.jQuery,
nope: {
'yJ': '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js',
'yCufon': 'js/cufon-yui.js',
'yFont': 'js/museo.font.js'
},
callback: {
'yJ': function(){
console.log("YepNope loaded jQuery! This isn't IE!");
}
},
complete: function() {
console.log('All browsers, including IE, will show this');
Cufon.replace('h1');
$(document).ready(function(){
$('#txt').css('visibility', 'visible');
});
}
}]);
</script>
<noscript>
<style type="text/css">
#txt { visibility:visible; }
</style>
</noscript>
</head>

For now just load jQuery and Cufón using regular <script> tags and load the subsequent files using a script loader.
Using document.write is a bad approach since it will only work if the script is loaded/executed before DOMReady and using browser sniffing to do it isn't a good approach either since it can give false results.
Conditional comments aren't a good solution either because you may need to update the scripts in the future and you will have to remember to update it in 2 different places which is bad for maintainability.
Follow this issue on GitHub to know when the bug is fixed.