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.
Related
I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the input type="date" and the actual suggestion dropdown list for inputs bound to a datalist. Preferably in Chrome, but other browsers will do too.
I've found that by enabling the Shadow DOM setting in Chrome's inspector options allows me to inspect the shadow DOM for the actual input (which includes the ::-webkit-calendar-picker-indicator arrow to show the datepicker) but not the datepicker itself:
The same goes for the datalist. It appears as these controls are not part of the input, but I also can't find them anywhere else in the elements panel.
Is it possible to inspect such elements?
Small edit for clarification: I'm actually looking for which pseudo-classes apply to which controls. There's plenty of sites that list some of them, but I have yet to find a source that manages to list ::-webkit-calendar-picker-indicator for the datalist element, which does get applied. I'm looking for more of those sneaky bastards, and the best source for that of course is the horse's mouth.
Looks like the actual picker is loaded in an entirely different layer (basically a different window without the titlebar). So I guess the answer is: no, you can't.
I agree it would be great to be able to customize it. And similar popups too. Mozilla in XUL has display:popup which is used by context menus, flyout and similar things. Would be definitely great being able to use that in userland content too.
The calendar popup of Google Chrome is not in Shadow DOM.
It's in a separated page mapped to a popup window. See WebPagePopupImpl.cpp
And the popup content is written by HTML/JavaScript.
I want to customize the default look of alert boxes which generally shows in any browser. Is there any way to customize according to my choice?
I found this link.
Actually i want to customize alert boxes so that i can use it using PHONEGAP
No, you can't style alert boxes. If you want to style popups use modal windows.
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!
I am using HTML5 on an iPad application.
Is there anything like an alert box that I can use to show a message? I know HTML5 has a dialog box but if there is an alert box that would be better.
You can use the good old-fashioned JavaScript alerts:
alert("Hey! Pay attention!")
See here: http://www.w3schools.com/jsref/met_win_alert.asp
I've been trying to use Jquery UI, and I keep getting confused by it. So I've put together a minimal test-case here.
http://jsfiddle.net/vmZap/
Basically, I include JQUERY, JQUERY-UI, and the JQUERY-UI CSS file. Then I put this code on the page:
<button>Button</button>
Based on my reading, that button, should show up with the Jquery UI Signature look (complete with style and markup changes). As you can see in my fiddle, it doesn't. Is there some sort of call I'm missing that I need to use to initialize jquery-ui to try to do something rather than just sitting there?
I have been fiddling with this stuff for days, but when a test-case as simple as this doesn't work, I'm out of ideas.
If you want to use the jquery-ui button on all button elements, then in the onDomReady you need to add:
$('button').button();
This will apply the jquery-ui button styles to all elements matching your selector, in this case all button elements.
I haven't worked much with jQuery-UI, but don't you need a JS call to make the button look different?
$("button").button();