I'm using Autosize to automatically resize textboxes (height). The plugin is JS but can be used as a jQuery plugin (explained in the site). The author explains how to trigger a manual "update" event (JS) when you change the text using JavaScript. I need to do the same, but using jQuery "mode", because I'm creating textboxes dynamically using Ajax. Tried trigger() with no success.
autosize(ta); /*Pure JS*/
ta.value = "Something really long";
var evt = document.createEvent('Event');
evt.initEvent('autosize.update', true, false);
ta.dispatchEvent(evt);
Here is a piece of my source code: http://pastebin.com/049UfkGv - after $(this).autosize(); I need to trigger "autosize.update" event to redim the textbox to its new contents.
jQuery Code:
$(document).ready(function(){
window.jQuery.fn.autosize=function(){ return autosize(this); };
});
$('.edit4').each(function(){
$(this).keypress(function(event) { if (event.keyCode==13) { event.preventDefault(); };
$(this).autosize();
});
Thank you!
you can use it as follows:
autosize.update($('textarea'));
In my case the Autosize jQuery plugin could not calculate the right height, because the textarea was hidden on pageload.
The following tigger helped me out:
function showMyTextarea(){
// do your stuff here
// trigger autosize
$('textarea').trigger('autosize.resize');
}
In my case I had to update the size of textarea not only based on changed content (this is handled by "autosize" plugin itself nicely) but based on CSS properties change as well, e.g. when user is using a slider to change the font-size of the textarea.
This worked for me:
// ... slider ui init bla bla
slide: function(){
var $textarea = $('.your.selector.for.textarea.or.cached.jQuery.object.with.target.textarea');
// .. changing the actual css property
// triggering the .autosize
$textarea.trigger('autosize.resizeIncludeStyle');
// ... etc etc
}
// ...
This is not properly described in the Autosize Documentation but the event does exist and is handled in the jQuery version of the plugin.
Autosize creates a custom event, that can be triggered manually like this:
$("thextarea").trigger("autosize");
Related
I really like to use KeiichiroHirai's Turnbox.JS script (http://www.noht.co.jp/turnbox),
However, This script seems only to work with a user clicking/hovering on any button this script is appending itself to.
I wish use these animations when DOM is ready,
I tried:
$(function() {
$.turnBoxLink({
box: ".example"
});
});
But since I'm posting here, It's obviously not working.
Thank you in advance!
If you wish to do that when DOM is ready you should wrap your init code into
$(document).ready(function() {
// go when DOM is ready
});
or
$(window).load(function() {
// go when page and images are loaded
});
And also, Turnbox can be initialized like this :
HTML markup
<div class='login_form'>
<h3>My form element<h3>
</div>
With the following code you'll get the extra simple sample, without any options. but for test purposes it could be good to start here :
$(".login_form").turnBox();
If now, you want to launch the animation at specific event (for example to the ready or load event), you'll be able to do so by using :
$(".login_form").turnBoxLink({
box: ,
events: "ready", // you can also try 'load'
dist: "next"
});
After initializing, click the generated .turnBoxButton child element:
$.turnBoxLink({
box: ".example"
});
setInterval(function() {
$(".example .turnBoxButton").click();
}, 1000);
This will spin the box every second.
If You want to programmatically trigger a click event on an element with jQuery You can use the .click() function.
$(document).ready(function() {
$('.sample').turnBox();
...
$('.sample').click();
});
I'm trying to do the validation of "CKEditor" using "BootstrapValidator".
Something like in the example here: LINK
Unfortunately, no way I can make to make it work. I tried to update invisible textarea content but it also did not help.
My attempts:
.find('[name="bio"]')
.ckeditor()
.editor
// To use the 'change' event, use CKEditor 4.2 or later
.on('change', function () {
// Revalidate the bio field
$('#profileForm').bootstrapValidator('revalidateField', 'bio');
});
JsFiddle
Up date your CKEditor first
add it
<script src="//cdn.ckeditor.com/4.4.3/basic/ckeditor.js"></script>
<script src="//cdn.ckeditor.com/4.4.3/basic/adapters/jquery.js"></script>
then check it. it may usefull
I want to initialize jquery ui button plugin using live or on. Means something like :
$('button').live("which event", function() { $(this).button(); });
But i don't know the event which i can use in this place. I tried load and ready but not works. Then i tried custom event also :
$('button').live("event", function() { $(this).button(); });
$('button').trigger('event');
This also not works.Help me out please !
If that button is present on dom ready then :
$(document).ready(function(){
$('button').button();
});
If it's created afterwards :
$('<button />').appendTo('body').button();
Tipsy jquery plugin is installed in my app
This is in my load function
$(function() {
tipsy();
});
Below code is in a js file
var htm = '<div id="new_div" onmouseover="tipsy(this);">' ;
function tipsy(tip)
{
if ( '' != sumtitle )
{
tip.title = tip.innerHTML;
}
else if(tip)
{
tip.title = tip.innerHTML;
}
$(tip).tipsy({gravity: 'w'});
}
How is that the normal title shows up first and then the jquery tip later.
This is a known bug and will be fixed in the next version. For now please use the "Download Source" link on this commit:
http://github.com/jaz303/tipsy/commit/88923af6ee0e18ac252dfc3034661674b7670a97
The tipsy plugin seems to remove the title attribute and assign its value to a custom attribute called original-title to avoid the default browser tooltip from showing. Maybe in your case, this happens too late: The mouse hovers over the element, this initiates the native browser tooltip. Then, tipsy() is executed on the element and switches the attribute name, but that is too late because the timeout for the native tooltip has already started.
You should probably prevent the default action of the event, for example:
$('#new_div').bind('mousover', function (e) {
tipsy(this);
e.preventDefault();
});
EDIT: As this does not seem to have the desired effect, please call tipsy($('#new_div')) right after the div is created and remove the mouseover handler. What you have been doing might be a bit problematic anyway: The tipsy plugin probably uses the mouseover event, and you call .tipsy( { gravity: 'w' } ) in an onmouseover event handler. Repeatedly, if you mouseout and then mousover again. That's a lot of unnecessary event assignments.
You're doing it wrong.
Try this:
$('#new_div').tipsy();
jQuery is designed for using the selectors in JS code. No onsomething events in HTML, please.
Another way is, instead of using the 'title' attribute, use 'original-title' attribute.
I have a form with an id of "wizard" - I only have select elements in this form. This form is in a lightbox using the JQuery plugin fancybox:
I want to know when any of these have been changed using JQuery. How can I do this? I currently have:
$('form#wizard select[name=servers], form#wizard select[name=cores]').change(function() {
var channels = parseInt($('form#wizard select[name=servers]').val(), 10) * parseInt($('form#wizard select[name=cores]').val(), 10);
$('#yellow').val(channels);
});
EDIT - I have the above wrapped in $(document).ready(function() {...}
However, it does not work, it does not even get run. I have put alerts in there and they never show up. The above only works when the above is a div that I have removed the display:none from, strange! So I am looking for a different implementation to get around this as I need that lightbox as it is.
I really need help on this.
Thanks all
The jQuery change function only binds those elements that are present when the domready event fires. If the lightbox plugin you are using is dynamically creating elements, you should be using jQuery's live function to "bind your handler to all current - and future matched elements".
Change this:
$('your selector').change(function() { /* code ... */ });
with this:
$('your selector').live('change', function() { /* code ... */ });