External links are not 'loading' ? (by left clicking)

Question

Good night,

I am setting up a landingpage for a Retreat that will happen in my church, I am working with (middleman / frameworks [bootstrap]/ HTML slim [ruby]/ Heroku), I am creating a default link, more when I left click it does not load the link more when I right click and open in new tab, it normally loads ?

Obs.: "Internal link is working normally"

Thanks in advance for your attention.

page link -> https://retiroespiritual.herokuapp.com

link to the project’s Github -> https://github.com/rsales/landing_retiro_espiritual

Follows the Code:

  /! contatos
  #contato.scroll
  .box2
    .container
      center
        .row
          br
          h2 Contato
          br
          br
          br
          br
          .col-md-3
            i.fa.fa-envelope.fa-4x
            br
              h4 [email protected]
          .col-md-3
            i.fa.fa-phone.fa-4x
            br
              h4 41 9658-7321
          .col-md-3
            i.fa.fa-whatsapp.fa-4x
            br
              h4 41 9658-7321
          .col-md-3
            a href="https://www.facebook.com/conexaototalibi"
              i.fa.fa-facebook-square.fa-4x
              br
                h4 conexaototalibi
        br
        br
        i.fa.fa-arrow-circle-o-up
        a.scroll href="#home" <b>  voltar ao topo</b>

Answer 1

I found out, using

$(".scroll").click(function(event){
    event.preventDefault();

All elements with class="scroll" were affected and the child elements too, you applied the class .scroll in various elements that are not links, for example:

• #home.scroll (<div id="home" class="scroll">)
• #oquee.scroll (<div id="oquee" class="scroll">)
• section#local.scroll (<section id="local" class="scroll">)
• #convidado.scroll (<div id="convidado" class="scroll">)
• #contato.scroll (<div id="contato" class="scroll">)

the event.preventDefault is executed on all these elements and on their children.

Solution 1

Instead of using the selector $(".scroll"), use this way $("a.scroll"), should look something like:

  jQuery(document).ready(function($) {
    $("a.scroll").click(function(event){
      event.preventDefault();
      $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
    });
  });

Solution 2

But if there are elements that are not anchors (<a>) then remove the class="scroll" of the unnecessary elements, such as those already mentioned: #home.scroll, #oquee.scroll, section#local.scroll, #convidado.scroll and #contato.scroll

---

Another problem (has no direct relation to the reported problem) is that you added jQuery twice, they may be conflicting and triggering a number of problems:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><!--Include all compiled plugins (below), or include individual files as needed--><script src="js/bootstrap.min.js"></script><!--scroll--><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>

From what I understand you include the jQuery version 1.11.0 and then along with the scroll code you added the version 1.4.3, recommend removing this version (as it is already quite old):

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>

This is causing problems like:

Mixed Content: The page at 'https://retiroespiritual.herokuapp.com/' was Loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.