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 -
Кількість відповідей: 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
Середня оцінка: -
У відповідь на 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

Середня оцінка: -
У відповідь на 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

Середня оцінка: -
У відповідь на 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.

Середня оцінка: -
У відповідь на 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. задумався

Середня оцінка: -