So my incremental has come a long way, I got assistance here to make the original popup and it works great, now i really want to make the popup an image?
so far i have:
$("#coffeeButton").click(function(e) {
var obj = $("#clone").clone();
$("body").append(obj);
obj.html("+"+ cookRate);
coffee += cookRate;
totalCoffee += cookRate;
document.getElementById("coffee").innerHTML = prettify(coffee);
document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);
obj.css('position','absolute');
obj.offset({left: e.pageX-10, top: e.pageY-25});
obj.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
});
and it works great and gives me a popup, but how the hell do i make it an image?
I have tried creating a div, putting an image inside that div and instead of calling "clone" calling on the div...
Am i on the right track?
Example of what i want from cookie clicker - http://orteil.dashnet.org/cookieclicker/
my game so far - retiredgamers.net/
jsfiddle - http://jsfiddle.net/edznycyy/6/
There are probably a lot of ways you could do this. To keep things as close to what you have now as possible here's what I would do...essentially just create 2 elements the first being your numbers and the second being the image, make sure the number is above the image using css's z-index
, then animate them both in tandem:
Here's a working jsfiddle
HTML changes:
<img title = "" id="myImg" src="http://blog.beautyfix.com/wp-content/uploads/2012/09/Coffee_iStock_000006160362Medium.jpg" style="display:none" width="30" height="30">
Javascript changes:
$("#coffeeButton").click(function(e) {
var obj = $("#clone").clone(); //im guessing you chose to use clone here to make it easier to work with the object, so I did the same for the image
var img = $("#myImg").clone();
$("body").append(obj);
$("body").append(img);
obj.html("+"+ cookRate);
coffee += cookRate;
totalCoffee += cookRate;
document.getElementById("coffee").innerHTML = prettify(coffee);
document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);
obj.css('position','absolute');
obj.css('z-index', '2');
img.css('position','absolute');
img.show();
obj.offset({left: e.pageX-10, top: e.pageY-25});
img.offset({left: e.pageX-10, top: e.pageY-25});
obj.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
img.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
});
if you don't want to the trouble of doing it your self, you can use a jquery plugin that does it quite easily. I am sure there is a lot more in the,
Here is what i found!
Here is the demo page for full-screan popup plugin
....
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.fullscreen-popup.js"></script>
....
<a class="open-popup" href="#popup">Open popup</a>
...
<div id="popup" style="display: none; width: 640px">
...
</div>
<script>
$(function() {
$(".open-popup").fullScreenPopup({
// Options
});
});
</script>
Example is from here and you can download the plugin from here and a list that contains many more
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.