I was working on a jQueryMobile website and this is what I made:
<body>
<p class="tekst">De "Snelle" methode, berekent alleen op het lichaamsgewicht, en is alleen nuttig voor mensen met een normaal vetpercentage maar zelfs is deze methode onnauwkeurig.</p>
<div class="ui-grid-c">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:65px">Gewicht (kg)<input type="text" name="m1kg" id="m1kg" value=""></div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:65px">Afvallen:<input type="text" name="m1cut" id="m1Cut" value=""></div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:65px">Onderhoud:<input type="text" name="m1Onderhoud" id="m1Onderhoud" value=""></div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:65px">Aankomen:<input type="text" name="m1Bulk" id="m1Bulk" value=""></div></div>
</div><!-- /grid-c -->
<button id="btnmethod1">Bereken</button>
<p class="tekst">De Formule van Harris-Benedict, berekent op lichaamsgewicht,lenge,leeftijd en activiteitsniveau. Een vrij betrouwbare methode om te gebruiken.</p>
</body>
Now, when I open this website on my mobile phone (Iphone 4), the screen is not proper resized and you have to zoom in to read what is there, example:
As you can see you can barely see what is going on until you zoom in. The grid uses 25%/25%/25%/25% to display the blocks but for some reason the width of the blocks/textboxes (?) are too large to fit in, what I want is when you open the website there is no possibility to zoom in and the buttons should perfectly fit in, does anyone know how to accomplish this?
Viewport meta tag must be added into a HEAD so jQuery Mobile applications can be viewed on mobile devices:
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no"/>
Also you will need to redesign your page look, if you properly display this on mobile device (in my case Samsung Galaxy S3) your input boxes will become very short.
You can test it here: http://www.fajrunt.org/viewport.html , just open it on your iPhone.
If it is too large you can modify scale, if you go below 1 it will look smaller. For example you can try 0.75.
Your final code should look like this:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no"/>
<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/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<p class="tekst">De "Snelle" methode, berekent alleen op het lichaamsgewicht, en is alleen nuttig voor mensen met een normaal vetpercentage maar zelfs is deze methode onnauwkeurig.</p>
<div class="ui-grid-c">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:65px">Gewicht (kg)<input type="text" name="m1kg" id="m1kg" value=""/>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e" style="height:65px">Afvallen:<input type="text" name="m1cut" id="m1Cut" value=""/>
</div>
</div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:65px">Onderhoud:<input type="text" name="m1Onderhoud" id="m1Onderhoud" value=""/>
</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-e" style="height:65px">Aankomen:<input type="text" name="m1Bulk" id="m1Bulk" value=""/></div>
</div>
</div><!-- /grid-c -->
<button id="btnmethod1">Bereken</button>
<p class="tekst">De Formule van Harris-Benedict, berekent op lichaamsgewicht,lenge,leeftijd en activiteitsniveau. Een vrij betrouwbare methode om te gebruiken.</p>
</div>
</div>
</body>
</html>
Related
I can't seem to figure out why the buttons don't work when clicked on. Both carousel items are there (confirmed by changing which is active).
I have looked on the getbootstrap website and followed the code how it explains but there is no change.
Could it be that I'm missing a link in the head that I could not find / am unaware of?
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TinDog</title>
<!-- Bootstrap Scripts -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="css/styles2.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>
<!-- Testimonial Section -->
<section id="testimonials">
<div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="images/dog-img.jpg" alt="dog-image">
<em class="pebbles">Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2>My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-img" src="images/lady-img.jpg" alt="lady-img">
<em class="beverly">Beverly, Illinois</em>
</div>
</div>
<!-- Carousel Buttons -->
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
Remove the id="testimonials from this line
<section id="testimonials">
an ID should only be used once, and in this case the id testimonials is on the line that it needs to be (the buttons use this as their target data-bs-target="#testimonials")
<div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
I am noticing that the version number of your bootstrap CSS and JS do not match. I would swap these CDNs with the ones provided on the bootstrap 5 page this helped give the desired result.
CSS - 5.0.0-beta2
https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css
JS - 5.0.0-alpha2
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>
<!-- A blank template with twitter bootsrap and dependencies added as external resources, to play around. Feel free to fork this and use. -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TinDog</title>
<!-- Bootstrap Scripts -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles2.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>
<!-- Testimonial Section -->
<section >
<div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="https://picsum.photos/200/300" alt="dog-image">
<em class="pebbles">Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2>My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-img" src="https://picsum.photos/500/300" alt="lady-img">
<em class="beverly">Beverly, Illinois</em>
</div>
</div>
<!-- Carousel Buttons -->
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
Change the buttons to anchors and use href. This is from bootstrap.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Good afternoon ...
My problem is this (link to issue image).
When using, for example, a COLLAPSIBLE control, this adds me a higher or lower margin.
I see no statement on the same CSS to display as well.
The code is nothing strange.
Appears well in the pages of demonstrations or others pages. This happens to me on multiple browsers including Chrome and Firefox only with my page.
Thanks for your help and sorry my English.
jQueryMobile version 1.4.5.min
jQuery version 1.11.2.min
<!doctype html>
<html>
<head>
<title>Documento sin título</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" data-content-theme="b">
<div data-role="header">
<h1>Definición de Formulario</h1>
<input type="text" placeholder="Nombre del formulario" value="" id="nombremapa" name="nombre" />
</div><!-- HEADER -->
<div data-role="content" data-position="fixed" id="campos">
</div><!-- CONTENT -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar" >
<ul>
<li>Agregar</li>
<li>Quitar</li>
<li>Editar</li>
<li>Información</li>
<li>Enviar</li>
</ul>
</div>
<div data-role="popup" id="popupMenuAgregar" data-theme="b">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Choose an action</li>
<li><a id="add_texto">Texto</a></li>
<li><a id="add_numero">Numero</a></li>
<li><a id="add_fecha">Fecha</a></li>
<li><a id="add_lista">Lista</a></li>
</ul>
</div>
</div><!-- FOOTER -->
</div><!-- PAGE -->
</body>
</html>
http://jsfiddle.net/zwLvjrc2/
I want to add "back button" panel for my app but only for iphones.
I am using vs2013 Multi Device Hybrid Apps plugin to develope mobile app. After a lot errors and problems I managed to start coding phase, the thing is android devices have panel to "back" or other stuff. But I need to set it also for iphones. Project has "merges" folder, I believe that part using for it. (I dont want to add that extra button for whole project, only iphone is enough for me as you know android devices have panel to "back" or other stuff.)
If its possible; how can I do that? Here is one of my page example ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Föy</title>
<link href="css/index.css" rel="stylesheet" />
<script src="scripts/jquery-1.8.3.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/login.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
window.location = "main.html";
})
});
</script>
</head>
<body>
<div class="container" id="login-block">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<h3 class="animated bounceInDown">FÖY Fatura Ödeme Sistemleri</h3>
<div class="login-box clearfix animated flipInY">
<div class="login-logo">
<img src="images/logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form">
<div class="alert alert-error hide">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Hata!</h4>
İşlem Sırasında Hata Oluştu
</div>
<div>
<input type="text" class="form-control" id="txtUser" placeholder="Bayi Kodu" required />
<input type="password" class="form-control" id="txtPassword" placeholder="Şifre" required />
<button type="button" id="btnLogin" class="btn btn-red">GİRİŞ</button>
</div>
<div class="login-links">
<a href="forgot-password.html">
Şifremi Unuttum?
</a>
<br />
<a href="sign-up.html">
Bayi Değilim? <strong>Bayi Ol!</strong>
</a>
</div>
</div>
</div>
<div class="social-login row">
<div class="fb-login col-lg-6 col-md-12 animated flipInX">
<strong>Facebook</strong> ile bağlan
</div>
<div class="twit-login col-lg-6 col-md-12 animated flipInX">
<strong>Twitter</strong> ile bağlan
</div>
</div>
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Thank You , Best Regards
Put your platform specific file within the merges\ios\ folder and it should get picked up during build. More information and guidance can be found here
Has anyone ever run into the problem of not neing able to type in spaces when using a text input type in jquery-mobile
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css"/>
<link rel="stylesheet" type="text/css" href="mobile-css.css"/>
</head>
<body>
<div data-role="dialog" data-theme="d">
<div data-role="header" data-theme="d"><h5 style="margin: 0.6em 10% 0.5em;">Comment</h5></div>
<div id="" data-role="content" data-theme="d">
<label for="txtComment">Your Comment:</label>
<input type="text" id="txtComment" data-theme="d">
</div>
<div data-role="footer" data-theme="d">
<a href="#" data-role="button" data-mini="true" data-inline="true" data-transition="fade"
class="cancelButton" data-theme="c" data-rel="back">Cancel</a>
Save
</div>
</div>
</body>
</html>
Try this simple example (tested on iPhone 5), which uses the latest version of jQuery Mobile at the moment (1.2.0), and let me know if this works:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no' />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<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.1.min.js"></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">
<div data-role="header" data-position="fixed">
<h1>HEADER</h1>
</div>
<div data-role="content">
<h1>my content</h1>
<input type="text"/>
<a data-role="button" href="#mydialog" data-rel="dialog">OPEN DIALOG</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>FOOTER</h1>
</div>
</div>
<!-- YOUR DIALOG -->
<div data-role="dialog" data-theme="d" id="mydialog">
<div data-role="header" data-theme="d">
<h5 style="margin: 0.6em 10% 0.5em;">Comment</h5>
</div>
<div id="" data-role="content" data-theme="d">
<label for="txtComment">Your Comment:</label>
<input type="text" id="txtComment" data-theme="d">
</div>
<div data-role="footer" data-theme="d">
<a href="#" data-role="button" data-mini="true" data-inline="true" data-transition="fade"
class="cancelButton" data-theme="c" data-rel="back">Cancel</a>
Save
</div>
</div>
</body>
</html>
You should get the following:
Try typing spaces in the input textbox:
Then, click on the button OPEN DIALOG, which will lead you to your dialog box (the code you provided), and try inputting spaces inside the dialog's input textbox:
I hope this will work for you. Anyway, let me know about your results mate.
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