Show 'Inline Dialog' when hover over selected elements.

moxin
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 19, 2013

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.

2 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

2 votes
Answer accepted
BenA
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 20, 2013

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.

  1. Go to http://docs.atlassian.com/aui/latest/sandbox/?component=inlineDialog</li<>>
  2. Replace the code in the "javascript" input with:
    AJS.InlineDialog(AJS.$("#popupLink"), 1,
    
        function(content, trigger, showPopup) {
    
            content.css({"padding":"20px"}).html('&lt;h2&gt;Inline dialog&lt;/h2&gt;&lt;p&gt;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.&lt;/p&gt;&lt;button class="aui-button"&gt;Done&lt;/button&gt;&lt;/form&gt;');
    
            showPopup();
    
            return false;
    
        }, 
    
        {onHover:true}
    
    );
  3. Click "run javascript" button to ensure the new code takes effect
  4. 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

moxin
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 20, 2013

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()

moxin
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 21, 2013

I think inline-dialog is not intended to work in my scenario, i'll use simple dialog-box onClick function.

Alexej Geldt
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 13, 2013

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.

0 votes
RambanamP
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 19, 2013
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});

moxin
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 19, 2013

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()

TAGS
AUG Leaders

Atlassian Community Events