We Keep Coding

Javascript cannot call THIS in code

I'm am using module js syntax and I have some code like this:
var myModule = {
settings: {
myage: 25
},
init: function() {
//init code here
},
someFunction1: function(param1) {
//function code here
},
someFunction2: function() {
myModule.someFunction1(myparam);
}
}
The above will work fine but if I tried:
someFunction2: function() {
this.someFunction1(myparam);
}
It will not find the function.
Can't I use this.someFunction1... ?

this is who called the function.
myModule.someFunction2() will have this=myModule
someFunction2 = myModule.someFunction2; someFunction2() will have this=window
(you didn't show how you're calling it though)

CollapseSidebar is not a function

I am writing a script for a project, it has a function to collapse or open the sidebar on click on hamdurger icon but when I click it gives me error
TypeError: this.CollapseSidebar is not a function
The following is my code:
(function($) {
'use strict';
var Prtm = {
Constants: {
LEFTMARGIN:'315px',
COLLAPSELEFTMARGIN: '63px',
},
PrtmEle:{
BODY: $('body'),
SIDEBAR: $('.prtm-sidebar'),
SIDENAV: $('.sidebar-nav'),
MAIN: $('.prtm-main'),
HEADER: $('.prtm-header'),
CONTENTWRAP: $('.prtm-content-wrapper'),
CONTENT: $('.prtm-content'),
PRTMBLOCK: $('.prtm-block'),
FOOTER: $('.prtm-footer'),
HAMBURGER: $('.prtm-bars'),
},
Init:function(){
this.BindEvents();
},
BindEvents:function(){
this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,function(){
this.CollapseSidebar();
});
},
CollapseSidebar: function(){
this.PrtmEle.HAMBURGER.toggleClass("prtm-sidebar-closed is-active");
this.PrtmEle.BODY.toggleClass("prtm-sidebar-closed is-active");
this.PrtmEle.SIDEBAR.toggleClass('collapse');
},
};
Prtm.Init();
})(jQuery);
When I change this.CollapseSidebar to Prtm.CollapseSidebar it works properly. What I am doing wrong here and how it can be resolved?

Why it do not work? Because a function() binds its own this.
One thing you can do is to use Arrow function which do not bind its own this - like this:
BindEvents:function(){
this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,() => {
this.CollapseSidebar();
});
}
Inside you click function this will refer to the window - so either you can create a temporary variable like the below or use the arrow function:
BindEvents:function() {
let $this = this;
this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,function() {
$this.CollapseSidebar();
});
}

By default how to set "zoom in" to image instead of "fit to screen" in iviewer?

DEMO
I have following code in iviewer. here i want to show the image to be filled in whole grey box.
HTML:
<div id="viewer" class="viewer"></div>
JS:
var $ = jQuery;
$(document).ready(function () {
var iv1 = $("#viewer").iviewer({
src: "http://test.dpetroff.ru/jquery.iviewer/test/test_image.jpg",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function (ev, coords) {},
onStartDrag: function (ev, coords) {
return false;
}, //this image will not be dragged
onDrag: function (ev, coords) {}
});
$("#in").click(function () {
iv1.iviewer('zoom_by', 1);
});
$("#out").click(function () {
iv1.iviewer('zoom_by', -1);
});
$("#fit").click(function () {
iv1.iviewer('fit');
});
$("#orig").click(function () {
iv1.iviewer('set_zoom', 100);
});
$("#update").click(function () {
iv1.iviewer('update_container_info');
});
});
Does anyone have idea for how to do that?

Add this callback to your iviewer initialization:
onFinishLoad: function () {
iv1.iviewer('zoom_by', 1);
}
Fiddle updated here.

Cutting down JQuery repetitive code

In a Jquery code I've the following situation:
$("#input_field").on('input', function () {
setTimeout(function (e) {
$.post("endpoint.php", $('#main').serialize(), function (response) {
parseRes(response);
});
}, 1);
});
$("#input_field").on("paste", function () {
setTimeout(function (e) {
$.post("endpoint.php", $('#main').serialize(), function (response) {
parseRes(response);
});
}, 1);
});
The only different thing is the event ("input" or "paste").
Is there any way to avoid this kind of repetitions (eg. adding more events to ONE code block)?

Try,
$("#input_field").on('input paste',function() {
setTimeout(function(e) {
$.post("endpoint.php", $('#main').serialize(), function (response) {
parseRes(response);
});
}, 1);
});
Please read here to know more about .on()

From the documentation:
.on( events [, selector ] [, data ], handler(eventObject) )
events: One or more space-separated event types and
optional namespaces, such as "click" or "keydown.myPlugin".
This means your code simply boils down to:
$("#input_field").on('input paste',function() {
// ...
});

Javascript animate image, slide up bug

I have an sliding image and I have a problem it it. If you do fast mouseover over the images multiple times and then you get the mouse outside pics it still animates. Somehow it records and plays the animation even after you are not with mouse over it.
Here is my code and link to check it:
<script type="text/javascript">
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
},
function () {
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal" );
});
});
</script>

add .stop()
function () {
$(this).find('#hoverpic').stop().animate({ "top": "-=330px" }, "normal" );
},
function () {
$(this).find('#hoverpic').stop().animate({ "top": "+=330px" }, "normal" );
});
if .stop() doesn't work well enough
you can try with .stop(true) or .stop(true, true)
http://api.jquery.com/stop

you should put a check for
if( $(elem).is(':animated') ) {...}
in your code.
<script type="text/javascript">
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
if(!$(this).is(':animated'))
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
},
function () {
if($(this).is(':animated'))
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal" );
});
});
</script>

I usually add a class while it's animating.
Something like this:
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
if(!$(this).hasClass('animate')) {
$(this).addClass('animate');
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
}
},
function () {
if($(this).hasClass('animate')) {
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal", function() { $(this).removeClass('animate'); } );
}
});
});

You need to make a simple change (see commented code) if you want to avoid the jumping image when hovering out before the animation finishes:
$('.col-md-4,.col-xs-4').hover(
function () {
$(this).find('#hoverpic').stop().animate(
{ "top": "0px" } //WAS -=330px
, "normal" );
},
function () {
$(this).find('#hoverpic').stop().animate({
"top": "330px" //WAS +=330px
}, "normal" );
});