How to duplicate this function jQuery

Asked

Viewed 70 times

2

As you can see in that fiddle For example, when the first link is clicked a div appears and when pressing the browser back button, it closes. I would like the second link to work in the same way, showing the two div, but when I try to duplicate the function one of the two stops working and I have no idea why (I am a layman in JS/Jq). Can you help me?

Fiddle link: https://jsfiddle.net/d6yp3b92/

Code:

$(document).ready(function() {
  $('body').on('click touch', '#paginaUm', function(e) {
    $('.pagina.um').fadeIn();
  });
});

// geri butonunu yakalama
window.onhashchange = function(e) {
  var oldURL = e.oldURL.split('#')[1];
  var newURL = e.newURL.split('#')[1];

  if (oldURL == 'paginaUm') {
    $('.pagina.um').fadeOut();
    e.preventDefault();
    return false;
  }
  //console.log('old:'+oldURL+' new:'+newURL);
}
.pagina{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:gray; color:white; padding:20px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#paginaUm" id="paginaUm">Pagina 1</a>
  <div class="pagina um">
  <h1>Popup 1</h1>
  <p>Pressione voltar para fechar.</p>
</div>

<a href="#paginaDois" id="paginaDois">Pagina 2</a>
  <div class="pagina dois">
  <h1>Popup 2</h1>
  <p>Pressione voltar para fechar.</p>
</div>

jquery

  • If each <a> opens the <div> that is inside so you do everything with a click event if you change a little the classes you have.

1 answer

4


I can’t say exactly if this is the best practice, but if you do a click event for each btn you can duplicate the good code

See the example, test in your environment by clicking on the btn back that will work right, or right here, or on this link https://codepen.io/hugocsl/pen/oJXpWW

$(document).ready(function() {
  $("#paginaUm").click(function(event){
    $('.pagina.um').fadeIn();
  });
  $("#paginaDois").click(function(event){
    $('.pagina.dois').fadeIn();
  });
});

// geri butonunu yakalama
window.onhashchange = function(e) {
  var oldURL = e.oldURL.split('#')[1];
  var newURL = e.newURL.split('#')[1];

  if (oldURL == 'paginaUm') {
    $('.pagina.um').fadeOut();
    e.preventDefault();
    return false;
  }
   if (oldURL == 'paginaDois') {
    $('.pagina.dois').fadeOut();
    e.preventDefault();
    return false;
  }

  //console.log('old:'+oldURL+' new:'+newURL);
}
.pagina{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:gray; color:white; padding:20px;
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<a href="#paginaUm" id="paginaUm">Pagina 1</a>
  <div class="pagina um">
  <h1>Popup 1</h1>
  <p>Pressione voltar para fechar.</p>
</div>

<a href="#paginaDois" id="paginaDois">Pagina 2</a>
  <div class="pagina dois">
  <h1>Popup 2</h1>
  <p>Pressione voltar para fechar.</p>
</div>

  • It’s great! I really appreciate it!

  • @Thiagosoubra was worth young, the way I did it I’m sure it works, but there are some guys here on the site very fera same, that sometimes solve these problems with 2 lines of rss code. But this way is easy to understand for who is more layman like us :D

  • 1

    Really! More and more we understand the language more and more we can reduce the codes, but what matters is that it works! rsrs

  • Do you know how to use this system also by means of a button? because in addition to the popup being closed by the back button, there is also a button that allows you to close it. I realized the Uga thing if I just trigger the function of hiding that div to the button. I saw that the #link does not leave the url, so when I click to open again (or another popup with the same method), it does not open, it kind of needs the url to be "clean"... so I think it is necessary to be able to perform the same process as 'back' by clicking on this close button. If you don’t know, I can open up a new question!

  • @Thiagosoubra does the following, first you have to put the class .fechar, in your case is on the tag <p> which has the text "Press to close". After that inside the script you include this $(document).ready(function () {&#xA; $(".fechar").click(function (event) {&#xA; $('[class^="pagina"]').fadeOut();&#xA; document.location.href = String( document.location.href ).replace( /#paginaUm/, "" ) ;&#xA; document.location.href = String( document.location.href ).replace( /#paginaDois/, "" );&#xA; });&#xA; }); forehead so it should work

  • friend, it works, but reload the page when clicked :| it would be possible to make it not reload?

  • @Thiagosoubra here is not doing the refresh, updated the link, see https://codepen.io/hugocsl/pen/oJXpWW qq thing tells me

  • strange, here updates. look, I recorded the screen in this short video: https://drive.google.com/file/d/18OEMVRRC8sDko-0nj4HW-IRQmERNxfv1/view?usp=sharing

  • I put an image on the page to make it more "heavy" and you can see better the Reload

  • @Thiagosoubra is Young I don’t think I got it this time. I did some tests here, updated the link again including. And this code is unstable, has hours that even erases the navbar at the top do not know pq. You can uncheck the answer as accept that there is no problem. But however I suggest you open another question, for someone with more knowledge help you in this part of the URL.

  • 1

    That you answered, that was enough. That other doubt was the part... I’ll open another. But They fight for everything!!!!

Show 6 more comments

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.