We Keep Coding

What does "this" actually refer to in this context?

I have this simple script (see below) and I expected the div to "bounce". However, it doesn't when I use this.effect("bounce");. It does work when I use the variable that contains the element: $arrow_go_up.effect("shake");
When I console.log the this, it shows me the element, so I am confused.
I tried to use an arrow-function, then this points to the window-element though.
$(document).ready(function() {
var $arrow_go_up = $("#arrow_go_up");
window.onscroll = function() {
if (window.scrollY > 100) {
$arrow_go_up.removeClass("d-none");
} else {
$arrow_go_up.addClass("d-none");
}
}
$arrow_go_up.on("mouseover", function() {
this.effect("bounce", {
times: 1
});
});
});

Fire multiple functions on resize events

I am trying to fire multiple functions when the window resizes. But only one function works at the time. Please correct this code.
function resize() {
var $containerWidth = $(window).width();
if ($containerWidth > 1140) {
//code...
}
else {
//code...
}
}
resize();
function resizepos() {
var topPosition = $('.redcus').offset().top;
$('.blackcus').css('top',(topPosition+40)+'px');
}
resizepos();
$(window).resize(function(){
resize();
resizepos();
});

Why don't you try the code like this :
function resize() {
var $containerWidth = $(window).width();
if ($containerWidth > 1140) {
//code...
}
else {
//code...
}
resizepos();
}
And try to change your function name when you calling it in jquery, ex "Allresize" and in the contents of Allresize function there is "resizepos" function. Don't use "resize" double, please check it again.
Sorry for the bad format, i can't handle it from my android.

I don't really use jQuery but edit this if I'm wrong:
$(window).on('resize', resize);
$(window).on('resize', resizepos);

JS set style for size function

My JS function "set style for size" will not call the bodysmall CSS style sheet no mater how small I make the screen width (screen.width <=480).
However the function will call the bodysmall CSS style sheet if I reverse the function.
(screen.width >=480)
Which proves to me the JS function is working. I suspect there is something wrong with my event handler.
I am not familiar with JavaScript yet so any help would be greatly appreciated.
this is my code below.
<script type="text/javascript">
function setStyleForSize() {
if (screen.width <= 481) {
document.body.className = "bodySmall";
}
else {
document.body.className = "bodyNormal";
}
}
function addEventHandler(oNode, evt, oFunc) {
if (typeof(window.event) != "undefined")
oNode.attachEvent("on"+evt, oFunc);
else
oNode.addEventListener(evt, oFunc, true);
}
addEventHandler(window, "load", function() { setStyleForSize(); } );
addEventHandler(window, "resize", function() { setStyleForSize(); } );
</script>

Try this one instead of yours:
function addEventHandler(oNode, evt, oFunc) {
if ( document.addEventListener ) {
oNode.addEventListener(evt, oFunc, false);
return oFunc;
} else if ( document.attachEvent ) {
var bound = function() {
return fn.apply(oNode, arguments);
};
oNode.attachEvent("on" + evt, bound);
return bound;
}
}
NOTE: You can't specify which event handler has to be used with typeof(window.event), so your if statement is incorrect
See the DEMO

screen.width is never changes, use window.innerWidth instead:
function setStyleForSize() {
if (window.innerWidth <= 481) {
document.body.className = "bodySmall";
}
else {
document.body.className = "bodyNormal";
}
}

Check if Widget is Available Before Running Jquery Function

I am using the Jquery plugin isotope. Depending on the screen resolution I need to destroy the isotope widget to prevent it from running its function. I am using the following code:
$(window).smartresize(function(){
if($(window).width() < 700) {
container.isotope('destroy');
}else {
container.isotope({$options});
}
});
This works fine on the first resize, the isotope widget is destroyed. However, if I resize again (below 700px) the following exception is thrown:
cannot call methods on isotope prior to initialization; attempted to call method 'destroy'
How can I check to see if container.isotope exists before running container.isotope('destroy');?
Complete Working Code
$(window).load(function(){
var container = $('{$this->selector}')
if($(window).width() > 701){
container.isotope({$options});
}else{
container.isotope = false;
}
$(window).smartresize(function(){
if($(window).width() < 700) {
container.find('.item').removeAttr('style');
if(container.isotope) {
container.isotope('destroy')
container.isotope = false
}
} else{
container = $('{$this->selector}')
container.isotope({$options})
}
});
});

$(window).smartresize(function(){
if($(window).width() < 700) {
if(container.isotope) {
container.isotope('destroy')
container.isotope = false
}
} else if(container.isotope) {
container.isotope({$options})
}
})

How about:
if (container.isotrope)
//It exists. Do whatever
else
//Does not exist. Do whatever else
end

Converting javascript functions to jQuery

I have some javascript which I want to convert to jQuery...
I thought it would be easy, but it would appear I was wrong!
The code should resize a textarea depending on the amount of text entered into it.
Here's my code:
function haut() {
if ($(this).scrollTop() > 0) aug();
}
function aug() {
var h = parseInt($(this).height());
$(this).height(h + 10);
haut();
}
function top() {
$(this).scrollTop(100000);
haut();
}
$(document).ready( function() {
$("#txt_test").keyup(function() {
haut();
});
$("#txt_test").focus(function() {
top();
});
});
And here's the original code:
function haut(idt) {
if (document.getElementById(idt).scrollTop > 0) aug(idt);
}
function aug(idt) {
var h = parseInt(document.getElementById(idt).style.height);
document.getElementById(idt).style.height = h + 10 +"px";
haut(idt);
}
function top(idt) {
document.getElementById(idt).scrollTop = 100000;
haut(idt);
}
$(document).ready( function() {
$("#txt_test").keyup(function() {
haut(this.id);
});
$("#txt_test").focus(function() {
top(this.id);
});
});
Here's a jsfiddle if it helps... http://jsfiddle.net/HhRUH/

Please describe your problems specifically when you're asking a question.
So far I see you have the wrong code for binding handlers. It should be:
$(document).ready( function() {
$("#txt_test").keyup(haut);
$("#txt_test").focus(top);
});

The reason you can use $(this) in keyup(function() { ... }); is because of how it was called by the jQuery implementation. See javascript's .call and .apply for more information about setting context (this) manually.
In your code, you're not using haut.call(), but haut(), which will not set the this context. Therefore this means something different in haut when it's invoked like $('*').keyup(haut) than when it is invoked like $('*').keyup(function() { haut(); });. The same goes for your calling aug() from haut.

just send parameter to aug
function haut(idt) {
if ($(this).scrollTop() > 0) aug(idt);
}
http://jsfiddle.net/HhRUH/1/

You're using this wrong. Pass the element instead:
function haut(element) {
if (element.scrollTop() > 0) aug(element);
}
function aug(element) {
var h = parseInt(element.height());
element.height(h + 10);
haut(element);
}
function top(element) {
element.scrollTop(100000);
haut(element);
}
$(document).ready(function() {
$("#txt_test").keyup(function() {
haut($(this));
});
$("#txt_test").focus(function() {
top($(this));
});
});

You are losing scope. You can use:
1) dmitry's answer(and I think the best one)
$("#txt_test").keyup(haut);
$("#txt_test").focus(top);
2) or if you want to do some more things in the callback, you can do it
with using call():
$("#txt_test").keyup(function()
{
haut.call(this);
alert('...');
});
$("#txt_test").focus(function()
{
top.call(this);
});