I have started to learn JavaScript and was going through the tutorial on https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash with the guess game and want to incorporate the guess game into a web page to see how I can ran the game in a div container. All works fine up to when the game is over or the game is won and the 'Start new game' button comes up and the document.body.appendchild(resetButton); is executed.
The button is placed at the end of my page after the Footer and not inside the div container. What am I doing wrong and what can I look at to change the code to let it come up at the bottom of the container under the 'Enter the guess' bar as in the example?
In the example everything is under the body tags, but I have created a under the page to run the game in.
I have also tried to run document.body.append(resetButton); and even changed the .body to document.div.appendchild(resetButton); code to see if I can place it at the correct spot. When I change the .body code it gives me an undefined error on append.
I think you can use insertAdjacentElement method, it allows you define the inserting position.
It accepts these values:
'beforebegin': Before the targetElement itself.
'afterbegin': Just inside the targetElement, before its first child.
'beforeend': Just inside the targetElement, after its last child.
'afterend': After the targetElement itself.
Example:
document.body.insertAdjacentElement('afterbegin', element);
Related
How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
I bumped into this code:Foursquare like feed here's the working DEMO
but I can't figure out why it makes all the feeds ("#feed0", "#feed1","#feed2" ...) altogether??
Ironically... Why does this code work? :)
There is some part that erases the feed when it comes to its end, I don't know why. It looks pretty standard but I am not a jQuery expert.
I did notice the animations complete right on the spot.
The shift() function happens right away and the animation happen just after it completes.
What makes the bunch of divs move together?
what is needed to make it operate on n number of feeds?
Sections move together because in the html they're inside a div block.
In the code, under JavScript(Jquery), if you look at the 3rd line, it says:
var showing = 3; //How much items to show at a time
This is why it disappears at the end. If you increase the number, it'll show more.
I have layered 4 canvases over the top of each over, however i want to be able to click a button and the linked canvas will come to the top.
http://jsfiddle.net/5g3Fe/ shows what i have currently got. I tried to put the following code into the button click functions. however this doesn't work.
function canvasView1()
{
document.getElementById("canvas1").style.z-index="1";
document.getElementById("canvas2").style.z-index="0";
document.getElementById("canvas3").style.z-index="0";
document.getElementById("canvas4").style.z-index="0";
}
can anyone suggest a way to be able to get specific canvas from a button click.
Thanks
For some reason, jsFiddle was ignoring your JavaScript code because of this reason. You can get around that by choosing No wrap - in <body> on the left hand side options.
Then your problem was that to set the z-index in javascript you use .style.zIndex rather than .style.z-index.
Working fiddle here
Or cleaner code version here
EDIT2: It seems that the big numbers are created because the movieclip doesnt hold any bipmapdata, but Im yet not sure about it, but my real mistake was that I just forgot "this" infront of one "getBounds" ... project size was to big and I couldnt find the bug =)
EDIT: tried to use seperate containers, for the movieclips, and did all this in the root class ... everything worked fine, when I used seperate containers and attached everything to the charakter class it got screwd up again
OLD:
Hey I am making a game right now and I want to get the bounds of the charakter body.
To understand how I did set the whole thing up I explain the hirarchy.
The class of my flash document is "game.as". "game.as" adds a Child of the class Charakter
my Charakterclass has a Movieclip for every body part, for example the "head"
every bodypart has a movieclip which contains the picture of the bodypart, in this case "head".
When I now try to use the getBounds(head.mc) inside the "head" class I get really weird results. ussualy something around x=64001, y=64001, width = 0, height = 0;
I found a way how to solve this problem by simply using the getBounds(head.mc) function not inside the head, but inside the Charakter class .... but this is not what I actually want to do, I would like to use the getBounds(head.mc) function inside the head class.
Any ideas why the results are so weird or what I have to do? Im very thankfull for every opinion, because this doesnt seem logical to me xD
getBounds() is inaccurate. Please read the following posts to understand the issue.
getBounds "wrong" results (Source)
When getting bounds of an object relative to it's OWN coordinate system,
those values will NOT be scaled.
getBounds() returning incorrect height (Source)
From inside head_mc, try getBounds(this.parent); (you may want to test to see if the parent exists first) - this should give you the bounds of your head_mc as its container sees it, which I think is what you want, but called from inside head_mc, as you request.
bitmapdata is right, though - getBounds() can sometimes give some odd results. It looks to me like you might be asking the question before you add head_mc to the stage, and are therefore getting the undefined values for width/height/x/y.
I am building a Flex 4 application which uses a <s:Scroller> component to vertically scroll overflown content. Let me explain what happens before I ask my question:
The body of the page is loaded from a database
Once the information has loaded, the "body" of the application (in this case the list of items you see below) is constructed
Once the list is constructed, the entire encapsulating component is transitioned into view using TweenMax, like so:
myComponent.visible = true;
TweenMax.to(myComponent, 1, {
alpha : 1,
y -= 20 //Slides the component up 20px from its original location
});
Below is the result. Notice how the scrollbar is scrolled the whole way down, but you can see the tips of a few white letters that were cut off at the very bottom.
Using my custom menu, I can navigate away from the page, and come back to it, and Flex will correctly recalculate the range of the scroller so I can scroll down and see all of the desired content. This issue only happens if the initial URL that the user enters is a longer page like this one.
Any ideas on how I can force Flex to recalculate the range of the scroller?
Thank you for your time.
Ok, after many hours of researching, piecing together, and trial and error here is what I came up with.
What I was doing wrong:
When I first posted this question, the "component" that I had mentioned was already added as a child element of the <s:Scroller>, but collapsed and hidden away, like this:
<comp:MyComp alpha="0" height="0" visible="false"/>
When the data would be loaded and the component's visual appearance would be restored and transitioned into place, like this:
myComp.visible = true;
myComp.height = NaN;
myComp.invalidateSize();
myComp.height = myComp.measuredHeight;
TweenMax.to(myComp, 1, {
alpha : 1,
y -= 20 //Slides the component up 20px from its original location
});
This method of approach didn't force the <s:Scroller> to recalculate its proper size until later, sometimes not until myComp was transitioned away and another component was transitioned into place using the same method. Even then, the size of the scroller would fit the size of the previous component, not the one that is currently displaying.
Now, what I am doing correctly:
My research showed me that anytime the addElement() method is called, either directly within the <s:Scroller> itself or by any of its children, the scroller's measure() method is called, and properly re-sizes the scroller.
Instead of placing the components inside of the scroller and simply hiding them until I need them, I dynamically created them in ActionScript, set their properties, and added and removed them as needed using the addElement() and removeElement() methods respectively. Now, as old elements are transitioned away and new ones take their place, the scroller re-sizes itself correctly.
There was one final problem that I was faced with. If the very first page the user was viewing (i.e. there was no previous component that was transitioned away and destroyed) required a scroller, it wouldn't show up.
I corrected this final issue by adding an event listener that listened for when the new component had finished transitioning into place. Inside of the event handler, I explicitly set the height of the component using this code:
newComp.height = NaN;
newComp.invalidateSize();
newComp.height = newComp.measuredHeight;
Now that the component has an explicit height, the scroller now appears, even if it is the first page.
The scroller now works as expected in all cases, and does not cut off any content or disappear when it shouldn't.
I hope that it is helpful to someone.