Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product

In this Discussion

How to use the OptionsMenu?

R_JR_J Cheerleader & TroubleshooterMunich Moderator

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...

Comments

  • peregrineperegrine MVP
    edited May 2014

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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited May 2014

    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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    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)

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    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...

  • peregrineperegrine MVP
    edited May 2014

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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • this is a test

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

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

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator


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

    hgtonight
  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    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_JR_J Cheerleader & Troubleshooter Munich Moderator

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

    peregrine
Sign In or Register to comment.