I'm working with jQuery, making a WordPress website, and ran into issues because Wordpress doesn't seem to work with the $(window).load(...) event listener, due to which I had to change the code.
Here's the original code in jQuery:
$(window).load(function(){
...
}).resize(function() {
...
});
Hers's what I'd changed it to:
window.addEventListener('load', function() {
...
}).resize(function() {
...
});
However, I get an error in console TypeError: windowAddEventListener is undefined. How can I solve this?
You have two issues:
addEventListener return undefined so you can't do anything after it
in vanilla JavaScript there are no resize function this is only in jQuery.
You will need this:
window.addEventListener('load', function() {
...
});
window.addEventListener('resize', function() {
...
});
and if you want chaining you will need:
const x = {
load: function(fn) {
window.addEventListener('load', fn);
return this;
},
resize: function(fn) {
window.addEventListener('resize', fn);
return this;
}
};
x.load(function() {
}).resize(function() {
});
Related
My problem is that the jQuery load event is not working with my custom Javascript structure. I have tried many solutions to solve this problem but I failed.
var Init_Template = (function($) {
"use strict";
return {
init: function() {
this.plugins();
this.menus();
},
plugins: function() {
// Codes
},
menus: function() {
$(window).on("load", function(e) {
alert();
});
}
};
})(jQuery);
// Load when ready
jQuery(document).ready(function() {
function System_Init() {
Init_Template.init();
}
if (window.self === window.top) {
System_Init();
} else {
setTimeout(System_Init);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You will want that script with the jquery loading BEFORE you execute your javascript and jquery code so move the script tag above your code. I believe this will solve your issue for you.
I am using colorbox to my popups and...
This works fine.
$(".show_popup").colorbox({inline:true, width:"800px", onOpen: function() {
type = $(this).attr('type);
....
}
But I want use my inner function many times so I want make it a module function.
});
(function ($,a) {
var p = {
showPopup: function (popup_type) {
...
},
bindEvents: function () {
$(".show_popup").colorbox({inline:true, width:"800px", onOpen: p.showPopup($(this).attr('type')) });
}
...
}
a.Popups = p;
})(jQuery);
But this don't work - it is problem with $(this) - and function execute only once after page loading.
(function ($,a) {
var p = {
showPopup: function (popup_type) {
...
},
bindEvents: function () {
$(".show_popup").colorbox({inline:true, width:"800px", onOpen: p.showPopup });
}
...
}
a.Popups = p;
})(jQuery);
And this don't work of course too, but execute many times. So can you help me know what is matter?
The problem with onOpen: p.showPopup($(this).attr('type)) is that it will run the p.showPopup-function at the moment that you bind it to onOpen. What you want is that it runs at the moment the onOpen-event is triggered. Use
onOpen: function() { p.showPopup($(this).attr('type')); }
instead
(edit) assuming that p.showPopup is defined, I can't see it in your code.
I creating jquery Plugin with simple alert option. I did this way see below is my code.But it doesn't work.
Below code is the seperate js file.
(function($) {
$.fn.gettingmessage = function() {
var element = this;
$(element).load(function() {
alertingcontent();
function preventnextpage() {
return false;
}
function alertingcontent() {
alert("nicely done");
});
};
})(jQuery);
I called this function as
this way
$(function(){
$("body").gettingmessage();
});
I am not sure how can i fix this any suggestion would be great.
JSFIDDLE
Thanks
First, you're missing a closing bracket.
Second, the load() function doesn't do what you're searching for, use ready() instead of.
Updated code :
(function($) {
$.fn.gettingmessage = function() {
var element = this;
$(element).ready(function() {
alertingcontent();
function preventnextpage() {
return false;
}
function alertingcontent() {
alert("nicely done");
}
});
};
})(jQuery);
$(function(){
$("body").gettingmessage();
});
Updated jsFiddle
The following jQuery plugin has an API where you can add your own methods.
Here is a simple example.
In the example on that page, how would I call the function your_method?
They don't show this. All I want to do is put a button on the page and then when that button is clicked, trigger off my own custom method.
This worked for me:
if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.myPlugin = function() {
return {
init: function() {
},
myMethod: function() {
alert ("method");
}
};
};
$("#redactor").redactor({
plugins: ['myPlugin']
});
$("#redactor").redactor("myPlugin.myMethod");
or you can add it to a click event on something else
$(".selector").on("click", function(e) {
$("#redactor").redactor("myPlugin.myMethod");
});
you create an init method in which you can create a button on a toolbar and bind your custom plugin method to it:
RedactorPlugins.myPlugin = {
init: function() {
this.addBtn('myMethod', 'MyMethod', function(obj) {
obj.myMethod();
});
},
myMethod: function() {
// do stuff
}
}
hope it helps
I just created my first jQuery plugin , it is very simple it slideToggle two Divs , the code works fine and it do what i want , the problem is that i get an ERROR message at the console saying :
Uncaught TypeError: object is not a function
it refer to this line of code
})(jQuery);
CODE
$(function($) {
$.fn.toggleDiv = function(opt) {
var options = $.extend({}, $.fn.toggleDiv.objectOptions, opt);
return this.each(function() {
if (options.animation == true) {
$(this).slideToggle();
} else {
$(this).toggle();
}
});
};
$.fn.toggleDiv.objectOptions = {
animation: false
};
$("button").click(function() { $("#Div1, #Div2")
.toggleDiv({animation : fa}); return false; });
})(jQuery);
Does any one know what is that error and how can i fix it thanks
You either want to do
(function ($) { ... })(jQuery);
if you want your code to be run immediatly,
or
jQuery(function ($) { .... });
for your code to be run on document-ready.
You are referring to $("button"), and therefore need the document tree to be available. So use the second version. A even nicer solution would be to use the jQuery function "delegate", this would look something like this:
jQuery(function ($) {
$(document).delegate("button", "click", function (ev) { ... });
});