I am trying to make a JQuery Mobile select menu button larger by changing the data-mini property from true to false on the fly. I am able to change the property, but the select menu does not redraw.
It works with a button, by using .buttonMarkup({mini: false}) (which redraws the button instantly), but as far as I know there is no equivalent for select menus.
I have tried .selectmenu("refresh") and .change() - neither redraws the select menu button.
Here is an illustration of the problem: http://jsfiddle.net/YYXuZ/
Does anyone have a solution?
Hey this works for me -
$('#testselectmenu').parent('div').addClass('ui-fullsize');
jsFiddle Demo
I noticed you won't need the $('#testselectmenu').selectmenu('refresh'); with this approach.
/Update
To play it safe I would do this (it does the same thing while removing the data-mini attribute and ui-mini class) -
$('#testselectmenu').parent('div').attr('data-mini', 'false').removeClass('ui-mini').addClass('ui-fullsize');
I think jQM should handle this automatically when you call a .selectmenu('refresh'), I'm not sure why it doesn't.
Related
I'm using bootstrap 3 and am trying to imitate jQueryMobile's select option where you can replace the standard select textbar and arrows with just a button which toggles the opening of said select.
I don't want to use dropdowns either because they get hidden inside my nested divs (if you can make them appear at the topmost layer, then that's fine too).
So I'm wondering if there's a way to have a button as a stand-in for opening the select options.
Not totally sure on this, need a little more information. But you can create a button with:
<button type="button" onclick="alert('Message')">Button</button>
if that what you wanted?
This isn't exactly what you asked for but I did a search and found this plugin and I think if you were to experiment with this then you could come up with the desired effect. Give it a look over.
Theres a spot about a 1/3 of the way down the page which I think would help you decide if this would work.
Plugin: Bootstrap-Select
Hi I need my drop down list boxes to close once they are out of focus or if the user is hovering over any other html element other than it. How can this be achieved?
I could think of a blur event, are there any better way to handle this?
Good question, just this will work only in FF cause IE and Chrome do not recognize events targeting option elements :(
a way to (not) accomplish this is to set a timeout for the option elements that will trigger once we mouseleave it. If a new mouseenter is registered for another option in the tree, we simply clear the timeout that will otherwise .blur() any select on the page*.
LIVE DEMO
var blurSelectTimeout;
function blurSelect(){
blurSelectTimeout = setTimeout(function(){
$('select').blur();
},200);
}
$('select').mouseleave(blurSelect).find('option').hover(function(e){
if(e.type=='mouseenter') clearTimeout(blurSelectTimeout);
else blurSelect();
});
Interestingly $(this).parent('select').blur(); would not work, so this is my best try.
I have layered 4 canvases over the top of each over, however i want to be able to click a button and the linked canvas will come to the top.
http://jsfiddle.net/5g3Fe/ shows what i have currently got. I tried to put the following code into the button click functions. however this doesn't work.
function canvasView1()
{
document.getElementById("canvas1").style.z-index="1";
document.getElementById("canvas2").style.z-index="0";
document.getElementById("canvas3").style.z-index="0";
document.getElementById("canvas4").style.z-index="0";
}
can anyone suggest a way to be able to get specific canvas from a button click.
Thanks
For some reason, jsFiddle was ignoring your JavaScript code because of this reason. You can get around that by choosing No wrap - in <body> on the left hand side options.
Then your problem was that to set the z-index in javascript you use .style.zIndex rather than .style.z-index.
Working fiddle here
Or cleaner code version here
I need an off/on indicator for a panel in my Swing application.
My gut reaction is to try to use a JCheckbox, and somehow disable the mouse input and change the checkbox state only through my program. But a radio button would look better.
Is this the best way to do so (& if so, how to disable mouse input w/o making the control look disabled), or is there a better indicator element?
Yep, why not. Just use setEnabled() method (JPanel inherits it, so don't worry).
Use check box but change the icon to look like following round button ( which is a check box BTW )
Is there a way to capture the events triggered on HTML controls before they are forwarded for default (generic) handling by the control itself. In my case, I want to prevent a element dropdown to open when a user clicks on the control. e.g. On this user click, OnClick() event gets fired and is handled by the default control which open the dropdown. I want to stop this from happening.
Can I attach a custom function to this event and redirect the event handling to this one instead of the default code that opens the dropdown?
Thanks
onclick,onmousedown and onmouseup will not help you to prevent the selectbox from opening. I'm not asking why you want to do that, but if you really can't use any other solution, like for example (changing selectbox to the readonly inputbox), then, you can try the next solution.
One way to prevent the box from opening, is to create an overlay container, which will block the the focusable area of the select. This can be achived by placing the div after the selectbox and givving it the sizes and the position of the selectbox.
<div style="position:relative;">
<select style="width:100px;height:30px">
<option>hello</option>
</select>
<div style="position:absolute;
left:0;
top:0;
width:100px;
height:30px;
z-index:2;
background-color:black;
opacity:0;filter:Alpha(Opacity='0');"
></div>
</div>
Event then, it will work only for IE >= 7. Not for IE6, cause selectboxes in IE6 are strange( maybe you can try to fix IE6 with some iframe hack);
Fairly old question with some good suggestions, but none seem to directly answer the original question. In case anybody out there is wondering, I believe the OP was wanting to keep the visual appearance of the system/browser select element, but use his own custom drop-down menu instead of the system/browser drop-down menu.
In this case, the onclick event will occur too late for you to stop the actual drop-down menu from displaying. What you want to do is bind to the mousedown event, and prevent the event from propagating to the default behavior:
document.getElementById('my_select_id').onmousedown = function(event) {
// ... do something here...perhaps display your own custom menu, an advanced selection chooser, focus another element, display a message, or some other custom handling.
event.preventDefault(); // This prevents the drop-down menu from displaying
}
Notes:
Replacing the drop-down with a custom-designed element (as suggested by others) isn't always an option. In some cases, you'll end up either having to completely omit default/system drop-downs from your site (in favor of a custom-designed element), or you have to live with a mismatch in visual appearance due to browser/system/theme differences (unless you feel like designing the custom element to match every conceivable visual aesthetic/theme.)
Disabling the drop-down will not work, as it will prevent the event handlers from firing.
Using optgroups will still allow the drop-down menu to be displayed.
Replacing the drop-down with an empty version will still display an empty drop-down menu.
This is the answer I gave on another, similar question.
This works great for me in IE and Chrome, there's no flicker or anything:
html
<select id="MySelect"><option>Hello</option></select>
js
MySelect.onmousedown = function ()
{
window.setTimeout(function ()
{
//- An immediate blur, then refocus stops the options from being displayed
this.blur();
this.focus();
//- so now we run our custom function
runOtherFunctionInstead();
},0);
}
Make sure the js runs after the select element has been parse by placing it in an onload or ondocumentready or a script block after the select element. Haven't tried it in Firefox or Opera. Assumedly it would work in Safari, though.
EDIT
As suggested in the comments, the popup will still appear for a double click in IE (all versions). This is due to a bug where the mousedown event doesn't fire for the second click (whoops). You can quickly hide the options again by using the blur, focus method in the ondblclick event and if this method works in Firefox and Safari, I still think it's the best solution considering most people don't double click select boxes.
you need to set selectbox to be onload disabled: disabled="disabled"