Java script code on Custom menu item (button) on header menu created from "Custom Menu Items"

Java script code on Custom menu item (button) on header menu created from "Custom Menu Items"

由Teja Majety發表於
Number of replies: 7

Hi, 

I am using Moodle version 3.3.2.

I am trying to use a javascript code on one of the menu items in the header. This menu is created from "custom menu items"  in SIte administration->Apperance->Themes->Theme settings.

I want to insert a javascript function to that one of the menu items. In general, we just link a site URL to menu items like "Contact Us|URL here", but I want to insert a trigger of javascript to that "Contact Us" button, something like below. We can't do that in "Theme settings"


Eg: <a href="javascript:FreshWidget.show();">Your link</a>

I am trying to link the freshdesk popup window to this menu item(button).

Finally, I got another way, instead of linking the script to that button, there is another way like create a button from within Moodle core files. Like kind of HTML code to create a link and a button.

So I added the below code to "header.php" in theme->layout->include->header.php file. That worked out really well. But the problem is the button created at the end of the header, beside the search button(menu1.png).


<li><a title="Contact Us" href="javascript:FreshWidget.show();">Contact Me</a></li>

                    <li><?php echo $OUTPUT->page_heading_menu(); ?></li>

Is there any way to link the above script to a submenu, please see the attachment(menu.png).



附件 menu.png
附件 menu1.png
評比平均分數： -
In reply to Teja Majety

Re: Java script code on Custom menu item (button) on header menu created from "Custom Menu Items"

由Howard Miller發表於
Core developers的相片 Documentation writers的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 Plugin developers的相片

I'm moving this to the Themes forum...

My justification is that I think some theme customisation will be needed to do this sort of thing...

評比平均分數： -
In reply to Teja Majety

Re: Java script code on Custom menu item (button) on header menu created from "Custom Menu Items"

由Mary Evans發表於

The nearest thing to achieving this is similar to adding a login link in the custom menu in the Afterburner Moodle 2.1 theme.

Be right back with a solution...

Mary

評比平均分數： -
In reply to Teja Majety

Re: Java script code on Custom menu item (button) on header menu created from "Custom Menu Items"

由Mary Evans發表於

Here is a link that might give you a pointer as to how to achieve this.

https://docs.moodle.org/dev/Extending_the_theme_custom_menu

Also you can do a search to find out how to incorporate Jacascript in Moodle.

Hope this helps?

Mary

評比平均分數： -
In reply to Mary Evans

Re: Java script code on Custom menu item (button) on header menu created from "Custom Menu Items"

由Teja Majety發表於

Hi Mary,

Thanks for the quick reply, I read that article "Extending theme custom menu"

It's really interesting and I think I can use that. But isn't there any other simple way. I just need to add a hyperlink (with some javascript code) to a menu item.

Any other suggestions would be really appreciated, in the meanwhile I would try the article that you suggested.

Thanks,

Teja

評比平均分數： -
In reply to Teja Majety

Re: Java script code on Custom menu item (button) on header menu created from "Custom Menu Items"

由Mary Evans發表於

Nothing is simple in Moodle unless you are prepared to code it yourself.

評比平均分數： -
In reply to Mary Evans

Re: Java script code on Custom menu item (button) on header menu created from "Custom Menu Items"

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

And even if you do code it yourself it may not be simple.

評比平均分數：Useful (1)
In reply to Teja Majety

Re: Java script code on Custom menu item (button) on header menu created from "Custom Menu Items"

由Teja Majety發表於

Hi guys,

Yup I think too Gareth 滿意 滿意

I can't say I found the solution but I think it's kind round way that worked for me.

As I mentioned in the first post that I added some code in "header.php" which made a button but on the far right side of the search button.

This time I added some classes to that code, the same class that custom menu is using(found that using Dev tools). This made the menu move with the other menu items.

<div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle" title="Support" href="" data-toggle="dropdown">Support<b class="caret"></b></a>
                        <ul class="dropdown-menu" style="display: none;">
                            <li>
                                <a title="FAQ" href="#">Frequently Asked Questions</a>
                            </li>
                            <li>
                               <a title="submit support" href="javascript:FreshWidget.show();">Submit Support Request</a> 
                            </li>
                            
                        </ul>
                    </li>
                </ul>
With the above code, you can add menu items and submenus to the main menu in the header.

The limitation to this code is you can add a menu item, but it can be either as the 1st button in the menu or the last. You can't create a button in between them.

<?php echo $OUTPUT->custom_menu(); ?>
If we add the code above to this it can be the 1st item in the menu or add after the above code it can be the last.

I hope this helps to someone. 深思的

評比平均分數： -