Develop Reference

Resize one textarea with another?

I have a website with a few pages, each containing two textareas. All I'm trying to do is get it so that when the user resizes one of the textboxes, the other one sizes with it.
Here's what I've tried so far:
Attempt #1
$(document).ready(function(){
var taheight;
$('textarea').resize(function(){
taheight = $(this).height();
$('textarea').not(this).css('height',taheight);
});
});
I also tried .on('resize', function()... and some other variations before realising it couldn't be done that way on account of the fact the resize functionality on textareas is a browser control, rather than part of the DOM.
Then I found this jsFiddle: jsfiddle.net/gbouthenot/D2bZd/
I tried modifying it and came up with this:
$(document).ready(function(){
var textareaResize = function(source, dest) {
var resizeInt = null;
var thisTextArea;
var resizeEvent = function() {
dest.outerHeight(source.outerHeight());
};
source.on("mousedown", function(e) {
resizeInt = setInterval(resizeEvent, 1000/30);
thisTextArea = $(this).attr('id');
});
$(window).on("mouseup", function(e) {
if (resizeInt !== null) {
clearInterval(resizeInt);
}
resizeEvent();
});
};
textareaResize($("#" + thisTextArea), $("textarea"));
});
But that wouldn't get the id of the target textarea. I also tried thisTextArea = e.target.id, but that wouldn't work either.
Help! Where are am I going wrong?

You can do that by using jQuery UI resizable() and call the resize event from it.
$("textarea").resizable({
resize: function() {
//To get the id of the textarea being resized
var id = $(this).find('textarea').attr('id');
//You could also just put the resize function code here
}
});
jQuery UI Resizable

jQuery functions not working with Hammer.js

I am trying to add press to jQuery selector. I have many elements on same document, So I can not use IDs for each. I tried by $(selector)[i] as like explained here.
var selectProduct = $('.mh60 a');
for (var i = 0; i < selectProduct.length; i++) {
Hammer(selectProduct[i]).on("press", function() {
$(selectProduct[i]).addClass('active');
});
}
It's not producing any error and not working. I didn't get what I am missing here.
And when I try to log selectProduct[i] by console.log(selectProduct[i]); it gives undefined result.
UPDATE 1
When I remove for loop and just use selectProduct[0] , selectProduct[1] , ... it's working but with selectProduct[i] , it's not working, So I think problem is on for loop. But I didn't get it.
UPDATE 2
I also tried with jQuery plugin, same problem
UPDATE 3
Again I tried with each(), same problem. It print the console message but addClass() is not working. I guess the problem is with this function which is not returning the current element.
$('.mh60 a').each(function(){
var mc = new Hammer(this);
mc.on("press", function() {
console.log('Double tap!');
$(this).addClass('active');
});
});

Why do you use a for?
Try changing your code like this
var selectProduct = $('.mh60 a');
selectProduct.Hammer().on("press", function() {
$(this).addClass('active');
});

Finally I solved the problem by using each function
$('.mh60 a').each(function(){
var mc = new Hammer(this);
var currentEle = $(this);
mc.on("press", function() {
currentEle.addClass('active');
});
});

How to properly use appendChild

$(document).ready(function() {
$("a:last").on("click", function(event) {
event.preventDefault();
var url = $("a:last").attr("href");
var page = url.slice(-2).trim();
var newDiv = document.createElement("div");
$(newDiv).addClass("content");
$(newDiv).addClass(page);
$(newDiv).load(url);
document.getElementById("main").appendChild($(newDiv));
});
});
I want to create a new div and load some content into it, then append it to the "main" div, but I get a TypeError:
Argument 1 of Node.appendChild does not implement interface Node.
I already have a div with id="main", why can't I append my new div to it?

Basically appendChild() expects a node object as its parameter, but here you are passing a jquery object. You can fix it by passing a node object,
document.getElementById("main").appendChild(newDiv);
And since you are using jquery, you can use its own append() function,
$(document).ready(function() {
$("a:last").on("click", function(event) {
event.preventDefault();
var url = $("a:last").attr("href");
var page = url.slice(-2).trim();
var newDiv = $("<div>");
newDiv.addClass("content");
newDiv.addClass(page);
newDiv.load(url);
$("#main").append(newDiv);
});
});

The issue is because you're mixing up jQuery and plain old JS. The error itself is because you're proving a jQuery object to appendChild() when it's expecting a DOMElement. As you're using jQuery anyway you may as well use that to create your elements. Try this:
$("a:last").on("click", function(e) {
e.preventDefault();
var url = $("a:last").attr("href");
var page = url.slice(-2).trim();
$('<div />').addClass('content ' + page).appendTo('#main').load(url);
});

$(newDiv) is a jquery object, not the node. You need to pass the node in. This will work
$(document).ready(function() {
$("a:last").on("click", function(event) {
event.preventDefault();
var url = $("a:last").attr("href");
var page = url.slice(-2).trim();
var newDiv = document.createElement("div");
$(newDiv).addClass("content");
$(newDiv).addClass(page);
$(newDiv).load(url);
document.getElementById("main").appendChild(newDiv);
});
});

jQuery updating elements added on the fly?

My code is not working, i think because elements are added on the fly:
var tooltip = $('<div/>').insertAfter('.trigger').addClass('tooltip');
var tname = $('<span/>').addClass('tname').text('(...)');
tooltip.html(tname.html()):
// Ajax call
success: function() {
tname.html('success'); // not working
$('.tooltip').find('.tname').html('success'); // not working
$('.tname').html('success'); // not working
}

This won't work because you are not inserting the tname element into the DOM. See this fix below:
var tooltip = $('<div/>').insertAfter('.trigger').addClass('tooltip');
var tname = $('<span/>').addClass('tname').text('(...)');
tooltip.html("");
tooltip.append(tname);
// Ajax call
success: function() {
tname.html('success'); // should work
$('.tooltip').find('.tname').html('success'); // should work
$('.tname').html('success'); // should work
}

You're not inserting the span into the DOM.
// append to some element
var tname = $('<span/>').addClass('tname').text('(...)').appendTo(tooltip);
Only then you can use selectors to find the element and do something with it.

b.createDocumentFragment is not a function (jQuery)

I'm playing around with a function and getting
b.createDocumentFragment is not a function (jQuery)
My function is
function tweetCount(url) {
$.getJSON("http://urls.api.twitter.com/1/urls/count.json?url="+url+"&callback=?", function(data) {
count = data.count
$(this).append(count);
})
}
I've tried lots of different way but can't seem to find out why it doesn't like "append". "count" is a number and something like alert(count) works, but not append!
Any help?!
Alex

I don't think that this is referring to what you think it is. Change $(this) to an explicit reference to the DOM element you want.
Alternatively, you can define this by calling:
tweetCount.call($("#element"), url)
Edit
Try this:
$("span.tweetcount").each(function(){
url = $(this).attr('title');
tweetCount.call(this, url);
});
Or, to save space:
$("span.tweetcount").each(function(){
tweetCount.call(this, $(this).attr('title'));
});
Edit 2:
Try replacing tweetCount with this:
function tweetCount(url) {
var that = this;
$.getJSON("http://urls.api.twitter.com/1/urls/count.json?url="+url+"&callback=?", function(data) {
count = data.count;
$(that).append(count);
})