I am currently working on adjusting the text size for both header and paragraph information in a listview. Below is the JQuery code that I have implemented:
$('#rc1').prop('checked', 'true', function(){
$(".feedContainer ul li h3").css('font-size', '1em');
$(".feedContainer ul li p").css('font-size', '.9em');
});
$('#rc2').prop('checked', 'true', function(){
$(".feedContainer ul li h3").css('font-size', '1.5em');
$(".feedContainer ul li p").css('font-size', '1.4em');
$('#header-title').html('test');
});
$('#rc3').prop('checked', 'true', function(){
$(".feedContainer ul li h3").css('font-size', '2em');
$(".feedContainer ul li p").css('font-size', '1.9em');
});
Here is the html code snippet provided:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Text Size</legend>
<input type="radio" name="rc1" id="rc1" value="off" >
<label for="rc1">A</label>
<input type="radio" name="rc2" id="rc2" value="off">
<label for="rc2">A</label>
<input type="radio" name="rc3" id="rc3" value="off">
<label for="rc3">A</label>
</fieldset>
Furthermore, below is the CSS code governing the font size of the letter "A" in the radio button group (which appears to not be functioning as expected):
#rc1 {
font-size: 12px;
}
#rc2 {
font-size: 16px;
}
#rc3 {
font-size: 24px;
}
If anyone could assist me with this issue, I would greatly appreciate it. Thank you!
Edit: Included additional CSS styling for feedContainer:
.feedContainer ul li h3 {
color: #333;
font-size: 1em;
padding: 0;
font-weight: bold;
margin: 0;
font-family: 'Oxygen', sans-serif;
white-space:normal;
}
.feedContainer ul li p {
font-size: .9em;
color: #666;
margin: 0;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
white-space:normal;
}