jQuery Mobile Button Enable/Disable & TextArea auto reSize after change - button

How to disable/enable a button? which is not in a form , in a navBar. I'v tried some examples , all fail.
I'm changing my textarea text $("textarea").val(x); The text is changing , the problem it doesn't get auto re-size , I see the ugly scroll bar on the side , If I manually resize it , its OK... is there a method to force refresh or something like that?
Thanks
Update (TextArea):
If i click on the text area and then press any key -> it opens up as should be,
I'm trying to simulate it .. but fail , the binding is works , but the trigger for keypress/keydown doesn't , I tried some codes from googling, this should work , I think , mayb for nomral jQuery 1.6 , but not jQuery mobile.. My test are are on Chrome and iPhone 4
$('#textarea').bind('click', function() {
var e = jQuery.Event("keypress", { keyCode: 64 });
$(this).trigger( e );
});

UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
http://jsfiddle.net/gRLYQ/7/ (Header button example)
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.

Regarding your second question, you can cause a textarea to autogrow by triggering a keyup() event on it.
Considering your original example code, the following works for me:
/*Note: I'm using 'on' instead of 'bind', because that's what I've actually tested
with, but I'm pretty sure this will work with 'bind' as well*/
$('#textarea').on('click', function() {
//First we'll add some text to #textarea
$('#textarea').val('some dummy text to be added to the textarea');
//Then we trigger keyup(), which causes the textarea to grow to fit the text
$('#textarea').keyup();
});
Short and sweet version of the above, this time chained and with no comments:
$('#textarea').on('click', function() {
$(this).val('some dummy text to be added to the textarea').keyup();
});
Adapted from here.

Related

closing an open div when body / html element is clicked in meteor

so i'm working on a meteor project and am trying to get a drop down menu to close when the user clicks outside of it. i've done this before using jquery and normal html but this time we're using velocity.js and meteor.
so on the link that opens the drop down div, i have this:
Template.layout.events({
'click #profile-btn': function () {
if (userTog == false) {
$('#user-menu').velocity("fadeIn", { duration: 150 });
userTog = true;
}
else if (userTog == true) {
$('#user-menu').velocity("fadeOut", { duration: 150 });
userTog = false;
}
},
.....
and then i use a meteor package to deal with events on the body as this isnt supported right now..
Template.body.events({
'click html': function(e, data, tpl) {
userTog = false;
$('#user-menu').velocity("fadeOut", { duration: 150 });
e.stopPropagation();
}});
however the above is just not working.. it basically just makes the menu appear then disappear straight away. is it something to do with velocity.js, meteor or am i just doing it plain wrong ?!?
any advice would be greatly appreciated!
I just had to make a material design select box, so I feel your pain :-). Here's how I solved it:
Normally, you can only focus an input or an anchor. A trick I stumbled upon is that using tabindex="0" in your element attributes allows it to gain focus, even if it's a div. What's this mean? Well, if you can focus() an element, that means you can blur() it. So, when you click the button for the dropdown, add a line at the end of the event handler like $('.dropdown-menu').focus(). Then, to escape that, just create an event handler like 'blur .dropdown-menu': function() {*..hide..*}. That way, you don't have these ugly global event watchers.
The downside is that you get a glowing blue outline (for accessibility reasons). You can get rid of this by having a line like outline: 0; in your css.
PS, the reason why yours wasn't working is because 'click #profile-btn' bubbles up to the body, so it executes both. To fix it, you need to stop that bubblin via e.stopPropagation();.

Chrome css issue using token input jquery plugin

I'm using jquery plugin token input for my dropdowns on this page
http://www.connectweb.com.au/search.aspx
It works fine in firefox in that I can click the arrow and the dropdown opens with the contents and allows me to scroll up and down using the scrollbar. However in IE and Chrome I cannot seem to scroll by moving the scroll bar up and down. Its some css somewhere but I'm struggling to find out what..any css experts out there want to take a quick look? would be appreciated : -)
thanks
​Hello please take a look at the https://github.com/loopj/jquery-tokeninput/issues/130
The issue happens to be with the the way IE handles scroll bars versus chrome or firefox. The solution is to modify the inputtoken.js file as mentioned in the forum.
Here is the basic outline.
Declare a variable to hold the state
Check of the variable in the .blur event of the input_box
Add .mouseover, .mouseout to .dropdown
// 1. Keep track of mouse being over dropdown
var mouseOverDD;
// 2. IF the blur function
var input_box = $("<input type=\"text\" autocomplete=\"off\">")
.blur(function () {
if (!mouseOverDD) {
hide_dropdown();
$(this).val("");
}
})
// 3. Add over/out events
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide()
.mouseover(function(){
mouseOverDD = true;
})
.mouseout(function(){
mouseOverDD = false;
});

display:none hover trick on a touchscreen device

I am using a CSS hover trick to clean up my interface. Controls will only be shown when the cursor is hovering inside the element. I'm running into an issue when using the interface on a touch screen device. If the control button is not shown display:none and I touch where it should be, the event is still triggered for the button.
Try this fiddle both in your browser and on a touchscreen device to see what I mean...
http://jsfiddle.net/6PvCn/2/
On a touchscreen device, touch the red square and the alert should fire, without the button even showing up. I tested this on both the desktop Android Emulator and my real Android 2.3 phone.
The effect I'm going for is for the button to first be shown without firing, even if the user touches where the button "is".
I'd rather use a pure CSS solution before resorting to javascript.
Try pointer-events: none; along with display: none;
I just tested it on my real device, and it indeed executes the button's action.
You could maybe try to make the red box an image and change the image to a button by an onclick with Javascript. I would have provided you with some code if I wasn't short on time.
You can't do it with pure CSS, tapping the button will put the button into hover state and fire the click event. Instead you should fire the button off on active.
Here is the solution I came up with... http://jsfiddle.net/6PvCn/7/
On an Android touchscreen (don't know about IOS), the hover event for the hidden element is not fired if it is not shown. So basically I check to see if the element was hovered before it was clicked.
In a nutshell
$(".hidden").hover(function(e) {
if(e.type == "mouseenter") $(this).addClass("hovering");
else $(this).removeClass("hovering");
}).click(function(e) {
if(!$(this).hasClass("hovering") return false;
});
The fiddle explains the more complicated situation I had with form elements and dynamically added content. It provides a general solution as opposed to this element specific one.
I wrote a JS solution for you:
https://codepen.io/anon/pen/bmYROr
The trick is to prevent the button's click event getting fired for the first time the outer div is getting clicked because on touch devices click event has hover effect.
let isTouchDevice = true;
let isHovered = false;
document.getElementById('outer').addEventListener('click', (e) => {
if (isTouchDevice) {
if (!isHovered) {
e.stopPropagation();
}
isHovered = true;
}
}, true);
document.getElementById('outer').addEventListener('mouseleave', (e) => {
if (isTouchDevice) {
isHovered = false;
}
}, true);
document.getElementById('btn').addEventListener('click', () => {
alert("hi");
});

Custom callback url when clicking main button in twitter bootstrap Modal

I have a bootstrap page that lists items in a table. Each item has its own delete link that launches the modal.
<a href="#modalDel" data-idtodelete="<?php echo $value->id; ?>" class="deletelink">
Delete this item
</a>
...
jQuery("a.deletelink").click(function(event){
var id2del = $(this).data('idtodelete');
jQuery("#myModalLabel").html("Delete item: "+id2del); //works great
jQuery('#modalDel').modal('show');
});
I can pass data to the modal easily, but now I have to make the main button in modal to reflect the dynamic url and call to it (only) when this button is clicked
Any ideas? Thanks
PS: cannot use the hidden event for this, because modal can also be hidden with the cancel button. Also, modal should be closed after/before calling the dyn. delete url of main button
I'll hazard a guess at this. Haven't tested because I'm not really sure about the setup.
var $ = jQuery; // using as a shortcut
$('#modalDel').on('show',
function() {
// Composes delete URL with arguments
var dynUrl = composeUrl(args);
// assuming the modal button is an anchor element
$('#modalButton').attr('href', dynUrl);
// Also closes the modal box after being clicked
$('#modalButton').on('click',
function(e) {
$('#modalDel').modal('hide');
});
});

Ext-JS Html Editor get selected text

I am trying to insert a button into HtmlEditor's ToolBar. Button should get selected text by mouse or keyboard and add '#' character at the start of that selected text for locating it as a url.
As i understand the best solution is creating a plugin for adding buttons into html editor toolbar. I found creation codes but the problem is; how can i get selected text? Ext-js version 2.2
And there is the code that provides to create a plugin for html editor toolbar button:
Ext.ns('Ext.ux.form.HtmlEditor');
Ext.ux.form.HtmlEditor.NewLine = Ext.extend(Ext.util.Observable, {
init:function (cmp) {
this.cmp = cmp;
this.cmp.on('render', this.onRender, this);
},
onRender:function () {
this.cmp.getToolbar().addButton([
{
iconCls:'newline', //your iconCls here
handler:function () {
this.cmp.insertAtCursor('<br> ');
},
scope:this
}
]);
}
});
You can get the selected text like this: window.getSelection()
That gives you a Selection object. If you want to get the text only: window.getSelection().toString()
but if you want to make stuff bold or something, you need to check if the selection is inside the editor. Everything you need for that is inside the selection object.
=> correction: the htmlEditor uses an iframe you can get the iframe window by the getWin function.
Note that this is only for modern browser (not < IE9) judging from the legacy Ext version you use, that might be an issue for you... but there are workarounds for IE.
more info

Resources