I am not able to make a bottom-sheet element draggable. I want it in such a way such that when a user drags it vertically up or down, it's height should adjust automatically. And when I click outside the bottom-sheet it should hide.
Please give me your suggestion.
This is the code I am using.
`
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<script src="resizer.js"></script>
<script language="javascript">
angular
.module('firstApplication', ['ngMaterial','mc.resizer'])
.controller('bottomSheetController', bottomSheetController);
function bottomSheetController ($scope, $mdBottomSheet) {
$scope.openBottomSheet = function() {
$mdBottomSheet.show({
template: '<md-bottom-sheet resizer="horizontal" resizer-height="6" resizer-top="#top-content" resizer-bottom="#bottom-content">Learn <b>Angular Material</b> # TutorialsPoint.com!</md-bottom-sheet>'
});
};
}
</script>
</head>
<body ng-app="firstApplication">
<div ng-controller="bottomSheetController as ctrl" layout="column">
<md-content class="md-padding">
<form ng-submit="$event.preventDefault()">
<md-button class="md-raised md-primary" ng-click="openBottomSheet()">
Open Bottom Sheet!
</md-button>
</form>
</md-content>
</div>
</body>## Heading ##
</html>
for resizer, this is the code, save it to resizer.js
angular.module('mc.resizer', []).directive('resizer', function($document) {
return function($scope, $element, $attrs) {
$element.on('mousedown', function(event) {
event.preventDefault();
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
});
function mousemove(event) {
if ($attrs.resizer == 'vertical') {
// Handle vertical resizer
var x = event.pageX;
if ($attrs.resizerMax && x > $attrs.resizerMax) {
x = parseInt($attrs.resizerMax);
}
$element.css({
left: x + 'px'
});
$($attrs.resizerLeft).css({
width: x + 'px'
});
$($attrs.resizerRight).css({
left: (x + parseInt($attrs.resizerWidth)) + 'px'
});
} else {
// Handle horizontal resizer
var y = window.innerHeight - event.pageY;
$element.css({
bottom: y + 'px'
});
$($attrs.resizerTop).css({
bottom: (y -100+ parseInt($attrs.resizerHeight)) + 'px'
});
$($attrs.resizerBottom).css({
height: y + 'px'
});
}
}
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
};
});
`
Related
This question already has answers here:
Google Maps API v3: How to remove all markers?
(32 answers)
Closed 4 years ago.
Could someone be kind enough to share how I can clear the markers in google map before refreshing it with a new set of markers?
In my map, I'm adding markers from an array that contains name, lat and long. The name can be picked from a drop down menu, and then all the markers for that name are added to the page.
Prtoject : Asp.Net Mvc
Link image: https://i.hizliresim.com/V927Py.jpg
When the user adds markers, the previous set of markers remain. I'd like to remove any existing markers before adding the new set.
After reading the documentation, I tried this:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#model List<Project_Map.Models.KONUM>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Complex Marker Icons</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<style>
#map_wrapper {
height: 700px;
}
#map_canvas {
width: 100%;
height: 100%;
}
</style>
<div id="map_wrapper">
<div class="mapping" id="map_canvas">
</div>
</div>
<div id="map"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
jQuery(function ($) {
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBT56XlfxnK2OB4K93vWdrZci_CKjZyQOM&callback=initMap";
document.body.appendChild(script);
});
</script>
<!-- Google Maps Kodu -->
<script type="text/javascript">
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'<img src="#IMG_SRC#" />' +
'</div>' +
//'<h2 id="firstHeading" class="firstHeading">#PERSONEL#</h2>' +
'<div id="bodyContent">' +
'<b>Mesafe: </b>#MESAFE# Km<br />' +
'<b>Tarih: </b> #TARIH#' +
'</p>' +
'</div>' +
'</div>';
$(document).ready(function () {
initMap();
});
function initMap() {
var mapCenter = { lat: 39.684536, lng: 35.337094 };
var map = new google.maps.Map(document.getElementById('map_wrapper'), {
zoom: 6,// haritanın yakınlık derecesi
center: mapCenter, // haritanın merkezi
mapTypeId: google.maps.MapTypeId.HYBRID
});
var infoWindow = new google.maps.InfoWindow();
setInterval(function () {
$.ajax({
url: '#Url.Action("GetMapLocations", "Konum")',
type: "POST",
success: function (data) {
var json = JSON.parse(data);
for (var i = 0; i < json.length; i++) {
var position = {
lat: parseFloat(json[i].lat.replace(',', '.')),
lng: parseFloat(json[i].lng.replace(',', '.'))
};
var marker = new google.maps.Marker({
position: position,
animation: google.maps.Animation.BOUNCE,
map: map,
});
// infoWindow içeriğini replace et
var cs = contentString;
cs = cs.replace("#PERSONEL#", json[i].name);
cs = cs.replace("#MESAFE#", json[i].mesafe);
cs = cs.replace("#TARIH#", json[i].tarih);
cs = cs.replace("#IMG_SRC#", json[i].img);
google.maps.event.addListener(marker, 'click', (function (marker, cs, infoWindow) {
return function () {
infoWindow.setContent(cs);
infoWindow.open(map, this);
passive: true;
};
})(marker, cs, infoWindow));
};
},
error: function (data) { alert("Malesef Sunucunuza Ulaşamıyoruz. Lütfen Tekrar Deneyiniz..."); },
});
}, 5000);
};
</script>
</body>
</html>
You have to set up an array, where you can store the added marker
var gmarkers = [];
If you add a marker you have to store the marker object in the array.
gmarkers.push(marker);
If you want to remove these markers you can use something like:
function removeMarker() {
if (gmarkers.length > 0) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i] != null) {
gmarkers[i].setMap(null);
}
}
}
gmarkers = [];
}
After many attemps and reading on google and here
I have failed to resolve, issue occurs after 'resize' event .
can you help me ?
<!DOCTYPE HTML>
<html>
<head>
<title>wb2</title>
<script type="text/javascript" src="../jquery/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery/jquery-ui.css"/>
<style>
.parent
{
position:relative;
background-color: rgba(255,255,255,0.5); /* transparent 50% */
width:120px;
height:30px;
text-align: center;
border-color : blue;
/* transparent 50% */
border-style:solid
}
.child
{
position:absolute;
left:5px;
top:5px;
background-color:lightgray;
width:100px;
height:20px;
border-color :lightgray;
border-width:1px;
border-style:solid
}
</style>
</head>
<body>
<div id="container" style="width:300px;height:300px;background-color:yellow">
<div id='lp' class='parent' >
<label id='lf' class='child'>label</label>
</div>
<div id='bp' class='parent' >
<button id='bf' class='child'>button</button>
</div>
<div id='sp'class='parent' >
<select id='sf' class='child'>select</select>
</div>
</div>
</body>
<script>
widget = {}
$('.parent').click(function(e)
{
widget = e.target ;
$('.parent').each(function(i, obj)
{
$(obj).draggable( 'disable' )
$(obj).resizable( 'disable' );
$(obj).css({ "border-width":"0px"} );
});
$(widget).draggable( 'enable' )
$(widget).resizable( 'enable' );
$(widget).css({ "border-width":"1px"} );
});
$( window ).resize(function()
{
var border=10 ;
if ( widget !== undefined )
{
ep = widget
epid = $(ep).attr('id' )
ec = ep.children[0]
ecid = $(ec).attr('id' )
w = parseInt ( $(ep).css ( 'width' ) );
h = parseInt ( $(ep).css ( 'height') );
if ( w-border< 0 ) w=border;
if ( h-border < 0 ) h=5;
$(ec).css ( 'width' , w-border )
$(ec).css ( 'height' , h-border )
}
});
$('.parent').each(function(i, obj)
{
$(obj).resizable();
$(obj).draggable();
$(obj).resizable( 'disable' );
$(obj).draggable( 'disable' ) ;
$(obj).css({ "border-width":"0px"} );
});
</script>
</html>
similar question (stack overflow) :
cannot call methods on draggable prior to initialization
Based on my testing, I would advise using this or $(this) versus e.target in your code. There are also a few things you can do to optimize your code. I got all parts working, yet widget is still not populate until after a click event. JSFiddle Example: https://jsfiddle.net/ghv46m0s/3/
JQUERY
$(function() {
widget = {};
$('.parent').click(function(e) {
$('.parent').each(function(k, v) {
$(v)
.resizable('disable')
.draggable('disable')
.css({
"border-width": "0px"
});
});
$(this).draggable('enable')
.resizable('enable')
.css({
"border-width": "1px"
});
widget = $(this);
});
$(window).resize(function(e) {
var border = 10;
console.log("Doing resize of window.");
if (widget !== undefined) {
ep = widget;
epid = $(ep).attr('id');
console.log(ep);
ec = ep.children[0];
ecid = $(ec).attr('id');
w = parseInt($(ep).css('width'));
h = parseInt($(ep).css('height'));
if (w - border < 0) w = border;
if (h - border < 0) h = 5;
$(ec).css('width', w - border);
$(ec).css('height', h - border);
}
});
$('.parent').each(function() {
$(this)
.resizable()
.draggable()
.css({
"border-width": "0px"
});
$(this)
.resizable('disable')
.draggable('disable');
});
});
On click I pass $(this) into widget. When the resize event happens, no errors are generated.
I would advise you create some counter to check for click events on your .parent elements. See example: https://jsfiddle.net/ghv46m0s/2/ If the user resizes the browser, this counts as a resize event and can be part of the problem.
Why does my html page with two 'Mobile' pages inside have to be refreshed or have the little edges moved to show my map in this? See my fiddle or the code below:
I have a mobile page document (html) that has two jQuery Mobile pages.
1. The landing page where you are asked to have your position known.
2. The OpenLayers3 map page which takes your position and centers the map on it when opened.
My trouble is: the map will build and it will center on the position but does not render until after I resize refresh the 'map' edges or the browser window. I suspect it has something to do with page events but am not sure.
Is there a property that I am missing?
Andy
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MobilePg</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css"/>
<script type="text/javascript" src=" http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<style>
#myFooterPosit {
color: gray;
}
</style>
<script>
var x, y;
$(document).ready(function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
});
function showPosition(position) {
var positThing = $('#myFooterPosit');
positThing.text('lat: ' + position.coords.latitude + " : " + " long: " + position.coords.longitude);
x = position.coords.latitude;
y = position.coords.longitude;
}
</script>
</head>
<body>
<script>
$(document).on("pagebeforeshow", "#mapPage", function () {
makeMap();
})
</script>
<!-- Landing page Point of Entry-->
<div data-role="page" id="homePage">
<div data-role="header">
Map
<h1>Mbl Map Input</h1>
Search
</div>
<div data-role="main" class="ui-content">
<p>My Content..</p>
</div>
<div data-role="footer">
<h1><span id="myFooterPosit"></span></h1>
</div>
</div>
<!-- Map Page -->
<script>
function makeMap() {
try {
alert(x + " : " + y);
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([y, x], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
} catch (e) {
alert(e.message);
}
}
</script>
<div data-role="page" id="mapPage">
<div data-role="header">
Home
<h1>Map</h1>
</div>
<div data-role="main" class="ui-content">
<div id="map" class="map" style="height:200px;"></div>
</div>
<div data-role="footer">
<h1><span id="myFooterPosit"></h1>
</div>
</div>
</body>
</html
>
You can use the pagecontainer widget's show event:
http://api.jquerymobile.com/pagecontainer/#event-show
Updated FIDDLE
var x, y;
$(document).on("pagecreate","#homePage", function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
});
$(document).on( "pagecontainershow", function( event, ui ) {
if (ui.toPage.prop("id") == "mapPage"){
makeMap();
}
});
function showPosition(position) {
var positThing = $('#myFooterPosit');
positThing.text('lat: ' + position.coords.latitude + " : " + " long: " + position.coords.longitude);
x = position.coords.latitude;
y = position.coords.longitude;
}
function makeMap() {
try {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([y, x], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
} catch (e) {
alert(e.message);
}
}
I can't seem to make the "reverse" slide effect while handling the "swiperight" event. So, the code below works fine but I would like when I make the "swiperight" that the next page would slide in from the left side and not right hand side. I did search the documentation and added the reverse: true as as it recomends in to the "swiperight":
$.mobile.changePage("#page"+nextPage, {transition : "slide", reverse:true});
but this does not provide the wanted effect. Can you point out where am I doing it wrong?
I have the following code on jsFiddle:
html:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>First page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Second page!</p>
</div>
<footer data-role="footer"r><h1>O'Reilly</h1></footer>
</section>
<section id="page3" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Third page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
jQuery:
(function($) {
var methods = {
init : function(options) {
var settings = {
callback: function() {}
};
if ( options ) {
$.extend( settings, options );
}
$(":jqmData(role='page')").each(function() {
$(this).bind("swiperight", function() {
var nextPage = parseInt($(this).attr("id").split("page")[1]) - 1;
if (nextPage === 0)
nextPage = 3;
$.mobile.changePage("#page"+nextPage, "slide");
});
$(this).bind("swipeleft", function() {
var nextPage = parseInt($(this).attr("id").split("page")[1]) +1;
if (nextPage === 4)
nextPage = 1;
$.mobile.changePage("#page"+nextPage, "slide");
});
})
}
}
$.fn.initApp = function(method) {
if ( methods[method] ) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
}
else {
$.error( 'Method ' + method + ' does not exist' );
}
}
})(jQuery);
$(document).ready(function(){
$().initApp();
});
OK first off you're using a Alpha version of jQM and the docs you are referring to a for jQM 1.1.1. I've updated your jsfiddle to use the latest jQM 1.2
http://jsfiddle.net/GYAB7/2/
And I've added the correct syntax for the reverse swipe transition
$.mobile.changePage("#page"+nextPage, {
transition: "slide",
reverse: false
});
});
and the reverse transition
$.mobile.changePage("#page"+nextPage, {
transition: "slide",
reverse: true
});
});
HI
I am using this demo to display a modal dialog
how do I set the width for dialog if i am using it for google street view:
var point = new GLatLng(svlat, svlon);
var panoClient = new GStreetviewClient();
panoClient.getNearestPanoramaLatLng(point, function (newPoint) {
if (newPoint == null) {
alert("no panorama found for this position!!");
return;
}
panoramaOptions = { latlng: newPoint };
myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
$('#dialogStreetView').dialog("option", "maxWidth", 600);
$('#dialogStreetView').dialog('open');
GEvent.addListener(myPano, "error", handleNoFlash);
});
HTML:
<div id="dialogStreetView" title="Street View Provided by Google... " style="width:300px;height:300px">
<a id="closestreet-view" name="closestreet-view" style="cursor:pointer; text- decoration:underline" >Close</a>
<div name="pano" id="pano" style="width: 300px; height: 300px"></div>
</div>
From the docs:
http://docs.jquery.com/UI/Dialog
this should work:
$("#dialogStreetView").dialog( "option", "width", 460 );
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$("#myDialogBox" ).dialog({
width: 500,
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$( "#myBoxOpener" ).click(function() {
$( "#myDialogBox" ).dialog( "open" );
});
});
</script>
====== body ======
<div id="myDialogBox" title="My Dialog Box">
<div id="myContentLayer">
<p>My Content</p>
</div>
</div>
<button id="myBoxOpener" class="myButton">Open Dialog Box</button>
jsFiddle Demo
Is it just me does everyone except Porta have a syntax error:
$( "#selector" ).dialog( {
width: 500
} );
took from http://api.jqueryui.com/dialog/#option-width
simply just add width:500
$('#dialogStreetView').dialog( width: 500,"option", "maxWidth", 600);