In my project i have some buttons with icon its working fine but the issue is when i long press the button it remains in active state unless i press some other button can any tell what the issue and how can i solve this.
Here is the css code for btn active state.
.ui-btn-active {
border: 1px solid #ccc;
background: #B4B7BA;
font-weight: 700;
color: #fff;
cursor: pointer;
text-shadow: 0 1px 0 #EDF1F4;
text-decoration: none;
background-image: -webkit-linear-gradient(#5393c5, #6facd5);
background-image: -moz-linear-gradient(#5393c5, #6facd5);
background-image: -ms-linear-gradient(#5393c5, #6facd5);
background-image: -o-linear-gradient(#5393c5, #6facd5);
background-image: linear-gradient(#5393c5, #6facd5);
font-family: Helvetica, Arial, sans-serif }
I encountered a similar issue and worked around it with something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App</title>
<script type="text/javascript" src="cordova-2.8.0.js"></script>
<script type="text/javascript" src ="assets/lib/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src ="assets/lib/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="assets/lib/jquery.mobile-1.2.0.css" type="text/css" />
<script type="text/javascript" >
$.mobile.defaultPageTransition = 'none'; // Remove default page transition
$('div[data-role="page"]').on('pagecreate',function(event, ui){
$('div[data-role="footer"] a', $(this)).on("taphold",function(e){
$(this).addClass("ui-btn-active");
$(this).one("touchend", function(e){
e.preventDefault();
$(this).trigger("click", e.data); // Remove this if you don't want the long press to act as a click
$(this).removeClass("ui-btn-down-a ui-btn-active");
return false;
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page-1">
<div data-role="content">
<p>Page 1</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page-2">
<div data-role="content">
<p>Page 2</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You can download my Eclipse project and compiled APK here
Related
Im working on carousel but buttons are not working and it has border. Tried to remove border with css but this time buttons also dissappered.
buttons are working on codeply: bootstrap carousel buttons
/* html tags */
body {
font-family: "Montserrat";
font-weight: 900;
}
h2 {
font-family: "Montserrat";
font-size: 3rem;
line-height: 1.5;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
/* Testimonials Sections */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!--Bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
rel="stylesheet">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/4c02f86903.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<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 src="images/dog-img.jpg" class="testimonial-image" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img src="images/lady-img.jpg" class="testimonial-image" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</section>
</body>
is it necessary to add some extras in head section?
I cant figure out the solutions
The problem is with the imports of Bootstrap. You have included Bootstrap version 4.3.1, but used the html syntax for Bootstrap 5+. You also included the js twice.
Corrected code (including your custom CSS):
body {
font-family: "Montserrat";
font-weight: 900;
}
h2 {
font-family: "Montserrat";
font-size: 3rem;
line-height: 1.5;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
/* Testimonials Sections */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff;
}
.carousel-item {
height: 500px;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color:blue;">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" class="testimonial-image" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item" style="background-color:red;">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img src="images/lady-img.jpg" class="testimonial-image" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
You'd need to add your stylesheet here, otherwise this should work fine.
Im using JQM and phonegap to create a simple app. In Android everything's fine, but when I run the app in an IOS device the keyboard makes some strange effect on the screen
If the list is not scrolled, everything seems to be working,
but if I scroll the list a little bit and make the keyboard appear, the hell breaks loose:
HTML
<div id="my-wrapper">
<ul data-role="listview" data-theme="a" data-filter="true" data-filter-theme='b' data-filter-placeholder="Buscar Producto y/o Droga" id="RemediosList">
</ul>
</div>
and the CSS
#my-wrapper {
top : 45px;
}
#my-wrapper form {
position :fixed;
top : 87px;
left : 15px;
width : 100%;
z-index : 10000;
}
Any help, will be welcomed!
I have tried to remove the header and only have a fixed seachbox. Works perfect on desktop and Android. But I get the same result in iOS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>title</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
#wrp {
padding-top : 45px;
}
#wrp form {
position :fixed!important;
top : 13px;
left : 15px;
width : 100%;
z-index : 2;
}
</style>
</head>
<body>
<div data-role="page" data-theme="a" data-dom-cache="true">
<div data-role="content">
<div id="wrp">
<ul id="search" data-role="listview" data-filter="true" data-filter-placeholder="Sök.." data-inset="false" data-filter-theme="a">
<li><h2>header<h2></li>
</ul>
</div><!-- /my wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
I'm starting with developing for webpage available on mobile.
I need to have an application with 6 big icons which will consume almost all visible space. When mobile is placed horizontaly I'd like to have those icons 3 rows in 2 columns. And when mobile is placed vertically I'd like to have them 2 rows and 3 columns. I can't declare single icon widht as for example 100px and then use simple float:left - I'd like my loyout to be fluid.
I plan to use jQuery mobile in my page.
I made you a working example, just copy it into an empty html file.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
#custom-icon {
position: relative;
float: left;
width: 33.333%;
height: 50%;
}
.ui-content {
padding: 0 !important;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
detectOrientationMode();
setRealContentHeight();
});
$(window).bind('orientationchange', function() {
detectOrientationMode();
setRealContentHeight();
});
function detectOrientationMode() {
if($(window).height() > $(window).width()) {
$('[data-role="content"] div').each(function(){
$(this).css({'width':'50%','height':'33.33333%'});
});
} else {
$('[data-role="content"] div').each(function(){
$(this).css({'width':'33.33333%','height':'50%'});
});
}
}
function setRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
$.mobile.activePage.find("div[data-role='content']").height(content_height);
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<div id="custom-icon" style="background: red;">Icon 1</div>
<div id="custom-icon" style="background: blue;">Icon 2</div>
<div id="custom-icon" style="background: green;">Icon 3</div>
<div id="custom-icon" style="background: yellow;">Icon 4</div>
<div id="custom-icon" style="background: orange;">Icon 5</div>
<div id="custom-icon" style="background: violet;">Icon 6</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Tested on :
Android 4.1.1 Chrome
iPad iOS 6.0
I need to click on a button in header then overlay will show like Sencha Touch:
how to do this overlay with jQueryMobile in the same page
JsFiddle Example:
http://jsfiddle.net/ReMZ6/184/
Currently this overlay support for dialog is not available in jquery mobile.But it is expected to come in future versions.They have put up a demo of how that feature is going to be in this url - http://filamentgroup.com/tests/popup/docs/pages/popup/index.html
For the time being you can use the following code to achieve something similar to what you need:
<!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.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#show-overlay").live("click",function(){
$(".overlay").toggle(50);
});
$(".ui-mobile-viewport").live("click",function(event){
var target = event.target;
//Close the overlay if you have clicked on anywhere in body except the overlay itself and the button in header.
//If the check for button in this if is skipped,you will not be able to show the overlay.Clicking on button in header to close is //handled by previous event handler.
if($('#show-overlay').find(target).length==0 && $('.overlay').find(target).length==0) {
$(".overlay").hide(50);
}
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.overlay{
width:150px;
position:absolute;
top:45px;
left:5px;
border-radius:5px;
background:#25374c;
z-index:1501;
padding:3px 5px 5px 5px;
}
.overlay-header{
text-align:center;
color:#fff;
margin-bottom:3px;
}
</style>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Title</h1>
<a name="submit" value="submit-value" id="show-overlay" data-icon="gear">OverLay</a>
</div>
<div data-role="content">
<ul id='company_list' data-role='listview' data-inset='false'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
<div class="overlay" style="display:none">
<div class="overlay-header">
Title
</div>
<div class="overlay-content">
<ul id='tas_list' data-role='listview' data-theme="e">
<li>Overlay item 1</li>
<li>Overlay item 2</li>
<li>Overlay item 3</li>
<li>Overlay item 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
A demo here - http://jsfiddle.net/K3Tpu/
This is just a rough draft only and there might be some issues.
Let me know if that helps.
I have this code:
<html>
<head>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="css/themename/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(document).ready(function(){ $( "#selectable" ).selectable(); });
</script>
</head>
<body>
<form method='post'>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
</ol>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>
</div><!-- End demo-description -->
</form>
</body>
</html>
I downloaded the jquery but it has no result
I used this site:
http://jqueryui.com/demos/selectable/#event-create
what is wrong here?
You must embed jQuery before jQuery UI, because UI uses jQuery.
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="css/themename/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
instead of
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="css/themename/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
Did you try placing your code inside of a ready function?
$(document).ready(function() {
// put all your jQuery goodness in here.
});
Try putting the
$(document).ready(function(){ $( "#selectable" ).selectable(); });
Inside the <head></head> element. Also the <script src=".."> should be in <head> as well.