Hi, i am trying to make a plugin that would show an 'Inline Dialog' when mouse hovers over some elements.
For example say i have selected these elements:
AJS.$('.wiki-content a').nextUntil('.like-summary').andSelf().click(function() { var dialog = new AJS.Dialog({ width:300, height:'auto', id:"my-dialog", closeOnOutsideClick: true }); dialog.show(); }
Now these elements/links are clickable and a dialog will be displayed.
How can i implement if i want to show an 'Inline Dialog' when the links in the selected area are hovered.
Thanks.
Community moderators have prevented the ability to post new answers.
From the sound of it, you need to use Inline Dialog with onHover:true To see if it's what you want, I'd suggest trying it in the Sandbox.
AJS.InlineDialog(AJS.$("#popupLink"), 1, function(content, trigger, showPopup) { content.css({"padding":"20px"}).html('<h2>Inline dialog</h2><p>The inline dialog is a wrapper for secondary content/controls to be displayed on user request. Consider this component as displayed in context to the triggering control with the dialog overlaying the page content.</p><button class="aui-button">Done</button></form>'); showPopup(); return false; }, {onHover:true} );
Hover over "show inline dialog" in the preview
If that's the component you want, obviously you'll need to wire it in to your selector but it should get you on the right track :)
Inline Dialog's full docs are at https://developer.atlassian.com/display/AUI/Inline+Dialog
that works great. now how can i do this to multiple links like the section/area of links i have:
AJS.$('.wiki-content a').nextUntil('.like-summary').andSelf()
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I think inline-dialog is not intended to work in my scenario, i'll use simple dialog-box onClick function.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
this doesnt work for me.
Dont see what could be wrong.
1.I have wired AJS correctly since i can make normal AJS.Dialogs.
2. I have an <a> Element with id that is selected by AJS
3. deleted browser cache. (confirmed that .js script is loaded)
Nothing happens at all.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
have you tried this way?
AJS.$('.wiki-content a').nextUntil('.like-summary').andSelf().hover(function() { var dialog = new AJS.Dialog({ width:300, height:'auto', id:"my-dialog", closeOnOutsideClick: true }); dialog.show(); }
also try with
AJS.InlineDialog(AJS.$("#inlineDialog"), "myDialog", "dialog-content.html", {onHover:true});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
the above code works but it displays simple 'Dialog'.
Second code you provided is what i want but instead of passing it id (in this case:#inlineDialog), I want this to appear on links with id's in this section:
AJS.$('.wiki-content a').nextUntil('.like-summary').andSelf()
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.