I have an html page given below
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
<div class="content-primary">
<form id="frm1">
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="Name">name:</label>
<input type="text" Name="Name" id="Name" value="" />
</li>
<li data-role="fieldcontain">
<label for="No">no:</label>
<input type="text" No="No" id="No" value="" />
</li>
<li data-role="fieldcontain">
<label for="countryName">Country name:</label>
<input type="text" countryName="countryName" id="countryName" value="" />
</li>
<li data-role="fieldcontain">
<label for="stateName">State name:</label>
<input type="text" stateName="stateName" id="stateName" value="" />
</li>
<li data-role="fieldcontain">
<label for="cityName">City name:</label>
<input type="text" cityName="cityName" id="cityName" value="" />
</li>
</form>
</div>
</div>
</body>
and i am using the following jquery 1.3.2 links displayed in the link given
http://jquerymobile.com/download/
and i have css file given below
.ui-body-c { background:#FFFFFF !important; }
.ui-page .ui-header {
background:#0B0B3B !important;
}
.ui-page .ui-footer {
background:#0B0B3B !important;
}
When i am using the above code the list which is displayed contains grey color.
how will i get white color instead grey to the list displayed.
Thanks in advance
I can't actually test this but I have noticed oddities like this before when a css rule is defined as background-color: and you try to override with just background:
Try changing your rule to say background-color: instead. Also, if you can help it, stay clear of !important unless you're sure it's what you need. It can be a real pain when your css gets more complicated.
All you need is to set background-color rule to .ul-body
.ui-body{
background-color:#FFF;
}
Don't use !improtant, Keep it as a last resource.
Note: In case some other list might contain a class named ui-body, but you can give parent ID or class as selector to your custom class .ui-body
#Parent .ui-body{
}
.Parent .ui-body{
}
fiddle
Related
First of all I'm not really a web developer, so bear with me.
I'm trying to embed a mailchimp signup form on my site. I have a set check-boxes that I'd like to keep hidden unless a certain radio button is selected.
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
.reveal{
display: none !important;
}
#radio-2:checked ~ .reveal {
display: inline;
}
</style>
<div id="mc_embed_signup">
<form action="n/a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group input-group">
<strong>Radio Buttons</strong>
<ul>
<li><input type="radio" id="radio-1" value="Radio 1" name="MMERGE6" id="mce-MMERGE6-0"><label for="mce-MMERGE6-0">Radio 1</label></li>
<li><input type="radio" id="radio-2" value="Part Time" name="MMERGE6" id="mce-MMERGE6-1"><label for="mce-MMERGE6-1">Part Time</label></li>
</ul>
</div>
<div class="mc-field-group input-group reveal">
<ul>
<li><input type="checkbox" value="1" name="group[18657][1]" id="mce-group[18657]-18657-0"><label for="mce-group[18657]-18657-0">1</label></li>
<li><input type="checkbox" value="2" name="group[18657][2]" id="mce-group[18657]-18657-1"><label for="mce-group[18657]-18657-1">2</label></li>
<li><input type="checkbox" value="4" name="group[18657][4]" id="mce-group[18657]-18657-2"><label for="mce-group[18657]-18657-2">3</label></li>
<li><input type="checkbox" value="8" name="group[18657][8]" id="mce-group[18657]-18657-3"><label for="mce-group[18657]-18657-3">4</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e7f52c90ee3d55370f2c41bac_8ea8200d35" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[6]='MMERGE6';ftypes[6]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
I want the set of checkboxes here to only reveal when the second radio button is selected.
I can get :checked to work when I write my own form, but I can't seem to get it to work within an embedded mailchimp form, and I can't figure out why. Does anyone have any ideas?
There are a few issues here:
A style with the !important rule cannot be overridden with another style that doesn't include !important. You can just remove it from your first style to resolve this.
The ~ sibling CSS selector locates elements with the same parent. Because the radio and .reveal elements don't share the same parent, it doesn't display the .reveal element.
The radio buttons shouldn't have two id attributes. Only the second id is set when more than one exists.
In order to make the sibling selector work, you can remove the <ul> and <li> elements from the radio buttons, and add line breaks before them so they're still on separate lines. Also put the .reveal class <div> inside the first .mc-field-group one. This will make the radio buttons have the same parent as the hidden element.
Here's what the updated code looks like:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
.reveal {
display: none;
}
#mce-MMERGE6-1:checked ~ .reveal {
display: inline;
}
</style>
<div id="mc_embed_signup">
<form action="n/a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group input-group">
<strong>Radio Buttons</strong>
<br>
<input type="radio" value="Radio 1" name="MMERGE6" id="mce-MMERGE6-0"><label for="mce-MMERGE6-0">Radio 1</label>
<br>
<input type="radio" value="Part Time" name="MMERGE6" id="mce-MMERGE6-1"><label for="mce-MMERGE6-1">Part Time</label>
<div class="reveal">
<ul>
<li><input type="checkbox" value="1" name="group[18657][1]" id="mce-group[18657]-18657-0"><label for="mce-group[18657]-18657-0">1</label></li>
<li><input type="checkbox" value="2" name="group[18657][2]" id="mce-group[18657]-18657-1"><label for="mce-group[18657]-18657-1">2</label></li>
<li><input type="checkbox" value="4" name="group[18657][4]" id="mce-group[18657]-18657-2"><label for="mce-group[18657]-18657-2">3</label></li>
<li><input type="checkbox" value="8" name="group[18657][8]" id="mce-group[18657]-18657-3"><label for="mce-group[18657]-18657-3">4</label></li>
</ul>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e7f52c90ee3d55370f2c41bac_8ea8200d35" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[6]='MMERGE6';ftypes[6]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
Having trouble obtaining the correct css to create a check list in jqm. with the help of Make checkbox larger in Jquery Mobile I was able to get a larger checkbox but the results created new checkbox in undesired location? my label elements seem to be creating extra checkbox where my html doesn't have one. see JSFiddle example.
outer label tag is producing a checkbox and css sizing desired to make box larger is only applied to outer label box (the one that shouldn't even be there).
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" data-theme="b" id="acs">
<div data-role="header">
<h2>Key Performance Indicators</h2>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="b">
<li>
<h1>Assess Cardiac Risk Factors</h1>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>
<label for="checkbox-2b">
<label>
<h3>Age</h3>
</label>
</label>
</label>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>
<label for="checkbox-2b">
<label>
<h3>Diabetes</h3>
</label>
</label>
</label>
</li>
</ul>
</div>
<div data-role="footer">
<div data-role="navbar">
</div>
</div>
<div>
<h4>My Footer</h4>
</div>
</div>
CSS
#checkbox-2b {
-ms-transform: scale(6); /* IE */
-moz-transform: scale(6); /* FF */
-webkit-transform: scale(6); /* Safari and Chrome */
-o-transform: scale(6); /* Opera */
padding: 10px;
}
I have updated your fiddle -> http://jsfiddle.net/xxdrf87q/7/
Looking to the documentation the right way for doing a checkbox with it's label is this:
<label>
<input type="checkbox" name="checkbox-0 ">Check me
</label>
So I changed this part:
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/> Age
</label>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/> Diabetes
</label>
Thanks to jcarrera for the fix, to clarify my final issue here was the resolution to the multiple check boxes unsolicited: The css needed to add z-index: 2; to apply to top layer checkbox and remove id from the label elements. Cleaned up extra code by removing extra label tags not needed.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" data-theme="b" id="acs">
<div data-role="header">
<h2>Key Performance Indicators</h2>
</div>
<div data-role="content">
<ul data-role="listview" data-split-icon="gear" data-theme="c">
<h1>Assess Cardiac Risk Factors</h1>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>
<h3>Age</h3>
</label>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>
<h3>Diabetes</h3>
</label>
</ul>
</div>
<div data-role="footer">
<div data-role="navbar">
</div>
<h4>John Doe</h4>
</div>
</div>
How do I wrap a contact form around a backgroud image (eg. a desktop screen). For further clarification, please visit this link. Scroll down to the bottom of the page and you'll see a mac screen background wraped inside of a login page.
<div id="new_div_3">
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li>
<h2>Contact Us</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" placeholder="John Doe" required />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="john_doe#example.com" required />
<span class="form_hint">Proper format "name#something.com"</span>
</li>
<li>
<label for="website">Website:</label>
<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</form>
</div>
This is what i currently have in my new_div_3.
#new_div_3 {
margin:0 auto;
width: 500px;
background:#ECF0F1 url('img/email-screen.png') 0 0 no-repeat;
background-size: 1040px 878px;
padding: 38px 38px 267px;
}
Is there a way of making the background appear correctly, in the center of the div with the addition of the contact form appearing in the center too?
I think you're looking for something like:
background:#ECF0F1 url('img/email-screen.png') no-repeat center center;
If you are using firefox or chrome, you can use inspect element to see how it has been setup in the example you provided.
I wanted to write HTML for a signup form that looks like the one at the following link:
https://www.hipchat.com/sign_up
The issue is, I want to use div tags, ul and li elements to create the form instead of HTML tables. I am having a hard time figuring out how to align the field instructions and the text box inputs using css classes.
you can try something like this:
<ul>
<li>
<label>Name:</label><input class="textbox" type="text" size="30" />
</li>
</ul>
and go on trying some css style, margin float .......
Why do you need to use DIVS and LI's?
Use labels and form elements.... Www.w3c.org will help
Here's something to get you started.
You would basically do something like this.. strip style from list and float them left.
You can also take out the margin:0 auto; if you don't want it centered.
.container {margin: 0 auto; width: 300px;}
.container ul {margin: 0; padding: 0; list-style: none; float: left; width: 50%;}
<div class="container">
<ul>
<li>name</li>
<li>email</li>
</ul>
<ul>
<li><input type="text" name="email" /></li>
<li><input type="text" name="email" /></li>
</ul>
</div>
<form method="post">
<div class="field">
<label for="name">name</label>
<input id="name" name="name" type="text" />
</div> <div class="field">
<label for="email">email</label>
<input id="email" name="email" type="text" />
</div> <div class="field">
<label for="job title">job title</label>
<input id="job title" name="job title" type="text" />
</div>
</form>
This is much better option use this , don't go for Ul-li use DIV
here is link http://jsfiddle.net/sahil20grover1988/JLbbw/
I have few form fields, each input and label is wrapped inside a div in following way:
<div class="field">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p class="hint">Enter your name</p>
</div>
the hint class is initially hidden like display:none.
How can I display the hidden hint class on hover anywhere in class field.
Thanks.
In CSS you can do it the following way:
.hint { display: none; }
.field:hover .hint { display: block; }
Edit: As Karl said, this will not work in Internet Explorer 6. You can, however, resort to JavaScript (in this example using jQuery) to do that:
jQuery(".field").hover(
function() {
jQuery(this).find(".hint").css("display","block");
},
function() {
jQuery(this).find(".hint").css("display","none");
}
);
This option will work in IE 4 and later.
<div class="field" onmouseover="document.getElementById('hint').style.display='none';" onmouseout="document.getElementById('hint').style.display='block';">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p id="hint">Enter your name</p>
</div>
And for your other forms just change the id hint2, hint3, etc.
<div class="field" onmouseover="document.getElementById('hint2').style.display='none';" onmouseout="document.getElementById('hint2').style.display='block';">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p id="hint2">Enter your name</p>
</div>