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

Result not match for text area (jQuery)

I have a question which concerns jquery.urlive plugin. This plugin is used to graph content from other website and generate to HTML element, so I use it to
develop my personal project. I have a problem which I don't know how to solve, should I customize the library or are there solutions?
I would like to duplicate text area more than 2 (let's say I have done with duplication), but they are the same functions, which means when there is url in the text area one and then the result will appear for result one and others are the same.
Obviously my problem when there was url on text are one, all the results for other text are also shown.
Here is my code: http://jsfiddle.net/samphors/4KftC/77/
Thanks for helping.

You need to call the urllive only for the changed element
$('.demo').on('input propertychange', function () {
var $this = $(this),
$ct = $this.next();
$this.urlive({
container: $ct,
callbacks: {
onStart: function () {
$ct.html('<span class="loading">Loading...</span>');
},
onSuccess: function (data) {},
noData: function () {
console.log('y')
$ct.html('');
}
}
});
}).trigger('input');
Demo: Fiddle

if(f.match(urlPattern) && d == true){
var o = f.match(urlPattern), link = o[0];
$(".frame").attr("src",link);
d = false;
}
try this
http://jsfiddle.net/4KftC/79/

Hide loading gif after ajax callback

I have a simple question but I couldn't find a clean answer. I need to load heavy images after an ajax call and I want to use an animated gif as a pre-loader. I'm using the follow code:
function loadProducts(url) {
$("#loading").show();
$('#inner').fadeOut(1).load(url + ' .product-list', function() {
$('#inner').fadeIn(1000, function() {
$("#loading").hide();
});
});
}
The #loading is hiding when the HTML is loaded .load(url + ' .product-list'. The problem is that the heavy images are still rendering on the screen and I would like to keep showing the animated .gif until the renders of the images are finished. Is there a way to know when the images on the screen are rendered?.
Thanks in advance.

You can use promises to check when all the images have loaded, and then remove the loading gif.
This creates a promise that is resolved when the image has loaded, all the promises are kept in an array, and when all promises are resolved, i.e. all images are loaded, the callback fires.
function loadProducts(url) {
$("#loading").show();
$('#inner').fadeOut(1).load(url + ' .product-list', function() {
var promises = [];
$('#inner').find('img').each(function(_, image) {
var img = new Image(),
def = new $.Deferred();
img.onload = function() {
def.resolve();
}
promises.push( def.promise() );
img.src = image.src;
if (img.complete) img.onload();
});
$.when.apply(undefined, promises).done(function() {
$('#inner').fadeIn(1000, function() {
$("#loading").hide();
});
});
});
}

You can use ImagesLoaded
Sample usage
imagesLoaded( document.querySelector('#container'), function( instance ) {
console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});

Could add/remove the loader as a class? I have base 64encoded the loader, so there is no pre loader required. This also uses a closure to allow the counter to remember its value.
var imgDiv = document.getElementById("imgDiv");
imgDiv.onclick = (function () {
"use strict";
var count = 0; // init the count to 0
return function () {
count++; //count
if (count === 1) { // do something on first click
$('.img-loader-content').addClass('loader');
$('.imgDiv').load("images/img.jpg", function () {
$('.img-loader-content').removeClass('loader');
});
}
if (count > 1) {
$('.imgDiv').slideToggle(400);
}
};
})
();

You may try using Image object. E.g:
function loadImage(url) {
$("#loading").show();
var img = new Image();
img.src = url;
img.onload = function(e) {
$("#loading").hide();
//ur code to append/show the image
};
}

the most approach to this is using onLoad , so basically after the success call of ajax , invoke another call into success function :
http://www.w3schools.com/jsref/event_onload.asp
onload is most often used within the element to execute a
script once a web page has completely loaded all content (including
images, script files, CSS files, etc.).
or use native solution like this :
<img src="w3javascript.gif" onload="loadImage()">
http://www.w3schools.com/jsref/event_img_onload.asp
Also last answer of this question is very useful in your case :
Is there something similar to `$(window).load();` for executing a function after newly inserted Ajax content has finished loading?

You can do it easily by ajaxComplete callback, here check an example http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxcomplete

Jquery Preload of big image

How to load the page only when such image is loaded? The base does not work, type:
$('#IDdaImagem').on('load',function(){
})
is a background image, and okay with a jquery plugin to open in other resolutions, the backstretch, it uses a div with class backstretch, as I carry this background image with 2mb before the contents of the site?
i test this and work, but not the item that I give show, appearing at the time, it works only in the alert.
<script>
$('.backstretch img').load(function() {
alert('done loading image');
$("#corpo").show();
});
</script>

Your example makes me think you don't want to "preload" an image necessarily, but want to wait until the image has been loaded before running a script. You can use something like the waitForImages jQuery plug-in for this.
https://github.com/alexanderdickson/waitForImages

Try code given below:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
With Jquery plugin :
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();

On Click Change another elements source

Working version of broken code here http://jsfiddle.net/Uey6W/8/
Having trouble figuring out how to change an attribute on another element form a click function
sniping
$('#black').click(function() {
$('#blackbox').slideToggle('slow', function() {});
$('#yellowbox').slideUp();
});
here on the click im hoping to not just hide the other element but also revert the other button
Basically how can i toggle another button to its closed state when another button switches to being open
$("#black").toggle(
function () {
var src = $(this).attr("src").replace("ready.png", "pressed.png");
$(this).attr("src", src);
},
function () {
var src = $(this).attr("src").replace("pressed.png", "ready.png");
$(this).attr("src", src);
}
);
$('#black').click(function() {
$('#blackbox').slideToggle('slow', function() {});
$('#yellowbox').slideUp();
});
$("#yellow").toggle(
function () {
var src = $(this).attr("src").replace("ready.png", "pressed.png");
$(this).attr("src", src);
},
function () {
var src = $(this).attr("src").replace("pressed.png", "ready.png");
$(this).attr("src", src);
}
);
$('#yellow').click(function() {
$('#yellowbox').slideToggle('slow', function() {});
$('#blackbox').slideUp();
});

From what I can see in the api reference, toggle doesn't take two functions as parameters. And you're passing an empty function to slideToggle (just omit the empty function as a parameter if that's the intention). It looks like you're on the right train of thought with just a few errors.
Edit: Was looking at the wrong toggle. Correct documentation here.

Answer was right in my face the whole time inorder to revert the other buttons i just alter the click statement
$('#black').click(function() {
$('#blackbox').slideToggle('slow', function() {});
$('#yellowbox').slideUp();
$('yellow').atr('src', ready.png)
});

You could pretty much achieve the exact same thing by doing :
var btn1 = "ready.png",
btn2 = "pressed.png";
$("#black, #yellow").on('click', function() {
$("#black, #yellow").not(this).prop('src', this.src);
this.src = this.src==btn1 ? btn2 : btn1;
$('#'+this.id+'box').slideToggle('slow').siblings('div').slideUp('slow');
});
FIDDLE