I'm learning HTML 5 and I was trying to make my own Craps game.
Now the idea is that when the "Reset" button is pressed, all values will go back to the default and the canvas will be cleared. However when I do it, the image of the dice are still in the canvas.
Now I don't think there's anything worng with this:
ctx.fillStyle = "red";
ctx.fillRect(0,0,900,900);
but it doesn't work when it's in the reset method. When I put it in other method it works.
Here is the site and code is in it if anyone wants to see:
https://dl.dropboxusercontent.com/u/90543216/index.html
You may not call a function in a form environment reset(). reset() and submit() are two special functions which simulate <input type="reset">/<input type="submit">.
If you rename reset to resetGame, everything works as intended. However, you should get rid of <form> and use <button> instead of <input type="button"> anyway.
Related
I have a MenuItemImage here:
auto myImage = MenuItemImage::create("image.png","image_selected.png",
CC_CALLBACK_1(HelloWorld::onImageClicked,this));
It allow me to input a image.png, which will be changed to image_selected.png on selected when I navigate between items in my menu with keyboard. However, I want to perform some actions when select it with myImage->selected(); (NOT activate it by clicking/touching or calling for myImage->activate(); function), not just a boring image_selected.png.
Now, I'm thinking about set up all of those action in:
keyBoardListener->onKeyPressed = [&](cocos2d::EventKeyboard::KeyCode keycode, Event* event)
{ // Setting up actions on KEY_RIGHT_ARROW or KEY_LEFT_ARROW pressed};
However this way makes things complicated. Therefore, I want to ask if there's any way that I could set up all of my actions as myImage being creating so I could call all of those action with a simple myImage->selected() or stop them with myImage->unselected() later?
Your attention and help is very much appreciated :D
Simply do this:
auto myImage = MenuItemImage::create("image.png", "image_selected.png", [&](Ref* ref){
//your code here
//by ref you can access "myImage" object
});
edit:
I'm not sure what are you trying to achieve. Do you want to have a few buttons in menu, which always one of the is selected and change them using arrows? (so menu navigation is like on console games).
edit2:
After watch a sample yt video I don't think you can achieve this relying only on MenuItemImage. Instead I'd create a ui::Button (if you need clicking/touching as well) or Sprite. Then I'd handle button states by myself. As for glowing frame you probably need some fancy shader or create it in photoshop and add to it an action with constantly fading out and in.
A weird bug caused me a lot of headaches recently, and I've been able to dumb it down to the simplest form possible. See this fiddle : http://jsfiddle.net/PgAAb/
<input type="text" id="foo" placeholder="Change me!"><br>
<input type="text" id="bar" size="30" placeholder="Dummy control to switch focus">
$('#foo').change(function() {
console.log('Changed!');
$('#bar').focus();
});
Basically, when you change the first textbox and use the mouse to click elsewhere in the document, the change event fires, as usual. However, if you change the value, and hit the enter key to trigger the change, the event fires twice.
I've noticed the bug is only with Chrome. Firefox does not trigger the event twice, and IE does not even support the enter key to trigger change on an input.
I guess that happens because of the focus switching inside the event callback. Is there any way around this?
The focus() on other control in your change eventhandler call the change event in chrome because it unfocus "blur" your current control if the value is different.
This bug is not new, you can take a look at this bug ticket on jQuery : http://bugs.jquery.com/ticket/9335
You can work around this by disabling the change eventhandler before to remove the focus on your control.
Here a little exemple of what I want to say:
$('#foo').change(changeHandler);
function changeHandler() {
console.log('Changed!');
$(this).off('change').blur().on('change', changeHandler);
$('#bar').focus();
}
Also, you can workaround this bug with just blur your input on Enter key:
jQuery('input').keydown(function(e){
if(e.keyCode==13) jQuery(this).blur();
});
Thanks for spending time to read this
I have a form where is call a JS function to copy the html content of a DIV to a hidden form field so that I can submit this with the form. It works fine on desktop webkit broswers and also on mobile safari on iPad. However when I run the application in fullscreen mode (by saving a shortcut on home screen), this does not work.
Here's my code
JS function:
function update_script_in()//copies scripts and submits the form
{
$("#script_in").html($("#scriptContent").html());
$('#ResiForm').submit();
}
form submission:
<input type=submit value="Submit" onclick="update_script_in()">
Thanks for your help
This is quite old, but after googling around to solve the same issue for me, I have not found a solution. Looks like some weird behaviour from iPad (easily reproducible, no way to fix, at least that I found): the target input field gets changed indeed, but the posted value is the original one (???)
So just in case a workaround is useful to somebody, instead of applying the changes from the contenteditable div on form submit, I apply the changes whenever the div is changed (no on change event for contenteditable divs, so really it is done on blur event):
<div id="editor_inline_core_body" class="inputbox editor-inline" contenteditable>[initial value here]</div>
<input type="hidden" id="jform_core_body" name="jform[core_body]" value="[ initial value here]" />
<script>
jQuery('#editor_inline_core_body').blur(function() {
var value = jQuery('#editor_inline_core_body').html();
jQuery('#jform_core_body').val(value);
return true;
});
</script>
Less efficient, but at least it works. If you want a bit more of efficiency, you can check old and new values using also focus event, but at least I do not think it is a big deal or worth the added complexity.
I am working on a project for a mobile bidding system. I am designing the front end of it and ran into a problem with the two buttons that I am using. There are two buttons: 1) raise bid; 2) bid.
Now that being said here is my code
<input class="btnraise" type="image" src="bidraise.png" onclick="raiseBid();"/>
<input class="btnbid" type="image" src="mobilebid.png" onclick="Bid();"/
That works fine. Except the CEO wanted the buttons to kind of wrap around each other. The raise button is a triangle with a concave bottom where a round circle bid button fits up almost touching the concave bottom of the triangle. (not sure if this makes sense) Almost like a golf ball sitting on a tee upside down. This is the CSS I am using to make them almost touch:
.btnbid{
width:250px;
position:relative;
top:-79px;
}
.btnraise{
width:230px;
}
Anyway, I need to make these buttons change (like they are indented) when they are pressed. So I did this:
<input class="btnraise" type="image" src="bidraise-up.png" onmousedown="this.src='bidraise-down.png'" onmouseup="this.src='bidraise-up.png'" onclick="raiseBid();"/>
<input class="btnbid" type="image" src="mobilebid-up.png" onmousedown="this.src='mobilebid-down.png'" onmouseup="this.src='mobilebid-up.png'" onclick="Bid();"/>
That worked just fine on a PC..... But It doesn't work well on a mobile device. The device I have access to is a 3rd or 4th gen iPod Touch. It doesn't change because there is no mouse... I didn't think that one through did I?
So I googled around and found some things that might work. Things like changing the input type from image to button but then they don't line up right. I lose the round bid image sitting inside the concave part of the triangle. So I was thinking that if I just added both events inside of the onclick event then it would work, so I tried this:
<input class="btnbid" type="image" src="mobilebid-up.png" onclick="this.src='mobilebid-down.png'; Bid();this.src='mobilebid-up.png';"/>
This didn't change the image for the mobile. Any ideas? Do I need to take a different approach to this or is there something different for effects on a mobile site?
Answer:
This is what I did:
1) Added id="btnbid"
2) Added ontouchstart event
3) Added ontouchend event
<input id="btnbid" class="btnbid" type="image" src="mobilebid-up.png" ontouchstart="touchStart()" ontouchend="touchEnd()"/>
Then I put this in the script tag:
var btnbid = document.getElementById('btnbid');
btnbid.addEventListener('touchstart', toucchStart, false);
btnbid.addEventListener('touchend', touchEnd, false);
function touchStart( event ) {
document.getElementById("btnbid").src="mobilebid-down.png";
return false;
}
function touchEnd( event ) {
document.getElementById("btnbid").src="mobilebid-up.png";
return false;
}
This gave me the desired effect!!!
You should try onTouch() instead of onclick
I am new to perl/html. This is from a perl file. This button is in there right now:
<button id = "button1" name = "submitButton" type="submit">
<span class="right">Submit</span>
</button>
I don't see any piece of code where submitButton or button1 is given any logic so I don't understand why this jumps to the next page. Can someone explain?
EDIT: This seems to be the only javascript in the whole file...
<script type="text/javascript">
% $m->comp('../js/share.js');
</script>
I looked at the file, and it doesn't seem to do any redirecting or anything.
Often event handlers are hooked up at run-time using JavaScript. If there is an included script, look in the code for "button1" and see which function is hooking it up.
Also since this is a SUBMIT button, if it is wrapped in a form, no code needs to hook this up. It will post to whatever is defined in the form's ACTION property.
Maybe there is some JS/Jquery or another js-framework included to the page?
Since this is a submit button, it does the logic defined by the Form that surrounds it.