I found the code to add a single button on the leaftlet map to the topleft corner. But now I want to add multiple buttons one after another.
Is it possible to insert multiple buttons inside the following code?
I also have tried to use checkbox/radio buttons. But I dont know how to add labels to the checkbox and button.
And add checked/unchecked properties for them.
Thanks.
My Code here:
var customControl = L.Control.extend({ options: {position: 'topleft'},onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
onAdd: function (map) {
var container = L.DomUtil.create('input','my-button btn');
container.type="button";
container.title="x";
container.value = "x";
container.label = "x";
container.style.backgroundColor = 'white';
container.style.backgroundSize = "30px 30px";
container.style.width = '40px';
container.style.height = '40px';
container.style.borderRadius = "25px";
container.style.padding = "0";
container.style.margin = "10px";
container.onclick = function(){
console.log('buttonClicked');
}
return container;}});
You can create as many Leaflet "controls" as you wish. You can insert them at any corner, and they will simply "stack up" (with a 10px margin if I remember correctly) in a vertical column in the given corner.
As for the content of each control, it is purely HTML and CSS. In your code you are using Leaflet's utility L.DomUtil.create(), but you could have also simply used the native document.createElement() (but would have to add the class in a separate line) or even jQuery DOM utility (with which you can directly write an HTML string).
Then you can build complex content (with inputs, associated labels, etc.). Just look for HTML tutorials / JavaScript that build DOM nodes.
Related
I'm looking for a template for a responsive, dragable (horizontal resizeable) sidebar.
Optional based on bootstrap (I use bootstrap 4.6, but other version are fine), may make use of jQuery.
This for example fits my needs:
https://bootsnipp.com/snippets/BDWlD
But's it not dragable!
I've try to use some code for dragable divs, but they do not work because of the use of negative margins and some more to toogle sidebar in template above (and the most other respontive sidebar templates) (most all use negative margins to support css-animations).
One example, which didn't work: https://jsfiddle.net/RainStudios/mw786v1w/, but I'd try a lot more
var element = document.getElementById('element');
var resizer = document.createElement('div');
resizer.className = 'resizer';
resizer.style.width = '10px';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.right = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'se-resize';
element.appendChild(resizer);
resizer.addEventListener('mousedown', initResize, false);
function initResize(e) {
window.addEventListener('mousemove', Resize, false);
window.addEventListener('mouseup', stopResize, false);
}
function Resize(e) {
element.style.width = (e.clientX - element.offsetLeft) + 'px';
element.style.height = (e.clientY - element.offsetTop) + 'px';
}
function stopResize(e) {
window.removeEventListener('mousemove', Resize, false);
window.removeEventListener('mouseup', stopResize, false);
}
So I look for a joined code from both or a other template for a dragable responsive sidebar.
(If possible without big libaraies, because I still have to further develop the code.)
I've google a lot but did not find a well solutions.
A more detailed description of the problem:
The width of the sidebar (e.g. 250px) and a negative margin (-250px) with the same value is set in one class (in the example of the link from above #sidebar-wrapper). In a second class, the padding is set to 250px. If the second class is active, the sidebar is shown, otherwise it is hidden.
To modify that dynamicly is tricky.
To adjust this dynamically, I would have to adjust all three classes dynamically, which is possible but very cumbersome and ugly.
Alternatively I would have to write the sidebar handling completely new in JS without classes (directly assigned values) incl. the responsive variants (from media queries). Also not nice. May there is a way to dynamicly compute the values in css??
Any idea?
Some links are suffient, I do the rest.
Or an idea to handle that CSS-stuff (must not be complete code)
(At the end should end up in a help page with a table of contents in the sidebar, a search with instant search via ajax and a load of the help content also via ajax in the main div. But I'm not worried about this part, I've built something like that before - but if I find something ready-made, I won't say no ;-) )
Finaly I managed by myself:
Changes to above:
var wrapperElement = document.getElementById('wrapper');
...
function Resize(e) {
element.style.width = (e.clientX - element.offsetLeft) + 'px';
wrapperElement.style.paddingLeft = (e.clientX - element.offsetLeft) + 'px'; /new
}
Changes to script from Sidebar-Example:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
element.style.width = ""; //new
wrapperElement.style.paddingLeft = ""; // new
});
Full code: https://codepen.io/MichaelBootstrap/pen/BapJzYz
This works fine.
Disadvantages:
After fading in and out, the sidebar has the old width again.
There are still problems when the sidebar becomes too small
Draging is not so smooth
If some one have a besser solution, then I would be very pleased.
The following code is an example of open and close actions of a sidebar, where some CSS values should be updated to correctly show the sidebar.
function openNav() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("mainContent").style.marginLeft = "250px";
document.getElementById("codePanel").style.marginLeft = "10px";
}
function closeNav() {
document.getElementById("sidebar").style.width = "0";
document.getElementById("mainContent").style.marginLeft = "0px";
document.getElementById("codePanel").style.marginLeft = "40px";
}
Now I ask myself if there is a better way to do this if I eg update more different styles?
Because in this code, I would need to add more and more similar looking lines of code which looks really clunky.
If you add an initial class to all your elements that you want to update
<div id="sidebar" class="update"></div>
<div id="codePanel" class="update"></div>
Then add some styles (be aware of style specificity)
#sidebar.update {
width : 200px;
}
#sidebar.update.updated {
width : 250px;
}
#codePanel.update.updated {
color : red;
}
You can easily add that class to multiple elements in a loop
var elems = document.querySelectorAll('.update');
elems.forEach(function(elem) {
elem.classList.add('updated');
});
as the other members mentioned it is better to use class, what I want to add is
that you can create those css classes based on specific style for example create a class called marginLeft50 which sets the left margin to 50 so whenever you want to update an element css you can simply do $('sidebar').addClass('marginLeft50');
keep in mind that you can add multiple classes to a single element, and since you mention jquery in your tags, jquery takes care of looping through all the targeted elements and updating each one of them
and as simply you can $('selector').removeClass('className') whenever you need to
I need to add a splash screen on a web page. I mean a modal image over the site that I can close with a "x" on top-right corner after which I can continue navigation.
I would like to use Javascript as solution because I'm not a web developer and I would not study css, jquery etc.
Can u help me?
Thank you
You can use this simple tutorial to include the modal that you want. Just modify it accordingly: css/js modals
Another manner is to use Bootstrap modal. It's a really easy to use and a very funny to learn Javascript Library. Some documentation for the modal is in this link.
Insert the below code and you should be sweet. You will probably have to do some styling yourself, but here is a template.
document.addEventListener('DOMContentLoaded', function() {
/*
* Create overlay element
*/
var overlay = document.createElement('div');
overlay.innerHTML = " ";
//set overlay style
overlay.style.width="100%";
overlay.style.height="100%";
overlay.style.backgroundColor="black";
overlay.style.position="fixed";
overlay.style.opacity="0.5";
/*
* Create modal wrapper element
*/
var element = document.createElement('div');
//set styles to wrapper element
element.style.backgroundColor = "#fff";
element.style.height="300px";
element.style.width="400px";
element.style.position="fixed";
element.style.marginTop="100px";
element.style.left="50%";
element.style.transform="translateX(-50%)";
/*
* Create top bar element contaning X for closing
*/
var topbarElement = document.createElement('div');
//Set style
topbarElement.style.width = "100%";
topbarElement.style.cursor = "pointer";
topbarElement.style.textAlign="right";
topbarElement.innerHTML = "X";
//Add event listener for removing the element
topbarElement.addEventListener('click', function() {
document.body.removeChild(element);
document.body.removeChild(overlay);
});
//Add top bar element to wrapper element
element.appendChild(topbarElement);
/*
* Create content element
*/
var contentElement = document.createElement('div');
//set content of content element
contentElement.innerHTML = "YOUR MODAL CONTENT HERE";
//Add content element to wrapper element
element.appendChild(contentElement);
/*
* Add wrapper and overlay element to html body
*/
document.body.insertBefore(element, document.body.childNodes[0])
document.body.insertBefore(overlay, document.body.childNodes[0])
});
JSBin example: http://jsbin.com/kumigihobo/edit?js,output
I am using KineticJS to draw shapes on a canvas. When a shape is clicked, I would like to overlay a div directly below the selected shape. This will allow the user to change some properties (text, colour etc).
I am handling the click event like this and this is working fine
myShape.on('click', function () {
alert('clicked');
});
So rather than just alerting, I would like to show a div just below the selected shape.
I am not sure how to go about this with positioning a div at a point within the stage.
Many thanks
image.on('click', function() {
var input = document.createElement('input');
input.style.position = 'absolute';
input.style.top = image.y() + 'px';
input.style.left = image.x() + 'px';
document.body.appendChild(input);
});
http://jsbin.com/reqile/2/edit?js,output
I want the tabs to float right, not appear on the right hand side of the content pane. Is this possible?
There is no such option for tabPosition property (only top, bottom, left-h and right-h), but you need just few lines of JavaScript to achieve this:
See the code in action at jsFiddle: http://jsfiddle.net/phusick/aGCFs/
The first idea I had was to override dijit CSS to align tabs with text-align:right, but that would not work, because tabs' domNodes are children of div which width is over 50000px, so tabs won't be visible. To fix this you should set left property as well every time the tab container is resized (via dojo.connect):
var alignTabs = function(tabContainer) {
var tabListNode = tabContainer.tablist.domNode;
var tabStripNode = dojo.query("div.nowrapTabStrip", tabListNode)[0];
var tabListCoords = dojo.coords(tabListNode);
var tabStripCoords = dojo.coords(tabStripNode);
var tabStripLeft = (-tabStripCoords.w + tabListCoords.w) + "px";
dojo.style(tabStripNode, "textAlign", "right");
dojo.style(tabStripNode, "left", tabStripLeft);
}
var tabContainer1 = dijit.byId("tabContainer1");
alignTabs(tabContainer1);
dojo.connect(tabContainer1, "resize", function() {
alignTabs(tabContainer1);
});
It surely needs some fine-tuning, but you have an idea. As this is just an ad hoc code I would suggest subclassing TabContainer & TabController classes or extending (via dojo.extend || dojo.mixin) them to bake the feature in.
Also, please note, that I did not test whether this does or does not break the functionality of ScrollingTabController for the cases not all tabs fit on a single row.