So I'm trying to use the tab feature of the Bootstrap CSS. I've been following the code here:
http://getbootstrap.com/javascript/#tabs-usage
On the section Methods. However, when I click the tabs that I have, it doesn't appear to switch after changing the text to see whether it switches or not. What script do I use to switch tabs?
you should attach the jQuery and the bootstrap.min.js to your page. Then it will work for sure!!
Good luck!
Related
I am using PhpStorm because I really like the features, but I would like to disable this little popover to make it look cleaner. How would I do this without disabling the inspections themselves?
The popover:
You cannot remove/disable it. You can only make it less visible (smaller). For that you need to configure it to be as in previous versions: hover over and use the menu there, as simple as that (Compact View option on the screenshot below).
Before:
After:
I'm working on an existing MVC4 application, and need to implement a modal form.
I'm trying to implement this solution...
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
This works just fine, but the example uses a link, and I need it to be a button.
I could try to style the link as a button, but there's a bunch of other buttons on the same form and it would need to look exactly like those, and I haven't found a good way to style the link exactly like the other buttons in every browser, since most of the button's default style properties aren't overridden.
I've tried wrapping the link around a button, like shown below...
<button type="button">Continue</button>
This works fine in Chrome, but in IE11 when I'm testing the button shows up but doesn't do anything when I click it. Again, the exact same code works fine in Chrome - pressing the button does pop the modal open, but doesn't work in IE. Also, you get an HTML5 validation warning when a button is nested inside a link.
So, what can I do to make my link look exactly like all my other buttons? Or is there some way I can implement this modal solution without using a link that directs to an anchor?
Not sure why your current example isn't working but there are plenty of examples in this stack overflow question/answer Here.
Could someone please tell me how can I change the default css of a alert/prompt box ?
You can't. They are native to the browser and are not styl-able.
You should turn to javascript alert-like systems. Using jQuery, here are some:
jAlert
jQuery UI dialog (with some tweaking)
This page proposes three alternatives to native alert/confirm/prompt
This answer shows a way to have a confirm-like blocking dialog using jquery ui dialog
The alert box is built into the Browser. You will need to popup your own dialog. The jQueryUI is very good for this.
For an example on this, look on the jQuery UI site.
As noted above you may always use the jQuery Alert box...
But you may also fire a JavaScript/jQuery Function in which displays a DIV (HTML Element), in which you may style completely.
The alert box that is used by javaScript is part of the browser. (other poeple have pointed this out but if you would like to have a good starting point try this.
http://jqueryui.com/demos/dialog/#default
jQuery Ui has some great tools for creating your own alert box and will also having other helpful options.
Just wanted to give some more information.
On this fiddle http://jsfiddle.net/mjmitche/qVdEy/6/, you can see that the alignment of the text inside the popover is perfect, however, when I put the exact same css/js/html on my site, the text is larger than the container!
I'm trying to figure out what is happening using firebug, but I have to move my cursor off the popover to use firebug, and then the firebug disappears. I can't figure out what settings in my code is changing the presentation. The popovers are created using Twitter Bootstrap.js (you can see the resources in the fiddle)
Nobody really answered the question "How to debug a popover" ::: Simply set the popover to open on load >> $('#element').popover('show')
What I do is kind of weird and only seems to work in Chrome, not Firebug.
The steps are:
Open the Chrome inspector in a new window
Make sure part of the inspector is overtop of the button you're
trying to activate (which is in the background window
Activate the browser window and hover over the button (this activates the popup), now hit
alt+tab (cmd+` on OSX) to switch to the inspector window.
This will not trigger the mouseOut event and leave your popup
attached to the DOM body node! Since you're already in the inspector
you can navigate to it and see the css problem.
Well after looking at the popover CSS, it seems there is no explicitly defined font-size: http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css (Just do a find on "popover" and look through the CSS)
Perhaps try adding the following CSS and tweaking it from there:
.popover, .popover h3.title, .popover .content { font-size: 14px; }
Hope that helps :)
This is the kind of thing I created my new HTML box visualizer tool for. Check it out!
HTML Box Visualizer - GitHub
open devtools of the browser, then set a breakpoint of Mouse Click. Just Click the target of popover panel and U will see the opening popover. Just debug it like other normal DOM block
I am building an app for mobiles, using jquery mobile framework. I want to be able to make a simple dialog box/pop up, so that when you click on a picture of a "question mark" the pop up/ dialog box would appear with a simple message.
I have tried different approaches from http://jquerymobile.com/test/docs/pages/dialog-alt.html to so many others. I couldnt get non of them to work. So If you know how to make a simple pop up or a simple dialog box could you please give me an example!
If you want to open a dialog in jquery mobile you have to use an attribute data-rel="dialog" and the href must point to a URL where your dialog lives:
Open dialog
Here's a fiddle so you can see how it works.
Hope it helps.
UPDATE:
It seems there's a problem with jQuery Mobile dialog and some devices.
There's an issue open in the GitHub repository.
I've found this plugin which seems to work really well.