TinyMCE Templates Plugin window is too big - javascript

I'm having a problem with the TinyMCE Template selection window.
Templates is a TinyMCE plugin that (I think) uses jqueryUI to open a popup window which allows the author to select from a collection of ready-built html templates.
This is all working fine. The problem I'm having is that the popup window is too big
I've created a TinyMCE fiddle here: http://fiddle.tinymce.com/zpeaab
If you click the Template button (see image) the popup opens, but then it's not possible to click the Ok button because it's off the bottom of the page.
Is there a way to
resize the window?
make the window resizable?

I found some additional settings:
template_popup_height : 300
template_popup_width : 500
This allows me to set the jQueryUI window properties. Seems to only accept integer numbers (e.g. neither '60%' or '300px' seemed to work)
This has allowed me to at least make the window small enough to fit on the screen

Related

Possible to have highslide window auto-resize?

I built a form for my website that opens inside a highslide popup, and this form has multiple steps. However, some steps are longer than others and have more text. Is there a way to have the highslide window automatically resize itself to the exact height of the content when it's done loading?
I've been looking, and I've seen people recommend hs.reflow or hs.resizeTo, but I have been unable to get either of them to work properly.
Huzzah, seems as though I have stumbled on the solution. Simply add parent.window.hs.getExpander().reflow(); to the highslide popup, and remove any definition of height concerning the popup.

Accessing CSS Properties inside a Popup Window

I don't think this is possible but I thought I'd ask anyway.
I'm building a Wordpress plugin for sharing buttons and Buffer doesn't have a mechanism to return to the site if you locate in the same window, so I built out a nice popup that will fetch the add link. This works great except that the buffer add page creates a modal dialog that is positioned 100px from the top.
This creates a nasty 100px space above the dialog. See here:
I was wondering if it's possible to change the css inside that popup window, or perhaps find a way to have the window directly access just the div with a specific id?
The modal is draggable as well, so maybe create a drag action to drag it up to the top?
Any ideas would be helpful.
--EDIT--
Adding Fiddle as requested.
Not sure what the size of the window will be when you're not logged into Buffer, but you'll get the general idea of how the spacing is messed up at the top ... maybe.
SO won't let me add a fiddle link without code the post is: jsfiddle.net/y6RQ7/6/

Can I remove parent window when opening a new window?

I'm having an issue with a our main application's window activating itself when the mouse is hovered over it.
I'm opening the new window in a javascript function using the line below:
window.open(URL, 'Requests', 'location=no,toolbar=no,status=yes,scrollbars=yes,resizable=yes');
I have noticed that if I open a new IE window through Explorer, hovering over our main application's window does not reactivate itself. Even in this case though, the main window does make itself be "on top" of the pop-up window created by the window.open command above.
The question is this: Is there any way, when opening a "child" window in javascript, to detach the child window from the parent?
Further info: I am using an Infragistics WebDataMenu with ActivateOnHover set to true so users don't need to click on main menu items to see sub-menu choices. Unfortunately, that setting sensitizes the whole menu bar so that sliding the mouse through it activates the menu (and sadly the window when a popup is active). This is the root behavior I'm trying to fix.
The window.open(); method will create a popup window that really only shares a relationship through JavaScript via the return value of the call, and the window.opener property on the popup window.
What you want is the behavior of a modal window that locks out interaction from the 'parent' page while you work on the 'child' popup.
You can try to fight with JavaScript (and your users) by forcing a focus on the popup and blocking any blurring but this will drive users nuts when they want to go read their email etc. (eg not recommended)
You can also use the not so standard showModalDialog(); method but support is far from fully cross browser and there are a whole bunch of new problems if you try to use this (no right click in IE, zoom issues in IE, and no grandchildren popups to name a few) (again not recommended)
What you can do is make an "overlay" popup similar to many online photo viewers where you first overlay a mask (typically semi transparent) that blocks mouse/focus on the entire page content below and then overlay that with your "popup content". Just be sure that you provide a close option that removes the mask when the overlay is closed/done.
Note if you need to support IE6 you'll also need an iframe shim (Google if needed)
Many UI frameworks will provide a "dialog" just like this for you. (Eg jQueryUI)
Ultimately, I gave up on making this work. I found that what I had to do was turn off ActivateOnHover from the WebDataMenu, which didn't answer this question and requires users to click on the menu to make it drop down, but it became a work-around.

HTML website design, links opening smaller windows on the page

So i tried searching for what I looked for but I couldn't really find exactly what I was looking for, if it even is possible that is.
What I'm looking for is a way to make the links people click on my website appear almost as ads, not a seperate window or tab in the browser but its own small window on the current tab itself. I made a image as a sort of example of what I mean. I don't know if it'll do any good but its worth a shot, I'd love to have it be able to work with Coolmenu as well. And if people wanted to open them in a new window or new tab, they could just right click, like below:
Update: 10:32 7.11
I realized that both of these links, as well as when i searched for some on my own all date form like 2006-2009, whereas all of them use
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>
I think I can just write () (correct me if im wrong) as well as the paragraph stuff, but what should I do about all the ? should I just straight out remove it or replace it?
Update 10:50 7.11
I don't got more time to work on it today but next time I got some time, should I post all the other javascript and css I have on my page (only coolmenu that is) to give you some sort of idea of what exactly I want to accomplish?
And again, thank you all for the great help.
Update 12.11 08:05: I'm having trouble getting it to work together with Coolmenu.
I can provide with my css and javascript code for both coolmenu and the window thing if required, should i upload a .txt or just put it here?
Modal Windows
I guess you wanna make Modal Windows. You can easily do that using this tutorial here: Simple jQuery Modal Window Tutorial.
Screenshot:
Demo here: Demo
jQuery Dialog
Or you can even use jQuery Dialogs, which uses same principle, but easy to implement.
Although you don't want to open a new window, this is the quickest way you will get it to work how you want and involves the least amount of javascript.
Code:
Hi
Parameter 1 is the URL, parameter 2 is the name of the window.
In the 3rd parameter you can pass the following options:
status: The status bar at the bottom of the window.
toolbar: The standard browser toolbar, with buttons such as Back and Forward.
location: The Location entry field where you enter the URL.
menubar: The menu bar of the window
directories: The standard browser directory buttons, such as What’s New and What’s Cool
resizable: Allow/Disallow the user to resize the window.
scrollbars: Enable the scrollbars if the document is bigger than the window
height: Specifies the height of the window in pixels. (example:
height=’350′)
width: Specifies the width of the window in pixels.
For more info click here

What is it called when a popup appear "over" a wepage?

when you visit http://www.daniweb.com you get a popup window, what is this called + any idea how to do it?
Thank you for your reply, what is the simplest way to do have a modal loading animation only i.e. when page loads that animations shows and when done the animation goes? ASP.NET/Ajax
You'd call this a modal dialog, and you can implement one very easy with jquery ui:
http://jqueryui.com/demos/dialog/#modal
I like to refer to these windows as ANNOYING
The other name is some form of JS or JQuery.
Its called a javascript popup window.
Here's a link to show you how to open a js window
The way it looks though is they are using the modal popup extender provided by the ASP.net AJAX Control library. This can be simulated via JQuery as well.
It's called a modal dialog window. "Modal" meaning "mode" as in the UI has two modes, one where you can only interact with the dialog window, the other where there is no dialog window and you can interact with the rest of the page.
Probably looks something like a lightbox/thickbox .Showing some text/html instead of images
This is a modal pop up window, meaning you can't do anything else while that window is open.
Here are a bunch of ways to make them.
You can set up this kind of popup by having Javascript on the onload event create an overlay div that has height 100% and a higher z-index than the content, and also a div for the popup with position fixed and an even higher z-index. Then when the user clicks on close or otherwise it is time for the popup to go away, the Javascript can set display: none on these divs.
You can use Firebug (or IE Developer toolbar) to see the styles used on the example page you mentioned and use that as a model.
(Also they are annoying, but at least better than pop-unders, IMO ;-) )
Thats a modal dialog popup. Here's a nice jQuery version that I have used before.

Categories

Resources