wait till anchor tag onclick function response is true

Question

I searched a lot for this but no solution yet. Here is my code.

<a href="#second" onclick="return slide();">second </a>

javscript:

function slide() 
{
    //do something
    //There are slides on #second. I am expecting sliding should start before 
    //#second visible in viewport but right now #second is visible and then it starts sliding. 
    $.fn.fullpage.moveTo(section1, 0);
    return true;
}

I am using fullpage.js for sliding the slides.

When I click on second I am expecting function to return value and then href to execute. Is it possible or not?

If not is there any solution for it?

If "do something" is an asynchronous task, then the slide function won't block the click event. Could you provide more information on what happens in the function? — cmbuckley, Feb 16 '15 at 12:35
There are slides on #second. I am expecting sliding should start before #second visible in viewport but right now #second is visible and then it starts sliding. — Aakanksha, Feb 16 '15 at 12:36
possible duplicate of [html: execute function when link clicked, get alert and then redirect to another page](http://stackoverflow.com/questions/21829351/html-execute-function-when-link-clicked-get-alert-and-then-redirect-to-another) — Guy, Feb 16 '15 at 12:38
@GuillaumeDeroy It's not duplicate. I can't use location.replace function as I don't want to refresh my page — Aakanksha, Feb 16 '15 at 12:39
If you don't want the default click action to fire, you should use `return false` or `event.preventDefault()`. — cmbuckley, Feb 16 '15 at 12:41
Well then please explain _what_ you want to do. You are talking about slides, so I would assume you are using some kind of JS slider plugin/script … but you completely failed to mention which one. — CBroe, Feb 16 '15 at 12:42
@cmbuckley I want default click action to fire but only after function returns true value — Aakanksha, Feb 16 '15 at 12:43
It sounds like you want #second to be invisible at the time the slide() function is called, but that it is already visible, and that is a problem. Is that what troubles you? I assume that "#second" is literally a reference to an anchor in your DOM. What DOM is at #second and how is it styled? — Robin like the bird, Feb 16 '15 at 12:44
@CBroe I edited question and mentioned the plugin I am using. — Aakanksha, Feb 16 '15 at 12:46
@Robinlikethebird: this is exactly my problem. #second contains html code for horizontal slides that's it. — Aakanksha, Feb 16 '15 at 12:47

score 1 · Accepted Answer · answered Feb 16 '15 at 12:52

Why dont you try like this. Take one dummy a-tag for 'Second'. If on click of dummy-second the function slide() returns true, than by using jquery's trigger event you can fire a click event to activate Slider

You can hide and show slidersecond & dummysecond these a-tags depending on your requirement in slide() function

HTML

<a href="javascript:void(0)" onclick="return slide();" id="dummysecond">second </a>
<a href="#second" style="display: none" id="slidersecond" >second </a>

JAVASCRIPT

<script>
  function slide()
  {
     //do something
    //There are slides on #second. I am expecting sliding should start before 
    //#second visible in viewport but right now #second is visible and then it starts sliding.

    var something = true;
    //If something is true
    if (something) {
      //trigger your slider
      $("#slidersecond").trigger('click');
      return true;
    }
    else
    {
      return false;
    }
  }
</script>

score 0 · Answer 2 · answered Feb 16 '15 at 16:36

The element with id="second" needs to be styled to not show.

There are many different css properties that could make it not show, and styling could be done statically on the id="second" element using the style attribute, or in a style sheet with #second as the selector, or dynamically using jQuery's style() method.

I don't know enough about the fullpage plug-in to make a more precise recommendation.

score -1 · Answer 3 · answered Feb 16 '15 at 12:51

May be these should be help you.

//Create a anchor tag
<a href="https://javagunjan.wordpress.com/">Click Me</a>

Using JQuery check When Click on link.

$("a").click(function(){
     alert("Hello World !");
});

It's should be work proper see Demo FIDDLE here. CLICK Here.

OR

<a href="https://javagunjan.wordpress.com/" onclick="myFunction()">Click Me</a>


function myFunction(){
   alert("hi");
}

wait till anchor tag onclick function response is true

3 Answers3