I'm using jQuery Mobile 1.1 and I have a fixed toolbar but I want to disable hiding it when a user clicks somewhere in the page. It would even be better if I can set that up for just specific page elements (like clicking on an input box).
I tried many methods that I found on the web (e.g. $.fixedToolbars.setTouchToggleEnabled(false);) but none of them work, probably because of the 1.1 version.
You can check my example here: http://jsfiddle.net/Leqpw/
The using is the JQM v 1.0.x method for disabling the fixed toolbar. There are multiple ways to disable this functionality.
The simplest way is to simply add data-tap-toggle="false" to your toolbar. But if you don't feel like copy and pasting a bunch of times in your project try these other methods.
$('[data-position=fixed]').fixedtoolbar({ tapToggle:false});
You can also configure it so that certain elements will ignore this behavior.
$('[data-position=fixed]').fixedtoolbar({ tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" })
Update added more info for a more complete answer.
All you need to do is add the following attribute to your header
data-tap-toggle="false"
and the tap toggling will go away.
Related
I used AspTokenInput Which is used as AutoComplete TextBox to create Tags .
I use this Link To know How to Use it.
It's Works Fine For Me and give Result As I want.
Now I want to Make This Control Enabled or Disabled On a Button Click according To Condition.
I Use this on Button Click
AspTokenInput.Enabled = "False"
But it's not Working...
Your problem is that the jQuery Tokeninput field cannot be disabled serverside.
See (http://loopj.com/jquery-tokeninput/) for documentation on this library if you want to try and finagle the js on and off. At a glance, I don't see an enable/disable flag or method. You may need to dig into the ASPTokenInput library to see how it pulls its data source, and then enable/disable the plugin with:
$("#my-text-input").tokenInput("clear"); //disable
$("#my-text-input").tokenInput("/url/to/ASPTokenInput/Datasource/");//reenable
The problem with this approach is that it basically goes around the ASPTokenInput layer, which kind of defeats the point.
My secondary approach was to try a hack, but hiding the dropdown isn't the greatest solution (or even easy in this case), nor is having the check box swap the autocomplete input for another. Swapping text boxes is probably the simplest solution.
I'm sure I can't be the first person to have this problem, but I haven't had any luck finding the solution.
I'm using Shadowbox in its simplest form; just doing an image popup with a link like
Click here to view the image.
This works fine, but has one very odd side effect: When I click the link, all of the select inputs (i.e. drop-down boxes) of the form on my page disappear. A little snooping with Firebug reveals that the CSS is being modified to give the <select> tags the property visibility: hidden. When the image is dismissed, the inputs reappear.
Not surprisingly, this happens consistently across browsers.
Since the inputs all reappear, I could probably just leave things as they are. However, if (for example) the image can't be loaded, and the script can't display it, the inputs stay invisible. Also, it looks strange and it's driving me batty. :D
Other factors that may or may not be relevant:
I have done very little with Shadowbox in the past and could very well be missing something embarrassingly obvious.
My page and its form are generated by CakePHP.
The page uses jQuery, and Shadowbox is using the jQuery adapter.
The vanishing inputs do not have class attributes. They do have id attributes that are generated by CakePHP, but these names are very specific to my application and very unlikely to cause any CSS collisions.
As far as I can tell, all of the select inputs vanish, and no other element, input or otherwise, on the page is affected at all. (Even the labels associated with the inputs are unaffected.)
Versions: Shadowbox 3.0.3, jQuery 1.4.2, CakePHP 1.3
This is a semi-bug in shadowbox, most likely. The select tags are being hidden because in some versions of IE, they are rendered using windows native controls, and thus always appear "above" any other element with a z-index. This obviously is a problem for ShadowBox, so the solution is to hide them while showing the box. Shadowbox should clearly do this only for troublesome browsers, but I think they're taking a more generic approach of always hiding them.
I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png
I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.
For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.
I'm doing my own Ajax thing with dropdowns. I've positioned an input over a select tag. When stuff is typed into input it collects from the database and populates the select menu. Problem is its not noticeable. Is there a way to make the select menu open as if a user has clicked on it?
Nope, you're going to have to use something like a DIV with overflow: auto to emulate the behavior of an opened select.
The HTML5 <datalist> element would help out here, but since there are only a few browsers that support it at the moment, you will have to rely on a JS implementation.
The following was the least buggy implementation I could find from a simple Google search
http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml. It supports Ajax as well as up/down arrow keys.
StackOverflow also uses it's own implementation of auto-complete when you start typing tags, maybe you can get some ideas from looking at the source code?
I am currently working on a Javascript program for my company (Leader Technologies) that is used to register products for Logitech. The URL for that is :
http://wwwtest.onlineregister.com/logitechreg/
My program looks totally fine on everything single web browser (including IE 6) that I have tried except Safari 4. On Safari 4, after a location, language and product category have been selected, when the actual product menu is clicked (id=WHPR), the div responsible for displaying the product is shown, but the drop-down selections are still visible. On all other browsers, the drop-down and the possible selections inside it in hidden (which is the intended behavior.)
Directly, my question is can I hid this drop-down successfully in Safari 4 WITHOUT completely emptying out the drop down and then repopulating it with only the selected value? I would rather not do this if at all possible, but if it's the only way to accomplish my goal then I can change the site additionally.
I believe the problem is where I set the listeners on the <select>:
<select id="WHPR" class="ui-formulate-ignore" style="width: 280px; visibility: visible;" onchange="whprChanged(this);" onfocus="displaySelector(form, document.getElementById('WHPR')); document.getElementById('imageHolder').focus(); this.blur();" name="WHPR">
Thank you all very much for taking the time to help me. I really appreciate all the help available on this site.
-Brian J. Stinar-
Not to pick on your style, but attaching listeners inline like you're doing is not very clean. Why not take advantage of jQuery's ability to deal with any browser discrepancies? The page you refer to is already loading it.
See http://docs.jquery.com/Events/bind
I think it's some kind of a bug in Safari - for example if you do .focus() nof for the DIV but for another input element like a textfield, then after clicking the selectbox both would have the focus (or actually, the focus would stay in the selectbox and the textbox would only seem to have the focus by having thicker border than usual).
Anyhow quick and dirty methot to achieve the goal would be removing the selectbox from the page (display: none) and then bringing it back (display:inline).
replace the this.blur() with the following command
this.style.cssText='display:none';var select = this; window.setTimeout(function(){select.style.cssText='display:inline';},1);
If you don't use a delay then it doesn't work - the removal and retrieval of the element need to be in different scopes.