Javascript event when Ribbon buttons container in opened - javascript

I need to hide a part of page header when user starts working with ribbon.
So is there any way to get JavaScript event when container in Ribbon is opened/closed so that i could affect some other element on the page using jQuery. Properties of _ribbon object didn't show the such information..
by container i mean set of buttons, which appear after clicking on ribbon tabs, here's a screenshot: http://oi41.tinypic.com/bim0ec.jpg

Related

Trigger Click on Dynamic/ Relative Parent Frame Modal Button from within an Iframe

On this page I want to trigger a click on the home button from within the iframe, by both a click trigger and timeout trigger.
The home button can be found by navigating into either category
Then either form.
The iframe displays a fake form submission button**, when clicked it goes to a success page. The home button is at the top right.
The trigger button is the green button on the success page.
The home button on each form is named dynamically relative to each form being viewed ( #successhome1, #successhome2, #successhome3, etc. ) and contains the functions to close it's relative modal (*and not mess with other modals).
How can I implement Javascript/Jquery (sorry for my ignorance if either is not appropriate) so that a click on the green button within the iframe, or a timeout of 3 seconds after page load, causes the relative parent frame home button to be clicked?
*NB:The original version of my home button had non-dynamic IDs, but this causes the toggle of shared ID/class elements - thus displaying hidden modals whilst hiding the active modal.
** I'm using a fake form submission button, as when live, the form submission will be handled cross-domain, limiting what can be achieved between parent frame and iframe.

Binding dynamically generated jQuery mobile elements to Javascript events

I have multiple pages in my jQuery mobile app and the "infamous" back button is being inserted dynamically; what I mean is that when the main page loads the back button does not show up on the second page in the DOM. As soon as I navigate to the second page jQuery mobile inserts the back button.
I am using the
data-add-back-btn="true"
on the header div of the page to get the back button.
I want to run some of my own functions when the user clicks on the back button. My question is how can I target this dynamically generated content via JavaScript or jQuery?

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.

ExtJS Managing windows and detecting front window

I have an application that has many windows, which can be handled by corresponding buttons on a toolbar (sounds familiar right?!)
I currently have it so that if you click a button on the toolbar, if it is not ontop bring it to the front (toFront), if it is minimised, maximise it etc.
I want to be able to detect whether the window is the front most window...
Cheers
EDIT
TO further describe the situation: say if I have a window that is at the front, or "active". Then I click the corresponding toolbar button which minimises that window. I want to then find which window becomes "active".
To manage your Ext.Window instances use the Ext.WindowMgr singleton:
http://dev.sencha.com/deploy/dev/docs/?class=Ext.WindowMgr
In a button's handler:
// Assuming 'winID' has been populated with the ID of an
// Ext.Window instance associated with the button.
win = Ext.WindowMgr.get(winID);
win.show();
Ext.WindowMgr.bringToFront(win);
win.maximize();
Why not set an activeWindow property as part of the handler for clicking a button on the toolbar? If the window associated with that button is already at the front, there's nothing left to do.

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.

Categories

Resources