When the DOM is loaded, i want to check all my textareas and change their height depending on the text contained.
It should look something like that:
$().ready(function (){
//my check textares code
});
Can anyone give me advice how to do that? Thanks.
Since you use jquery, you might as well use plugin jgrow for that
you should use jquery plugin Autosize.
you can download this:
http://www.jacklmoore.com/autosize
just declare like this:
$(document).ready(function(){
$('textarea').autosize();
});
Related
Is there a way to set a javascript variable as the content of another HTML page?
I tried:
var X = $(http://www.website.com/home).html()
but it didn't return anything.... Even tho it explains the idea... so... can anyone tell me how to do so please? Also the content of a certain id or class in that website, something like:
var X=$(http://www.website.com/home "#id").html()
It would really help me, thanks in advance!
It sounds like you're looking for this:
$.get('otherPage.html').then(function(responseData) {
//responseData is the contents of the other page. Do whatever you want with it.
$('#someElem').append(responseData);
});
Live demo (click).
$.get() is a shorthand method for jQuery's $.ajax(). http://api.jquery.com/jquery.ajax/
Right now, every text box I make looks like this:
<input type="text" class="disableHotkeys">
Elsewhere, I have code that disables hot keys whenever an element of class "disableHotkeys" is focused on, and enables when all are blurred.
This all works fine, but I'd rather input elements were of class "disableHotkeys" by default as to clean up the code, and be less repetitive.
What I want is something like this:
default.css:
//don't use this code
input
{ include .disableHotkeys; }
Is there a way of doing this in the css?
If not, I imagine there is a way to add the class to everything with JQuery after page load, but it seems like bad form to set the class outside of the places developers would usually look (the html/php file, and maybe the css).
P.S. if you have a better title, it would be appreciated
Unfortunately, with CSS only, you're not able to do it. You need to use JS. I am giving you a jQuery example -
$(document).ready(function(){
$('input').addClass('disableHotkeys');
});
or
$(document).ready(function(){
$('input').each(function(){
$(this).addClass('disableHotkeys');
});
});
And also if you need to add class to all input then why dont put disableHotkeys class code to input?
If you want to add a class to all the text inputs on DOM ready:
$(document).ready(function(){
$( ":text" ).addClass("yourclassname");
});
Here is a demo fiddle.
I need to locate an element and grab an entire block of HTML.
I tried this:
$(this).find('h1').html();
But only was able to capture the text withing h1 tag... What am I missing?
Here's a simple plugin. Use it as follows:
$(this).find('h1').outerHtml();
If you don't want to depend on the plugin, here's a solution with less code, but not as efficient:
var html = $('<div />').html( $(this).find('h1').clone() ).html();
Here's the fiddle: http://jsfiddle.net/nxfTf/
You could try this.
$(this).find('h1')[0].outerHTML
I did this fiddle, if you need something a little more visual: http://jsfiddle.net/aPGGS/
Using Prototype, the Form.Element.disable is said to be disabled the form as a whole. Is there any way to disable only one single input element at a time?
And when I try this:
$$('#signup .button')[0].disbled = false; ## didn't work
Updated
Sorry for all. Actually it works. But I have defined a disabled style
in a stylesheet and the style doesn't got applied. Is there any workaround?
You want the disable method.
http://prototypejs.org/doc/latest/dom/Form/Element/disable/index.html
For example:
$(id).disable();
Try this:
$$('#signup .button').disable()
Or:
$(id_of_element).disable()
Or:
Form.Element.disable(id_of_element)
This should work:
$$('#signup .button')[0].disable();
Using a ajax request I want to change content of my div.
<div id="d1">202</div>
So I want to change the content to a different number.
$('d1').InnerText???
Also, say I wanted to increment the number, how could I do that? Do I have to convert to int?
$("#di").html('My New Text');
Check out the jQuery documentation.
If you wanted to increment the number, you would do
var theint = parseInt($("#di").html(),10)
theint++;
$("#di").html(theint);
P.S. Not sure if it was a typo or not, but you need to include the # in your selector to let jQuery know you are looking for an element with an ID of di. Maybe if you come from prototype you do not expect this, just letting you know.
This would changed the inner text of your HTML element.
$('#d1').text(parseInt(requestResponse)++);
Unless you're embedding html like <b>blah</b> I'd suggest using $("#di").text() as it'll automatically escape things like <, > and &, whereas .html() will not.
Use the text function:
$("#d1").text($("#d1").text() + 1);
$('#d1').html("Html here");
jQuery('#d1').html("Hello World");
if your value is a pure text (like 'test') you could use the text() method as well. like this:
$('#d1').text('test'); Or $('#d1').html('test');
anyway, about the problem you are sharing, I think you might be calling the JavaScript code before the HTML code for the DIV is being sent to the browser. make sure you are calling the jQuery line in a <script> tag after the <div>, or in a statement like this:
$(document).ready(
function() {
$('#d1').text('test');
}
);
this way the script executes after the HTML of the div is parsed by the browser.
$("#div1").innerHTML="your text goes here..";