how can i set background color transparent in jquery mobile. I try this code but it is not work.
td input{
background-color:rgba(0,0,0,0.4) !important;
}
Related
Trying to change the background of a jquery-ui modal dialog as it is transparent but it's not working. As per jquery-ui documentation what I tried is:
.ui-dialog, {
background: black;
}
.ui-dialog-content {
background: black;
}
in my main CSS file but with no success.
Remove the , in your first line. .ui-dialog,{ should just be .ui-dialog{
I have used Jquery Mobile. I have added background image like this<body background ="6.jpg">.
I want to make background image responsive. What process should i follow to make it responsive? Please Suggest.
Update
I have tried using this
body {
background: url(6.jpg) ;
background-size:cover;
}
.ui-page {
background: transparent;
background-repeat: no-repeat;
}
.ui-content{
background: transparent;
}
followed this link Stacjoverflow
but failed. Width of the image is responsive but height is getting too smaller than the original image.
You can working for example with this: http://jquerypicture.com/
The important think is (generell for responsive) you must working with media queries.
PS: Instead of seeting the background in the body tag, please use a class for this.
How can I change color and other attributes of the jquery ui dialog box title
HTML :
<div id="dialog" title=""
style="display: none; font-size: 15px; width: 500; height: 300"></div>
javascript :
$( "#dialog" ).dialog( "option", "title",title );
Please give me some idea to customize the title of jquery dialog.Thank you in Advance.
These classes shape the container of the dialog box title
ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix
This class shapes the text
ui-dialog-title
You could edit these classes in the css file for the jquery ui style. Or you could overwrite these in your own css file.
.ui-dialog-title{
font-size: 110% !important;
color: #FFFFFF !important;
background: #000000 !important;
}
The "!important" might not be necessary.
You can find this out yourselves using developer tools.
I'm trying to prevent my button from flashing blue after clicking, anyone know what class causes this change? so I can override it
Cheers!
For anyone landing here and wondering what to do with .ui-btn-active, I'd like to build on sqlisers answer with:
.ui-btn-active
{
color: #2F3E46 !important;
background: none !important;
background-color: #eee !important;
text-shadow: 0 /*{a-bup-shadow-x}*/
1px /*{a-bup-shadow-y}*/
0 /*{a-bup-shadow-radius}*/
#ffffff /*{a-bup-shadow-color}*/;
}
Just change the color values to whatever you like.
If this happens on your mobile, I'd suggest adding this to your stylesheet:
* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
This will remove the default tap-highlight function of the webkit browser (on any mobile). Seems to work mostly on Android phones, but it does have affect on iOS devices as well.
The class you're looking for is
.ui-btn-active
To apply behavior: url(PIE.htc); to all css files in the project seams to be very long story and with each new version i need to repeat it again.
Is there jquery ui CSS3Pie versions i can find somewhere?
OR
Is it possible to add CSS3Pie support in separate css file, so in such case it will be possible to use that css for any new jquery ui version.
I am trying to do such fix for jquery UI that in my custom css:
.ui-corner-top, .ui-corner-left, .ui-corner-right, .ui-corner-bottom { behavior: url("PIE.htc"); }
.ui-corner-all, .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br { behavior: url("PIE.htc"); }
But it is not working.
At the same time such fix working for my styles, for example if a have style
.mystyle
{
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border: solid 2px #36405c;
}
Than i could define this and it will be working:
.mystyle
{
behavior: url("PIE.htc"); /*it will be working*/
}
So i am assuming that it is not working in jquery UI case because jquery UI has multiple places with .ui-corner-* declarations with different radiuses.
Anyway is it possible to do something with that?
Any ideas someone?
You could create your own theme with http://jqueryui.com/themeroller/, set all the border-radius to 0 and then apply your styles to ".ui-corner-all"