Fade in and Fade Out Text in DIV - Remove Loop

I have created a DIV with 3 different quotes fade in and fade out. I am using below JQuery code for the same.

(function() {
var quotes = $(".changetxt");
var quoteIndex = -1;
function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(1000)
        .delay(4000)
        .fadeOut(500, showNextQuote);
}
showNextQuote();
})();

HTML CODE

<div class="toptext">
    <div class="changetxt">
        ”The simple act of paying positive attention to<br> 
        people has a great deal to do with productivity”
        <p>- Tom Peters</p>
    </div>

    <div class="changetxt">
        ”If you deprive yourself of outsourcing and your competitors<br> do not, you are putting yourself out of business”
        <p>- Lee Kuan Yew</p>
    </div>

    <div class="changetxt">
        ”Focus on being  PRODUCTIVE<br>
        instead of busy”
        <p>- Tim Ferris</p>
    </div>
</div>

It is working perfect but I don't want to loop, There are 3 quotes, so as soon as it shows last (third) quote it should stop animation and no loop.

How can I achieve this?

row header and column header for a particular cell in table

How to take corresponding row header and column header for a particular cell in table? I have table and i wanted to take the corresponding column header and row header of that cell when clicked

Timing and speed of multiple sliding divs

Please see this fiddle I have set up.

You are first confronted by three links. Each link triggers divs to slide out.

1. The link 'john smith' slides out and in at the speed we want. When it slides out the first line slides out then when that is completed the second line slides down as though coming from the first. When it slides back it does the same motion at the same speed but reverse i.e.. the second line slide back up first and then when that is completed the first line slides back to the left.

2. When you click on the work link and menu slides out in the same manner as the bio. Also there is a sub menu that slides out when on clicks on item 2.

3. When the user clicks on the contact link one line slides out.

What we need to achieve is this; when any div is open and another link is clicked on, the visible div slides back in reverse to how they slid in. We have almost achieve this, however, the code is not quite right as the divs are not sliding back in at the same speed and in the right order, they simply slide back fast. For example, if one has clicked on 'work' and the 'item 2' link, and then you select 'contact' the opened div slide back very quickly. What I need to achieve is that they slide back in reverse to how they slid out.

I know this sounds very complicated and if I can answer any questions to make it clearer I will.

Thanks

$('#bio-line-1').animate({width: 'hide'});
$('#contact-info').animate({right: 'hide'});
$('#bio-line-2').slideUp("fast");
$('#black-div, #black-credits, #igna-1-div, #igna-1-credits, #igna-2- div, #igna-2-credits, #fatal-div, #fatal-credits').fadeOut('100');

});

Ajax call onSubmit not working

I have a log-in form. Before do the log-in I would like to make sure that username and password are true.. I am trying to achieve this with ajax, but so far it is not working..

in my form I am calling the function check_user onSubmit. This is my code.

    function check_user(e){
        var username = $('#username').val();
        var password = $('#password').val();

        if(username.length>1 && password.length>1){
        e.preventDefault(); // I added this but still it is not working
        alert('alive'); // this is working          

                jQuery.ajax({
                    type : "POST",
                    url : "check_user.php",
                    data : 'username=' + username +"&password=" + password,
                    cache : false,
                    success : function(response) {
                        if (response == 1) {
                        return true;                    
                        } else {        
                        $('#username').css('border', '2px red solid');
                        document.getElementById("username").placeholder = "Wrong username or password";
                        $('#password').css('border', '2px red solid');
                        document.getElementById("password").placeholder = "Wrong username or password";                     
                        return false;                   
                        }
                    }
                });     
        }else{
//this is working
            $('#username').css('border', '2px red solid');
            document.getElementById("username").placeholder = "Wrong username or password";
            $('#password').css('border', '2px red solid');
            document.getElementById("password").placeholder = "Wrong username or password";
            return false;   
        }
    }

In my PHP file check_user.php I have also this code:

$fp = fopen("debug.txt", "a") or die("Couldn't open log file for writing.");
        fwrite($fp, PHP_EOL ."inside");
        fflush($fp);
        fclose($fp);

No debug.txt is created so I assume that the ajax call never happens..

I use the same ajax code when doing the registration to check if the username or email already exists in the database, and the ajax there is working ok. In my example the ajax call never happens and it goes straight to the action="login.php"

understanding the usage of e inside carasoul.js

hey guys i was just going through the code of carousel.js and i am a little bit confused , now we it comes to attaching events i ofte see code as follows ::

$('a').click(fuction(e){
    if(e.target.targetNode == $(this)[0])
   //do something
});

I am still a bit confused , who is passing the e ? WHO really is passing that e inside the function ?

also in the plugin code i see things like the below :

Carousel.prototype.keydown = function (e) {
  if (/input|textarea/i.test(e.target.tagName)) return
  switch (e.which) {
    case 37: this.prev(); break
    case 39: this.next(); break
    default: return
  }

an event handler is attached like so :

  this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))

another example is here :

  Carousel.prototype.pause = function (e) {
    e || (this.paused = true)

    if (this.$element.find('.next, .prev').length && $.support.transition) {
      this.$element.trigger($.support.transition.end)
    }
    this.interval = clearInterval(this.interval)
    return this
  }

Who is passing e inside these functions , from where is it coming from ? i have absolutly no clue , i have been using JS for a while now , but this still baffles me . can somebody really clear this doubt for me once and for all ?

P.S. I have seen this answer on SO , but it does't answer the questions i have asked . I understand that e is in a way a object with differentv properties that we can access.

fade in and move down

I have an animation set on my homepage headline using css to make it fade in when the page loads. I have seen on other sites a really impressive animation that will fade in the title and move it down slightly. How would i have to alter my code to be able to achieve this?

<div class="homepage">
    <div class="headline">
        <h1><span>WELCOME</span></h1>
    </div>
    <div class="subheadline">
        <h1>
            <span>To the home of</span>
        </h1>
    </div>
    <div class="subheadline">
        <h1>
            <span>Multimedia Journalist</span>
        </h1>
    </div>
    <div class="subheadline">
        <h1>
            <span>Dan Morris</span>
        </h1>
    </div>

    <a href="#contact" class="smoothScroll" id="contactlink">Let's talk</a>
    <div class="down-link">
        <a class="w-downlink" href="#about">
            <i class="fa fa-chevron-down"></i>
        </a>
    </div>
</div>

.headline {
    height: auto;
    width: 75%;
    margin-left: 78px;
    margin-top: 120px;
    margin-right: auto;
    font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 12px;
    font-weight: 200;
    color: #676767;
    text-align: left;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation: fadeIn 1s ease-in .5s both;
    animation: fadeIn .1s ease-in .5s both;
}

Exclude Select Click via Jquery

Im trying to trigger an action when I click anywhere on a tr with a class of parent. Excluding when I click on one of the dropdown boxes.

$('tr.parent')
    .css("cursor", "pointer")
    .click(function (e) {
        if($(e.target).not('select')){
            // do something
    }

Im trying the following but this is not working.

http://ift.tt/1dBzsAz