I have loaded in jQuery transit, and I made sure I did it after loading jQuery, but I still get this error:
I have looked at the resources panel in Chrome, and jQuery transit is being loaded after jQuery. It has also loaded correctly, and shows up with no problems.
I have also tested in the console, testing the examples on the website. They all return this same error.
here is my code:
$("#current-employers a.industry-company-link").click(function (e)
{
e.preventDefault();
var url = $(this).attr("href");
var company_container = $("#current-company-profile");
company_container.load(url);
company_container.transition({
y: ($(this).offset().top - company_container.offset().top)
});
console.log("container offset: " + company_container.offset().top + "\nURL offset: " + $(this).offset().top);
});
And the scripts I bring in:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.1.3/jquery.transit.min.js"></script>
Thanks for any help.
Well, turns out it's jQuery's fault in this case. jQuery 1.8 was the culprit here. Loading in 1.7.2 fixed the problem. I will report this bug to the transit and jQuery team.
UPDATE (April 13, 2013): I was reading through the source code for Transit and it appears that Mr. Cruz has updated the code to work effectively with jQuery 1.8+. If someone has tested it, could they please confirm that it works. Thanks.
This is related to the css hook that jQuery and Transit use. In version 1.7, jQuery didn't have a css hook for transforms. So Transit implemented a hook for us. However, jQuery updated itself and now offers css hooks for transforms. These now conflict with each other. However it is not a bug as jQuery is working fine and as such, it does not need to be reported to jQuery.
Your choices are to use a 1.7 version of jQuery and wait until Transit is updated or edit the Transit code which only takes about a minute.
To edit, get the development version of Transit from the official site. Then go to line 603 where it says $.cssHooks[prop]. Remove the method and place this method there instead:
$.cssHooks[prop] = {
get: function(elem) {
var t = $(elem).css('transform');
if (!t || t === "none") {
t = new Transform();
}
return t.get(prop);
},
set: function(elem, value) {
var t = $(elem).css('transform');
if (!t || t === "none") {
t = new Transform();
}
t.setFromString(prop, value);
$(elem).css({ transform: t });
}
};
You can minify the code at one of the hundreds of compressors available, such as http://jscompress.com/
Related
I'm using ExtJS 6.7 Modern toolkit and Ext.grid.Tree.selectOnExpander = false does not work properly when data for expandable node is loading from a remote server, i.e. node is selected when I click on the expander.
I expect that in this case the node will NOT be selected as in the case when the data is already loaded.
Check this fiddle as an illustration - try to expand node when it is loaded and when it is not loaded yet using expander.
So far I've tried to check fired events with Ext.util.Observable.capture and it seems like extra childtap event is triggired. I don't yet understand why. Seems like a bug for me.
Seems they forgot to implement the logic.
From the code I would sugget to use this snippet.
It extens the logic from Ext.dataview.List using the same style.
Sencha Fiddle: Fiddle
Ext.define('Portal.grid.Tree', {
override: 'Ext.grid.Tree',
shouldSelectItem: function(e) {
var me = this,
no = !me.callParent([e]),
cmp;
if (!no && !me.selectOnExpander) {
cmp = e.getTarget();
no = cmp.classList.contains('x-expander-el');
}
return !no;
}
});
The best solution I have found so far is to override Ext.grid.Tree onChildTap method (inherited from Ext.dataview.Abstract) like this:
Ext.define('Portal.grid.Tree', {
override: 'Ext.grid.Tree',
/** Override Ext.dataview.Abstract onChildTap method for correct processing selectOnExpander property **/
onChildTap: function(location) {
if (this.getSelectOnExpander() || location.event.target !== location.cell.expanderElement.dom) {
this.callParent(arguments);
}
},
});
I'm helping a friend with his site and after updating his WordPress installation to address the recent security issue, the JPlayer plugin that was handling audio on his site stopped working.
Chrome's console shows the error in the title, but I don't know JS well enough to be able to debug it properly. I'm pretty sure that the plugin itself is loaded correctly, along with JQuery, in the page header. I checked it against the plugin's instructions and it all appears fine.
I've also updated the plugin itself to ensure that it's not some compatibility issue.
I did not build his site, nor am I familiar with this particular plugin at all, I'm just trying to see if it's an easy fix or if I have to restore a backup.
I assume it has something to do with how his web designer (they had a falling out) implemented it in the main.js file, but that's about as far as I've gotten.
Help?
Really condensing and removing parts of main.js, it looks like
var $player = false,
$(document).ready(function() {
if(!$player) {
$("#jPlayer").jPlayer({
ready: function() {
$player = $(this); // IT'S BEING SET HERE !
PlaylistPlay(playlistObject,trackIndex);
}
});
} else {
PlaylistPlay(playlistObject,trackIndex);
}
});
function PlaylistPlay(lePID,trackIndex) {
playTrack(trackIndex);
}
function playTrack(index) {
$player.jPlayer("setMedia", {mp3: trackObject.mp3,oga: trackObject.oga}).jPlayer("play");
}
If you look closely at that, you'll see that there is a distinct possibility that PlaylistPlay can be called without $player being set to $(this), it's actually almost a certaintity, which means that $player is false, and doing
false.jPlayer(...
doesn't really work, see the console output that confirms the variable is false
The plugin is not initializing correctly. On $(document).ready() it's trying to initialize the plugin and it's reporting a Flash error.
Here's the significant part of the code:
$("#jPlayer").jPlayer({
...
error: function(event) {
var out = "<p id=\"noSolution\">Sorry, you need an HTML5 capable browser or flash to be able to listen to music on this website.<br /> Reason: ";
switch(event.jPlayer.error.type) {
case $.jPlayer.error.FLASH:
out += "A problem with the Flash insertion on the page.";
break;
...
}
}
...
});
Digging a bit deeper, I can trace this back to the vimeo.jplayer in the specific code block:
_flash_volume: function(a) {
try {
this._getMovie().fl_volume(a)
} catch (b) {
this._flashError(b)
}
}
That function is throwing an exception because this._getMovie() does not have a property named fl_volume.
The error you actually see is a side-effect of this failure. You could try removing the line: this._flashError(b) from the above statement and see if the error can be safely ignored.
I've got a jQuery plugin I made which will nicely format dates on elements with certain attributes on them. Overall it works, but I'm having some problems with Modernizr, but ONLY in IE and ONLY after a form postback.
Here's a snippet from the plugin where it uses the fantastic MomentJS library. Basically the first time the plugin is called, it will download the needed file then run the code to parse dates. If it is called any time afterwards and the library has already been downloaded, it can just go ahead and run the date parsing code.
function parseDates() {
var $items = this;
if (typeof moment !== "undefined") {
//If we are calling this at a time after page load, just run the function
setupDisplayDate();
} else {
//If the files have not been included yet, download them & call the function
//Load in a date library!
Modernizr.load({
load: SCRIPTS_PATH + "moment.min.js",
callback: setupDisplayDate
});
}
function setupDisplayDate() {
console.log("setupDisplayDate called! Moment is " + typeof moment);
$items.each(function () {
var $thisItem = $(this);
var formatter = $thisItem.data("date-format") || "MMMM Do, YYYY";
var ticks = parseInt($thisItem.data("date-ticks"), 10);
var formattedDate = moment(ticks).format(formatter);
$thisItem.text(formattedDate);
});
}
}
When I do this in IE9 only after a page postback, I get an error within the setupDisplayDate function saying that moment is not defined. What am I doing wrong?
I did find that if I do a timeout of 500ms it will work, but I shouldn't have to do that. I thought the whole point of the Modernizr.load feature was to download the code, and then make it available. It seems to download it and the fire my callback before it is available to use.
EDIT
Here's [a blog post about how IE9 will not properly dynamically added scripts: http://www.guypo.com/technical/ies-premature-execution-problem/
Any way around this?
Another Edit
It seems like the issues is actually regarding multiple calls to the load function and then the various callbacks firing out of order. There's an open issue on GitHub about it and this reproducible test case.
Working on a small engine to run my HTML5 test games, using it as a great way to get deeper into Javascript and have fun at the same time. Succeeding, btw.
However, I just found this cool little script called PreloadJS ( http://www.createjs.com/#!/PreloadJS ). Also using John Resig's classical inheritence class JS. Very cool, enjoying it. I am attempting to use PreloadJS to pull in all of my engine files...but I seem to be having an issue. Here's the code I'm using (keeping it simple on purpose):
var ScriptLoader = Class.extend({ // Want to add functionality to this to allow PHP or inline loading...perhaps later
init: function() {
this.fileList = [
'Empty.js',
'./engine/Scene.js'
];
this.preload;
},
loadProjectSource: function(directory) {
if (this.preload != null) { this.preload.close(); }
this.preload = new createjs.LoadQueue();
this.preload.addEventListener("fileload", this.fileLoaded);
this.preload.addEventListener("error", this.fileError);
this.preload.setMaxConnections(5);
this.loadAnother();
},
loadAnother: function() {
var item = this.fileList.shift();
if(this.fileList.length != 0) {
this.preload.loadFile(item);
}
},
fileLoaded: function(e) {
debug('Loaded ' + e.item.src);
this.loadAnother();
},
fileError: function(e) {
debug('Error ' + e.item.src);
}
}
From my engine instantiation, I'm calling ScriptLoader.loadProjectSource. It's doing nothing but throwing errors, and the documentation on error handling (and loading JS files in general...) is very sparse on the PreloadJS site. It focuses on preloading images (which, admittedly, looks great). Anyway, so yea, it's throwing errors. And it can't be the files, as I tried loading a completely blank JS file (as you can see). Still throwing an error on the Empty.js file.
Annoyed :) Thanks in advance.
The PreloadJS script uses XHR where available with browser support. In order for this to function correctly with locally-hosted scripts, a local webserver must be running. Upon activating my local webserver and attempting the same operation, full success.
I'm trying to integrate Jmpress.js (a fork of impress.js that is actually a jquery plugin) into Drupal 7 and I'm finding some problems.
First, I got the "$ is not a function" error, that I managed to solve pointing directly to jQuery instead of using $, as explained elsewhere.
But now that I get a recognized function, the thing works really awfully (misplaced elements, key navigation operating only in some cases), and more importantly I can see in the Firebug console a lot of error messages.
Here I paste a few of them:
$(hashLink).on is not a function
(?)()jmpress.js?m2hr5f (línea 1491)
step = "init"
eventData = Object { settings={...}, current={...}, container=[1], más...}
(?)()jmpress.js?m2hr5f (línea 278)
idx = 2
callback = function()
nodeName()jquery.js?v=1.4.4 (línea 34)
j = [firstSlide(step, eventData), function(), function()]
s = function()
v = function()
callCallback()jmpress.js?m2hr5f (línea 277)
callbackName = "selectInitialStep"
element = "init"
eventData = Object { settings={...}, current={...}, container=[1], más...}
init()jmpress.js?m2hr5f (línea 666)
args = Object { beforeChange=[0], beforeInitStep=[0], initStep=[0], más...}
f()jmpress.js?m2hr5f (línea 800)
(?)()jmpress.js?m2hr5f (línea 810)
idx = 0
element = div#simple
nodeName()jquery.js?v=1.4.4 (línea 34)
j = [div#simple]
s = function()
v = div#simple
toArray()jquery.js?v=1.4.4 (línea 27)
j = function()
s = undefined
jmpress()jmpress.js?m2hr5f (línea 809)
method = undefined
diapos()17 (línea 105)
noConflict()jquery.js?v=1.4.4 (línea 30)
j = function()
inArray()jquery.js?v=1.4.4 (línea 38)
[Parar en este error]
$(hashLink).on("click"+current.hashNamespace, function(event) {
I'm a bit lost now, as I've been fighting to get this working for almost a couple of days (I started trying with the original impress.js, but I surrendered with that, as integrating a jquery plugin looked like a more feasible option).
I also tried encapsulating my code (which is a really small code to launch jmpress.js), but I guess I did something wrong, as I didn't get it any further :)
Any help/ideas will be appreciated. Thanks!
The JMpress.js is being properly loaded in the header, and I'm adding this code to the body of a published node (with PHP Code filter active, so that the code is not being stripped):
<script type="text/javascript">
jQuery(function() {
jQuery('#simple').jmpress();
});
</script>
The problem is related to the jQuery version.
Drupal 7 works with jQuery 1.4.4 and the jmpress examples in http://shama.github.com/jmpress.js/#/home works with jQuery 1.7.1.
For example, the .on() function was added to jQuery in 1.7 (http://api.jquery.com/on/)
Override your jQuery version where you want to use this plugin.
Use hook_js_alter to remove the undesired version of jQuery and replace it with jquery 1.7.1.
Be careful, and use it only where it is necessary, because maybe other parts of your JS code will be broken after this change.