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() {
}
Related
Let me explain what the trouble is. I have two functions: compute(); and discount_compute();. When the page firsts load both functions get executed once (OK, since discount_compute() is part of compute so it always runs when compute() is executing). When I open the #autobid-panel (it is set on display:none initially) the function discount_compute runs 1 time because of the $('#autobid').on('click', function(), but then it also runs 2 more times because of the '[data-slider]').on('change.fndtn.slider'). Btw everytime this autobid-panel is closed or opened the slider is initialized again. I only want the discount_compute() to run once when #autobid-panel is opened. Any ideas?
function compute() {
//first function
};
function discount_compute() {
//second function
};
$(document).ready(function($) {
$('.price').change(compute).change();
$('#autobid').on('click', function() {
if ($(this).is(':checked')) {
$('#autobid-panel').removeClass("hide");
$(document).foundation('slider', 'reflow');
discount_compute();
} else {
$('#autobid-panel').addClass("hide");
$(document).foundation('slider', 'reflow');
}
});
$('#discount').on('change', function(){
var value = $(this).val();
$('.range-slider').foundation('slider', 'set_value', value);
discount_compute();
});
$('[data-slider]').on('change.fndtn.slider', function(){
discount_compute();
});
});
Thank your for your help!
You don't really explain the reasoning of the data-slider or why you even call discount_compute(); there if you don't want to run it.
One dirty hack you can do is something to this effect:
function compute() {
//first function
};
function discount_compute() {
//second function
};
var harRun=false;
$(document).ready(function($) {
$('.price').change(compute).change();
$('#autobid').on('click', function() {
if ($(this).is(':checked')) {
$('#autobid-panel').removeClass("hide");
$(document).foundation('slider', 'reflow');
if(hasRun != true) {discount_compute(); hasRun=true;}
} else {
$('#autobid-panel').addClass("hide");
$(document).foundation('slider', 'reflow');
}
});
$('#discount').on('change', function(){
var value = $(this).val();
$('.range-slider').foundation('slider', 'set_value', value);
discount_compute();
});
$('[data-slider]').on('change.fndtn.slider', function(){
if(hasRun != true) {discount_compute();}
});
});
In this way, once hasRun is set to true you no longer call discount_compute().
unfortunately $(document).foundation('slider', 'reflow'); fires a change event, so there isn't any nice way.
one way is to off the event before reflow and on straight after:-
function compute() {
//first function
};
function discount_compute() {
//second function
};
$(document).ready(function($) {
$('.price').change(compute).change();
$('#autobid').on('click', function() {
if ($(this).is(':checked')) {
$('#autobid-panel').removeClass("hide");
$('[data-slider]').off('change.fndtn.slider', discount_compute);
$(document).foundation('slider', 'reflow');
$('[data-slider]').on('change.fndtn.slider', discount_compute);
discount_compute();
} else {
$('#autobid-panel').addClass("hide");
$(document).foundation('slider', 'reflow');
}
});
$('#discount').on('change', function(){
var value = $(this).val();
$('.range-slider').foundation('slider', 'set_value', value);
discount_compute();
});
});
Im trying to make my first jquery plugin.. but actually i dont know what im doing wrong here.
$(document.ready(function()
{
var plugin = (function()
{
//this function is not accessible from the outside
function privateFunction()
{
}
//these functions are
return
{
alert1: function()
{
alert('Hallo');
},
alert2: function()
{
alert("hi");
}
}
})()
//but it is not working :/
plugin.alert1();
});
it is not executing one of the alerts. Am i putting some semicolons wrong?
i checked if all were closed
Javascript's automatic semicolon insertion will add a semicolon after return and undefined is returned.
Your code will look like
return;
{...
Replace
return
{
Should be
return {
You're also missing the ) after document in the first line of code.
Demo
$(document).ready(function() {
var plugin = (function() {
//this function is not accessible from the outside
function privateFunction() {
// Code Here
}
//these functions are
return {
alert1: function() {
alert('Hallo');
},
alert2: function() {
alert("hi");
}
};
}());
//but it is not working :/
plugin.alert1();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Not able to load dynamically the CDN of jquery, bootstrap, D3.js, knockout.js using jquery. i am using jquerycdn variable to pass to the loadscript() when checkjquery() is false. But when i am passing still the jquery CDN is not loading. Same issue facing with the remaining files like bootstrap, D3.js, knockout.js etc. All these file CDN's are kept in one js file.
Please check the below code:-
this.jqueryCDN = "https://code.jquery.com/jquery-1.11.3.min.js"
Initialize.prototype.checkJQuery = function () {
if (window.jQuery) {
return true;
} else {
return false;
}
};
if (!this.checkJQuery ()) {
console.log("jquerynot available")
this.loadJQuery ();
if (!this.checkJQuery ()) {
throw "Error loading jquery"
}
} else {
console.log("jquery available")
}
Initialize.prototype.loadJQuery = function () {
// var js_code = atob(this.jqueryStr);
// eval(js_code);
this.loadScript(this.jqueryCDN);
};
Initialize.prototype.loadScript = function (src) {
var my_awesome_script = document.createElement('script');
my_awesome_script.setAttribute('src', src);
document.head.appendChild(my_awesome_script);
}
You need to give jQuery time to load before checking to see that it's loaded. An onload trigger would be better than timeout, but here's your code working.
function Initialize() {
var self = this;
this.jqueryCDN = "https://code.jquery.com/jquery-1.11.3.min.js"
if (!this.checkJQuery()) {
console.log("jquery not available")
this.loadJQuery();
setTimeout(function() {
if (!self.checkJQuery()) {
throw "Error loading jquery"
} else {
alert("jQuery loaded!");
}
}, 2500);
} else {
console.log("jquery available")
}
}
Initialize.prototype.checkJQuery = function() {
if (window.jQuery) {
return true;
} else {
return false;
}
};
Initialize.prototype.loadJQuery = function() {
// var js_code = atob(this.jqueryStr);
// eval(js_code);
this.loadScript(this.jqueryCDN);
};
Initialize.prototype.loadScript = function(src) {
var my_awesome_script = document.createElement('script');
my_awesome_script.setAttribute('src', src);
document.body.appendChild(my_awesome_script);
}
var i = new Initialize();
You might also look at this approach.
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();
}
});
});
}
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