Modal, modeless divs on a page - javascript

I'm using modal, modeless divs (I mean fixed, styled divs) on my HTML page. This page contains iframes with modal divs as well.
When I open a new div on the page, I need to disable keyboard events on the parent page (opener page). Also I need to be able to handle tab key presses on the parent page.
I have Googled, but I haven't found any solution for solving this issue.
Do you have any suggestions or ideas?

Maybe jQuery with this plugin could help you? Keybinding is made simple, and to disable a key (ex CTRL+F) you simply write:
$(document).bind('keydown', 'Ctrl-f', function(evt) {return false;});

Related

close AddThis menu with JavaScript

I am looking for a way to close the AddThis menu with JavaScript if the user indicates he is not willing to visit an external site. Basically I want to trigger the same method that would occur if the user moves his mouse away from the menu.
I can destroy the Add This menu in the DOM, but that creates errors in the AddThis script and the menu cannot be reopened.
I have tried addthis.menu.close() to no avail.
Thanks.
Try a .blur event on the menu. Im guessing this could possibly trigger the event that would otherwise be triggered on a defocus of the element (a blur).

hide extjs menu when clicking in different iframe

I have the following problem:
I have an extjs menu in one iframe, and when i click outside this iframe the menu does not collapse, like it does when I click away in the same iframe the menu belongs to.
Do you guys have an idea on how to solve this issue?
This actually happens to any component that should hide when it loses focus. So, I'd love to see a more general solution, if you guys happen to know.
Thanks!
P.S.: I'm using version 3.2
While I don't know if your parent frame is also running a ExtJS application, you are likely going to need to utilize XDM (cross-domain messaging). https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
You would then need to add a listener on the parent frame for clicks within the window, and pass that click event to the iframe. The iframe would then handle the click as needed, which in your case is dismissing the menu.
For anyone still looking for a solution on this one.
You can address the Extjs menu and hide all open menus from the parent frame like this (fe inside a click event on the parent):
var menu = window.frames[0].[ExtApplicationName].app.getController('[CONTROLLER]').getMenu().items.items
Next, you can loop through the menu items and hide them by doing:
menu[i].menu.hide();

How do I close a collapsible jQuery tab with a link or when a form is submitted?

I've set up vertical tabs where people can put in info before they submit a form.
The problem is that people might not find it intuitive to click on the tab again to collapse it.
How do I add a "close" link within the tab and how do I have any open tab close when the user hits "submit" or "reset"?
Simple&Easy way:
Add some css class to every 'window' when you open it. You are already opening those sliding windows so this shouldn't be a problem. Then when that submit button is pressed, you just find element with that class and hide it (display:none / slide back / .. whatever) + remove that class.
There are of course more complicated and more elegant ways how do it. It depends on your needs and situation.

Handling event outside the iframe for the element within iframe

My page structure is like
I have a html page which consist of a jQuery Dialog.
Within the jQuery Dialog a screen opens within iFrame.
Now the problem I am facing is - I want to close jQuery Dialog by clicking a button within iFrame. (For e.g. If my iFrame source is Google.com, then on click of search button my dialog box should close)
So, Can I write close call handling click event of search button in $(document).ready(function() of my html page?
Note :- iframe source is not accessible.
If no, then what are the other possible option to do it?
Thanks in Advance.
If the iFrame source is on a different domain than you cannot do this.
Options
Use the Dialog's built in close functionality
If the position of your item that you want to trigger the close is fixed, you can overlay a div covering. Fire the close event on the clicking of the div. http://jsfiddle.net/YvbPB/
See jQuery/JavaScript: accessing contents of an iframe my friend.

popup inside the same page

I need to show a page of contents inside my page.
ie; when i click on a link it will show 2 paragraphs inside a div as popup in the same page.
that popup must have a close button in it to close that div popup.
Is any one have an idea or code to help me in this
Thanks.
You could use something like a jQuery modal dialogue box:
Thickbox - apparently no longer maintained.
jQuery UI, recommended by those behind Thickbox.
jqModal
BlockUI
Facebox, which looks much as you'd expect, from the name...
Use hide properties for your div tag.
For hiding
document.getElementById('divid').style.display='none';
For displaying
document.getElementById('divid').style.display='block';

Categories

Resources