I am using a Rotate Map Leaflet plugin and I have the following issue when trying to print with the jsPDF plugin:
The map does not stay within the div container. It covers the entire PDF document. It also seems to do something weird with the map tiles.
This is how it should look:
If I print it with jsPDF, the PDF looks like:
If it is not rotated, it looks like this in the PDF:
Not matter what, the map does not stay within the bounds I want it to.
I used Javascript's localStorage.setItem() function to pass the innerHTML of the div containing the map and other information i wanted to print.
On another page I used Javascript's localStorage.getItem() to retreive the HTML from the previous page and added it to an existing div on this new page. I also added the css link and script calls to LeafletR.js.
I used the same code in the previous page to set up the map:
map = L.map('map',
{
' renderer': L.canvas(),
'center': [0, 0], 'zoom': 17,
'zoomControl': false,
'rotate': true,
'attributionControl': false,
'maxBounds': [
[25, -125],
[49.5, -66.5]
]
});
The map showed up exactly as it should, in the right location, and printed correctly using window.print function.
The window.print() function worked on original page but showed all controls on the page which I didn't want.
Don't know if this is the most eloquent way to get this done but it worked.
Related
In Vaadin 14.4.2, I have a scenario in which I have added a chart inside a splitLayout. However, when I, as a user, expand or shrink the splitLayout, the corresponding chart does not resize. The other components, such as the grid do automatically resize. Is there some "magic" configuration option to get the chart to behave like other components? (The screenshot below shows the chart not having resized, even though the grid beneath it did properly automatically resize.) (Also fyi, I call this: spectraChart.setSizeFull(); so the chart should be using up all the available space.) (Another FYI: I could probably "trap" the splitLayout resize even then redo the plotting, but it seems to me that this should ideally not be necessary in the a 'framework' solution such as Vaadin, since a chart is a component that should behave like other components, such as the grid.)
Yes, unfortunately that is true. You can workaround the issue by doing explicit JavaScript call to Charts to reflow when splitter position has been changed. The code snippet below finds all charts and reflows them:
innerLayout.addSplitterDragendListener(event -> {
getUI().ifPresent(
ui -> ui.getPage()
.executeJavaScript(
"Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"
));
});
I am using the jQueryUI resizable widget, and have a bunch of resizable boxes on a page. When the document loads, I initialize the widget, like so:
$('.ui-draggable').resizable({
minHeight: 10, // 10 is actually the default
minWidth: 10, // 10 is actually the default
resize: function() {
showProperties(this);
},
});
However, at some point I want only some of those elements to change resize options. What I'm trying to do is this:
if (type == 'sometype')
{
console.log($('#'+elementID).resizable('option', 'handles'));
$('#'+elementID).resizable('option', 'handles', 'e,w');
console.log($('#'+elementID).resizable('option', 'handles'));
}
This indeed outputs:
e,s,se
e,w
in the console, so the event is triggered and the selector is correct, but the code doesn't actually work: in fact, the handles remain the same, namely e, s, se.
Is this because I'm using a different selector from the original init? If so, how can I change the resize options only on a subset of originally-resizable elements? And if not, what could be the problem?
Handles are actually divs added to the element on which resizable is applied. It seems that changing the option doesn't refresh these handles. Maybe there's a way to apply the changes on specific subset and refresh, but I'm not sure how.
But one quick workaround would be to hide the handles you don't want instead of changing the handle option. You would have to set handle option to all the handles you'll need, and then hide those not wanted. Like this to remove se handle for example:
$('#'+elementID).find('.ui-resizable-se').hide();
I'm developing a web application that is making use of tabs. I've run one issue that seems small, but I haven't been able to locate a solution and I'm worried it is indicative of larger problems with my code.
My application has one main page that includes a tab container with several content panes then inserted as children. I figured that having each content pane load an external HTML file and loading it that way was a good solution - it seemed to provide modular design and allow for easy changing of the contents of an individual tab. The issue I am running into now is that while everything loads correctly, I'm unable to provide anchor links in inside a tab or between tabs. Here is some sample code:
var tabs = new TabContainer({
style: "height: 100%; width: 100%;"
}, "tab-container");
tabs.startup();
var metadata = new ContentPane({
title: "Metadata",
id: "Metadata"
});
/* repeat for the non-metadata content panes */
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
/* repeat for each pane */
For my metadata page I want it to contain information about the datasets I am providing to users. Ideally, it would have a table of contents with anchor links to the proper entries. However, when I implement an anchor link, like so:
Click me to jump down the page!
<!-- some content here -->
<div id="test">We made it!</div>
The link is clickable and it does in fact bring you to the proper location, but it seems to invariably load this in a new frame that requires a user to reload the page if they wish to do anything else. I've tried playing with tag properties but it's been to no avail. I'm also hoping to be able to link between tabs (say, if a user is querying on one of the query pages I have presented them and then wants to know where a dataset came from or other information).
Here is a simple imgur album showing what happens: http://imgur.com/a/JCnlH
After clicking the link in the first image, you're sent down the page. However, the tab bar and the navigation bar of the page disappear completely, even when you scroll back up. I don't know why this is.
So, this has been a long question, but here is the core of it:
What am I doing wrong with anchor links?
To answer your first question:
You should put all JavaScript inside your main page, not inside partials. This is not considered a best practice with JavaScript because it means you will have to eval() the content and usually when you start doing that when you don't need to, then you're doing something wrong.
In this case you can easily add all JavaScript code to the main page. If you need to wait for a specific tab to be opened or loaded, you can use the onShow or onLoad events on the dijit/layout/ContentPane widgets.
Also, when you're using ContentPane you should use the proper setters for adding content/HTML to it.
Rather than doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
dojo.byId("Splash").innerHTML = results;
});
You should be doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
Or if you don't have a reference anymore to the splash variable, you should be using registry.byId("splash").set("content", results).
About the hyperlinks, I have no idea. I'm not getting the same behavior, so could you explain a bit further on that?
Here's a (as far as I can see) working example: http://jsfiddle.net/n4515tsz/
In my case, this behavior seems to be caused by interaction of the overflow: hidden CSS property of my website's body interacting with the height: 100% property of my tab container. I didn't realize that the overflow: hidden property was set because it was part of a framework I was using. By changing the overflow property I have been able to achieve the desired behavior.
I have a wordpress site where I have a chart and when I hit print prints the page where the chart is and the chart in the same page but the chart is outside the container instead of printing the chart by itself as its supposed to. Because you can see that the code is working , because you can see how all the elements get removed and the lone chart is left on the page. Yet it does not print the way it was intended to.
Hereis a copy of the page I am trying to print from.
Is there a way not to show a tooltip when the title of an element is defined ?
Im using huddletogether's LightBox2 which takes whatever is in the anchor's title and converts into HTML.
http://www.huddletogether.com/projects/lightbox2/#support
Can I insert links in the caption?
Im calling a javascript function in that link and that tooltip shows this when the mouse hovers the image.
Click
Other option is to change return [anchor.href, anchor.title]; to something like return [anchor.href, anchor.aTitle]; as mentioned here.