I am applying draggable event of jQuery UI library to a popup window. Dragging works well,but the problem is, if the window has scroll and if I click on the scroll drag event is triggered and popup is being moved and drag event is not released even the scroll event is released... Can you please tel me how to overcome it...
Here is my code snippet.....Please check and let me know what's the error
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>
<style>
#Outer{
width:400px;
height:100px;
border:1px solid blue;
position:absolute;
overflow:auto;
}
#Hdr{
background:#ffcc99;
border-bottom:1px solid blue;
}
</style>
</head>
<body>
<div id="Outer">
<div id="Hdr">About India</div>
<div>
The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).
Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a
newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare.
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('#Outer').draggable();
});
</script>
</html>
You may want to use a handler to bypass that problem: Like here fiddle
HTML :
<div id="Outer">
<div id="Hdr">About India</div>
<div id="Inner">
The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).
Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a
newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare.
</div>
</div>
CSS:
#Outer{
width:400px;
border:1px solid blue;
position:absolute;
}
#Inner {
width:400px;
height:80px;
position:absolute;
border:1px solid blue;
overflow:auto;
}
#Hdr{
background:#ffcc99;
border-bottom:1px solid blue;
}
JS :
$(document).ready(function(){
$('#Outer').draggable({handle: "#Hdr"});
});
Related
I think I understand how placeholders work regarding select2 library.
There is a thing bugging me for a while already, how to have non-escaped placeholder on multiple selects.
The reason is I like to place an icon at the placeholder.
Single selects uses an additional option tag and the property escapeMarkup at the select2 options object.
$('mySelector').select2({
escapeMarkup: function(markup){
return markup;
}
});
Nothing of that is possible at multiple selects since the placeholder is placed at an input tag, so html markup is escaped and you get the <i> tag instead of the icon.
Is there a workarund for this?
#Marcos i have done some solution regarding placeholder regarding select2 library.
<select class="select2 selectPlaceholder" multiple="multiple"></select>
<script>
$(".selectPlaceholder").select2({
placeholder: "Select Product",
allowClear: true
});
</script>
Optional
allowClear: true
Please let me know if i am right because i got your question but still i have some doubt
understanding Que.
Taking your previous comment as a reference:
"the idea is to place a font awesome icon at the placeholder and
preventing select2 from escaping it, and i'm getting the i tag instead
of the icon"
...and if I understood correctly, you want to place a Font Awesome icon on the Placeholder of the Select2 element and keep it there, correct?
Check the following code where I'm inserting a DIV that contains a Font Awesome icon (the little airplane) and placing it on top of the Input used for searching. Even when you select different items from the Select (is a Multiple Select as you needed) the icon remains in the placeholder and also it has a text by default.
Remember to add the class="tab" in case you don't see the Icon.
$(document).ready(function(){
$("#sel1").select2({
placeholder: 'Search here...',
allowClear: true
});
$(".select2-search.select2-search--inline").prepend("<div class='fab'></div>");
});
select {
width:300px;
}
.multi {
padding:10px;
font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
font-style: normal;
font-weight: 600;
text-decoration: inherit;
}
.top {
position: absolute;
left: 0px; top:0px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- select2-bootstrap4-theme -->
<link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet"> <!-- for live demo page -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<div class="container-fluid" style="width: 100%;">
<select class="multi fab" multiple placeholder="" data-allow-clear="1" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<script>
</script>
</body>
</html>
I'm doing a bit of a POC for the WP8.1 application written in HTML5/JS that includes the maps in the webviews.
Scenario: I have 2 webviews with exactly the same HTML structure I'm referring the webviews to. In one webview I'm loading the bing.html that loads the bing maps. In other webview I'm loading the google maps map via the google.html.
bing.html and google.html have the same HTML structure and that is:
Bing.html
<!DOCTYPE html>
<html style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" src="/pages/map/bing.js"></script>
</head>
<body onload="webContext.onLoad();" style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<div id="mapDiv" style="position: relative; width: 100%; height: 100%"></div>
</body>
</html>
google.html
<!DOCTYPE html>
<html style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Google Maps API reference -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="/pages/map/map.js"></script>
</head>
<body onload="initialize()" style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<div id="mapdisplay" style="width:100%;height:100%; margin: 0 auto;"></div>
</body>
</html>
And the result is, that the Bing Map tiles appear to be blurred, not as sharp as on bing maps page itself. Google Maps look top notch.
However, when I open the bing.html itself from local file system, the map tiles are sharp.
Possibly this is a scaling issue. Whereas the Google code recognizes the display scaling to be greater than 100%, it loads so called retina or high-dpi or high-ppi images. The Bing map code has the option enableHighDpi to enable it manually:
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{
credentials: "YourBingMapsKey",
center: new Microsoft.Maps.Location(37.769831,-122.447004),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 12,
enableHighDpi: true,
});
source
It loads high dpi images then, which should be less blurry.
I don't know how good the Bing Maps code then detects high dpi devices (non-high-dpi devices shouldn't get high-dpi images to save data.). So feel free to also use the following code to detect the device pixel ratio using a CSS media query and only load high dpi images if necessary:
var isHighDpiDisplay = false;
if (window.matchMedia) {
var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
if (mq && mq.matches || (window.devicePixelRatio > 1)) {
isHighDpiDisplay = true;
}
}
I've built a small HTML game which I plan to export to iOS and I want to lock the orientation to landscape. I've selected orientation to landscape under build settings but that doesn't seem to lock the orientation. I've tried experimenting with the following code:
<script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
function onDeviceReady(){
intel.xdk.device.setRotateOrientation('landscape');
intel.xdk.device.hideSplashScreen();
}
</script>
however I'm not sure if it's correct or where to put it in my index.html file. Could someone help me by telling what code is correct and where it would fit into my index.html file?
My full code (without the above statement) can be seen below:
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Bounce Bounce Bear</title>
<!-- Allow fullscreen mode on iOS devices. (These are Apple specific meta tags.) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="256x256" href="icon-256.png" />
<meta name="HandheldFriendly" content="true" />
<!-- Chrome for Android web app tags -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="256x256" href="icon-256.png" />
<!-- All margins and padding must be zero for the canvas to fill the screen. -->
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
background: #000;
color: #fff;
overflow: hidden;
touch-action: none;
-ms-touch-action: none;
}
canvas {
touch-action-delay: none;
touch-action: none;
-ms-touch-action: none;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div id="c2canvasdiv">
<!-- The canvas the project will render to. If you change its ID, don't forget to change the
ID the runtime looks for in the jQuery events above (ready() and cr_sizeCanvas()). -->
<canvas id="c2canvas" width="1024" height="768">
<!-- This text is displayed if the visitor's browser does not support HTML5.
You can change it, but it is a good idea to link to a description of a browser
and provide some links to download some popular HTML5-compatible browsers. -->
<h1>Your browser does not appear to support HTML5. Try upgrading your browser to the latest version. What is a browser?
<br/><br/>Microsoft Internet Explorer<br/>
<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a <br/>
Google Chrome<br/>
Apple Safari<br/>
Google Chrome Frame for Internet Explorer<br/></h1>
</canvas>
</div>
<!-- Construct 2 exported games require jQuery. -->
<script src="jquery-2.1.1.min.js"></script>
<script src="cordova.js"></script>
<!-- The runtime script. You can rename it, but don't forget to rename the reference here as well.
This file will have been minified and obfuscated if you enabled "Minify script" during export. -->
<script src="c2runtime.js"></script>
<script>
jQuery(window).resize(function() {
cr_sizeCanvas(jQuery(window).width(), jQuery(window).height());
});
document.addEventListener("deviceready", function ()
{
window["c2iscordova"] = true;
// Create new runtime using the c2canvas
cr_createRuntime("c2canvas");
document.addEventListener("pause", function() {
cr_setSuspended(true);
}, false);
document.addEventListener("resume", function() {
cr_setSuspended(false);
}, false);
}, false);
</script>
</body>
</html>
I have created a simple application in Worklight 6.0 with jquery mobile 1.3.2.
This is an single page application with Header, Content and Footer. Necessary jquery mobile javascript and css files are included.
Given below is the html file from the application.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>DemoApp</title/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
<link rel="shortcut icon" href="images/favicon.png"/>
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
<link rel="stylesheet" href="css/DemoApp.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"/>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
<div data-role="header"><h1>Header</h1></div>
<div data-role="content">Content</div>
<div data-role="footer" data-position="fixed"><h1>Footer</h1></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/DemoApp.js"></script>
<script src="js/messages.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</body>
</html>
I have created the Windows Phone 8 Environment and built the worklight project. With the help of Microsoft Visual Studio Express 2012 for Windows Phone the application is launched in windows phone emulator.
When I scroll the screen I am getting the following response.
Please suggest a way to solve this issue.
If what you want is fixed header/footer with the content in between scrollable, then try:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h3>Header</h3>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h3>Footer</h3>
</div>
</div>
The tap-toggle setting is to disable hiding the header/footer on tap, but I haven't been able to get JQM fixed headers/footers to behave at all unless I disable it.
I've also found on Windows Phone 8, the footer will position itself too high. So I have to add the following to the CSS:
#media screen and (orientation: portrait) {
#-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
Can you show us the app CSS that you are using DemoApp.css. Try disabling the default css in it and running again.
The problem seems to be of the css having been told that the screen size is something bigger than the actual device size.
Regards,
Elvis
I am trying to use the latest stable Jquery Mobile version 1.1.0 that was announced on april 13 2012. But I noticed something weird.
If I try to float a 'p' tag in the footer, the background becomes white. This is not the case if I use the 1.1.0-rc.1 version. Am I overlooking something? Because now I cant use the latest version.
This is the code, you can just copy and paste it to see it.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- New version 1.1.0 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- New version 1.1.0 -->
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style type="text/css">
p {
float:right;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
<p>test</p>
</div>
</div>
</body>
</html>
This fixed the problem: use text-align: right instead of float: right
It seems that with jQuery Mobile version 1.1.0, the footer doesn't get the height set, so therefore the background is not visible. Your solution works for text, but not when you want to have two divs floated next to each other.
I solved it by applying this style:
#footer {
clear: both;
overflow: hidden;
}