1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I cannot understand this jQuery statement (left: '+=400px' )

Discussion in 'JavaScript' started by Asker54, Jan 25, 2015.

0
  1. #1
    After some searching on the google I found that this (left: '+=400px' ) means position relative .... but relative to what. The statement came within this HTML page :

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Using Multiple Callbacks</title>
    <link href="http://localhost/misc/_css/site.css" rel="stylesheet">
    <style>
    #figure {
      position: relative;
      width: 400px;
      margin: 0 auto;
      height: 300px;
      overflow: hidden;
    }
    #photo {
        position: absolute;  
        left: -400px;
    }
    #caption {
        position: absolute;
        width:     340px;
        background-color: black;
        bottom: 10px;
        left: 24px;
        padding: 5px;
        border: 1px solid white;
        display: none;
    }
    </style>
    <script src="http://localhost/misc/_js/jquery-1.7.2.min.js"></script>
    <script>
    $(document).ready(function() {
    $('#photo').animate(
       {
        
          left: '+=400px',
       },
       1000,
       function() { // first callback function
          $('#caption').fadeIn(1000,
           function() { // second callback function
              $('#photo, #caption').fadeOut(1000);
           } // end second callback
        ); // end fadeIn
       } // end first callback function
    ); // end animate
    });
    </script>
    </head>
    <body>
    <div class="wrapper">
    <div class="header">
        <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
    </div>
    <div class="content">
        <div class="main">
    <h1>Using Multiple Callbacks  with animate()</h1>
    <div id="figure"><img src="http://localhost/misc/_images/pencils.jpg" width="400" height="300" alt="pencils" id="photo">
    <p id="caption">Pencils!!!!!!</p></div>
        </div>
    </div>
    <div class="footer">
    <p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
    </div>
    </div>
    </body>
    </html>
    HTML:

     
    Asker54, Jan 25, 2015 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    relative to the div that holds the photo
     
    sarahk, Jan 25, 2015 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Technically, the outer div (with the id "figure") is the one having a relative positioning. The inner image, with id "photo", which is the one being animated, have position: absolute, and the relative attribute on the outer div means its position is absolute to the outer div. (If the #figure-div didn't have position: relative, the absolute positioning on the image would be relative to the page itself, not the containing div).
     
    PoPSiCLe, Jan 25, 2015 IP
  4. Asker54

    Asker54 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Many thanks @sarahk, I will go through it again and try to understand it.
     
    Last edited: Jan 25, 2015
    Asker54, Jan 25, 2015 IP
  5. Asker54

    Asker54 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Thanks a lot @PoPSiCLe for the detailed explanation. I will try to understand the ramifications here. But it is still difficult to understand.
     
    Asker54, Jan 25, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    What it does is this: in the CSS in the top of the file, the #photo inside #figure is hidden from view, by setting the left-margin to -400px - then the animate-action in the jQuery nullifies that value, by adding 400 to the existing value - and showing it (I'm assuming that's what happens, I haven't tested it myself, but from the code, that seems to be what it's doing).
     
    PoPSiCLe, Jan 25, 2015 IP
  7. Asker54

    Asker54 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    I think this is the most excellent clarification sent so far. I think the same thing can be done with a simpler approach... for example the way 'animate' explained by the w3schools.com site. However in this example I am still adamant to understand the rest of it. I am further experimenting with the page codes.
     
    Asker54, Jan 26, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    It's also an excellent example of what halfwit idiotic bloated bullshit jQuery is, particularly for something as simple as a slide-in and fade-out which we don't need scripting to do anymore other than MAYBE as the trigger to start the event with a single class swap.

    But sure, let's use a 100k library with jerky slow animations to do 4 lines of scripting and 6 lines of CSS' job. :(

    Do yourself a favor, and forget that mouth-breathingly stupid bull known as jQuery even exists, PARTICULARLY for "gee ain't it neat" animooted manure. Your websites and your visitors will thank you for it. Hot and trendy buzzword status doesn't actually mean it does anything good or useful.

    Of course with the H1 doing a H2's job, P doing a H1's job, and general "I can haz intarnets" markup it's obvious the writer of "The Missing Manual" -- one David Sawyer McFarland -- doesn't know enough HTML or CSS to have been writing a book on web development in the first damned place... But that goes hand in hand with the fact that most people DUMB ENOUGH to fall into the trap of using the ridiculously stupid single-digit IQ nonsense known as jQuery generally have the same shortcoming -- an ignorance of HTML, CSS, accessibility, design and usability that leaves them woefully ill-equipped and pathetically unqualified to make sane and rational choices about building a website.

    Developers are dumber for nonsense like this even existing.
     
    Last edited: Jan 27, 2015
    deathshadow, Jan 27, 2015 IP
    sarahk likes this.