Resize Modal Window in Javascript - javascript

I'm trying to resize my modal dialog window when certain items are hidden/shown.
window.resizeTo(800, 600);
I've tried using code like above, but it doesn't seem to work. I think because it is a modal dialog, and not a regular window. Any suggestions as to how I could resize this?

If you're trying to resize the modal dialog window from within the window itself, you might be tempted to use the javascript window.resizeTo() or window.resizeBy().
However, those will not work. Instead, use:
window.dialogWidth='640px';
window.dialogHeight='480px';
P.S.
Rsolberg: The poster did say modal dialog window. That seems like the way I'd describe it. I'm not sure that could be interpreted as being related to jQuery. I'd remove the jQuery answer in order to avoid confusion.

You'll want to identify the element or container ID and do something like this:
document.getElementById('MyModal').style.height = '500px';
document.getElementById('MyModal').style.width = '800px';
If you are using jQuery for this it can be quite a bit easier as you can attach it to the actual show modal function.
Edit
Within the javascript functions above, MyModal will be the ID of the container or modal. For example, if you are using a DIV for the outer element of your modal, you would set the DIV up like this:
<div id='MyModal' class="IFNEEDED">CONTENTS OF MODEL</div>
EDIT #2
Since this is not a "modal" as most would describe today, its more of a new window popup, this line of code should work for you (found it here):
window.open('http://www.pageresource.com/jscript/jex5.htm','mywindow','width=400,height=200')

Related

JS code linked to a "close" button on a modal popup

Unfortunately I cannot post a working code/example because it's part of a huge HTML template and I cannot extract only the interesting part :( sorry for that.
Anyway, I have this popup that I define like this:
<a id='bookShopping' class="popup-text" href="#book-shopping-dialog"></a>
<div id="book-shopping-dialog" class="mfp-dialog mfp-hide">
random popup text...
<button>Close the popup!!!</button>
</div>
and that I call with
<a onclick="document.getElementById('bookShopping').click(); return false;" >PopUp!</a>
The popup itself has a "X" close button on the upper right corner, defined with
<button class="mfp-close">X</button>
I want MY BUTTON, inside the "random text", to be able to close the popup as well.
I tried:
1) Give my button the mfp-close class.
NOPE. My button will jump to the upper right corner
2) Setting the div to display:none and/or display:block
NOPE. The popup will close but IT WILL NEVER REAPPEAR.
So, my last resort would be to call the same code that the "mfp-close" class is calling. My problem is that I can only find the mfp-close class defined in CSS, nothing in JS.
If I try to "inspect" the "X" button, it will not give me any event linked to it, nor any JS associated with its "click".
I know that without the source code is hard to understand, but the general question is: where, in Chrome or Firefox, can I find ALL THE JS CODE EXECUTED when I click on an element?
Thank you in advance.
You appear to be using the Magnific popup jQuery plugin, which has an API including a close() method. You should call that method rather than try to hack around with classes.
http://dimsemenov.com/plugins/magnific-popup/documentation.html
$.magnificPopup.close();

Javascript code for focusing on a certain div after loading the page

I'm trying to make a page horizontally and my problem is, and it starts from the end(DIVs are defined in right-to-left order, and it shows the one which is on the left)
I need a function to tell the browser to focus on the right div onload,so the user won't get confused.
thank you.
s.rb
By focus I assume you mean you want to scroll to the correct div on load.
if the div was defined like:
<div id="main"></div>
you can scroll to it in javascript with:
window.location.hash = '#main';
I hope this helps
You can do something like this
Set tabIndex to the element which you want to focus.
HTML
<div id = "iWillBFocused">
I will be focused on referesh
</div>
JS
document.getElementById('iWillBFocused').focus()
JSFIDDLE
Vanilla JS
There is a focus function that can be called on an html element:
document.querySelector('#myElement').focus();
You can read more about it on the Mozilla Documentation site.
jQuery
If you're using jQuery, you can also use the built-in jQuery focus() method:
$('#myElement').focus();

angular-loading-bar placement and backdrop

I am using this angular-loading-bar to show a spinner when the user has to wait, but I am having big trouble with the placement of it, it's barely visible.
I have these configs on the module
.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeBar = false;
cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner"></div>';
}]);
and then I place this, in the html where I want it to show
<div id="loading-bar-container"></div>
This is works, but it's still not very visible, is it possible to make it act like a modal, or popup?
I am using ui.bootstrap and have some modals, so when the user makes a promise inside a modal the spinner is under it (on main body element, where 'loading-bar-container' div is), so in this case it's not visible at all, is it possible to make it 'pop out'?
I would say this problem is about positioning of your div, this is not problem of the angular-loading-bar.
Try to use z-index and make your div always on top (above the modals).
Without more code or fiddle it's hard to say more...
EDIT: Here are some older questions which can help you:
How can I set an element over Twitter's Bootstrap modal?
Exposing element outside modal-backdrop in CSS Bootstrap jquery modal

How to display a little window with onmouseover

I am trying to use this code to display some data when the mouse is over that link:
<span id="ssd" onmouseover="this.T_WIDTH=210;this.T_TITLE='(0/0) mqe= ';"><a href='http://en.wikipedia.org/wiki/Decision_tree_learning'>http://en.wikipedia.org/wiki/Decision_tree_learning</a></span><br/>
Do you see something wrong because I can't make it work.
Let's get away from this DOM level 0 stuff:
var spSsd = document.getElementById("ssd");
spSsd.addEventListener("mouseover", function () {
this.style.width = "240px";
this.setAttribute("title", "(0/0) mqe");
});
I assume your this.T_WIDTH=210 was supposed to set the width of the span, and this.T_TITLE=(0/0) mqe was supposed to set the title? The code above should do that, just note that you need to set your span to display:block for this to work, since inline elements don't really have a width.
Just make sure you put this script at the bottom of your body; executing it in the head will give you a null error, since the span ssd will not have been created yet. Or if you're using jQuery, you could put it in the document.ready function.
Some suggestions try the following
jQuery Bubble Popup
JQuery Popup Bubble Question on Stackoverflow

JS: Boxy, how to tween newly created dialog

I'm using http://onehackoranother.com/projects/jquery/boxy/ to create popups. e.g. my code looks like this:
JS
$('.boxy').boxy();
<a id="popuplink" class="boxy" href="#popup" title="Sample popup">Popup</a>
<div id="popup" style="display:none">
Some big content
</div>
The problem is that my content is a bit big, so I am not happy about how boxy centers it. I want to display it higher on the page. So I want to tween the dialog box after it's created. How do I do that. (I see correspondent function in documentation, but don't understand how and from which place to call it)
Added event listener to the link and created new boxy container after getting the event. Sorry for asking stupid questions

Categories

Resources