I created a page dynamically for displaying the content. I want to resize the content text size(increase,decrease). In the dynamic page I created a button. When we click on the button "Dialog" box is opened with slider. When we moving the slider from left to right the content size should be increase or from right to left size should be decrease. But it does not show any effect on the size.
var seq = $(this).data("sequence");
if ($('[data-role=page]#' + seq).length === 0) {
$($.mobile.pageContainer).append('<div data-role="page" id="' + seq + '" class="items"><div data-role="content" id="desc"></div><div data-role="footer" data-position="fixed" class="my-footer"><div data-role="popup" id="textMenu" style="margin-bottom:10px;"><ul data-role="listview" data-inset="true" data-theme="a"><li data-icon="false"><a href="dialog.html" id="textSize" data-rel="dialog" data-transition="pop">Text size</a></li></ul></div><div class="ui-block-a ui-bar-a" data-theme="a"><div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;"><a href="#textMenu" class="ui-btn-left" data-icon="bars" data-role="button" data-iconpos="notext" data-rel="popup" data-transition="pop" style="margin-top:5px;"></a></div></div><a href="" data-role="button" class="addToFavoritesDiv" style="margin-top:5px;">Bookmark</a> <div class="ui-block-c ui-bar-a"><div align="right" style="padding-top:3px;height:33px;height:40px;"><a href="#" class="ui-btn-right" data-role="button" data-icon="back" data-rel="back" data-iconpos="notext" style="margin-top:5px;"></a></div></div></div></div>');
$('[data-role=page]#' + seq + ' [data-role=content]').load(file);
}
var images = $('.items');
var CELL_WIDTH = 5;
var ASPECT = 1.5;
$( "#slider" ).slider({
step: 5,
min: 70,
max: 200,
value: 100,
slide: function(event, ui) {
var size = (CELL_WIDTH * ui.value / 100) + "em";
images.stop(true).animate({width: size * ASPECT, height: size}, 250);
}
});
Dialog.html file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>XML File</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet"/> -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style type="text/css">
.ui-dialog-contain
{
opacity: 1 !important;
background: #FFFFFF !important;
}
.ui-dialog .ui-header .ui-btn-icon-notext
{
display: none !important;
}
.ui-dialog-background
{
opacity: 0.5;
display: block !important;
-webkit-transition: opacity 0.5s ease-in;
}
.ui-dialog-background.pop.in
{
opacity: 1;
-webkit-transition: opacity 0.5s ease-in;
}
.ui-dialog
{
min-height: 100% !important;
background: transparent !important;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('div[data-role="dialog"]').live('pagebeforeshow', function (e, ui) {
// make parent page transparent
ui.prevPage.addClass("ui-dialog-background");
});
$('div[data-role="dialog"]').live('pagehide', function (e, ui) {
$(".ui-dialog-background").removeClass("ui-dialog-background");
});
});
</script>
</head>
<body>
<div data-role="dialog">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content" id="slider">
<label for="slider-mini">Text Size:</label>
<input type="range" name="slider-mini" id="slider-mini" min="0" max="100" data-highlight="true" data-mini="true" />
</div>
</div>
</body>
</html>
Thanks in Advance.