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
Related
I want to make a DIV which appear only when someone click on 3 buttons.
I searched through the posts and find something like, Hide/Show DIV onClick Button but i can't find anything like show DIV only after Click on all 3 buttons.I tried to modify a few but had no luck.
Anyone point me in the direction for example? Would like to do this in JS or jQuery.
Any help would be much appreciated.Thanks in Advance
I would do it by making an if-statement that passes if a variable counter you create reaches 3. Every click to one of 3 buttons adds to the counter once, and at 3 it passes the if-statement and the div appears.
For example, you should understand this code:
var counter = 0;
if(counter == 3) {
console.log("Show div!");
}
So your job is to figure out how to do this with your current situation, and instead of just console.log something random, to show the div you wish to show when the counter reaches 3.
It's the same if your buttons are 3 separate ones, just add to the counter upon each click.
So in your callback function inside JQuery's .click() function you can add to the counter every time someone clicks one of three buttons, and some where else in your js file you can make an if-statement checking if that variable has reached "3". If it has, make the div appear.
I suggest you work on this problem in this way before making improvements, such as considering how to improve this code so that it only works upon clicking each of the three unique buttons once. Breaking down problems is very important in programming.
One tip I have for when you reach this point is say you have 3 buttons with unique ids: 'btn-1', 'btn-2', 'btn-3', think of a way of making the if statement only fire off if each of those unique buttons are clicked.
See if you can get this to work yourself, and feel free check back with some sample code for more help.
You need to have one variable that acts as counter. And you need to make every of those buttons clickable only once.
<button class="clickableOnce">Btn 1</button>
<button class="clickableOnce">Btn 1</button>
<button class="clickableOnce">Btn 1</button>
<div class="theDiv" id="theDiv">
Javscript code:
var countMyClicks = 0;
jQuery('.clickableOnce').on('click', function() {
countMyClicks++;
jQuery(this).prop('disabled', true);
if(countMyClicks==3){
jQuery('#theDiv').show();
}
});
CSS code:
.theDiv{
background:red; height:10px; width:10px; display:none;
}
And you can check the fiddle here:
https://jsfiddle.net/c2uc44f1/
Make 3 buttons, put the same class in the 3 of them, like this:
<button class="ex">Button1</button>
<button class="ex">Button2</button>
<button class="ex">Button3</button>
Then use JS:
var a = 0;
$(".ex").click(function({
a++;
});
I have a page with a FileUpload control rendered dynamically. At runtime, Asp generates the following input:
<input name="ctl00$ContentPlaceHolder1$ucPF$ucCustomField2$field2" id="field2"
type="file" Validators="[object HTMLSpanElement]"
cachedHoverStateItem="[object Object]"/>
In Google Chrome, the display seems to be spot on:
However, in IE8, not so much:
I know it's a small detail, but it still bothers me unreasonably. Any one of you would happen to know why the text is not vertically aligned and what can I do to fix it? Perhaps it's not a normal behaviour and I'm doing something wrong on my end?
I have tried adding the following CSS:
input[type="file"] {
line-height: 1ex;
}
But it didn't change anything.
File inputs are actually platform dependent and there is no standard way to style them... I've worked with them in the past and what most people tend to do is create an invisible file input and a separate text-input/button combi. The on-click of the button then triggers the on-click of the file input, and after the file input has a value it is copied to the text-input via Javascript.
Something like this (pseudo-code):
<input type="file" id="file" style="visibility:hidden" onchange="setFile(this.files[0])" />
<input type="text" id="filename">
<button onclick="document.getElementById('file').click()" />
With something like this in Javascript:
function setFile(file) {
var input = document.getElementById("filename");
input.value = file.name;
}
The code above asserts you're only supporting browsers which support the new (in progress draft) of the File API, there will certainly be ways to do this for older browsers as well...
Another approach (which works for older browsers) is described here
input[type="file"] {
line-height: 1ex;
}
Is this the line height of your text box? I thought ex indicated the height of the letter itself. Try adding the height of the actual box.
I was wondering how to make a link, that when clicked it would open 2
links: One would open in a new tab instantly Second one would open in
a new window after a minute or so.
I also want to embed this in a website like weebly.
This is an edit to make things simpler -
linky
two opens one click
This sounds very spammy and not recommended but if you were to do it, I would do it a separate function rather than in line in the onclick html attribute.
Try the below. It will give a 5 second time gap between links.
function openPage1() {
window.open(url1);
window.setTimeout(openPage2,5000);
}
function openPage2() {
window.open(url2);
}
// Just call openPage1 from your button click handler
openPage1();
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.
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.