cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
gibbonsd
Community Participant

Closing Style Guide Highlights/Alerts

Using the Canvas LMS style guide to create a Highlights/Alerts on our beta instance.  I have it appears as I wanted, however, I have encountered an issue with closing the Alert.  I have the class "Button Button--icon-action close_link" in the code, however, the close_link does not appear to be working.  

Browser Checker Alert

Is the close_link what I need to use for closing?  Is there any more documentation beyond what the Canvas LMS to further explain how these work within Canvas?

4 Replies
robotcars
Community Champion

Hi Dona,

You'll probably have to create a custom event listener in jQuery or plain JavaScript. I can provide examples if you want.

gibbonsd
Community Participant

Hi Robert,

Thanks for the info.   I determine that I would use the JQuery delay fadeout of the Alerts.  How quickly the Alerts fadeout will be based on the student's browser and operating system. 

The fade out can be added.

You might know this, others might not...

It should be noted that the example on the /styleguide shows the alert wrapped by a <p>paragraph</p> tag. The paragraph tag is a block level element and cannot contain another block level element without force closing it. Use of the <p> would leave orphaned elements in the DOM as <p></p> and you would not be able to remove them, or find yourself with potentially frustrating results.

Here's what that looks like in the DOM if using the provided example.

292426_Screen Shot 2018-10-01 at 2.45.45 PM.png

This is obvious even if you Inspect Elements of the styleguide as well.

292436_Screen Shot 2018-10-01 at 2.52.43 PM.png

Therefore, in my example, I'm excluding the <p> wrapping the alert <div> and added a custom class to the div, to close the alert. The on(click) handler looks for the closest custom-alert class and removes it from the DOM.

var bAlert =
`<div class="ic-flash-info custom-alert">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-info"></i>
    </div>
    Info: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>`;

$('body').prepend(bAlert);
$('.close_link').on('click', function(e) {
     $(this).closest('.custom-alert').remove();
});

I would also suggest looking into doing this without jQuery if you're going to depend on this functionality long term.

Sometimes I seem to get away with posting code and skipping moderation. I know if I add/edit my post and not the code that it goes for moderation, adding the following...

 

I have also used .close_link in the example event handler above. It might be wise to use a different class for closing your custom alerts to prevent stepping on existing handlers Canvas uses.

 

Also noticed that Canvas seems to put these alerts into list items.