I am using Leaflet-routing-machine,
I added the error control to my map like this :
L.Routing.errorControl(this.control).addTo(map);
for style I used this :
.leaflet-routing-error {
width: 320px;
background-color: rgb(238, 153, 164);
padding-top: 4px;
transition: all 0.2s ease;
box-sizing: border-box;
}
this is what I got :
Ididn't find a lot of explanations about. Have anyone know how to customise this more, change language, hide/show... ?
After reading this source code
you can redefine the header and the fromat message function
L.Routing.errorControl(control, {
header: 'Routing error',
formatMessage(error) {
if (error.status < 0) {
return 'Calculating the route caused an error. Technical description follows: <code><pre>' +
error.message + '</pre></code';
} else {
return 'The route could not be calculated. ' +
error.message;
}
}
}).addTo(map);
I believe that in your control you can redefine this two options
also you may be able to use the leaflet element with classes leaflet-bar leaflet-routing-error and inject more html code on it as they do to create the alert
var L = require('leaflet');
onAdd: function() {
var header,
message;
this._element = L.DomUtil.create('div', 'leaflet-bar leaflet-routing-error');
this._element.style.visibility = 'hidden';
header = L.DomUtil.create('h3', null, this._element);
message = L.DomUtil.create('span', null, this._element);
header.innerHTML = this.options.header;
return this._element;
}
so retrieving the div of class or id leaflet-routing-error and injecting on it your desired html component template should be fine
Related
I'm using the :valid and :invalid pseudo-classes, so the users can see if the input is correct in each form. I'm able to style them with CSS, but I have yet to find a solution where I can use an iconfont on the right side of the form, to display a valid or invalid input. Anyone knows how to do this?
Also some forms should not display valid or invalid before the user starts to type (like signup email). Can I bypass that code/css and just activate it when the user starts to type in the form?
You could realize what you want like this:
jsfiddle
input {
border: #666 1px solid;
padding: 0.5em;
}
label {
display: block;
margin-top: 8px;
}
input + i:before {
display: none;
}
input:focus + i:before {
display: block;
}
input:focus:invalid {
background: red;
}
input:focus:valid {
background: lightgreen;
}
input:focus:valid + i:before {
content: "\f14a";
}
I've used the fontawesome iconfont here.
EDIT
To make the icons inside the form elements you can add this rule:
input + i {
position: relative;
left: -20px;
}
I am using jstree plugin to populate my tree based on xml file. Some nodes text are greater than the container div. Is there any way to text wrap jstree node texts?
$(document).ready(function(){
$("#tree").jstree({
"xml_data" : {
"ajax" : {
"url" : "jstree.xml"
},
"xsl" : "nest"
},
"themes" : {
"theme" : "classic",
"dots" : true,
"icons" : true
},
"search" : {
"case_insensitive" : true,
"ajax" : {
"url" : "jstree.xml"
}
},
"plugins" : ["themes", "xml_data", "ui","types", "search"]
}).bind("select_node.jstree", function (event, data) {
$("#tree").jstree("toggle_node", data.rslt.obj);
This worked for 3.0.8
.jstree-anchor {
/*enable wrapping*/
white-space : normal !important;
/*ensure lower nodes move down*/
height : auto !important;
/*offset icon width*/
padding-right : 24px;
}
And for those using the wholerow plugin;
//make sure the highlight is the same height as the node text
$('#tree').bind('hover_node.jstree', function() {
var bar = $(this).find('.jstree-wholerow-hovered');
bar.css('height',
bar.parent().children('a.jstree-anchor').height() + 'px');
});
For 3.1.1, and for it to also work with select_node.jstree use this function instead:
function(e, data) {
var element = $('#' + data.node.id);
element
.children('.jstree-wholerow')
.css('height', element.children('a').height() + 'px')
;
}
Try adding the following style to the child anchors of your jsTree div:
#jstree_div_id a {
white-space: normal !important;
height: auto;
padding: 1px 2px;
}
I also have a max-width on my jsTree div styling:
#jstree_div_id
{
max-width: 200px;
}
#tree_id {
.jstree-anchor {
white-space: normal;
height: auto;
}
.jstree-default .jstree-anchor {
height: auto;
}
}
Putting together answers from Hashbrown and TwiceB to get it to work with the wholerow plugin and preselected data.
Enable text wrapping
.jstree-anchor {
/*enable wrapping*/
white-space : normal !important;
/*ensure lower nodes move down*/
height : auto !important;
/*offset icon width*/
padding-right : 24px;
}
Enable highlighting of wrapped text on hover and select
$('#tree').bind('open_node.jstree', function () {
let bar = $(this).find('.jstree-wholerow-clicked');
bar.css('height',
bar.parent().children('a.jstree-anchor').height() + 'px');
});
$('#tree').bind('hover_node.jstree', function () {
var bar = $(this).find('.jstree-wholerow-hovered');
bar.css('height',
bar.parent().children('a.jstree-anchor').height() + 'px');
});
I found the answer by coincedence and it worked for me ,but , i had another css rule that was preventing the code from functioning well
I removed the css rule (min-height:200px) "in my code" and the following answer worked for me as i expected.
#tree_div_id a {
white-space: normal;
height: auto;
padding: 0.5ex 1ex;
margint-top:1ex;
}
This issue is resolved below.
https://www.npmjs.com/package/treeview-sample
According to this sample, the folder DOM will be output with the following contents.
<a class="jstree-anchor jstree-anchor-formatted" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="3" id="grandchild2_anchor" title="Human">
<i class="jstree-icon jstree-themeicon" role="presentation"></i>
<span class="jstree-anchor-text">Human</span>
</a>
I have a div with class="centerMessage" . This div is inserted into the DOM at a point after the page is loaded. I would like to change the CSS on this div to center it. I tried the CSS function below, but it did not work. Does anybody know a way to do this?
function centerPopup() {
var winWidth = $(window).width();
var winHeight = $(window).height();
var positionLeft = (winWidth/2) - (($('.centerMessage').width())/2);
var positionTop = (winHeight/2) - (($('.centerMessage').height())/2);
$('.centerMessage').live( function(){
$(this).css("position","absolute");
$(this).css("top",positionTop + "px");
$(this).css("left",positionLeft + "px");
});
}
If my assumption of what you're trying to achieve is correct, you don't need any Javascript to do this. It can be achieved by some simple CSS.
.centerMessage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px; /* half of the height */
margin-left: -300px; /* half of the width */
width: 600px;
height: 300px;
background: #ccc;
}
Demo: http://jsbin.com/awuja4
.live() does not accept JUST a function. If you want something to happen with live, it needs an event as well, like click. If you want something to happen always for every .centerMessage, you will need the plugin .livequery()
I believe that the following works in FF & Webkit.
div.centerMessage{
position: absolute;
width: /* width */;
height: /* height */;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
I know this is already answered, but I thought I'd provide a working jsFiddle demo using JavaScript like the OP originally wanted, but instead of using live(), I use setInterval():
First, we need to declare a couple variables for use later:
var $centerMessage,
intervalId;
The OP's issue was that they didn't know when the div was going to be created, so with that in mind we create a function to do just that and call it via setTimeout() to simulate this div creation:
function createDiv() {
$('<div class="centerMessage">Center Message Div</div>').appendTo("body");
}
$(function() { setTimeout("createDiv()", 5000); });
Finally, we need to create a function that will check, using setInterval() at a rate of 100ms, to see if the div has been created and upon creation, goes about modifying the div via jQuery:
function checkForDiv() {
$centerMessage = $('.centerMessage');
if ($centerMessage.length) {
clearInterval(intervalId);
var $window = $(window),
winHeight = $window.height(),
winWidth = $window.width(),
positionTop = (winHeight / 2) - ($centerMessage.height() / 2),
positionLeft = (winWidth / 2) - ($centerMessage.width() / 2);
$centerMessage.css({
"display" : "block",
"position" : "absolute",
"top" : positionTop.toString() + "px",
"left" : positionLeft.toString() + "px"
});
}
}
$(function() { intervalId = setInterval(checkForDiv, 100); });
Try Use this
$('.centerMessage').live('click', function(){
Try this
$('#foo').on('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
OR
$('#foo').live('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
I'm using the jQuery UI Autocomplete plugin (version 1.8), and I'd like to customize the way the suggestions show up. Specifically, I want to display not only some text, but an icon as well. However, when I send the <img> tag, it just gets rendered as plain text in the results list.
Is there some way to change this behavior? Alternatively, can you suggest a different way to include images in the returned results and have them show up in the suggestions?
Taken from here
$("#search_input").autocomplete({source: "/search",
minLength: 3,
select: function (event, ui) {
document.location = ui.item.url;
}
})
.data("autocomplete")._renderItem = function (ul, item) {
//As per recent documemtation above line should be
//.autocomplete( "instance" )._renderItem = function (ul, item) {
return $('<li class="ui-menu-item-with-icon"></li>')
.data("item.autocomplete", item)
.append('<a><span class="' + item.type + '-item-icon"></span>' + item.label + '</a>')
.appendTo(ul);
};
And the CSS:
.ui-menu .ui-menu-item-with-icon a {
padding-left: 20px;
}
span.group-item-icon,
span.file-item-icon {
display: inline-block;
height: 16px;
width: 16px;
margin-left: -16px;
}
span.group-item-icon {
background: url("/image/icons/group.png") no-repeat left 4px;
}
span.product-item-icon {
background: url("/image/icons/product.png") no-repeat left 7px;
}
I'm using JQTOUCH and in JQTOUCH several of the links are being loading via AJAX and then sliding in. The problem is that there is no loading indication provided to users.
I'd like a way to add a Loading class with an AJAX spinner, when ever the an ajax call is loading, and have the class removed when the loading is done, and the page is displayed.
Any ideas?
the showPageByHref() answer is partially correct.
But, instead of
$('body').append('<div id="loadinginprogress">Loading...</div>');
You need
$('.current').append('<div id="loadinginprogress">Loading...</div>');
Body is too general for jqtouch, need to be specific to the currently displayed DIV-page
showPageByHref() function in jqtouch js is a good start. i added it right into ajax call so the please wait will not flicker when you click on link that is already loaded etc.
In short - add loading div (id loadinginprogress in exmaple) right before the ajax call and remove later "success" or "error". the ajax call section would look something like that (shortened it ):
function showPageByHref(href, options) {
...
if (href != '#'){
$('body').append('<div id="loadinginprogress">Loading...</div>');
$.ajax({
url: href,
data: settings.data,
type: settings.method,
success: function (data, textStatus) {
$('#loadinginprogress').remove()
var firstPage = insertPages(data, settings.animation);
if (firstPage)
{
if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer)
{
settings.$referrer.attr('href', '#' + firstPage.attr('id'));
}
if (settings.callback) {
settings.callback(true);
}
}
},
error: function (data) {
$('#loadinginprogress').remove()
if (settings.$referrer) settings.$referrer.unselect();
if (settings.callback) {
settings.callback(false);
}
}
});
}
...
}
css for loading div would be something like:
#loadinginprogress {
-webkit-border-radius: 10px;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 18px;
font-weight: bold;
height: 80px;
left: 60px;
line-height: 80px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 120px;
width: 200px;
z-index: 5000;
}
This is the basic behavior if your links are li class="arrow" elements. how are you displaying your links and where do you want the loading-spinner to display?
Thank you for your different posts. They helped me a lot.
I have a solution to propose without patching the jQtouch code on which jQTouch relies.
It uses jQuery ajax capabilities.
$(document).ready(function() {
...
$('#jqt').ajaxStart(function() {
console.log("ajaxStart");
...
}).ajaxSuccess(function() {
console.log("ajaxSuccess");
...
}).ajaxError(function() {
console.log("ajaxError");
....
});
....
});
more details available in this jQuery doc page.
You could add a custom event handler, and trigger the loading.gif everytime the click on the specific element was done.
I just answered Darin Parker's question. Just check it out it may help you.