I have a page with a slider that is connected to a deepzoomable image. That slider uses the jQuery slider plugin and now I would like to make that slider mobile friendly.
I started with just adding a static mobile slider. I added the jQuery mobile css and js and inserted the input[type="range"] as such:
<input type="range" id="zoomRange" value="25" min="0" max="100" />
I did not add a label since I've found it is not absolutely necessary.
And the outputted code in the DOM is as follows:
<input type="number" data-type="range" max="100" min="0" value="25" id="zoomRange"
class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ui-input-text ui-body-c ui-shadow-inset">
Is anyone familiar with what is going on here?
From the jQueryMobile docs
The framework will find all input elements with a type="range" and
automatically enhance them into a slider with an accompanying input
So what you see is perfectly normal.I assume you want to get away with that spinner and just have the slider alone.You can do it in two ways.
1) Use data-role="none" with the input type.This will tell the jQuery Mobile framework not to enhance the input type and it will look like a plain html slider.
2) Hide the spinner by manipulating the CSS.
I think point no. 2 will do the trick for you.
Here is a sample code that illustrates what I am talking.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
</script>
<script type="text/javascript" src=
"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">
</script>
<style type="text/css">
#slider-2{
display:none;
}
</style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page1</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<div data-role="fieldcontain">
<label for="slider-0">jQueryMobile Default</label> <input type="range" name=
"slider" id="slider-0" value="25" min="0" max="100">
</div>
<div data-role="fieldcontain">
<label for="slider-1">data-role='none'</label> <input type="range" name="slider"
id="slider-1" value="25" min="0" max="100" data-role="none">
</div>
<div data-role="fieldcontain">
<label for="slider-2">Spinner hidden</label> <input type="range" name="slider"
id="slider-2" value="25" min="0" max="100">
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A demo here - http://jsfiddle.net/2SXV6/
Let me know if that help
Related
JQuery mobile dialog display incorrect after pressed back button.
First time run
Click open dialog button
Clicked back button
Click open dialog button again
The dialog page content will copied to the from page after clicked back button. This will happen after added jquery-ui. It seems there is conflict between jquery mobile dialog and jquery ui. Or it will be normal if the dialog content is just several lines only.
Here is my code:
1.From Page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="false" id="page1" style="height:600px">
<div data-role="header" class="jqm-header">
<h2> Test </h2>
</div><!-- /header -->
<div role="main"
class="ui-content jqm-content" id="mainContent">
<form action="/Test/TestDialog" id="form10" method="post">
<div data-role="controlgroup"
data-type="horizontal" data-mini="true">
<a id="btnAdd" onclick="rowEdit2({ href:'/Test/TestDialogPage' + '?cmd=' })" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus">open Dialog by script</a>
Open dialog
</div>
</form>
</div><!-- /content -->
</div>
</body>
</html>
<script>
function rowEdit2(p) {
var href = p.href;
$.mobile.changePage(href);
}
</script>
2.Dialog Page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test Dialog</title>
</head>
<body>
<div id="TestInfoDialog" data-role="dialog">
<div data-role="header" data-position="fixed">
<a data-rel="back" data-icon="back">Back</a>
<h2>Test Dialog</h2>
</div>
<div class="ui-content" role="main">
<form id="TestInfoForm">
<div>
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<label for="test1">test1</label>
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<label for="test1">test1</label>
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<label for="test1">test1</label>
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<input id="test1" name="test1" type="text" value="" />
<label for="test1">test1</label>
<label for="test1">test1</label>
</div>
</form>
</div>
</div>
</body>
</html>
Please help me on this. I am new to CSS and jQuery Mobile and I got this issue.
The checkboxes in my page do not display the box; only the label. When I click the label, a square appears on the left.
Now, the issue only happens if I download the CSS file to my local file and refer that. If I refer the CSS file from the server directly, the box appears before the text and works normally. Below are the sample source:
Source which has error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width">
<link rel="stylesheet" href="../jQuery/jquery.mobile.css">
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Source which does not have error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Everything else works fine; it is just the display of the box that causes me the problem. I took the latest files for the CSS and JS files and checked.
Without the box, the user may think it is just a label
Since I am new, I am unable to give an image, I'm sorry...
Thanks all.
Adding checkbox inside fieldset for me solved the same problem.
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
To get the value of checked radio button I use something like this
$('input:radio[name=rbutton]:checked').val()
This work well until I upgrade the version of jQuery Mobile from 1.0 to 1.1 rc1, then i could not get the value anymore, i just get "undefined"
I dont understand why something basic like this does not work for a change of JQM lib..
I paste and example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test radio button</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script>
$(document).delegate("#test", "pageinit", function(event) {
$("button.select").bind ( "click", function (e) {
// Get value of checked radio with JQM 1.0, but get "undefined" with JQM 1.1 RC
alert( $('input:radio[name=rbutton]:checked').val() );
});
$("input[type=radio]").bind ( "change", function (e) {
alert ($(this).val()); //OK
});
});
</script>
</head>
<body>
<div data-role="page" id="test" >
<div data-role="content">
<fieldset data-role="controlgroup">
<input type="radio" name="rbutton" id="rbutton1" value="1" />
<label for="rbutton1">Option 1</label>
<input type="radio" name="rbutton" id="rbutton2" value="2" />
<label for="rbutton2">Option 2</label>
</fieldset>
<button class="select">selected</button>
</div> <!-- /content -->
</div><!-- /page -->
</body>
</html>
This was a bug and is now fixed:
https://github.com/jquery/jquery-mobile/issues/3687#issuecomment-4251371
I want to open a dialog in combination with touchOverflowEnabled: true.
The problem is the following:
The dialog is coming up properly but after a couple of milliseconds, the background below the dialog turns from black into white; the page seems to shrink.
Furthermore, the checkboxes on the main page are smaller; they do not fit the complete page from left to right.
If I do not use touchOverflowEnabled: true everything works well.
Any ideas, how to solve this problem??
Here's my complete sample code (the html-tags are missing):
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="images/icon.png" />
<link rel="apple-touch-startup-image" href="images/tablet_startup.png">
<link rel="stylesheet" href="css/black-tie/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" href="css/jquery-mobile/jquery.mobile-1.0.css" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
touchOverflowEnabled: true,
defaultDialogTransition: 'pop',
orientationChangeEnabled: false
})
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
</head>
<body>
<!-- Begin objective page -->
<section id="questions_objectives" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Goals</h1>
</header><!-- /header -->
<div data-role="content">
<form id="f_objectives">
<h3>Personal Goals</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="o_1" id="o_1">
<label for="o_1">Goal 1</label>
<input type="checkbox" name="o_2" id="o_2">
<label for="o_2">Goal 2</label>
<input type="checkbox" name="o_3" id="o_3">
<label for="o_3">Goal 3</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
<footer data-role="footer" data-id="pluginFooter" data-position="fixed">
<div align="center" data-role="controlgroup" data-iconpos="top" data-type="horizontal">
Abmelden
</div>
</footer><!-- /footer -->
</section><!-- /page -->
<!-- End objective page -->
<!-- Begin logout page -->
<section id="logout_panel" data-role="dialog">
<header data-role="header">
<h1>Logout</h1>
</header><!-- /header -->
<div id="section_logout" name="section_logout" data-role="content">
<h3>Would you like to receive emails?</h3>
<form id="logout_form">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="logout_yes" id="logout_yes" checked="checked" onchange="setLogoutCB('YES')">
<label for="logout_yes">Yes</label>
<input type="checkbox" name="logout_no" id="logout_no" onchange="setLogoutCB('NO')">
<label for="logout_no">No</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
<footer data-role="footer">
<div id="btn_logout" align="center" data-role="controlgroup" data-iconpos="top" data-type="horizontal">
Logout
</div>
</footer><!-- /footer -->
</section>
<!-- End logout page -->
</body>
i would recommend u not to use touchOverflowEnabled anymore. It has its own issues and it wont even be there in jquery mobile from the version 1.1
its going to be deprecated.
there,
In my opinion all your problems come from the jQuery version that you have been using - 1.7
According to the JQM blog
Reminder: 1.0 supports jQuery core 1.6.4 only
Since 1.7 was just recently released and has some significant changes (and improvements), only 1.6.4 is officially supported at this time. We plan on adding 1.7 support when we release version 1.1.
When I use touchOverflowEnabled with 1.6.4 there seems to be no problems as you explained above.
There is still a small bug with iPad and touchOverflowEnabled - the dialog is only half page height but this is also easy fixed with single line of css
.ui-mobile [data-role="dialog"]{height: 100%;}
I hope all this is useful :)
Best Regards,
Mihail
When the proper value is selected I want to open the div with id="new_firm" in a modal dialog. I can't get the dialog to open. I know that the script get's executed since the alert pops up. Can anyone please tell me what's wrong here?
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
function openNewFirmDialog() {
var selected = $("#select_firm option:selected");
var ddValue = selected.text();
if(ddValue === "Add a new company") {
//alert(ddValue);
$('#new_firm').dialog({modal:true});
}
}
</script>
</head>
<body>
<div data-role="page" id="add_details">
<div data-role="content">
<h2>Register hours</h2>
hei
<div data-role="fieldcontain">
<select id="select_firm" data-native-menu="false" onchange="openNewFirmDialog()">
<label for="select_firm" class="select">Select firm:</label>
<option data-placeholder="firm">Firm</option>
<option value="internal">Internal</option>
<option value="new_firm_option">Add a new company</option>
</select>
</div>
<input type="text" id="descritptionTxt" value="Description"/>
<div data-role="controllgroup" data-type="horizontal">
<input type="range" id="number_of_hours" min="0" max="24" step="0.25" value="0" />
<input type="range" id="number_of_minutes" min="0" max="24" step="0.25" value="0" />
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Overview</li>
<li>Add hours </li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="new_firm">
<h2>Add a new firm</h2>
<textarea id="the_new_firm" value="New firm"/>
</div>
</body>
I think you need to add reference to jQuery UI if you want to use dialogs. Available for download here: http://jqueryui.com/demos/dialog/