Bootstrap has its own javascript version of checkboxes, radio buttons, collapse etc.
Example radio buttons:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
</div>
This looks pretty great as long you have JS enabled. I like JS but I am also a NoScript user and I want that the page is also functional without JS.
As I can see twitter-bootstrap has no built-in fallback solution. I could use my own tags or show the bootstrap buttons only if JS is enabled but I somehow expected that bootstrap could handle this.
Only solution I have in mind is using standard radio buttons, checkboxes etc. and replacing/hiding them with some like code from above if JS is enabled.
I was also disappointed to see that some simple things like collapse have no fallback solution which would at least i.e. handle it with css3 transistions or at least just open all sub divs and keep them open.
Do you have some ideas/solutions for bootstrap without JS or is the only solutions writing a function to "hide radio buttons, show/create boostrap-divs if javascript enabled"?
You could handle it without javascript but that would require it to send it to a server side script or at least a form to submit it. As most user (I think about 99%) have javascript enabled, you should disable the function when no javascript is activated.
Related
I'm working on an existing Bootstrap solution in my workplace. It has the following markup:
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">Open Modal</button>
I'm somewhat new to Bootstrap but I did some basic googling. data-target is used to specify a child modal window to open. Markup similar to the markup above successfully opens a new modal window in a different enterprise website.
What are the requirements/dependencies for this implementation to work? For example, which supporting files are necessary? I'm assuming that should handle this this natively as opposed to requiring a jQuery click event wireup.
Can you please confirm if this is the case? I'm new to Bootstrap but this will help me focus my debugging. If the code above isn't working then what would you investigate as most likely root causes?
As mentioned in the comments jquery.js is required by bootstrap as well as a few others.
I believe this link may be helpful for your question as well:
http://getbootstrap.com/javascript/#modals-related-target
I am using Material Design Lite on a project and I have some mdl-tab tabs in my settings page. However, some of the settings are only useful if certain conditions are met. I would like to have a tab which is disabled unless the conditions are met.
This is what I'm doing now, which doesn't work:
<div class="mdl-tabs__tab-bar">
Display
Device
Measurement
</div>
Is there any way to do this? If so, how?
The project is in Cordova. So HTML, CSS, Javascript and JQuery answers are all welcome.
I just solved similar problem in my project. I know i am a bit late but I hope that this will maybe help someone in the future.
Render your page without classes or text.
<div class="mdl-tabs__tab-bar">
Display
<a id=deviceTab href="#deviceSettings"></a>
<a id=measurementTab href="#measSettings"></a>
</div>
You should add listener on input(needed for your conditions) and when the conditions are met just add class (mdl-tabs__tab) and text (Device, Measurement).
You can do that with jQuery
$("#deviceTab").addClass("mdl-tabs__tab").text("Device");
$("#measTab").addClass("mdl-tabs__tab").text("Measurement");
If user deletes information needed you can just remove text and class again and he wont be able to click on tab.
<div class="mdl-tabs__tab-bar">
Display
<a id="deviceTab" href="#deviceSettings" class="mdl-tabs__tab">Device</a>
<a id="measTab" href="#measSettings"class="mdl-tabs__tab">Measurement</a>
</div>
You can achieve this by removing the href attribute from the tag while still leaving the classes and link text. This will keep the tab looking like a tab and when you want to enable it just add the href with the id of the tab panel you want to activate.
I'm using an HTML basic button in an EXT JS application.
For a specefic need, i was forced to use an HTML basic button. My problem is that i want to use the same style of EXTJS button (The component Ext.button.Button with all 'special' style events like : on click, on hover ...)
Is there any way to do it like this : tired some think like :
<input type="button" class="myEXTJSButtonStyle" value="Chargement" id="id"/>
In Google Chrome, right click thee ExtJS button and select Inspect Element. From there you will see all the styles that had been applied to it. You can then copy them to your own stylesheet.
I am still new to JQuery and JQuery UI Theme. I have managed to develop my own theme, and to apply it on a simple test page with buttons. I read the documentation, and I could not find where it says that I should explicitly call $(":button").button(); to apply it.
If I don't do this, the theme is not applied. So why do I have to do this explicitly? Or if this is expected from me, does anyone have a generic script to apply the theme automatically on all items? Thanks.
EDIT
Reading answers and comments, some people imply that application of UI Theme is automatic, but others say it should be applied manually. A test on the delivered test HTML page seem to indicate that theme must be applied manually.
If you look at the demos, the button styles can be applied to other elements as well, such as checkboxes, radio buttons and anchors. jQuery UI thinks it is better to let you specify which elements should have that particular style applied than to try to guess, especially since specifying the elements is typically a one-liner: $(foo).button();
The reason you have to call the button function, is so that jQuery UI can add all of its specialized classes and attributes to the button.
If you start off with a button like this:
<button type="button">A button element</button>
It will be replaced with this:
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">A button element</span></button>
The reason you have to specify this explicitly is because not everyone using the library might want to style all their buttons as jQuery UI buttons. It's generally considered desirable to separate "mechanism" (which jQuery UI provides), from "policy" (which you get to decide); and jQuery is excellent at letting you define policy in a concise way anyway.
Instead of using the <input type="file"> tag I'd like to have a button that launches a file browser dialog.
My first thought was to have a hidden file input tag and a button. I'd use the button click on the button to fire the onclick of the hidden file input, but I haven't been able to get this working properly.
So the question is, is this even possible? And second is there a nicer way to do this and still be able to send the information back in a form?
This will be the bottom layer of degrading functionality (from Flash to JavaScript (our site doesn't work without JS)) so it has to work with just basic JS and HTML.
Yes, it's possible (in most browsers) via opacity. Here's a tutorial.
I've done this (see ceejayoz' answer) in the past, but now recommend against it. It is a security issue and can't be relied upon for the future. A much better solution is to progressively enhance your upload form so that the file input is replaced with a Flash- or Java-based uploader with more features (or use better features in HTML 5 if they become available).
Instead of trying to hack the browser's file input control, I'd suggest using a flash based file uploader like SWFUpload. I've started using this in one of my projects and have been VERY pleased with it.
You get javascript callbacks and you can do anything you want for a UI (the flash is just the uploading functionality).
I'd rather avoid transparency tricks.
This worked for me (uses jQuery):
$("#upload-box").change(function(){
$("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
$("#upload-box").click();
});
And the HTML:
<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />
It creates a text input, and a hidden upload input, and patches (=routes) the click on the text input to the hidden file input.
When a file is selected, it will write back the name of the file in the text input, in line with what most users would expect from the interface.
Should work on FF, Chrome, IE9 and +. I didn't test it on IE8.
Here's a jsfiddle. Thank you for upvoting my answer if you like it.
You can do it without any security issues.
Just code that on onmouseenter will promote the zindex of the real upload button (you can use opacity on it or make it transparent) and then you will not need to trigger a click but just use the click from the user.