Search jQuery

jQuery Forum

Screen name:
lynchy67

lynchy67's Profile

2 Posts

4 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Applying css to html snippet
[1Reply]
- 06-Apr-2013 08:31 AM
- Forum: jQuery Mobile
Hi,
I written some learning resources for my students for use on mobiles and have some accessibilty settings in my single page resources that allows the user to change the font size and background colour.

I have separated all the relevant stuff into this example page to demonstrate my working model.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<style type="text/css">
.txtwrapper {
font-size: 16px;
}
.bgcolour {
background-color: rgb(250,250,250);
}
#settings {
width: 200%;
}
</style>
<title>Title</title>
<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.2.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = "slide";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
<div data-role="page" id="page" data-theme="c">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content" class="txtwrapper bgcolour"> Some text here to see it working.
<div><a data-role="button" href="#page1" data-icon="gear"
data-iconpos="left">Accessibility Settings</a></div>
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>

<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="header">
<h1>Accessibilty Settings</h1>
</div>
<div data-role="content" class="txtwrapper bgcolour">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Font Size</legend>
<input type="radio" name="fontsize" id="small" value="16px" checked="checked"/>
<label for="small">Small</label>
<input type="radio" name="fontsize" id="medium" value="20px" />
<label for="medium">Medium</label>
<input type="radio" name="fontsize" id="large" value="24px" />
<label for="large">Large</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Bg Colour</legend>
<input type="radio" name="colour" id="grey" value="rgb(250,250,250)" checked="checked"/>
<label for="grey">grey</label>
<input type="radio" name="colour" id="cream" value="rgb(255,254,204)" />
<label for="cream">cream</label>
<input type="radio" name="colour" id="blue" value="rgb(197,255,255)" />
<label for="blue">blue</label>
</fieldset>
</div>
Sample text showing how it will look. </div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>

<script>
$("input[type='radio']").on( "change", function(event, ui) {
$("input[name*=fontsize]:checked").each(function() {
$(".txtwrapper").css('font-size', $(this).val());
});
$("input[name*=colour]:checked").each(function() {
$(".bgcolour").css('background-color', $(this).val());
});
});
</script>
</body>
</html>

As I say above code works fine. My problem is that this functionality is in many different pages and if I want to add another font size or background colour I would have to edit lots of different single page resources.
So i am trying to separate the just the html code for "content" div of the accessibillity page into an external html file so I can just edit this and it will be pulled into all single page resources.
I can get the html snippet into the div ok but the font size or the background colour never change.

Here is the main page and the snippet being brought in.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<style type="text/css">
.txtwrapper {
font-size: 16px;
}
.bgcolour {
background-color: rgb(250,250,250);
}
#settings {
width: 200%;
}
</style>
<title>Title</title>
<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.2.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = "slide";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
<div data-role="page" id="page" data-theme="c">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content" class="txtwrapper bgcolour"> Some text here to see it working.
<div><a data-role="button" href="#page1" data-icon="gear"
data-iconpos="left">Accessibility Settings</a></div>
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>

<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="header">
<h1>Accessibilty Settings</h1>
</div>
<div data-role="content" class="txtwrapper bgcolour" id="selectedTarget">
/*HTML snippet here*/
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>
<script>
$(document).ready(function(){
$('#selectedTarget').load('accessSnippet.html');
});
</script>

<script>
$("input[type='radio']").on( "change", function(event, ui) {
$("input[name*=fontsize]:checked").each(function() {
$(".txtwrapper").css('font-size', $(this).val());
});
$("input[name*=colour]:checked").each(function() {
$(".bgcolour").css('background-color', $(this).val());
});
});
</script>
</body>
</html>

and the snippet

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Font Size</legend>
<input type="radio" name="fontsize" id="small" value="16px" checked="checked"/>
<label for="small">Small</label>
<input type="radio" name="fontsize" id="medium" value="20px" />
<label for="medium">Medium</label>
<input type="radio" name="fontsize" id="large" value="24px" />
<label for="large">Large</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Bg Colour</legend>
<input type="radio" name="colour" id="grey" value="rgb(250,250,250)" checked="checked"/>
<label for="grey">grey</label>
<input type="radio" name="colour" id="cream" value="rgb(255,254,204)" />
<label for="cream">cream</label>
<input type="radio" name="colour" id="blue" value="rgb(197,255,255)" />
<label for="blue">blue</label>
</fieldset>
</div>
Sample text showing how it will look.

Any pointers guidance or help is greatly appreciated. Im pretty new to this so I'm riot sure if this is even going to be possible.
You guys were a great help getting me started a few months back so I was hoping to draw on your wealth of knowledge again.

Thanks.
Steve.

Help with dynamically changing content text size and background colour only?
[4Replies]
- 26-Dec-2012 12:37 PM
- Forum: jQuery Mobile
Hi all.

I’m not in the IT industry, just a college lecturer trying to give my students some bite size learning resources to use on their phones.

I do have some programming experience mainly VB with Silverlight to get visual attendance data over time and HTML from a site I had a few years ago.

I have created a single html page that has about 8 jqm pages for information relevant to their course, with a 10 question multi-choice quiz (10 pages) at the end with feedback on their chosen answers.

This is all html and a ThemeRoller CSS file and it all works fine. Tested on an iPad 2, Samsung Note, iPhone 5/4s and a HTC HD2 with WM6.5 for now.

What I really need now is to be able to give the end user the ability to choose from 3 font sizes and 3 background colours, that will change only the body content text and the background colour, for this text, across multiple pages within the single HTML file.

I do not need to change anything for any UI Bars, headers, footers or widgets etc .

I have scoured the net and all the info I have found is about changing buttons or headers etc.

I realise that I am going to have to delve into CSS and JavaScript, I’m fine with that and look forward to learning it.

Could I ask for a few people to point me in the right direction about how you would approach this task?

I am imagining that my problem will be with the multiple pages, as the nine possible variations I hope to offer would need to be updated across all the pages that have content text.
Many Thanks.

Steve.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend