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.
Related
I'm working on a web application which uses classical ASP .NET MVC, but with bootstrap. The default page template I use looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#ViewData["Title"] - Gymfed JuryTool</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<!-- Our Custom CSS -->
<link rel="stylesheet" href="~/css/style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/612fd28750.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>The Site</h3>
<strong>JT</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a asp-area="" asp-controller="Home" asp-action="Index">
<i class="fas fa-home"></i>
Start
</a>
</li>
#{
if (User.Identity.IsAuthenticated)
{
if (userMenus != null)
{
foreach (var userMenu in userMenus)
{
// Debug
Debug.WriteLine($"userMenu = {JsonConvert.SerializeObject(userMenu)}");
var controlName = userMenu.MenuName + "SubMenu";
<li>
<a href="##controlName" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
#userMenu.Caption
</a>
<ul class="collapse list-unstyled" id="#controlName">
#foreach (var menuItem in userMenu.MenuElements)
{
// Debug
Debug.WriteLine($"menuItem = {JsonConvert.SerializeObject(menuItem)}");
<li>
<a asp-area=#menuItem.AspArea asp-controller=#menuItem.AspController asp-action=#menuItem.AspAction>#menuItem.ElementName</a>
</li>
}
</ul>
</li>
}
}
}
}
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<partial name="_LoginPartial" />
</li>
</ul>
</div>
</div>
</nav>
#RenderBody()
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - <i>Gymfed</i>
</div>
</footer>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
The CSS files I include primarily are used for the collapsable menus and the likes.
Now the site looks fine, but to show everything on my screen I need to change the zoom to 80%.
I know Boostrap should be doing that for me, but though I follow their examples and everything looks fine when I zoom out to 80%...
I was wondering how I can have this happen automatically? Been looking around, but can't seem to find an actual answer to my question.
I am writing an application that allows a user to drag elements from one list to another in the horizontal direction. I made a jsfiddle for it. based on a jQuery example:
Here's the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable1, #sortable2 {
border: 1px solid #eee;
list-style-type: none;
height: 50px;
}
#sortable1 li, #sortable2 li {
margin: 5px;
padding: 5px;
border: 1px solid black;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Larger Item 2</li>
<li class="ui-state-default">I3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Humongous Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</body>
</html>
My problem is, some elements wrap text as soon as I start to drag them. Not all of them, though. Is there a way to prevent this?
I came up with a solution, which I don't find completely satisfactory, but if I replace the spaces in the draggable divs with it prevents the wrap. The updated fiddle is here, which shows two sets of draggables, one with spaces, one with as seen with these two rows:
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Larger Item 2</li>
<li class="ui-state-default">I3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Humongous Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Larger Item 2</li>
<li class="ui-state-highlight">I3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Humongous Item 5</li>
</ul>
The highlighted ones in the second row don't wrap when dragged. Not the best solution, but workable.
I'm stuck trying to change the color of my expandable list after it's expanded. It only works for the default color "red" and after I expand it, it changes to grey instead of yellow like it should. Also, how would I change each list to a different color? For example A can be red, B can be Green, etc. Finally, I is there any way to change the count bubble color and its text color? Here is my code.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<style>
.ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle{
background:red;
}
.ui-collapsible-heading-toggle{
background:yellow;
}
</style>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Theming Collapsible Lists</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" >
<h4>A <span class="ui-li-count" id="red_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div data-role="collapsible" >
<h4>B<span class="ui-li-count" id="green_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
You can add some CSS classes to the markup as needed and then set the color rules. For example, to get different colors for different collapsibles, give each collapsible its own class (acol, bcol in my example). Then you can also assign classes to the count bubbles (redCount, greenCount in my example)
<div data-role="collapsible" class="acol">
<h4>A <span class="ui-li-count redCount" id="red_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div data-role="collapsible" class="bcol">
<h4>B<span class="ui-li-count greenCount" id="green_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
Then the CSS rules:
.acol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
background:red !important;
}
.acol .ui-collapsible-heading-toggle {
background:yellow !important;
}
.bcol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
background:green !important;
}
.bcol .ui-collapsible-heading-toggle {
background:orange !important;
}
.redCount {
color: red;
background-color: #333;
text-shadow: none;
}
.greenCount {
color: green;
background-color: #333;
text-shadow: none;
}
Here is a DEMO
NOTE: obviously you should tweak the colors to actually make it look good ;)
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
I am creating a collapsible set dynamically. Like below
div = '<div data-role="collapsible" data-inset="false" data-iconpos="right" data-collapsible="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"><h3>'+
row1["name"]+'<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-iconpos="right">'+count+'</span></h3></div>';
Now i need to add a button to the each collapsible set and upon clicking on the button i need to get the collapsible element content but collapsible list should not expand.
How can i do that?
Thanks:)
Example
Working example: http://jsfiddle.net/Gajotres/z3hsb/
Description
What you need to understand here is how to use:
e.stopPropagation();
e.stopImmediatePropagation();
Your current problem is that click event is propagating through button and hitting collapsible, which in turn opens/closes it. It can be prevented with if functions stopPropagation() and stopImmediatePropagation() are used.
Code
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="List" data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div id='ListItem' data-role='collapsible' data-content-theme='b' data-collapsed='true'>
<h3><p>Title</p>
<div id="button-set">
<input type='button' data-theme='b' value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' id="show-content"/>
</div>
</h3>
<p>CONTENT</p>
</div>
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
$('#show-content').on('click', function(e) {
alert($('#ListItem').find('h3 p').text());
e.stopPropagation();
e.stopImmediatePropagation();
});
});
CSS:
#button-set {
float:right;
margin-top: -20px;
}