Creating a kind of fake click

Asked

Viewed 322 times

1

Well, I have a box, this box has a few tabs, clicking on the tab the contents of the box changes. The content is changed when I click on one of the links that calls the tab. Here is the code:

<p id="slid">
    <a href="#slid3">3º Passo</a>
    <a href="#slid2" >2º Passo</a>
    <a href="#slid1" class="slidselected" >1º Passo</a>                     
</p>

<ul id="slidcontents">
  <!-- tab 1 -->   
    <li id="slid1">
      Conteúdo que aparece ao clicar no link 1º passo
    </li>      
    <li id="slid2">
      Conteúdo que aparece ao clicar no link 2º passo
    </li>
    <li id="slid3">
      Conteúdo que aparece ao clicar no link 3º passo
    </li>
</ul>

Then, the contents of the box only change when you click on some of the links that are within the p id="slid", and I would like to automate this, causing even if you do not click on any of these links the contents of the box change as if you had clicked. The script I use to change the contents of the box is:

$.quickslidl = function ()
  {
    /* Elements */
    var slidl = 'p#slid';
var cont_slid = 'ul#slidcontents';

/* Hide all post */
    $(cont_slid + ' li').hide();

/* Display the first tab */
    $(cont_slid + ' li:first-child').show();

/* When user click a tab */
    $(slidl + ' a').click(function()
{
        /* Remove slidselected class on all post */
        $(slidl + ' a').removeClass('slidselected');

        /* Add a slidselected tab class */ 
        $(this).addClass('slidselected');

        /* Hide all opened tags */ 
        $(cont_slid + ' li').hide();

        /* Display the clickec tab */ 
        $(cont_slid +  ' ' + $(this).attr('href')).show(); 
        /* End :D */ 
    return false; 
}); 
};

/* When all is ready */ 
$(document).ready(function()    { 
/* Start function */ 
$.quickslidl();

});
jquery

2 answers

3


Test like this:

$(document).ready(function () {
    var galeria, i = 0;
    var links = $('#slid a').get().reverse();
    var slides = $('#slidcontents li');
    $(links).on('click', function (e) {
        e.preventDefault();
        slides.removeClass('mostrar');
        slides.eq(links.indexOf(this)).addClass('mostrar');
        if (e.which) clearInterval(galeria);
    });
    galeria = setInterval(function () {
        i++;
        $(links).eq(i).click();
        if (i == links.length) i = 0;
    }, 1000);
});

Example: http://jsfiddle.net/E84UF/

Test like this:

$(document).ready(function () {
    var galeria, i = 0;
    var links = $('#slid a').get().reverse();
    var slides = $('#slidcontents li');
    $(links).on('click', function (e) {
        e.preventDefault();
        slides.removeClass('mostrar');
        slides.eq(links.indexOf(this)).addClass('mostrar');
        if (e.which) clearInterval(galeria);
    });
    galeria = setInterval(function () {
        $(links).eq(i).click();
        i++;
        if (i == links.length) i = 0;
    }, 1000);
});

Example: http://jsfiddle.net/E84UF/1/

The code above has two parts. The part that deals with the click and changes the <li>, and below a setInterval that triggers programmatic clicks on the elements and thus making the first part run. To distinguish the real click from the false one I used if (e.which) clearInterval(galeria);. So a real click stops the slide.

  • I work perfectly.

  • Just one more question. At the time of the loop, it never goes back to the first link, it always goes back to the second. Why is that? Up to your example, it does this. It starts at link 1, goes pro link 2 after pro 3 and jumps pro second link again

  • Ah, how could I also apply transition effect in script, I have tried but was not successful.

  • 1

    @ivanveloso, you were right about the wrong line. Here: http://jsfiddle.net/E84UF/1/

  • 1

    @ivanveloso make the transition becomes a little more complex, has to create elements that are on top of each other and transition from the opacity

  • Calm down, you need the transition, not just to change already great. Here, because when you click on one of the links the effect stops working and it only works again if you refresh the page?

  • @Ivanveloso, it stops running because I wrote this node code: if (e.which) clearInterval(galeria); It won’t stop now.

Show 2 more comments

0

You can use the Event.preventDefault() Jquery, which will remove the default behavior of that link (which would go to a url there defined in the href attribute of the tag a) and add its custom behavior. You would create handlers for your links (through their ids or picking up any link tag even if you prefer as shown in the example below).

See example of use below:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.preventDefault demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>

<script>
$( "a" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );
});
</script>

</body>
</html>

More information about this command: http://api.jquery.com/event.preventdefault/

And you create click actions using the Jquery click() command as well

$( "#other" ).click(function() {
  $( "#target" ).click();
});

More information about the click command(): http://api.jquery.com/click/

The chronometer functionality you can implement using the setInterval function, which would be called from the appropriate Handler. An example of very simple use follows below:

//exibe um alert na tela a cada 5 segundos
setInterval(function(){alert(" Teste do cronometro ")}, 5000);

More examples of setInterval use see here: http://www.w3schools.com/jsref/met_win_setinterval.asp

  • But what about time? How can I do?

  • the question of time Voce solves using setTimeInterval (native Javascript function)

  • and in your case, the setTimeInterval function would be called from one of your jquery handlers =)

  • I’ll add that to the answer so it’s more complete ;-)

  • I do not work very well (or I who could not apply)... I will re-edit the question to understand better.

  • if you can show the code you tried, it’s easier to help =)

  • Rephrased question

Show 2 more comments

Browser other questions tagged jquery

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