Question 277425 in Html Question posted in
Some basic documentation can be found here.

Html – How to enable right click in a new tab but normal clicking (left-click) redirects to new page using the same tab?

I am using a form in my project having multiple pages to fill information, these below are some of the items in my left side menu to switch to different pages while filling the form. So currently I am using the functionality to redirect the page on the same tab when clicking on any of these items. But when I right click, open in new window or new tab window doesn’t appear. I want to enable open in a new tab only when right clicking on these items.

                        <li id="arrival_button" class="nav-item w-100 side_bar_buttons">
                            <a onclick="save_and_redirect('mainform','arrival_information')"
                                class="nav-link align-middle px-0 black_color">
                                <span class="ms-1  d-sm-inline">Arrival
                                    Information</span>
                                </a
                        </li>

                        <li id="food_drinks_button" class="nav-item w-100 side_bar_buttons">
                            <a onclick="save_and_redirect('mainform', 'food_and_drinks');"
                                class="nav-link align-middle px-0 black_color">
                                <span class="ms-1  d-sm-inline">Food &
                                    Drinks</span>
                                </a>
                        </li>

                        <li id="guest_button" class="nav-item w-100 side_bar_buttons">
                            <a onclick="save_and_redirect('mainform', 'guest_req');"
                                class="nav-link align-middle px-0 black_color">
                                <span class="ms-1  d-sm-inline">Guest Requirements</span>
                        </a>
                        </li>

I already know about using target="_blank" with tags in Django but obviously like I already explained I dont want to use this functionality to always open them in a new tab only when I want to right click on them.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Actually my Issue resolved after installing django-admin-contextmenu==0.1.0 in my project using pip install django-admin-contextmenu and after that updated it my settings file.

    Added contextmenu to INSTALLED_APPS:

    INSTALLED_APPS = (
    ...
    'contextmenu',
    ...
)

    Now all tags where I was using href automatically updated the right click context menu in my whole website. And it this above sidebar I just added herfs and the pages links and now its working.


  2. 0

    You can use JavaScript to handle the right-click event and open the link in a new tab programmatically.

    oncontextmenu attribute to each anchor tag (the links). By right-click on the link, the openInNewTab function will be called with the form and page as arguments. This function will open a new window with the specified URL.

    Make sure to replace 'your-url-here?form=' + form + '&page=' + page with the actual URL you want to open in a new tab.

    And return false; is used to prevent the default context menu from showing up when right-clicking.

    Remember to adjust the URL in window.open according to the project’s structure and routing.

    I have updated the snippet. Please take a look.

    function showContextMenu(event, form, page) {
        event.preventDefault();

        var contextMenu = document.getElementById('contextMenu');
        contextMenu.style.display = 'block';
        contextMenu.style.left = event.clientX + 'px';
        contextMenu.style.top = event.clientY + 'px';

        document.getElementById('openInNewTab').addEventListener('click', function() {
            window.open('arrival_information?form=' + form + '&page=' + page, '_blank');
            contextMenu.style.display = 'none';
        });

        // Add similar event listeners for other context menu options
    }

    document.addEventListener('click', function() {
        var contextMenu = document.getElementById('contextMenu');
        contextMenu.style.display = 'none';
    });
    #contextMenu{
background-color: beige;
padding: 10px 15px;
}
    <li id="arrival_button" class="nav-item w-100 side_bar_buttons">
    <a onclick="save_and_redirect('mainform','arrival_information')"
       oncontextmenu="showContextMenu(event, 'mainform', 'arrival_information'); return false;"
       class="nav-link align-middle px-0 black_color">
        <span class="ms-1  d-sm-inline">Arrival Information</span>
    </a>
</li>

<div id="contextMenu" style="display:none; position:absolute;">
    <div id="openInNewTab"><a href="#!">Open in New Tab</a></div>
    <div id="openInNewTab"><a href="#!">Open in new window</a></div>
    <!-- Add other context menu options here -->
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search