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.
Related
I am currently using a mix of Javascript, jquery, html for a website, and I have a button which opens an overlay/modal and this overlay/modal has a close button.
To make the modal accessible using only keyboard, I am including aria-modal=“true” role=‘dialog’ in my html, the focus switches to the overlay and on the close button within the overlay, but it also causes the screen reader to automatically read the text content (headers with text) in my modal after close button, which I don’t want.
Would anyone have a suggestion around this? Below is my html, and I am calling focus() on my close button as the overlay opens. I have tried using aria-labelledby but then voiceover keys do not read the content at all.
<div aria-labelledby=“overlayHeading” aria-modal=“true” role=‘dialog’>
<button class=“close” aria-label=“close button”>
<img ***/>
</button>
<div class=“overlay-content”></div>
</div>```
I'm using wordpress with visual composer and I have built this demo popup example https://www.air8cushion.com/index.php/popup-test/ when I click on "More Info" button the popup shows up. However when I scroll content inside of it, and close the modal window, and again click on "More Info" I need to reset the content to appear from the top again.
I know its possible to do it with JS but I had fails many times to make it work. Most of examples of similar things online are mostly for Bootstrap and none of them worked for me.
Thanks.
You can use this on click of the close button of your popup
this function will scroll viewport of the popup div to top when clicked
jQuery(document).on('click','.vc_general',function(){
var myDiv = document.getElementById('myNav');
myDiv.scrollTop = 0;
});
".vc_general" is one of the class in your close button. You can add an extra class if you think it will affect the other functionality.
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.
Actually i want to do open color box without popup and it need to be only show hide inside a div. can we target a div to open colorbox content.
<a href='#myGallery' class='group'>click here</a>
<div class=''><!--this must be container of colorbox, and disable popup-->
<div id="myGallery"><--some content with photo--></div>
</div>
function _teamPopup(){
$(".group").colorbox({
inline:true,
rel:'group',
href:$(this).attr('href'),
scrolling: false,
opacity:1,
width:100+"%",
});
}
on my web page , there is lot of thumbnails, when i click on it content must display without popup.and it can be next ,prev , close like colorbox group function.
please check below image and you can get some idea.
Use toggle function of jQuery to hide and show content inside an element
Why you want to change colorbox if its purpose is exactly to have a gallery popping up?
If you look around there are widgets more specific for the kind of problem you're having.
Check http://galleria.io/themes/classic/.
If you still don't like what you can find around why don't you just code the big div to change its image when clicking on a thumbnail?
Will I be able to display a HTML content (not a file) in a pop up window using JS?
I am trying to open a pop up window and display an user defined HTML inside this. I am trying the below, but it doesn't work.
window.showModalDialog("<p>Pop up window text</p>","resizable: yes");
Can some one suggest me how to do this? Thanks in advance.
Contrary to window.open(), the first (URL) argument of showModalDialog() is required. Thus, you can't pass it an HTML string. You can either use window.open:
var newWindow = window.open("", "newWindow", "resizable=yes");
newWindow.document.write('<p>Pop up window text</p>');
Or alternatively, use one the existing modal plugins, such as jQuery UI Dialog or Twitter Bootstrap Modals. They allow you to easily display a modal window based on the content of an existing HTML element, e.g.:
<div id="dialog">
<p>Pop up window text</p>
</div>
$('#dialog').modal(); // Twitter Bootstrap
$("#dialog").dialog({ resizable: true }); // jQuery UI