I have been working on this. Obviously, it uses key binding to animate and shoot bullets. Unfortunately, if you move up or down and a bullet is on its way to the target, and you move up or down, the bullet moves with you. Same situation with the target. So I looked at css positioning, and I think that the problem could be that somehow the created bullet is appended to the player. I have tried to change the positioning on both of them, and changing the bullet creater code to append to body. To no avail.
Here is my link:http://jsfiddle.net/5khhmepv/9/
And here is the creator code that I think is the problem:
var shoot = function () {
if (canshoot === true) {
canshoot = false;
bullety = 0;
var div = $('<div class=' + 'bullet' + ' style=' + 'marginTop:-25;' + '>yt</div>');
div.appendTo('html');
div.animate({
marginLeft: 500 + 'px'
}, 1500);
canshoot = false;
setTimeout(function () {
$(".bullet").hide();
canshoot = true;
}, 1500);
}
};
By setting the position of your #player element to static, you make the size of the document dependent on how far down the document your player is. Moving your player up and down then causes the bullet to shift based on its relationship to the document height. What you probably want to do is have a fixed-size canvas, and absolutely positioned #player and .bullet. Don't forget to initialize the bullet's top to be aligned with the player's current scrollOffset.
I made some quick adjustments to your fiddle and i think it's working as intended.
http://jsfiddle.net/5khhmepv/28/
Basically you shouldn't use static as position value as Palpatim explained.
Related
I'm only using JS and HTML, and I would like to know if there is a method to get the coordinates of the point I'm actually clicking on an image.
I would like to have the same coordinates that you give when you use the <area shape="circle" coords="...,...,..." for example.
I already tried to use pageX, pageY, offsetX, ... but nothing of this works my way ... :/
The context is that I have an image that is bigger than the div that contain it. I want to be able to drag the image. And I have another little image that is the same as the big image (resized to be a miniature) and a red rectangle on it so when I move on the big image, I can know where I am if i check the rectangle on the miniature!
Thanks in advance for your responses!
Probably not through html but I know through JS/jQuery
$(document).on("mouseover", function(event) {
console.log("x coord: " + event.clientX);
console.log("y coord: " + event.clientY);
});
Yes there is.
Take a look at this thread. It already has an answer for you!
jQuery get mouse position within an element
Answer by 'Jball'.
One way is to use the jQuery offset method to translate the event.pageX and event.pageY coordinates from the event into a mouse position relative to the parent. Here's an example for future reference:
$("#something").click(function(e){
var parentOffset = $(this).parent().offset();
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
});
I'm working on a project for my UI design class and need help fixing an element to the top of a page on scroll.
Here's what I have so far: http://ieatthings.com/opinio/query.html
As you scroll, the search bar should move up, over the navbar, and fit nicely into place to let the user search while in the middle of a page. But the problem is that the search bar keeps going up!
I used the Javascript from this tutorial: Fix object to top of browser window when scrolling. I have tried all kinds of possibilities and combinations, but have unfortunately not gotten this damn thing to work.
Any suggestions?
You will have to use Javascript to test the position of your element ("myElement") on the page compared to how far the page has been scrolled. If the page has been scrolled up beyond your element then you alter your element's css to snap it to the top of the page. Note: mobile browsers don't like the "position: fixed;" style property.
Give your element the id of "myElement" and insert this into your tag.
<script type="text/javascript">
var yPosition; // save original y position of element here
window.onload = function(){ // once entire page is loaded this function is fired
// save original y position of element before it is scrolled
yPosition = document.getElementById("myElement").offsetTop;
}
window.onscroll = function(){ // scrolling fires this function
var myElement = document.getElementById("myElement"); // for cleaner code
// compare original y position of element to y position of page
if( yPosition <= window.pageYOffset ){
// snap element to the top by changing css values of element
myElement.style.position = "fixed";
myElement.style.top = "0px";
}else{
// re-position to original flow of content
myElement.style.position = "relative";
myElement.style.top = ""; // set to default
}
}
</script>
Hopefully this helps!
I have a problem that I will explain.
I'm doing an animation in HTML5 and CSS3. My idea is that a plane is flying around and it launches a missile after a while. What I want to do is to make the missile appear after that time. I thought about doing that changing the z-Index property of my div (because I have the missile image into a div container) using javascript after a while (any time I choose). For doing that I found the sleep function at the bottom. I created the "appear" function that I know it works because It changes my zIndex value but it doesn't wait the 2 seconds I want.
I also thought I had the solution by using the visibility property, but I have the same problem, sleep function doesn't wait at all.
Any suggestions? Thanks
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function appear(object){
sleep(200000);
var objective = document.getElementById(object);
objective.style.zIndex=1;
You can pass a function to the setTimeout function which will call that function in x milliseconds.
function waitForMe() {
alert('triggered!');
}
// Call waitForMe in 200000ms
setTimeout(waitForMe, 200000);
So for your example, you would want to use 2000 (2 seconds), not 200000 (200 seconds):
function appear(object) {
setTimeout(function () {
var objective = document.getElementById(object);
objective.style.zIndex=1;
}, 2000);
}
Hiding and showing an element
You can hide and show a method in a few ways:
Use z-index as you suggest, probably not the best way as we can actually hide it instead of sending it to the back of the page.
objective.style.zIndex = 1;
Use display, this hide the object completely.
// hide
objective.style.display = 'none';
// show
objective.style.display = 'block';
Use visibility, this will hide the object but it will still take up space in the page. This wouldn't matter if you're using position:fixed or position:absolute.
// hide
objective.style.visibility = 'hidden';
// show
objective.style.visibility = 'visible';
You can either create a div around the objective, and add it in with javascript like this
document.getElementById('objectivespan').innerHTML=imagehere;
Other than that, you can use
objective.style.visibility='hidden';
and change it to
objective.style.visibility='visible';
for the delay, use
function sleep(){
alert('slept');
}
SetTimeout('sleep', 10000);
I have a toggle event on specific div witch works fine ,
here is the demo
http://jsfiddle.net/b5SVg/9/
the trouble is that I have the outside container that I need to hide on load and show/hide on toggle. CUrrently my container display block fires first and I need it to be sinced wht the toggle. I know you might think that i should put the container inside the toggle but i cant since the FX.slide adds div around toggle element which is overflow hidden and has position . my container must stay where it is. Please advise
Read the comments on the code below ;)
var container = $$('.container').setStyle('display','none'); //cache container (useful for the 'future' ;) )"
var mySlide= new Fx.Slide('hidden').hide();
$('toggle').addEvent('click', function(event){
event.stop();
container.setStyle('display','block'); //put it before the toggle
mySlide.toggle().chain(function(){ //at the end of the sliding, this callback will be called
if(!this.open){ //if it's closed
container.setStyle('display', 'none'); //hide the container
}
});
});
Demo: http://jsfiddle.net/amgyw/1/
..btw you also can use the element proper instance of 'slide', without declaring var mySlide = ... ..like i.e. $('hidden').get('slide').toggle()
Is there a way to make a display object always be at the top of the display list?
For example, I know you can set the childIndex, i.e:
setChildIndex(myDisplayObject, numChildren-1);
But is there a way that an object has sensed that something else has been added to the display list and restack themselves accordingly?
You can listen to the Event.ADDED event on the container. This event will bubble up, so you'll get called whenever a display object is added to the container or any of its children.
Here's an example of how you could do this. You'll see the black box always stays on top.
var container:DisplayObjectContainer = this; // this is a frame script but just change this line as necessary
container.addEventListener(Event.ADDED,handleAdded,true);
function handleAdded(e:Event):void {
// this if tries to cover some edge cases, unlikely to happen in your code, from your description
if(container == topElement.parent && container.numChildren > 0 && container.getChildIndex(topElement) != container.numChildren - 1) {
container.setChildIndex(topElement,numChildren - 1);
}
}
function getSprite(c:uint):Sprite {
var sp:Sprite = new Sprite();
sp.graphics.beginFill(c);
sp.graphics.drawRect(0,0,100,100);
sp.graphics.endFill();
return sp;
}
var topElement:Sprite = getSprite(0);
container.addChild(topElement);
var sp:Sprite = getSprite(0xff0000);
container.addChild(sp);
sp.addChild(getSprite(0xff00));
var sp2:Sprite = getSprite(0xff);
container.addChild(sp2);
However, I think it's much simpler and cleaner just to have 2 containers, say, top and bottom, kind of like layers. In top you'd add the element that always must be on top (or this could be your element as you probably don't need to have this extra container). In bottom you'd add and remove whatever you want. Then you can forget about manually restacking stuff (at least to keep the top element atop).
You can override the addChild() method in the parent object. In that method you can move your child to the top using
setChildIndex(myDisplayObject, numChildren-1);
In this way everytime an object is added to the parent, the parent moves your object to the top.