my popover doesn't work and I don't know why. It doesn't work when I get the working codes and when I write them. Please help.
Here is the code part that I want to show popover
<p
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Top popover"
data-bs-trigger="hover"
class="d-inline-block"
>
Service Ports
</p>
Here is my imports.
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
And this is the javascript part.
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
I am not sure whether you have added the full code here or not but as far as what I am seeing, I can say that you are missing the popoverTriggerList declaration var popoverTriggerList = [].slice.call() which might be causing the issue for you or you are not calling the js code from different file the right way. I have tried your code with the declaration and it works. Check the below code for your output:
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<script>
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<p data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover" data-bs-trigger="hover" class="d-inline-block">
Service Ports
</p>
Related
I'm using bootstrap 5 RTL. when I use tooltip, tooltip arrow direction is not toward my element! What should I do?
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
});
</script>
</head>
<body>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="logout"> //tooltip here
<i class="fa fa-power-off fa-lg"></i> //power of icon
</a>
</body>
See problem her: IMG
I found the solution: I just needed to add dir="rtl" attribute to the <html> tag. css direction:rtl wont work!
This is my complete View:
#{
ViewBag.Title = "Home";
}
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
But when I run it nothing I can't see the map.
I made a HTML page in Notepad that looks like this:
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
And it works.
Why isn't the code being executed in ASP.NET?
I installed OpenLayers from NuGet and if I select OpenLayers and press F12 ('Go To Definition' it opens up OpenLayers.js so it seems to have been downloaded correctly).
EDIT:
The complete generated code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FIKA - Home</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link href="/Content/css?v=bxomq82-FU9mU3eDX6m-kca-a2PFEz0RK2Z7mS-QmnY1" rel="stylesheet"/>
<script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
</head>
<body>
<div class="container body-content">
<div style="width:100%; height:100%" id="map"></div>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
<hr />
</div>
<script src="/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script>
<script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"0ea737fab0f240fab62a7978c5db4fa7"}
</script>
<script type="text/javascript" src="http://localhost:60314/4457514eae394a96a55c4c6c386b7942/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Your issue occurs because in the complete generated code you have the HTML5 doctype where in your working demo you do not have a doctype. That difference occurs for the browser to render differently the height:100%; property.
You need to set the height in pixels before executing your code.
function setMapHeight() {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
document.getElementById('map').style.height = (w.innerHeight || e.clientHeight || g.clientHeight) + 'px';
}
setMapHeight();
window.onresize = setMapHeight; // Add this code to fix height if window resizes
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(wms);
map.zoomToMaxExtent();
Stuck with the SMSComposer plugin. I have followed all the steps with adding keys to the plugin list and downloading the files. It is the most recent version from github and it has me confused. I understood the old one better. How do I specify toRecipients and body?
function SMSComposer()
{
this.resultCallback = null;
}
SMSComposer.ComposeResultType =
{
Cancelled:0,
Sent:1,
Failed:2,
NotSent:3
}
SMSComposer.prototype.showSMSComposer = function(toRecipients, body)
{
var args = {};
if(toRecipients)
args.toRecipients = toRecipients;
if(body)
args.body = body;
Cordova.exec("SMSComposer.showSMSComposer",args);
}
SMSComposer.prototype.showSMSComposerWithCB = function(cbFunction,toRecipients,body)
{
this.resultCallback = cbFunction;
this.showSMSComposer.apply(this,[toRecipients,body]);
}
SMSComposer.prototype._didFinishWithResult = function(res)
{
this.resultCallback(res);
}
Cordova.addConstructor(function() {
if(!window.plugins) {
window.plugins = {};
}
window.plugins.smsComposer = new SMSComposer();
});
.
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div <center><button onclick="cordova.exec(null,null, 'SMSComposer','showSMSComposer',[args])">Compose SMS</button></center>
>
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" charset="utf-8" src="SMSComposer.js"></script>
<script type="text/javascript">
app.initialize();
var args;
// cordova.exec(null,null, 'SMSComposer','showSMSComposer',[args]);
</script>
</body>
</html>
EDIT:
There is no reaction when I press the button. No error message in the console.
try this:
https://github.com/wesson818/SMSPluginForCordova2.3.0
you are able to pass message body and select recipients in Android native message app.
# P A Hemingstam
If you replace "Cordova" with "cordova" in SMSComposer.js file then it will work. :)
I would like to create some resizeable and draggable div tags contain textarea tags with jQueryUI.And I also want to use nicEdit to format text inside these textarea tags.But i can't combine them,maybe.I can't edit text if i use $(element).resizeable().draggable().Here is my code:
<html>
<head>
<title>Trouble using jquery ui resizeable, draggable and nicEdit</title>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
<script src="nicEdit/nicEdit.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var btnlist=['fontSize','fontFamily',
'bold','italic','underline','strikeThrough',
'left','center','right','justify',
'ol','ul','hr',
'indent','outdent',
'forecolor','bgcolor',
'subscript','superscript','removeformat'];
var myNicEditor = new nicEditor({iconsPath : 'nicEdit/nicEditorIcons.gif',buttonList :btnlist });
myNicEditor.setPanel('myNicEdit');
function ID()
{
var id="id";
var random_number=Math.round(Math.random()*1000000);
id+=random_number;
return id;
}
$('#a').click(function(){
var id=ID();
$('#content').append('<div class="d" style="width: 100px;height:100px;"><textarea style="width:100%;height: 100%" id='+id+'></textarea></div>');
myNicEditor.addInstance(id);
jQuery('.d').draggable().resizable();//If i remove this line,it work ok.
});
});
</script>
</head>
<body>
<div>
<button id="a">Add</button>
<div id="myNicEdit" style="width: 200px;" ></div>
<br />
<div id="content">
</div>
Can anyone give some solutions for me!Thank a lot!
</div>
You need to add 'handle' option when you apply draggable, so that it doesn't highjack the onmousedown event on all the child elements.
I am trying to place a marker with the users current location.
However I am failing to even get the User Location in the callback.
It seems that the console.log call is triggered before the geocoding of the browser
What am I doing wrong?
haml view
= gmaps(:map_options => {:center_on_user => true})
- content_for :scripts do
:javascript
Gmaps.map.callback = function () {
console.log(Gmaps.map.userLocation)
}
html output
<div class="map_container">
<div id="map" class="gmaps4rails_map"></div>
</div>
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.5/src/markerclusterer_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.map_options.center_on_user = true;
Gmaps.map.initialize();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
</script>
<script>
//<![CDATA[
Gmaps.map.callback = function () {
console.log(Gmaps.map.userLocation)
}
//]]>
</script>
At the moment of this callback, the user location is not already retrieved, it just means the map is done displaying.
Think about this: the user has to decide whether or not he accepts browser geolocation so it could take very long.
I didn't need some callback for geolocation Success, I only created one for geolocation Failure.
You should simply patch the js/coffee in your assets and call whatever function you need at this line.