CODEWITHSUNDEEP
jquery
ADRIAN
ADRIAN

Reputation: 109

Changing href for modal pop up with jQuery

I am using joomla!, i have a button that enables a form to pop out from the side when clicked. I want to be able to change the href for a screen size less than 600px so that instead of using the pop up it redirects the user to the contact page.

I have added this jquery:

    jQuery(function(){
  var hrefs = ['contact-us', '#'];

  jQuery(window).on('resize', function() {
    jQuery('.case-study-signoff').prop('href', function() {
      return hrefs[jQuery(window).width() < 600 ? 0 : 1];

    });
  }).trigger('resize');
});

The previous jquery successfully changes the href as i can see in the html however nothing happens if you click it. You can right click and open in new tab which takes you to the desired contact page but not when clicked.

Upvotes: 0

Views: 205

Answers (1)

Janis Vepris
Janis Vepris

Reputation: 577

I've tested this on your site and it seems to work:

jQuery(document).ready(function() {
    jQuery('.case-study-signoff').off().click(function (e) {
        e.preventDefault();

        if (jQuery(window).width() < 600) {
            window.location = '/contact-us';
        } else {
            pwebContact177.toggleForm();
        }
    });
});

This code does the following:

  1. Waits before the document is fully loaded
  2. Removes the default event handlers from your '<- Contact Us' button.
  3. Adds a new CLICK event handler
  4. When you click on the button the code checks the width of the screen
  5. If width < 600 then redirect to /contact-us
  6. Else toggle the pop up with the contact form.

Upvotes: 1

Related Questions