jQuery animation to make a png appear at a random point on the screen?

Question

Again, working on a Chrome extension here. This time, I'm looking to make a transparent png appear at a random place within the window. I feel like I could somehow use jQuery .animate() somehow? I would like to make the image appear somewhere random on the screen, or have it appear on top of a random element on the screen, be it text of an image etc. I have not an idea where to even begin. Any ideas? All input appreciated! EDIT: Here is my image.js file:

var image = "image";
chrome.extension.getURL('image.png');
$(document).ready(function(){
    randomlyMoveImage();
});
$("#image").css({
    "position": "absolute",
});
$("#image").attr("src", image.png);
function randomlyMoveImage(){
    var width = $(document).width();
    var height = $(document).height();

    var x = Math.floor((Math.random() * width) + 1);
    var y = Math.floor((Math.random() * height) + 1);
    $( "#image" ).animate({
    left: x,
          top: y
}, 0, function() {
    // Animation complete.
  });

    setTimeout(randomlyMoveImage, 3000);
}
$("#image").css({
    "position": "absolute",
});

and here is my manifest.json:

{
  "manifest_version": 2,

  "name": "Animation",
  "description": "Animation",
  "version": "1.0",
  "web_accessible_resources": ["image.png"],

  "browser_action": {
    "default_icon": "image.png",
    "default_title": "Animation"
  },
  "content_scripts": [
        {
        "matches": ["http://*/*", "https://*/*"],
        "js": ["jquery.min.js"]
        }
    ],
  "background": {
  "scripts": ["extensionListener.js","audio.js"],
  "persistent": false
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

Chrome inspect element returns that there is an error on image.js line 3, saying "$ is not defined". Any help is appreciated.

Please find my answer below, I hope it will work, you can make changes according to your extension requirement. — Irfan Anwar, Sep 11 '15 at 15:23
Generally speaking, you should get the javascript working, and then figure out how to make it into an extension. — Teepeemm, Sep 11 '15 at 15:33

score 0 · Accepted Answer · answered Sep 11 '15 at 15:22

0

Here is what you need, hope it will help you thanks. Please add jquery library to get this working. It will randomly change position of image after 3 seconds of interval.

$(document).ready(function(){
 randomlyMoveImage();
});

function randomlyMoveImage(){
    var width = $(document).width();
    var height = $(document).height();
    
    var x = Math.floor((Math.random() * width) + 1);
    var y = Math.floor((Math.random() * height) + 1);
      $( "#image" ).animate({
    left: x,
          top: y
  }, 0, function() {
    // Animation complete.
  });

    setTimeout(randomlyMoveImage, 3000);
}

#image{
position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="image" src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xap1/t39.2365-6/851565_602269956474188_918638970_n.png">

answered Sep 11 '15 at 15:22

Irfan Anwar

1,878
17
30

You are an absolute genius! Thank you so much! But, as a newbie to Chrome Extensions, where do I put the html that declares the image value? Thank you so much! – Baylor Norris Sep 11 '15 at 15:25
See this may be it can help you: http://stackoverflow.com/questions/11804332/insert-an-image-in-chrome-extension – Irfan Anwar Sep 11 '15 at 15:29
I have fiddled with some code, and the sound will play, but the image will not appear at all. All I get in Inspect Element's debugger is "Uncaught ReferenceError: $ is not defined on line 3 of image.js. See my question for my image.js and my manifest.json – Baylor Norris Sep 11 '15 at 16:50
Sorry I did't see your comment that day, it seems you have not included jquery library or your js is crashing somewhere before line 3 that you mentionied in image.js – Irfan Anwar Sep 14 '15 at 07:15

jQuery animation to make a png appear at a random point on the screen?

1 Answers1