We Keep Coding

Function not firing correctly

currently I have the JS below. I'm trying to run the slideout.close(); event with smoothstate onStart. My code is below and i'm currently getting an error in the console. Could someone please help me out.
Thanks.
$(document).ready(function() {
slideout();
});
function slideout() {
var slideout = new Slideout({
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
}
$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
slideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});

You've created a global function called slideout, within which you have a local variable called slideout that is the one that refers to a Slideout object - you can't access that local variable from other functions. When you try to use slideout.close() that is looking for a .close() method on the function.
One fix would be to change the name of the variable or function and make the variable global too, so that you can access it anywhere. But adding more globals is messy.
I think it should be fine to combine all of your code into a single document ready handler, so that everything is in the same scope without needing any globals (you would still need to use a different name for the variable).
I can't test the following because I don't have whatever Slideout is, but:
$(document).ready(function() {
'use strict';
var slideout; // variable that is local to the doc ready handler function
// and accessible to all code within that handler
function initSlideout() { // function renamed
slideout = new Slideout({ // assign to variable declared above
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
}
initSlideout();
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
initSlideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});

jPlayer playing two media files

I am attempting to piece together a jPlayer example that plays two audio files, one right after another.
I need to have full event control, so i decided not to use the playlist option, unless somebody can give me an example of having a way of controlling when the events fire, something like:
first media 'before' function
first media 'after' function
second media 'before' function
second media 'after' function
My example below is using a global variable in the "ended:" function and seems pretty clumsy.
Does anybody have a better suggestion how i might accomplish this? here is my working example of using the global variable:
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
console.log('ready function.');
},
ended: function() {
console.log('ending function starting.');
var player = $("#jquery_jplayer_1");
player.jPlayer("stop");
player.jPlayer("clearMedia");
player.jPlayer("setMedia", {
wav: globalParmTwo
});
player.jPlayer("play", 0);
globalParmTwo = null;
},
loop: false, // added to remove the if condition
supplied: "wav, oga",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});
});
var globalParmTwo = null;
function komPare(parmOne, parmTwo) {
globalParmTwo = parmTwo;
var player = $("#jquery_jplayer_1");
player.jPlayer("stop");
player.jPlayer("clearMedia");
player.jPlayer("setMedia", {
wav: parmOne
});
player.jPlayer("play", 0);
}
And here my working example using the playlist, which seems like a better solution, assuming there is some way to fire specific functions at specific times:
var myPlaylist = null;
$(document).ready(function(){
myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, []
, {
playlistOptions: {
enableRemoveControls: true
},
supplied: "wav, ogv",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$('.jp-playlist').hide();
myPlaylist.option("autoPlay", true);
});
function komPare(firstMediaUrl, secondMediaUrl) {
myPlaylist.setPlaylist([
{ wav: firstMediaUrl },
{ wav: secondMediaUrl }
]);
};
any suggestions are very appreciated.
UPDATE: i removed an if-condition and put in "loop: false," instead in the first example.

We can bind events to the playlist player, and then use a global media counter. This still uses global variables, but the code is cleaner.
as always, any suggestions are most appreciated.
var myPlaylist = null;
var mediaCounter = null;
$(document).ready(function(){
myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1"
}, [] // empty initial playlist
, {
playlistOptions: {
enableRemoveControls: true
},
supplied: "ogv",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$('#jquery_jplayer_1').bind($.jPlayer.event.ready,
function(event) {
console.log('ready.');
}
);
$('#jquery_jplayer_1').bind($.jPlayer.event.loadeddata,
function(event) {
console.log('loadeddata ' + mediaCounter++ );
}
);
$('#jquery_jplayer_1').hide();
$('.jp-playlist').hide();
$('.jp-controls').hide();
myPlaylist.option("autoPlay", true);
});
function komPare() {
var playlist = [];
for ( urlName of arguments ) {
playlist.push( { ogv: urlName } );
};
mediaCounter = 0;
myPlaylist.setPlaylist(playlist);
};

skrollr.min.js is not initializing

var s = skrollr.init({
mobileDeceleration: 1,
edgeStrategy: 'set',
forceHeight: true,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
When i try to init skrollr it just gives me this error:
TypeError: Argument 1 of Window.getComputedStyle is not an object.
What could it be?

I was having this same issue and putting the init inside $(document).ready resolved it for me.
$(document).ready(function () {
var s = skrollr.init();
});

How can I know when imgAreaSelect is closed?

This is my imgSelectArea code:
ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
handles: true,
autoHide: false,
minChars: 0,
autoFill: true,
selectOnly: true,
mustMatch: true,
instance: true,
onInit: function (img, selection) {
$("#tagBox").css('display', 'none');
},
onSelectEnd: function (img, selection) {
$("#tagBox").show();
var x1 = selection.x1;
var y1 = selection.y1;
var x2 = selection.x2;
var y2 = selection.y2;
var position = $('#<%=imgMain.ClientID%>').position();
}
});
This works fine but I want to know when imgSelectArea is closed i.e when you click on overlay area, I want to get notified. I couldn't find this in documentation.
This is the documentation link:
http://odyniec.net/projects/imgareaselect/usage.html#callback-functions
Has anybody got around this issue?

Ok, I haven't got a working dev environment where I am so I can't test this but...
In jquery.imgareaselect.js (I'm using v0.9.8) around line 421:
function cancelSelection() {
$(document).unbind('mousemove', startSelection)
.unbind('mouseup', cancelSelection);
hide($box.add($outer));
setSelection(selX(x1), selY(y1), selX(x1), selY(y1));
if (!this instanceof $.imgAreaSelect) {
options.onSelectChange(img, getSelection());
options.onSelectEnd(img, getSelection());
}
/*ADD THIS LINE*/
options.onCancelSelection(img);
}
Also, around line 461, add a default, empty function:
...
onInit: function () {},
onSelectStart: function () {},
onSelectChange: function () {},
onCancelSelection: function () {}, /* Add This line */
onSelectEnd: function () {}
}, options));
You should then be able to register an event handler as usual...
ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
...
mustMatch: true,
instance: true,
onInit: function (img, selection) {
$("#tagBox").css('display', 'none');
},
onCancelSelection: function (img) {
/*Do something*/
},
...
});
That's about the best I can do in notepad/ie. If it's still an issue tomorrow, I'll have a go with a dev env.

problem with callback function in javascript using extjs

My callback code (js file) is something like
function addcontent(Title, tUrl, bURL, Id,purl){
alert(Id)
var runcontent = new Ext.Panel({
id: 'tt' + Id,
region: 'center',
autoLoad: {
url: tUrl,
callback: function(el){
addwindow(el, Id, bURL,purl);
},
scripts: true,
nocache: true
},
width: 600,
collapsible: false
});
}
function addwindow(el, Id, bURL,purl) {
//alert(el);
alert("add buttons " +{Id);
}
My problem is the call function is not going to addwindow. When I alert “Id” in addcontent it is displaying but not addwindow as the control is not moving to addwindow.
How can I trace/track what is the exception which is preventing the control to move onto addwindow.?

The proper approach to creating the callback with params is to use createCallback or createDelegate. Your functions are (apparently) executing in global scope so it wouldn't make much practical difference, but createDelegate allows your callback to execute within the same scope as the original function, which makes it the best default choice usually. So it would be something like:
autoLoad: {
url: tUrl,
callback: addwindow.createDelegate(this, [Id, bURL,purl]),
scripts: true,
nocache: true
},
Again, note that the this in your case will be the global Window object, but this is still a good practice to get into so that doing the same thing in the future within a class method will work as expected.

function addcontent(Title, tUrl, bURL, Id,purl){
alert(Id)
var runcontent = new Ext.Panel({
id: 'tt' + Id,
region: 'center',
autoLoad: {
url: tUrl,
callback: addwindow(Id, bURL,purl),
scripts: true,
nocache: true
},
width: 600,
collapsible: false
});
}
function addwindow(Id, bURL,purl) {
//alert(el);
alert("add buttons " +Id);
}