SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Running jQuery in the browser console

    I have a small click script that works when a button is clicked. I cant seem to figure out after googling and reading numerous stackoverflow question and answers how to run my script in the browser console. It seems from what I gathered to type the function and parameter followed by a semicolon. But I cant get it to trigger that way. Here is my script -
    Code:
    $(".cta").click(function() {
        $("html, body").animate({ scrollTop: $("#footer").offset().top }, 500);
        console.log('executed scrollToElement');
        return true;
    	});
    What do I need to type to run it in the console? This is killing me that I cant seem to figure this out. I am pretty novice with jQuery and Javascript. I have been reading some of the Sitepoint recommended books. And even doing some other stuff. But working with the console is a bit tricky it seems in it self. Am I right or wrong?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Given the following page:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>A very boring page</title>
      </head>
      
      <body>
        <button id="myDiv">Click me!</button>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      </body>
    </html>
    If you open it in your browser (Chrome for me) and click on the button, nothing happens.

    Then if you open the console by presisng F12 -> Console.
    Then copy paste the following code:

    Code:
    > $("#myDiv").on("click", function(){ alert("Yay!"); });
    Note: it can be on multiple lines, no problem.

    You should see:

    Code:
    [<button id=​"myDiv">​Click me!​</button>​]
    Now if you click on the button you will see an alert.

    Note: You very probably don't need the return true in the code you posted.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, I also didnt think about I had a wrapper around the function. And it wasnt globally accessible. Noob problems. But I do want to add another animation to this. If I want an element to bounce after the first function is finished running how would I add that to my code? I found a few examples on stack overflow. But couldnt seem to put it together with this.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    When you animate something using the jQuery library, you have the opportunity to specify a callback, which is run when the animation finishes. This can of course be another animation.

    This should illustrate the point:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Animate with callback</title>
        <style>
          header{ background: red; height:500px; }
          div{ background: blue; height: 5000px; }
          footer{ background: yellow; height: 500px; }
        </style>
      </head>
      
      <body>
        <header></header>
        <div></div>
        <footer></footer>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
        <script>
          $("body").animate({ scrollTop: $("footer").offset().top }, 3000, function(){
            alert("Done");
          });
        </script>
      </body>
    </html>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •