In the snippet below, the IIFE init() does not invoke. I can post any other code if needed.
This is for a drop down menu. I'm testing out $Frame.Support() so I'm pretty sure this has something to do with it, or more so the way I changed the code structure so that it is now an argument in a method.
$Frame.Support({
name: 'Menu',
body: function () {
var top_element = $A("#hold_name")[0],
bottom_element = $A("#wrap_bottom")[0],
time_out_id = 0,
TIME_DELAY = 1000;
function top_mouse_over() {
window.clearTimeout(time_out_id);
bottom_element.style.visibility = 'visible';
}
function bottom_mouse_over() {
window.clearTimeout(time_out_id);
}
function mouse_out() {
time_out_id = window.setTimeout(function () {
bottom_element.style.visibility = 'hidden';
}, TIME_DELAY);
}
(function init() {
alert('I can\'t see me.');
top_element.addEventListener("mouseover", top_mouse_over, false);
top_element.addEventListener("mouseout", mouse_out, false);
bottom_element.addEventListener("mouseover", bottom_mouse_over, false);
bottom_element.addEventListener("mouseout", mouse_out, false);
}());
}
});
Related
I using Jquery-3.2.1, Jquery-Ui 1.12.1.In my JavaScript file:
window.TruyenOnlineScript = (function () {
var _this = {};
_this.init = function () {
_this.initSearchMobile();
_this.initSidebar();
};
_this.initSearchMobile = function () {
//Open Input Search Mobile
$('.js-open-search-box-mobile').on('click', function (event) {
event.preventDefault();
$('body').addClass('open-search-box');
setTimeout(function () {
$('#js-search-input-mobile').focus()
}, 500);
});
};
_this.initSidebar = function () {
//Open Navbar Moblie
$('.js-open-sidebar').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$('body').addClass('open-sidebar');
});
};
})();
$('document').ready(function () {
window.TruyenOnlineScript.init();
});
But I got the error "init of undefined":
Can anybody show me how to fix it? Thank you!
You are setting window.TruyenOnlineScript to the return value of an Immediately Invoked Function Expression:
window.TruyenOnlineScript = (function () {
. . .
})();
but that expression doesn't return any value and so window.TruyenOnlineScript winds up being undefined (and that's why you can't call init() on undefined).
You need to have the IIFE return an object for TruyenOnlineScript to reference.
window.TruyenOnlineScript = (function () {
var _this = {};
_this.init = function () {
_this.initSearchMobile();
_this.initSidebar();
};
_this.initSearchMobile = function () {
//Open Input Search Mobile
$('.js-open-search-box-mobile').on('click', function (event) {
event.preventDefault();
$('body').addClass('open-search-box');
setTimeout(function () {
$('#js-search-input-mobile').focus()
}, 500);
});
};
_this.initSidebar = function () {
//Open Navbar Moblie
$('.js-open-sidebar').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$('body').addClass('open-sidebar');
});
};
return _this; // <-- Now this will be returned
})();
$('document').ready(function () {
window.TruyenOnlineScript.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Some users have already given you the solution, but I want to show you another way to create the same object. I can't say it's "better", but it's clearer and a little easier to understand:
window.TruyenOnlineScript = {
init: function () {
this.initSearchMobile();
this.initSidebar();
},
initSearchMobile: function () {
//Open Input Search Mobile
$('.js-open-search-box-mobile').on('click', function (event) {
event.preventDefault();
$('body').addClass('open-search-box');
setTimeout(function () {
$('#js-search-input-mobile').focus()
}, 500);
});
},
initSidebar: function () {
//Open Navbar Moblie
$('.js-open-sidebar').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$('body').addClass('open-sidebar');
});
}
};
I have two prototypes in my jquery script :
script1.prototype.initScript = function() {
//first one
this.saveGrid = function () {
alert("here");
}
};
script1.prototype.otherFunction = function () {
//second
//script1.initScript.saveGrid ?
};
I'd like to call saveGrid in otherFunction. How can I do that?
Edit :
And there ?
script1.prototype.initScript = function() {
//first one
this.saveGrid = function () {
alert("here");
}
};
script1.prototype.otherFunction = function () {
//second
$('button').on("click", function(){
//call savegrid here
});
};
Thanks.
You can access the function over this, like you already did in you example while creating the function saveGrid.
You should instead ask yourself, if this is a good idea, to create a function in another function and re-use them elsewere. What will happen, if you call otherFunction before initScript?
function script1() {}
script1.prototype.initScript = function() {
this.saveGrid = function() {
alert("here");
}
};
script1.prototype.otherFunction = function() {
this.saveGrid();
};
var s = new script1();
s.initScript();
s.otherFunction();
For you second example you have to store this before creating your event listener.
function script1() {}
script1.prototype.initScript = function() {
this.saveGrid = function() {
alert("here");
}
};
script1.prototype.otherFunction = function() {
var that = this;
$('button').on("click", function(){
that.saveGrid();
});
};
var s = new script1();
s.initScript();
s.otherFunction();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click me</button>
Prototype It depends on the type .
the correct way is defined as a prototype , so you can call them in different situations
script1.prototype.saveGrid=function () {
alert("here");
}
script1.prototype.initScript = function() {
//first one
this.saveGrid()
};
script1.prototype.otherFunction = function () {
//second
//this.saveGrid()
};`
or you can define an object which then associates the prototypes
var script1=(function () {
function initScript(){
this.saveGrid();
}
function otherFunction(){
this.saveGrid();
}
script1.prototype.saveGrid=function () {
alert("here");
}
});
Is there any way to overwrite a function or event handling in function?
Using addEventListener, we can have as many event handlers on element as much we want
var test=document.getElementById("div");
test.addEventListener("click",function(){alert("im first");},false);
test.addEventListener("click",function(){alert("im second");},false); // alerts "im first" and after that "im second"
but what if we want to overwrite function/event for example based on client width for example something like this
function one() {
alert("first");
}
function two() {
alert("second");
}
window.onresize = function() {
var test = document.getElementById("div");
if (window.innerWidth > 500) {
test.onclick = one
} else {
test.onclick = two;
}
}
Is something like this possible in javascript?
In this case I would use very effective but very little known approach. addEventListener can accept an object with property handleEvent as event handler. In this case it's very easy to overwrite handler function, set it to null ot completely different function without messing with removeEventListener and addEventListener again and again.
In your case:
var test = document.getElementById("div");
var handlers = {
handleEvent: function () {
alert("im first");
}
};
test.addEventListener("click", handlers, false);
function one() {
alert("first");
}
function two() {
alert("second");
}
window.onresize = function() {
if (window.innerWidth > 500) {
handlers.handleEvent = one;
} else {
handlers.handleEvent = two;
}
}
Check the demo below, resize the pane to see how it dynamically picks up different handlers based on viewport width.
Demo: http://jsfiddle.net/dfsq/t4wrjkLa/
As long as you have a reference to the original handler function, you can call removeEventListener on it, and just add your own listener like normal.
function one()
{
alert('first');
}
var test = document.getElementById('test');
test.addEventListener('click', one);
// Later in your code
function two()
{
alert('second');
}
test.removeEventListener('click', one);
test.addEventListener('click', two);
Demo:
var button = document.getElementById('button');
button.addEventListener('click', function(event)
{
test.removeEventListener('click', one);
test.addEventListener('click', function()
{
alert('second');
});
event.target.parentNode.removeChild(event.target);
});
function one()
{
alert('first');
}
var test = document.getElementById('test');
test.addEventListener('click', one);
#test
{
background: #CCC;
border: solid 1px #666;
padding: 5px;
}
<div id="test">Click me</div> <button id="button">Exchange event listeners</button>
Look at this. You can remove the old event function then replace it with the new event function
function one() {
alert("first");
}
function two() {
alert("second");
}
window.onresize = function() {
var test = document.getElementById("div");
if (window.innerWidth > 500) {
try{
test.removeEventListener("click",two);
} catch{}
test.addEventListener("click",one,false);
}
else {
try{
test.removeEventListener("click",one);
} catch{}
test.addEventListener("click",two,false);
}
}
I would use a closure to reference the function currently set as the event handler:
var onResize = function () {
// references the current handler
var curr;
// removes/adds event handlers
function swap (curr, repl) {
var test = document.getElementById('div');
test.removeEventListener('click', curr);
test.addEventListener('click', repl);
}
// the "resize" event handler which will be
// assigned to the "onResize" variable
return function () {
if (window.innerWidth > 500) {
if (curr !== one) swap(curr, one);
curr = one;
}
else {
if (curr !== two) swap(curr, two);
curr = two;
}
};
}(); // IIFE
window.addEventListener('resize', onResize);
// run "onResize" at starting to
// set up one of the below handlers
onResize();
function one () { alert('first'); }
function two () { alert('second'); }
<div id="div">div</div>
I found this JS code structure and I' wondering how to call the function move() from inside the function load:
JS
function Start(data) {
this.move= function() {
....
};
function load(){
// call move
}
}
function Start(data) {
var _this = this;
this.move = function() {
console.log('mode');
}
function load() {
_this.move();
}
// load();
}
Start();
new Start();
function Start(data) {
this.move = function() {
....
};
function load(obj) {
obj.move();
}
load(this);
}
This is a javascript closure. I've found this site to be helpful.
var move = function () {
alert("move");
};
load();
function load() {
move();
}
This code will alert Move only once.
The function Start() has to be instantiated as an object. So you would use:
function Start(data) {
this.move = function() {
....
};
this.load = function(){
// call move
this.move();
}
}
var s = new Start(foobar);
s.load();
By using closures, that can be acheived by stroing the parent reference;
function Start(data) {
var me = this;
this.move= function() {
....
};
function load(){
me.move();// call move
}
}
Good Luck.
is there any chance to create a function that i can call?
if i'm putting the following lines in the document ready function it works:
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
But if i'm doing this i can't call. So I tried this:
function icancall()
{
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
}
So i thought i can call this with icancall(); But nothing happened. What am I doing wrong?
What i want do: executing the Caman function on a button click.
I hope you can help me !
function resz(){
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
try {
this.render(function () {
var image = this.toBase64();
xyz(image); // call that function where you pass filters
});
} catch (e) { alert(e) }
});
}
[Apply CamanJS filters by this function]
function xyz(image){
var filters_k = $('#filters');
filters_k.click(function (e) {
e.preventDefault();
var f = $(this);
if (f.is('.active')) {
// Apply filters only once
return false;
}
filters_k.removeClass('active');
f.addClass('active');
var effect = $.trim(f[0].id);
Caman(canvasID, img, function () {
if (effect in this) {
this.revert(false);
this[effect]();
this.render();
}
});
});
}