How to use the OptionsMenu?

R_J

I know I can look up into PHP code to find my way without much asking, but when it comes to JS/CSS I do not even know where to start. So let me tell you a) what I wanted to achieve and b) what I try. Afterwards please lead me in the right direction...

a) I like the small popup option menu, symbolized with a cog and showing you for example the option to edit a comment. I wanted to copy that kind of popup menu in a module. I want to use it in the header (in a modules h4 element) and in the list items that are shown in there.
b) I've copied the html into my view by looking at the source of the rendered page and do a copy and paste of that code:

<span class="Options">
   <span class="ToggleFlyout OptionsMenu">
      <span title="Optionen" class="OptionsTitle">Optionen</span>
      <span class="SpFlyoutHandle"></span>
      <ul class="Flyout MenuItems">
         <li><a class="EditDiscussion" href="/vanilla/post/editdiscussion/4">Bearbeiten</a></li>
         <li><a class="Popup AnnounceDiscussion" href="/discussion/announce?discussionid=4&amp;Target=discussions">Ankündigen...</a></li>
         <li><a class="SinkDiscussion Hijack" href="/vanilla/discussion/sink?discussionid=4&amp;sink=1">Versenken</a></li>
         <li><a class="CloseDiscussion Hijack" href="/discussion/close?discussionid=4&amp;close=1">Schließen</a></li>
         <li><a class="DeleteDiscussion Popup" href="/discussion/delete?discussionid=4">Löschen</a></li>
      </ul>
   </span>
   <a title="Lesezeichen setzen" class="Hijack Bookmark" href="/vanilla/discussion/bookmark/4/381WZP5ZENSQ">Lesezeichen setzen</a>
</span>

While those menu entries wouldn't make sense here, they are just my example if I can see the menu in my panel the same way as I can see it in the discussions list. I can not.
I'd guess I have to add a someElement:hover or something like that to my css but I do not even know how to search for that in the code...

peregrine

css

    .PanelColumn .Options {
    display: block;
    }

jquery..

<h4>Categories</h4><span class="Options"><span class="ToggleFlyout OptionsMenu Rjfly">...

 $(".Rjfly").hover(function(){
      $(".Flyout").toggle() 
    }); 

but then you would also need to isolate the .Flyout as well.

look at line 707 in global.js to get ideas.

peregrine

can you explain more of what you want to do, or post a sample mocked up screenshot.

peregrine

might be a start. you may need !Important as well.

but this worked for me in panel.

.PanelColumn .Options {
    display: block;
}

.Options needs to be visible for the area you want.

R_J

I want my CategoriesModulePlus have an option menu (like that little admin menu you get when you hover over the discussions in /discussions)

I want it added to that code <h4>Categories</h4> so it must look like <h4>Categories</h4><span class="Options"><span class="ToggleFlyout OptionsMenu">...

I've added it there but nothing happens when I hover over the heading (to no surprise, since I expect I must add some div.BoxCategories h4:hover {whatsoever} or some JS to it to get it working)

peregrine

css

    .PanelColumn .Options {
    display: block;
    }

jquery..

<h4>Categories</h4><span class="Options"><span class="ToggleFlyout OptionsMenu Rjfly">...

 $(".Rjfly").hover(function(){
      $(".Flyout").toggle() 
    }); 

but then you would also need to isolate the .Flyout as well.

look at line 707 in global.js to get ideas.

R_J

Hmm... not even

$("h4").hover(function(){
alert('test');
    // $(".Flyout").toggle();
}); 

does anything, although the script has been loaded and I don't have the slightest idea how to find out why. JS is a mystery to me...

peregrine

do you have a link to your code or a test site (and or code) you could pm me.

peregrine

this is a test

peregrine

put this in your console in firebug

jQuery(document).ready(function($) { 
   $("h4").hover(function(){
    alert('test');
    // $(".Flyout").toggle();
    });  }); 

and hover over my comment above and I edited my previous comment.

R_J

Works. I've already tried it here http://jsfiddle.net/W7ScP/

R_J

I've visited my site with the console enabled and found that!

R_J

My fault

That code is better:

jQuery(document).ready(function($){
    $("div.BoxCategories>h4").hover(function(){
alert('test');
//        $("div.BaxCategories>h4>span>span>ul.Flyout").toggle();
    });
});

R_J

Thanks to @peregrine it is working now. I'll give a short summary as soon as I've sorted everything up