I'm new to this as you can see. I have a simple code but for some reason the dialog box never goes to the center of the screen and does not work on Safari. This is the complete code. It only start a message when any key is pressed. Can anybody help me please.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="B:/wamp/www/jquery/js/jquery-1.8.2.js"></script>
<link rel="stylesheet" href="B:/wamp/www/jquery/development-bundle/themes/base/jquery.ui.all.css">
<script src="B:/wamp/www/jquery/development-bundle/external/jquery.bgiframe-2.1.2.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.core.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="B:B:/wamp/www/jquery/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="B:B:/wamp/www/jquery/development-bundle/ui/jquery.ui.position.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="B:/wamp/www/jquery/development-bundle/demos/demos.css">
<script >
$(document).ready(function()
{
$("#text1").keyup(function()
{
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
});
});
</script>
<body>
<div id="dialog-message"></div>
<input type="text" id="text1"/>
</body>
</html>
You have jquery.ui.position.js, so...
$( "#dialog-message" ).dialog({
modal: true,
position: 'center',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
...should work
Related
I am making an angularJS app where my goal is, when a user clicks a button inside one of the ng-repeat div, it should get focus by blurring all the other entries in of ng-repeat. I have created a minimal plunkr and described the problem with the image below.
I have this html
<ul ng-repeat="detail in details">
<li>
<div style="border-style:solid;"> {{detail.name}} </div>
</li>
</ul>
and the Empty Controller:
app.controller('MainCtrl', function ($scope) {
$scope.details =
[
{ "name": "Employees" },
{ "name": "Support" }
];
$scope.details.name =
[
{ "prof": "enginerr" },
{ "prof": "doctor" }
];
});
I have also added an image for demonstration
and created a plunkr for reference.
I am trying to achieve the bottom part of the image.
Thanks in advance.
Here's the sample I have created , please refer to it . Hopes this help you out. Thanks.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.details = [
{ "name": "Employees" },
{ "name": "Support" }
];
$scope.details.name = [
{ "prof": "enginerr" },
{ "prof": "doctor" }
];
$scope.isActive=false;
$scope.clickMe = function(index){
$scope.currentIndex=index;
$scope.isActive=!$scope.isActive;
}
});
/* Put your css in here */
.notActive {
pointer-events: none;
cursor: not-allowed;
opacity: 0.3;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-repeat="detail in details">
<li style="border-style:solid;" ng-class="{'notActive':isActive && currentIndex!=$index}">
<div > {{detail.name}} </div>
<button ng-click="clickMe($index)">Click me</button>
</li>
</ul>
</body>
</html>
I have a less file which requests 7 external stylesheet and script for single page. I have attached screenshot for more details.
Screenshot
Code as below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="JS/jquery-1.10.2.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="JS/bootstrap.js" type="text/javascript"></script>
<script src="JS/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="JS/jquery-1.7.2.min.js"></script>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="icon" href="Images/favicon.ico" />
<link rel="stylesheet/less" type="text/css" href="css/CubeCss/CubeMetropolis.less" />
<script src="JS/less.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if (document.getElementById("SelectedTheme").value == 'Office2010Black') {
less.modifyVars
({
'#baseColor': "#828282",
'#baseActiveColor': "#f2f5f8",
'#baseBg': "#f2f5f8"
});
}
if (document.getElementById("SelectedTheme").value == 'Youthful') {
less.modifyVars
({
'#baseColor': "#009688",
'#baseActiveColor': "#68d2c8",
'#baseBg': "#ecfffd"
});
}
else if (document.getElementById("SelectedTheme").value == 'Metropolis') {
less.modifyVars({
'#baseColor': "#EA9B41",
'#baseActiveColor': "#ffa400",
'#baseBg': "#fff1d9"
});
}
else if (document.getElementById("SelectedTheme").value == 'PlasticBlue') {
less.modifyVars({
'#baseColor': "#168ED7",
'#baseActiveColor': "#52beff",
'#baseBg': "#daf1ff"
});
}
else if (document.getElementById("SelectedTheme").value == 'RedWine') {
less.modifyVars({
'#baseColor': "#ec4b4b",
'#baseActiveColor': "#d26469",
'#baseBg': "#f9e7e7"
});
}
else if (document.getElementById("SelectedTheme").value == 'Office2003Olive') {
less.modifyVars({
'#baseColor': "#8da02a",
'#baseActiveColor': "#cfe465",
'#baseBg': "#f3f7e1"
});
}
});
</script>
</head>
I need help to assign variable value before loading the page, now it fluctuates at first and shows default color (i.e. black) then changes to theme selected color.
My CSS Code:
#baseColor:~'';
.dxpnl-btnSelected.dxpnl-btnPressed .dxWeb_pnlExpandArrowTop_Metropolis
{
background-color: #baseColor;
}
Where should use.modifyVars so it won't fluctuate?
Can you please help me to implement Skobbler map in ionic based app ?
thanks
by using following code i can draw map.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="js/skobbler-2.0.js"></script>
<style>
#map {
height: 500px;
}
</style>
<div id="map"></div>
<script>
function initMap() {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
console.log(pos.lat + "/" +pos.lng);
// alert(pos.lat + "/" +pos.lng);
mytest(pos.lat,pos.lng);
});
}
window.setInterval(function(){
initMap()
}, 1000);
var mymap = '';
var marker = '';
function mytest(lat,long)
{
if(mymap == '' || marker == '')
{
mymap = L.skobbler.map('map', {
apiKey: 'API_KEY',
mapStyle: 'day',
bicycleLanes: true,
onewayArrows: true,
pois: 'all',
primaryLanguage: 'en',
fallbackLanguage: 'en',
mapLabels: 'localNaming',
retinaDisplay: 'auto',
zoomControl: true,
zoomControlPosition: 'top-left',
center: [lat,long],
zoom: 18,
});
marker = L.marker([lat,long]).addTo(mymap);
}
else
{
mymap.center = [lat,long];
marker.remove(marker);
marker = L.marker([lat,long]).addTo(mymap);
}
}
</script>
</head>
<body>
</body>
</html>
In the basic sample code below I use the following code to catch zoom_changed event:
google.maps.event.addListener(map, 'zoom_changed', function() {
console.log(map.getZoom());
});
If I call map.setZoom(30), I get this into console:
> map.setZoom(30)
> 30
> 21
That is, the zoom_changed is fired twice and once with incorrect value. It causes me some problems in libraries and I don't know why this happens. However, I can't reproduce the issue on some other projects with v3 api.
Strange thing is that if I specify the zoom_changed listener additionally in console instead of putting it into initialize, I get values: 21, 21. So the answer is there somehow.
The code is:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
console.log(map.getZoom());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I have following codes. It works perfectly in IE (GML and GeoJSON vector layer was loaded), but not in Firefox and Chrome without any errors noticed. Please help me to fix this problem.
Here is the code with GML vector layer (I just used built-in layer in Geoserver, so you can download and test it without any modification):
<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- The magic comes here -->
<script type="text/javascript">
var map;
function init() {
var bounds = new OpenLayers.Bounds(
-124.73142200000001, 24.955967,
-66.969849, 49.371735
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.22563114453125,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map("ch3_wfs",options);
var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
{
layers: "topp:states",
});
map.addLayer(baseLayer);
var statesLayer = new OpenLayers.Layer.Vector("States", {
protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50",
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.Fixed()],
});
map.addLayer(statesLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>
Here is the code with GeoJSON vector layer (I just used built-in layer in Geoserver, so you can download and test it without any modification):
<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- The magic comes here -->
<script type="text/javascript">
var map;
function init() {
var bounds = new OpenLayers.Bounds(
-124.73142200000001, 24.955967,
-66.969849, 49.371735
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.22563114453125,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map("ch3_wfs",options);
var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
{
layers: "topp:states",
});
map.addLayer(baseLayer);
var statesLayer = new OpenLayers.Layer.Vector("States", {
protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=json",
format: new OpenLayers.Format.GeoJSON()
}),
strategies: [new OpenLayers.Strategy.Fixed()],
});
map.addLayer(statesLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>