How to Remove Disqus Footer from Webpage

How to Remove Disqus footer from webpage

I was under the impression that the new disqus uses an iframe and therefore custom CSS can't be applied:

http://help.disqus.com/customer/portal/articles/526768-introducing-the-new-disqus-and-f-a-q-

For the most part, customization is different in the new Disqus because we decided to completely re-implement our commenting embed inside of an iframe. This iframe is hosted on disqus.com and, as such, the browser won't let your website apply styles to it using CSS statements.

Stop floating sticky sidebar div at footer (almost working)

I think your problem is that your $('#footer').offset().top value changes after your disqus comments load. So you need to update footerTop (and limit based on the new footerTop value) after your comments load or every time your event fires.

something like:

$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
          }
          else {
             el.css('position','static');
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});

As with most of the cases, there is a jQuery plugin for this, as julianm pointed out in his comment, available here. It also supports a stopper value, to stop the sticky box at any desired position.

How to make a disqus comments javascript code to work in a polymer custom element

The <div id="disqus_thread"> element must be unique in the page, because it is where the disqus library will inster the downloaded thread. So you should add it after the <iron-pages> tag.

<div>
  <iron-pages>
    <view-1></view-1>
    <view-2></view-2>
  </iron-page‌​s>
</div>
<div id="disqus_thread"></div>

---

Then you have to call DISQUS.reset() every time a subpage is shown. You can know it because a class iron-selected is added to the selected element. So you can listen for the attributeChange() callback of the Polymer element, and check if it contains the iron-selected class. If it's true you can call DISQUS.reset() with the identifiers of the thread you want to load.

Polymer( {
    is: 'view-1',
    attributeChanged: function ( name, old, value )
    {
        if ( name == 'class' && this.classList.contains( 'iron-selected' ) )
        {   
            //call DISQUS.reset() here
            DISQUS.reset( {
                reload: true,
                config: function () 
                {
                    this.page.identifier = "/testView1"
                    this.page.url = "https://www.example.com/testView1"
                }
            } )
        }
    }
} ) 

---

Also, since you use DISQUS.reset(), you can remove var disqus_config = ...

---

To address the problem of uniqueness of the <div id=disqus_thread> element:

if you want to insert it in the right page inside , you can the use appendChild() to move it before calling DISQUS.reset(). Put it for example in a <div id='container'> element.

Inside attributeChange() method:

this.$.container.appendChild( document.getElementById( 'disqus_thread' ) )

Inside the view-1 <template>:

<template>
  //Page content
  <div id=container></div>
  //Page footer
</template>

Ignore the scripts for a specific page

You could prevent this function to run if the path of the current page meets some criterias. For example, you could edit your script to that :

if(
  !window.location.pathname.startsWith('/contact')
  &&
  !window.location.pathname.startsWith('/about-us')
){

(function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://websitenamehere.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();

}

Of course you should change /contact and /about-us to the urls used in your website !

---

Related Topics