Tuesday, April 26, 2016

.submit JS function not displaying CSS overlay in Safari (unless I cancel page load)

By Hường Hana 4:30 AM , , , Leave a Comment

I'm having an odd problem with Safari in an overlay isn't displaying correctly on submitting the form.

What should happen is when the submit button on the form is clicked, the overlay appears over the form.

What is happening is that nothing is appearing (though it appears as though something is as I am unable to click said button again). What is interesting though is should I cancel the page load, the overlay appears.

Here is the javascript code that is running should the form be submitted.

function main_form_overlay() {     var form_outer = jQuery('.main-form'),     form = jQuery('.main-form form'),     html,     overlay;      html = '<div class="loading"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';      form_outer.append(html);      overlay = jQuery('.main-form .loading');      form.on('submit', function(){         console.log("In Here!");          if (!overlay.is(':visible')) {             overlay.show();             console.log("Show Overlay");         } else {             overlay.hide();             console.log("Hide Overlay");         }     }); }

Here is the CSS for the "loading" class, for what it's worth.

.loading {     background: rgba(#999, 0.9);     bottom: -10px;     display: none;     left: -20px;     position: absolute;     right: -20px;     top: -10px;      .text {         color: #fff;         font-size: 26px;         font-weight: 700;         left: 0;         position: absolute;         top: 50%;         transform: translateY(-50%);         width: 100%;         }     }

The JavaScript is loading (the console logs the "In here" and "Show Overlay" phrases respectively, and if cancelled the overlay appears). However the overlay it doesn't appear on click.

I've tried on the following browsers, successfully....

  • Chrome (Apple Mac)
  • Firefox (Apple Mac)
  • Internet Explorer (Windows)

Any ideas would be helpful. Also if you need anything else, please let me know.

2 Answers

Answers 1

Checked in safari/windows and it is working fine. I suppose the problem was background: rgba(#999,0.9). You can check by interchanging comments for these lines in css- 

/*background: rgba(#999, 0.9);*/ background: rgba(158,158,158,0.9);

Please refer this fiddle.

Answers 2

Think you have an other problem. Are you sure the var overlay is at the right moment pointing your elements? Or is it undefined?

I think it is not pointing it. Just make a test. Put <div class="loading">testmessage</div> to your html and just add/replace the innerHtml on your function.

In that case you can be sure overlay = jQuery('.main-form .loading'); is valid.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment