CRE Notify updates - V1

In this example below you will see how to do a CRE Notify updates - V1 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by eoneill, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright eoneill ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CRE Notify updates - V1</title>
  
<script src="https://www.irishtimes.com/assets/js/jquery2014.js"></script>
<script>
var jq = jQuery.noConflict(),
        $window = jq(window),
        $windowHeight = null,
        $windowWidth = null,
        scrollbarWidth = 0,
        scrollables = {},
        screensSizes = [240, 320, 480, 768, 960],
        current_quadrant = null,
        torso_scroll = null,
        mobile_nav_scroll = null,
        mobile_search = null,
        mobile_home = null,
        domReady = false;

</script>

<script src="https://www.irishtimes.com/assets/js/libs/framework.js"></script>

<script src="https://www.irishtimes.com/assets/js/global.js"></script>

<script src="https://www.irishtimes.com/assets/js/notify.js"></script>

  
  <link rel='stylesheet prefetch' href='https://www.irishtimes.com/assets/css/framework.css'>
<link rel='stylesheet prefetch' href='https://www.irishtimes.com/assets/css/styles2014.css'>
<link rel='stylesheet prefetch' href='https://www.irishtimes.com/assets/css/global.css'>
<link rel='stylesheet prefetch' href='https://www.irishtimes.com/assets/css/article.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="wrapper">
  <div id="torso" role="main" class="clearfix">
    <div class="left-remainder">
      <div class="inner"></div>
    </div>
    <div class="container">
      <div class="bt-container">
        <div class="row">
          <div class="span8 " id="content_left"> 

            <article class="article row">
              <div class="article_holder span8">
                <section class="header">
                  <hgroup>
                    <h1 property="headline">Headline</h1>
                    <h2 property="description"> Summary </h2>
                  </hgroup>
                  <!-- Top Area  Byline-Image-Twitter-Comments -->
                  
                  <div class="article-top-area">
                    <div class="time-metadata">
                      <time title="">Timestamp</time>
                      <span title="" class="modified"><span>Updated: </span>N days ago</span> </div>
                    <div class="article-metadata has-image">
                      <div class="author"> <a href=""> <img  height="76" alt="" width="76" property="foaf:img" src="https://placehold.it/76x76"> </a> <span class="byline"> <a href="#polopoly-writer-page-this-link-has-GTM-events1">Author</a> <span class="dateline">dateline</span> 
                        
                        <a class="addthis_button_twitter_follow_native at300b" tw:screen_name="@author" tw:show-count="false">
                        
                        </a> </span> </div>
                      <div class="comments"> <a class="" href="">
                        <p><span class="vf-counter vf-widget">0</span></p>
                        </a> </div>
                    </div>
                  </div>
                  <div class="article_image image-carousel" style=""> <img title="" height="330" alt="" data-tablet="box_620_330" width="620" class="responsive-img" data-desktop="box_620_330" src="https://placehold.it/620x330" data-mobile="box_300_160"> </div>
                  
                </section>
                <section property="articleBody" class="article_body">
                 <div class="shareTools" id="share_gutter">
					<div class="addthis_sharing_toolbox">
	<div class="more-tools more-tools--hidden">
		<div class="addthis_sharing_toolbox">			
		</div>		
		<div class="more-tools--custom">
						<a class="print social-icons-Print" value="Print this page">&nbsp;</a>
							<a class="rss social-icons-RSS" href="">&nbsp;</a>
					</div>
	</div>
	<div class="more-button--wrapper">                    
		<a class="more-button social-icons-More">&nbsp;</a>
	</div>
</div>      

			</div>
			<div class="beacon">&nbsp;</div>
                  
       <div class="article_bodycopy">           
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis metus, feugiat ut odio id, fringilla elementum nulla. Quisque lacinia accumsan odio sit amet congue. In hac habitasse platea dictumst. Vestibulum mi est, volutpat nec sapien at, dapibus lacinia mi. Morbi lobortis sollicitudin mi, eget fermentum risus aliquet ut. Etiam eu arcu molestie, ornare massa eget, laoreet diam. Vestibulum auctor vitae ex id maximus. Nulla ligula lectus, lacinia sed augue ac, lacinia rhoncus neque. Suspendisse potenti. Vivamus eget augue risus. In velit ipsum, cursus non ipsum ut, viverra iaculis ex. Sed at elit et metus consequat facilisis. Nunc sagittis volutpat orci, vitae consectetur turpis. Donec turpis risus, feugiat ac arcu vel, porttitor tempus sem.</p>

<p>In elementum, arcu in lobortis mattis, ipsum ipsum tempus enim, eget hendrerit dui nunc ut arcu. Sed in lectus porta, tristique arcu sed, pretium sapien. Quisque condimentum nunc a lectus commodo, sit amet mollis libero aliquam. In sit amet suscipit eros, ut pharetra massa. Aliquam at sem condimentum, vestibulum sapien in, placerat magna. Proin at mauris ut quam tincidunt faucibus eget et quam. Nullam quis urna a nibh maximus hendrerit vel in turpis. Aenean at justo mattis, pretium erat sit amet, ornare purus. Fusce vulputate bibendum mauris, sit amet dictum purus lobortis a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ut orci at nibh dapibus mollis. Praesent facilisis felis ac laoreet ornare. Vestibulum eget leo massa. Nulla ligula eros, pharetra ut ornare vel, suscipit sed lacus. Sed ligula elit, vehicula sit amet mauris a, tempus pharetra tellus.</p>

<p>Vivamus malesuada pulvinar felis eget cursus. Fusce congue lacus eros. In fermentum aliquam diam eu rhoncus. Aenean ultrices, libero consectetur ultricies feugiat, magna orci fringilla felis, ut aliquet quam lorem sed velit. Curabitur pulvinar, turpis et blandit iaculis, lorem sem consectetur urna, eget suscipit dui lorem volutpat libero. Quisque id condimentum leo. Suspendisse volutpat aliquam metus ut ornare.</p>
                  
                  
                  <aside class="related-articles--instream has-2">
                    <ul>
                      <li class="gallery"><a class="gtm-event" href="#"><span class="instream-headline">Related article</span></a></li>
                      <li class="audio"><a class="gtm-event" data-evt-category="Related links" href="#"><span class="instream-headline">Related article</span></a></li>
                    </ul>
                  </aside>
                  
                  
                <p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis metus, feugiat ut odio id, fringilla elementum nulla. Quisque lacinia accumsan odio sit amet congue. In hac habitasse platea dictumst. Vestibulum mi est, volutpat nec sapien at, dapibus lacinia mi. Morbi lobortis sollicitudin mi, eget fermentum risus aliquet ut. Etiam eu arcu molestie, ornare massa eget, laoreet diam. Vestibulum auctor vitae ex id maximus. Nulla ligula lectus, lacinia sed augue ac, lacinia rhoncus neque. Suspendisse potenti. Vivamus eget augue risus. In velit ipsum, cursus non ipsum ut, viverra iaculis ex. Sed at elit et metus consequat facilisis. Nunc sagittis volutpat orci, vitae consectetur turpis. Donec turpis risus, feugiat ac arcu vel, porttitor tempus sem.</p>

<p>In elementum, arcu in lobortis mattis, ipsum ipsum tempus enim, eget hendrerit dui nunc ut arcu. Sed in lectus porta, tristique arcu sed, pretium sapien. Quisque condimentum nunc a lectus commodo, sit amet mollis libero aliquam. In sit amet suscipit eros, ut pharetra massa. Aliquam at sem condimentum, vestibulum sapien in, placerat magna. Proin at mauris ut quam tincidunt faucibus eget et quam. Nullam quis urna a nibh maximus hendrerit vel in turpis. Aenean at justo mattis, pretium erat sit amet, ornare purus. Fusce vulputate bibendum mauris, sit amet dictum purus lobortis a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ut orci at nibh dapibus mollis. Praesent facilisis felis ac laoreet ornare. Vestibulum eget leo massa. Nulla ligula eros, pharetra ut ornare vel, suscipit sed lacus. Sed ligula elit, vehicula sit amet mauris a, tempus pharetra tellus.</p>

<p>Vivamus malesuada pulvinar felis eget cursus. Fusce congue lacus eros. In fermentum aliquam diam eu rhoncus. Aenean ultrices, libero consectetur ultricies feugiat, magna orci fringilla felis, ut aliquet quam lorem sed velit. Curabitur pulvinar, turpis et blandit iaculis, lorem sem consectetur urna, eget suscipit dui lorem volutpat libero. Quisque id condimentum leo. Suspendisse volutpat aliquam metus ut ornare.</p>
                  <h4 class="crosshead"> Crosshead</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis metus, feugiat ut odio id, fringilla elementum nulla. Quisque lacinia accumsan odio sit amet congue. In hac habitasse platea dictumst. Vestibulum mi est, volutpat nec sapien at, dapibus lacinia mi. Morbi lobortis sollicitudin mi, eget fermentum risus aliquet ut. Etiam eu arcu molestie, ornare massa eget, laoreet diam. Vestibulum auctor vitae ex id maximus. Nulla ligula lectus, lacinia sed augue ac, lacinia rhoncus neque. Suspendisse potenti. Vivamus eget augue risus. In velit ipsum, cursus non ipsum ut, viverra iaculis ex. Sed at elit et metus consequat facilisis. Nunc sagittis volutpat orci, vitae consectetur turpis. Donec turpis risus, feugiat ac arcu vel, porttitor tempus sem.</p>
                  
<p>In elementum, arcu in lobortis mattis, ipsum ipsum tempus enim, eget hendrerit dui nunc ut arcu. Sed in lectus porta, tristique arcu sed, pretium sapien. Quisque condimentum nunc a lectus commodo, sit amet mollis libero aliquam. In sit amet suscipit eros, ut pharetra massa. Aliquam at sem condimentum, vestibulum sapien in, placerat magna. Proin at mauris ut quam tincidunt faucibus eget et quam. Nullam quis urna a nibh maximus hendrerit vel in turpis. Aenean at justo mattis, pretium erat sit amet, ornare purus. Fusce vulputate bibendum mauris, sit amet dictum purus lobortis a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ut orci at nibh dapibus mollis. Praesent facilisis felis ac laoreet ornare. Vestibulum eget leo massa. Nulla ligula eros, pharetra ut ornare vel, suscipit sed lacus. Sed ligula elit, vehicula sit amet mauris a, tempus pharetra tellus.</p>

<p>Vivamus malesuada pulvinar felis eget cursus. Fusce congue lacus eros. In fermentum aliquam diam eu rhoncus. Aenean ultrices, libero consectetur ultricies feugiat, magna orci fringilla felis, ut aliquet quam lorem sed velit. Curabitur pulvinar, turpis et blandit iaculis, lorem sem consectetur urna, eget suscipit dui lorem volutpat libero. Quisque id condimentum leo. Suspendisse volutpat aliquam metus ut ornare.</p>
                  
               <div class="shareToolsBottom" id="share-base">
                <div class="addthis_sharing_toolbox">
	<div class="more-tools more-tools--hidden">
		<div class="addthis_sharing_toolbox">			
		</div>		
		<div class="more-tools--custom">
						<a class="print social-icons-Print">&nbsp;</a>
							<a class="rss social-icons-RSS gtm-event"  href="" target="_blank">&nbsp;</a>
					</div>
	</div>
	<div class="more-button--wrapper">                    
		<a class="more-button social-icons-More">&nbsp;</a>
	</div>
</div>      

</div>
         
                  </div> <!-- / .article_bodycopy -->
                </section>
                <div class="row"> </div>
                <div class="article_footer"> <span property="keywords" content=""></span>
                  <div class="row">
                    <div class="span8"> <div class="topics_holder" style="max-height: 32px;"> <span class="toggle_topics visible"></span>
  <ul class="topics_tags">
    <li><strong>Topics:</strong></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
    <li><a href="">Topic</a></li>
  </ul>
</div>
                    </div>
                  </div>
                  <!-- Sample markup for related items (to see if an aside inside the article is semantic and SEO friendly enough) -->
                  <aside class="related-articles">
                    <h2>Read More</h2>
                    <ul>
                      <li class="internal"><a href="">Another article link</a></li>
    <li class="audio"><a href="">Another article link</a></li>
    <li class="video"><a href="">Another article link</a></li>
    <li class="gallery"><a href="">Another article link</a></li>
    <li class="opinion"><a href="">Another article link</a></li>
    
                      <div id="related-collapse" class="collapse">
                        <li class="pdf"><a href="">Another article link</a></li>
    <li class="internal"><a href="">Another article link</a></li>
    <li class="analysis"><a href="">Another article link</a></li>
                      </div>
                      <button id="more-related" type="button" class="btn" title="Show more related articles"> <span class="symbol"></span> </button>
                    </ul>
                    <div class="highlights sport"> <a href=""> <span class="img-holder"> <img height="122" alt="" data-tablet="box_220" width="220" class="responsive-img" data-desktop="box_220" src="https://placehold.it/220x122" data-mobile="box_300_160"> </span>
                      <div class="highlights-chunk">
                        <h2 class="pdf"> Manual Link </h2>
                        <p>this is the summary</p>
                      </div>
                      </a> </div>
                  </aside>
                  <!-- End of the sample aside markup --> 
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>
    <div class="right-remainder">
      <div class="inner"></div>
    </div>
  </div>
</div>

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-555a5d264efd8127" async="async"></script>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/eoneill/cre-notify-updates-v1-XgYqqa */
.read-next--title {
  display: inline-block;
  margin-bottom: .3em;
}


/*Downloaded from https://www.codeseek.co/eoneill/cre-notify-updates-v1-XgYqqa */
  var jq = jQuery.noConflict();


            jq(document).ready(function() {
                var showContent = 0;

				jq(document).on('click', '.read-next--close', function() {
                    // Hide notification
                    jq(this).trigger('notify-hide');
                });

                var readNextOptions = {
                    style: "readNext",
                    globalPosition: 'bottom right',
                    clickToHide: false,
                    autoHide: false
                    //autoHideDelay: 8000
                };

                /* Recommended article */
                var articlelink = "https://www.irishtimes.com/news/politics/bromance-blossoms-as-fanboy-slim-meets-justin-biebeau-1.3143568";
                var articleheadline = "Bromance blossoms as Fanboy Slim meets Justin Biebeau";
                var articleimage = '<img src=\"https://www.irishtimes.com/polopoly_fs/1.3143566.1499199821!/image/image.jpg\" />';
                var	section = "news";
                var evtCategory = "Read Next";
                var evtLabel = "testing";
                jq.notify.addStyle('readNext', {
                    html:
						"<div>" +
						"<div class='read-next "+section+"'>" +
                        "<span class='read-next--title'>Other readers of this article are reading...</span>" +
                        "<span class='read-next--close gtm-event' data-evt-category='" + evtCategory + "' data-evt-action='Closed $readNextLink, bottom of page' data-evt-label='" + evtLabel + "'></span>" +
                        "<a href='" + articlelink + "' class='gtm-event' data-evt-category='" + evtCategory + "' data-evt-action='Clicked $readNextLink, bottom of page' data-evt-label='" + evtLabel + "' >" +
                        "<div class='read-next--img' data-notify-html='image'/>" +
                        "<div class='read-next--headline' data-notify-html='headline'>" +
                        "</div>" +
                        "</a>" +
						"</div>"+
                        "</div>"
                });

                /* Use smartscroll listener to fire the panel at end of article */
                jq(window).smartscroll(function(){
                    //Calculate how far down the page the user has scrolled
                    var scrollPos = (jq(window).scrollTop() / jq('div.article_bodycopy').height()) * 100;
                    scrollPos = Math.round(scrollPos);

                    if(scrollPos > 75){
                        showContent ++;
                        if(showContent == 1){
                            jq.notify({
                                headline: articleheadline,
                                image: articleimage
                            }, readNextOptions);
                            dataLayer.push({
                                'category': evtCategory,
                                'action': 'Shown $readNextLink, bottom of page',
                                'label': evtLabel
                            }, {'event': 'data-layer-event'});
                        }
                    }
                }); // end scroll

            });

Comments