function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
LBSLBS 

Auto-hide <ape:outputpanel> with toast - alert

I have below VF code to display LDS toast alert based on the showSuccess values of the controller. How can i auto-hide this panel after say 3 seconds. I'm looking for a solution something like .delay(3000).fadeOut() in jquery which can use for ​ tags  
<apex:outputPanel id="serverSuccessId" rendered="{!showSuccess}">
            <div id="serverValSuccessId">
                <div class="slds-notify_container">
                    <div class="slds-notify_container slds-is-relative">
                        <div class="slds-notify slds-notify_toast slds-theme_success" role="alert">
                          <span class="slds-assistive-text">success</span>
                          <span class="slds-icon_container slds-icon-utility-info slds-m-right_small slds-no-flex slds-align-top" title="Description of icon when needed">
                            <svg class="slds-icon slds-icon_small" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                    xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#info">
                                </use>
                            </svg>
                          </span>
                          <div class="slds-notify__content">
                            <h2 class="slds-text-heading_small">Your request successfully submitted!</h2>
                          </div>
                          <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close" onClick="hideNotification(); return false;">
                            <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                    xlink:href="/apexpages/slds/latest//assets/icons/utility-sprite/svg/symbols.svg#close">
                                </use>
                            </svg>
                            <span class="slds-assistive-text">Close</span>
                          </button>
                        </div>
                      </div>
                  </div>
            </div>    
        </apex:outputPanel>
Naveen KNNaveen KN
If you are using the toast message of lightning which is out of the box feature, you can set the duration. Go through this link https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_force_showToast.htm

Regards,
Naveen
@naveenkn55 
LBSLBS
Thanks for the lead. Well this is not a VF component but i'm using plain Lightning Design System. So that i don't have that level of control. Any thoughts?