Using leafletjs with popups. When I have popups with minimal text all works fine. If I make them bigger they still work fine. If I add too much I add
maxHeight
to the pop up and it makes the pop up scrollable.
If I start with out enough content to fill the page and make it scrollable, it is not made scrollable. That is Ok till I dynamically add more content to the popup and then I need the scroll bar but it will not show up.
Any thoughts on how to get leafletjs to add the scroll bar to a popup once the popup has already been rendered?
EDIT: The popup options are initialized with the markers in a loop that loads different arrays of data depending on what a person wants to see. The initialization is as follows.
var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
marker.bindPopup('<img width="'+width+'" height="'+height+'" src="'+a[3]+'"/><br><div id="weather"> <button type="button" onclick="weatherload(\''+a[0]+'\',\''+a[1]+'\')">Click Me for Weather!</button></div>',{'maxWidth':'500','maxHeight':'350','minWidth':'350'});
CAMlayer.addLayer(marker);
The popup has an image that takes up most of the space. At the bottom there is a div with a button. When the button is clicked it is replaced with a loader gif while an ajax function gets some data that it puts in the popup by way of innerhtml.
document.getElementById("weather").innerHTML = xhttp.responseText;
I set the maxheigth to 350px, once the extra data is added it grows to 520px with no scroll bar.
EDIT: Removed test page.
How do you initialize your popup options and how to you add more content to it?
Once the maxHeight option is set, the scroll bar should appear as soon as the content is too big, and disappear as soon as it gets small enough.
Demo: http://jsfiddle.net/ve2huzxw/92/
EDIT:
Following the extra details and code about how you add content to the popup element:
The height CSS attribute (which makes the scroll bar appear if necessary) is dynamically added by Leaflet when it detects that the content is too big.
However, this detection occurs only if you use the setContent popup method. It is not triggered if you change the content through external function (like your AJAX callback in weatherload function that "manually" changes a part of the popup content innerHTML).
The easiest workaround is simply to call myPopup._updateLayout() internal Leaflet method on your popup, just after you have added content. This will "manually" force Leaflet to check the popup content height, and add the height CSS attribute if necessary.
Updated demo: http://jsfiddle.net/ve2huzxw/93/
A "proper" solution would be to avoid adding content through innerHTML. Instead, you should use setContent popup method to update your content (you would copy your initial image, and add your new content). This would also avoid using a div with an ID that is the same for all your popups (which relies on the fact that only 1 popup would be open on the map at any one time, but would break if this assumption is no longer true).
If your popup is smarter(is doing 'hard work') I recommend to compile a new directive on the fly.
var newScope = $scope.$new();
var myPopupContent = $compile('<div style="width:200px" gr-my-popup ></div>')(newScope);
L.popup()
.setLatLng(e.latlng)
.setContent(myPopupContent[0])
.openOn(map);
Where grMyPopup will be your directive.
Related
I need to modify the position of the modal window before it gets displayed in the middle.
I have a ajaxbutton which will open the modal window. In the onClick method I tried something like...
target.appendJavaScript("$(\".wicket-modal\").css('width', 888+'px');");
or
target.appendJavaScript("$(\"[id^=_wicket_window]\").css('top', 100+'px');");
and some more variations of it...
It seems I can't manipulate the position of the ModalWindow before it gets displayed. But I can manipulate the position and size of an element INSIDE this modal window.
For example:
target.appendJavaScript("$(\".formdiv\").css('width', 888+'px');");
works. "formdiv" is a div in the modal window. It changes it's width, color and what I want.
But I need the position of the ModalWindow somewhere else at the first appearance. How can I do it?
For an unknown reason to me the ModalWindow is opened with JavaScript timeout of 0 seconds. So you need to execute your custom JavaScript again with a timeout, e.g.:
target.appendJavaScript("setTimeout(function() {$('.wicket-modal').css('width', 888+'px');}, 10);");
How can I create a new frame/window in the canvas? I am trying to make a game, and have a feature when you press a button, a menu screen will pop up displaying a bunch of information. Currently I have it working where you press a button and it will pop up with a placeholder image, which I would now like to replace.
I know in Java you would just create a new JFrame or JPanel, but how do you do this in JavaScript?
jQuery's modal dialog is popular:
http://jqueryui.com/dialog/
The jquery modal dialog window is an overlaying div element positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.
Define your popup window
You define the jquery dialog window by creating a div element containing your informational contents.
<div id="MyInfo" title="My Popup dialog">
<p id="myContent">Here is 'a bunch of information' and images too!<p>
<img src="anyImage.png">
</div>
Display your popup window
jQuery will initially hide your popup div. You can display the popup div like this;
$( "#MyInfo" ).dialog("open");
So if you want the popup to display when you press a button you can do this:
$("#myButton").click(function(){ $("#MyInfo").dialog("open"); });
And, Yes, you can get your desired contents through AJAX calls and then put that info into your the jquery popup.
$("#myContent").text("Here's some info from an AJAX GET request");
There are quite a few useful options that can be used with the jQuery dialog including animations and buttons.
Having some trouble getting dojo to display a borderContainer containing a tabContainer and a series of tabs, all contained within a dialog. This has all been done programmatically and the startup() event has been called.
The tabs are rendered and displayed, but rather unusually. Once the dialog itself is refreshed (discovered while opening and closing the console) everything rights itself. I've tried to force a resize() by calling it as part of start up - this hasn't worked. I've been trying to get this working properly for ages now. Its the only niggling thing about this! Having the manually refresh a dialog because a widget isn't displaying properly isn't exactly good UI design. The borderContainer does have height and width properties.
Could anyone suggest a few methods to try and why?
http://i.stack.imgur.com/YXtkq.png
Screen shot above (sorry I don't have 10 rep yet)!
I've tried to use 'doLayout: false' and that hasn't worked. I've got the 'style' set to height: 360px and width: 575px which are both well within the boundaries of the containing widget.
Well I discovered that simply doing startup() on the parent widget was not enough. Because it was instantiated in a hidden dialog widget, it needed to be instantiated from there.
the onclick event for the button was:
//custom widget - contrary to its name, this is the content!
var invoiceDialogWidget = new InvoiceDialogWidget(dialogValues);
var dia = new DijitDialog({
id: "invoiceDialogWidget",
content: invoiceDialogWidget,
title: "Invoice Detail"
onHide: function(){
this.destroyRecursive();
}
});
dia.show();
//magic line
invoiceDialogWidget.invoiceDialogContentNode.startup();
What I found was that by calling startup() as I had in the snippet above - the custom widget was instantiated correctly and matched the style of the dialog (which was made visible). Before I was calling it from within the custom widget, which hadn't been fully instantiated yet!
The result was calling startup() on a widget which defaulted to its parents style - which was invisible at the time.
Clicking on a link which triggers a Twitter Bootstrap Modal to pop up is causing the browser to scroll up the page. This behavior is only occurring in Chrome.
Here is a demonstration page:
http://www.turizmburosu.com/test2.aspx
The page has 600 rows of links, causing the page body to exceed window height. If any of these links is clicked, it displays the modal dialog. When in Chrome, clicking any of the links below the initial view will cause the background page to scroll up (not always entirely to the top).
I am use the following function to trigger the display of the Modal:
function test(id, imp) {
$("#modalLabel").html("Header");
$("#modalBody").html("Body");
$("#myModal").modal("show");
}
and the links are of the form:
Test Link ###
I am seeing this behavior in Chrome 22.0.1229.94 m.
Any suggestions/ideas as to why this is happening and how to prevent it?
Additional Example
This can be recreated on the Twitter Bootstrap documentation page for the Modal plugin.
Once on the page, simply override the existing data-api to use the JavaScript api instead:
$('#modals a[data-toggle="modal"]').on('click',
function(e) {
$('#myModal').modal('toggle');
return false
});
Now, if the Launch Demo Modal button is clicked, the page will scroll up when the modal is shown.
Again, this is using Chrome.
Fixed (10/29/2012)
This issue has been fixed since Bootstrap v2.2.0. See commit e24b46... for details.
(original answer)
This is due to a bug in the implementation of the Twitter Bootstrap Modal (as of 2.1.1). The root of the problem is that the focus is set to the modal prior to it completing its transition. This will only occur under the condition that
the browser supports CSS transitions (and you are using bootstrap-transition.js);
the modal has the class fade; and
when focus is set to an element outside the current view, the browser will scroll to move it into view (e.g., Chrome, Safari).
It should be noted that this affects both the Data API (markup-based) and the Programmatic API (JS-based). However, the reason it is more noticeable when taking the programmatic approach is because, unlike the Data API, it does not automatically restore focus to the triggering element, and, hence, does not scroll the view back down when the modal is hidden.
More info is available on the Twitter Bootstrap repo under Issue #5336: Modal Scrolls Background Content.
A fix has been merged into the 2.1.2-wip branch, which should be up for release any day now.
Here is a demo using the patch bootstrap-modal.js:
JSFiddle
Same problem. It is caused by "#" in and the anchor is doing to scroll.
I fixed that by deleting the anchor tag and place this:
<span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>
I had a similar issue on my site, which was caused by another jquery plugin (sidr).
When the sidebar was present and I opened a modal window, I would be sent back to top.
In jquery.sidr.js I changed line 102-106 from:
// Prepare page if container is body
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}
To:
// Prepare page if container is body
if($body.is('body') && !$('#modal').hasClass('in')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}
If you are using this plugin along with twitter bootstrap's modal, maybe this can help you.
I had the same problem because of these lines of CSS which were thought to permantly display scrollbars in the browser. Removing the two lines solved the problem:
html,
body {
min-height: 100%;
height: 101%;
}
to bring the focus back on close
var triggerOffset=0;
$('.modal').on('show.bs.modal', function() {
triggerOffset=$(window).scrollTop();
});
$('.modal').on('hidden.bs.modal', function() {
var animationTime=1;
$('html, body').animate({
scrollTop: (triggerOffset)
}, animationTime);
});
I had been having this issue for so long but my solution was to remove href from the anchor tag
i.e.
<a onclick="test();return false;">Test Link ###</a>
I get no jump now
Hope this helps someone in the future
I'm currently using the plugin here http://codedumper.com/jquerystickyfooter to create a sticker footer.
Take a look http://client.astam.co.uk. It works as you would expect.
The only problem is that, for example, if an error message comes up and the user clicks to remove, or toggled content is available the footer will jump up from the bottom of the browser until the window is resized and then it will sort itself out.
Is there a way for the plugin to know to re-position itself?
Better use $.stickyFooterPos() as a callback for other layout changing functions
like changing the close function in your app.js to
function close(){
$(this).attr('href', 'javascript:void(0)');
$(this).parent().fadeOut(200,function(){$.stickyFooterPos()});
}
P.S: as others suggested, position:fixed is a far more better choice considering the fact that the number of IE6 users are declining... (see http://www.w3schools.com/browsers/browsers_explorer.asp and also http://www.w3schools.com/browsers/browsers_stats.asp )
Are you supporting IE6? If not, then you can simply position the footer as "position: fixed" instead of using the jQuery plugin. Apart from that the JQ plugin positions the div only on window load, resize and scroll. The following code added for the alert close button will work -
$('#alert .close').click(
function() {
$.stickyFooterPos();
}
);
Just add that to your js file and the positioning will work when the close button is clicked.
EDIT - The previous code may not work if you are using fadeOut() for the close button. Rather you can change the code for the close button to -
$(this).attr('href', 'javascript:void(0)');
$(this).parent().fadeOut(200, function(){$.stickyFooterPos()});
$.stickyFooterPos();