{"id":183,"date":"2017-01-31T18:41:32","date_gmt":"2017-01-31T18:41:32","guid":{"rendered":"http:\/\/tommustester.wpengine.com\/?page_id=183"},"modified":"2017-01-31T18:41:32","modified_gmt":"2017-01-31T18:41:32","slug":"notifications","status":"publish","type":"page","link":"https:\/\/psdev2.com\/blog\/elements\/notifications","title":{"rendered":"Elements &#8211; Notifications"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221;][vc_column][stack_hero image=&#8221;38&#8243;][vc_column_text]<\/p>\n<h1>Notifications<\/h1>\n<p class=\"lead\">These modular elements can be readily used and customized across pages and in different blocks.<\/p>\n<hr class=\"short\" \/>\n<p>Explore all of Stack&#8217;s modular elements<br \/>\nat the\u00a0<a href=\"\/elements\/\">Element Index Page \u2192<\/a>[\/vc_column_text][\/stack_hero][\/vc_column][\/vc_row][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;5\/12&#8243;][stack_boxed_content padding=&#8221;boxed&#8211;lg&#8221; background=&#8221;bg&#8211;secondary&#8221;][vc_column_text]<\/p>\n<h4>Trigger Notification<\/h4>\n<p>Stack&#8217;s notification system allows you to alert users attention to certain aspects or features of the page without commanding all of their attention.<\/p>\n<p>Notifications can be triggered by any element on the page that shares the same <strong>data-notification-link<\/strong> with the corresponding <strong>.notification<\/strong> element.<\/p>\n<p>Customise the notification with the following classes and data attributes:<\/p>\n<ul class=\"bullets\">\n<li><strong>.pos-left,right,top,bottom<\/strong> &#8211; positions the notification on the page<\/li>\n<li><strong>[data-animation=&#8221;from-left,right,top,bottom&#8221;]<\/strong> &#8211; determines the direction the notification should pop in from<\/li>\n<li><strong>.col-*<\/strong> &#8211; Use the <a href=\"elements-grid.html\">grid<\/a> classes to determine the width of the notification<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/stack_boxed_content][\/vc_column][vc_column width=&#8221;7\/12&#8243;][stack_notification button_text=&#8221;Trigger Notification&#8221; trigger_name=&#8221;mainModal&#8221;][vc_single_image image=&#8221;185&#8243; img_size=&#8221;100&#215;100&#8243;][vc_empty_space][vc_column_text]<\/p>\n<h5>Well Triggered!<\/h5>\n<p>Hey there I&#8217;m Mandy, the notification master. You clicked the trigger, and that triggered me to appear, so here I am.[\/vc_column_text][\/stack_notification][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;5\/12&#8243;][stack_boxed_content padding=&#8221;boxed&#8211;lg&#8221; background=&#8221;bg&#8211;secondary&#8221;][vc_column_text]<\/p>\n<h4>Autoshow Notification<\/h4>\n<p>A notification can be set to automatically display after a certain period of time once the page has loaded. You will have already seen an autoshow appear in the top-right hand corner of this page when you arrived.<\/p>\n<p>You can adjust the autoshow time by adding the data attribute <strong>data-autoshow=&#8221;&#8221;<\/strong> to the <strong>.notification<\/strong> element with a millisecond value ie. a value of &#8216;1000&#8217; would show the notification 1 second after the page has loaded.[\/vc_column_text][\/stack_boxed_content][\/vc_column][vc_column width=&#8221;7\/12&#8243;][stack_notification button_text=&#8221;Trigger Notification&#8221; trigger_name=&#8221;autoshowModal&#8221; autoshow=&#8221;500&#8243;][vc_column_text]<\/p>\n<h5>Autoshow Notification<\/h5>\n<p>Here&#8217;s a handy little notification that&#8217;ll pop up and tell the user something important about your page.[\/vc_column_text][\/stack_notification][\/vc_column][\/vc_row][\/vc_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221;][vc_column][stack_hero image=&#8221;38&#8243;][vc_column_text] Notifications These modular elements can be readily used and customized across pages and in different blocks. Explore all of Stack&#8217;s modular elements at the\u00a0Element Index Page \u2192[\/vc_column_text][\/stack_hero][\/vc_column][\/vc_row][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;5\/12&#8243;][stack_boxed_content padding=&#8221;boxed&#8211;lg&#8221; background=&#8221;bg&#8211;secondary&#8221;][vc_column_text] Trigger Notification Stack&#8217;s notification system allows you to alert users attention to certain aspects or features of the page [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":33,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/psdev2.com\/blog\/wp-json\/wp\/v2\/pages\/183"}],"collection":[{"href":"https:\/\/psdev2.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/psdev2.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/psdev2.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/psdev2.com\/blog\/wp-json\/wp\/v2\/comments?post=183"}],"version-history":[{"count":0,"href":"https:\/\/psdev2.com\/blog\/wp-json\/wp\/v2\/pages\/183\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/psdev2.com\/blog\/wp-json\/wp\/v2\/pages\/33"}],"wp:attachment":[{"href":"https:\/\/psdev2.com\/blog\/wp-json\/wp\/v2\/media?parent=183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}