Create function for CamanJS Plugin - javascript

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();
}
});
});
}

Related

How do fix :"Cannot read property 'init' of undefined TypeError"?

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');
});
}
};

Call function in prototype from other prototype

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");
}
});

JS - call a parent function

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.

How to make this script pause on hover?

I'm new to jQuery and I need a bit of help. I'm using this jQuery script as a testimonial rotator and it works like a charm but I just need to make one small tweak. I need it to be able to pause on hover and then restart when the mouse leaves the div. How can I do this?
This is the script I'm using:
function fadeMyContent() {
$(".testimonial:first").fadeIn(1000).delay(3000).fadeOut(1000,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
fadeMyContent();
});
Here is a JSFiddle.
There is a plugin that will provide all the functionality you need and be more reliable called jQuery Cycle 2.
It provides a 'pause-on-hover' option when initialising it.
change the definition of fadeMyContent (also called as destroying function) on hovering on ul#testimonial-rotator and on hover-out change it to old definition again. I have used setTimeout in place of delay because delay is not cancellable.
$(document).ready(function () {
var fadeMyContent;
var t
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
var fadeMyContentDummy = function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent()
});
}
fadeMyContent();
$('#testimonial-rotator').hover(function (e)
{
window.clearTimeout(t)
$('.rotate:first').clearQueue()
fadeMyContent = function () {
return false;
}
},
function (e)
{
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
fadeMyContentDummy()
})
});
DEMO

How to synchronize jquery load files with jquery bind events

I need to add to DOM some html´s by jquery, and bind some events the generated elements, but i cant syncronize it, where the addEvents function starts, the DOM elements are not created, so the $(".login-log") element is not on DOM yet.
I found this:
Javascript Event Synchronization
Im working on it but dont works for me, that my code, i dont know if i miss something or what:
var Login = function ()
{
var commons = new Commons();
this.init = function()
{
stepOne(stepTwo);
commons.init();
}
function stepOne(callback) {
var AsyncDone = function()
{
callback();
}
loadFiles(AsyncDone);
}
function loadFiles(callback)
{
$(".header-container").load("views/header.html");
$(".content-container").load("views/login.html");
callback();
}
function stepTwo() {
addEvents();
}
function addEvents() {
alert("is here");
$(".login-log").bind("click", function() { alert("fuck"); });
}
}
The syncronizathion makes the alert "is here" to appear before the DOM elements of header and login.html are loaded in DOM.
I know that have to be simple, but i dont find the solution.
Thanks in advice.
My final choose:
this.init = function()
{
loadHeader(addHeaderEvents);
loadTemplate(addTemplateEvents);
loadFooter(addFooterEvents);
commons.init();
}
function loadHeader(callback) {
$(".header-container").load("views/header.html", function() {
callback();
});
}
function addHeaderEvents() {
}
function loadTemplate(callback) {
$(".content-container").load("views/template_login.html", function() {
callback();
});
}
function addTemplateEvents() {
alert("llega");
$(".login-log").bind("click", function() { alert("done"); });
}
function loadFooter(callback) {
$(".footer-container").load("views/footer.html", function() {
callback();
});
}
function addFooterEvents() {
}

Categories

Resources