How can I make my button work on mobile devices? - javascript

I have to code a 3 pages website for my school's first year exam.
The website have to work on any computer and on a mobile device (specifically a Nexus 5).
I have created a button on the second page that give random sentences every time you click on it. It perfectly work on computer but every time I put my website on a mobile device (emulators, etc) the button doesn't work.
i saw a lot of people online having the same problem but non of the solution worked or corresponded to my issue.
Here are my codes for the button;
var news = [
'omg i need help',
'haaaaaaaaa',
'skdkskfsjize',
'I ll fail my exams so bad',
'blablabla',
]
function newNews() {
var randomNumber = Math.floor(Math.random() * (news.length));
document.getElementById('newsDisplay').innerHTML = news[randomNumber]
}
.boite {
overflow: hidden;
position: fixed;
background-position: right;
float: right;
font-size: 14px;
line-height: 13px;
width: 200px;
display: inline-block;
vertical-align: right;
margin-left: -806px;
margin-top: 43px;
background-color: darkolivegreen;
border-bottom-style: groove;
border-width: thick;
}
<button type="button" style="height: auto; width: 200px;" onClick="newNews();" onTouch="newNews();">News</button>
<div id="newsDisplay" class="boite"></div>
Thank you for your time

Replace your margin-left value with a lesser value or with a percentage rather than a pixel in your css to prevent the div from being placed off display in mobile screens.
Also, add a unique id to your button and add event listeners to it in the JavaScript itself rather than writing your scripts inline like this:
/* JavaScript */
var btn = document.getElementById("newsBtn");
var news = ['a','b','c','d','e',];
function newNews (e) {
e.preventDefault();
var randomNumber = Math.floor(Math.random()*(news.length));
document.getElementById('newsDisplay').innerHTML = news[randomNumber];
}
btn.addEventListener("click", newNews);
btn.addEventListener("touchstart", newNews);
<!-- HTML -->
<button id="newsBtn" type="button">News</button>
<div id="newsDisplay" class= "boite"></div>
N.B. The e.preventDefault is for preventing both event listeners from being fired on certain mobile devices that simulates a mouse click when an element is touched or on devices like touch-screen laptops where both events are simultaneously fired.
Check this article on handling events for a more in-depth explanation of how you can handle both events on a single element.

So i simplified your script a little. See the Jsfiddle
What mostly went wrong was the css
margin-left: -806px;
Margin-left ensured that it fell outside the screen. Also tested it with mobile debug, works fine.

Remove the margin-left property - it places the div element off-screen - and you might also want to change the background-color to something more visible!
var news = [
'omg i need help',
'haaaaaaaaa',
'skdkskfsjize',
'I ll fail my exams so bad',
'blablabla',
]
function newNews() {
var randomNumber = Math.floor(Math.random() * (news.length));
document.getElementById('newsDisplay').innerHTML = news[randomNumber]
}
.boite {
overflow: hidden;
position: fixed;
background-position: right;
float: right;
font-size: 14px;
line-height: 13px;
width: 200px;
display: inline-block;
vertical-align: right;
margin-top: 43px;
background-color: darkolivegreen;
border-bottom-style: groove;
border-width: thick;
}
<button type="button" style="height: auto; width: 200px;" onClick="newNews();" onTouch="newNews();">News</button>
<div id="newsDisplay" class="boite"></div>

Margin left seems to be the problem here. Remove that everything will be working fine.
Check this.
var news = [
'omg i need help',
'haaaaaaaaa',
'skdkskfsjize',
'I ll fail my exams so bad',
'blablabla',
]
function newNews() {
var randomNumber = Math.floor(Math.random() * (news.length));
document.getElementById('newsDisplay').innerHTML = news[randomNumber]
}
.boite {
overflow: hidden;
position: fixed;
background-position: right;
float: right;
font-size: 14px;
line-height: 13px;
width: 200px;
display: inline-block;
vertical-align: right;
/*margin-left: -806px;*/
margin-top: 43px;
background-color: darkolivegreen;
border-bottom-style: groove;
border-width: thick;
}
<button type="button" style="height: auto; width: 200px;" onClick="newNews();" onTouch="newNews();">News</button>
<div id="newsDisplay" class="boite"></div>

Related

Why isn't the hover working on child but parent?

I want some action to be performed when the child element .menuitems is hovered. Currently I've replaced the action with an alert to make it simple.
Now the problem is that when I use selector ("#result_row .menuitems"), nothing works. But if I use ("#result_row"), it works fine i.e., alert works.
Why is it so? It should work in both cases? I want the hover to work on child as well as grandchilds (.menu1).
Here's my code:
HTML
<div id="result_row"><div class="menuitems">
<div class="menu1">sfsdsf<span id="srno">4</span></div>
<div class="menu2">sfsdfs#saf</div>
<div class="menu3">sdfsdf<span id="cross">X</span></div>
<div class="clear"></div>
</div>
</div>
CSS
.menuitems{
margin-bottom: 5px;
background: #007fad;
}
.resultmenu > .menuitems{
background: #004068;
}
.menuitems div{
background: #00aeef;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
position: relative;
}
.menu1{
float: left;
width: 25%;
margin-right: 2px;
}
.menu2{
float: left;
width: 40.4%;
}
.menu3{
float: right;
width: 34%;
}
.clear{
clear: both;
padding: 0 !important;
}
JavaScript
$(document).ready(function(){
$("#result_row .menuitems").hover(function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
NOTE: This code won't render fine as it is missing many other styles, parent elements etc. So I've put a screenshot to describe the problem.
Red rectangle is .result_row. Green is child, .menuitems.
EDIT:
If you want to know something else, here it is: when I use .menuitems:hover in CSS (not jQuery), the hover works.
EDIT2:
One more thing that can be important to you while answering is: The window "EMAIL" you're seing in this image is no loaded when open the main page(site). It is loaded only when I click a button on the page, and the content you're seeing in 2nd and 3rd row are loaded ALONG WITH IT, i.e., they're not static!
I entered everything you had into jsfiddle and it worked (hit F12 to see console.log)
https://jsfiddle.net/bLjmocza/
I also replaced
$("#result_row .menuitems").hover(function(){
with
$(".menuitems").hover(function(){
as that seemed to be more what you were trying to achieve in the first place
use this code:
$(document).ready(function(){
$("#result_row .menuitems").mouseover(function(){
alert("Hello");
});
});
Your problem is float in your CSS. See: http://wtfhtmlcss.com/#floats-computed-height.
The quick and diry fix ist to float the parent. But you are better off applying a clearfix to the parent. The added bonus is you can then get rid of your clear div.
Below is clearfix option:
$(document).ready(function(){
$("#result_row .menuitems").hover(function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
.menuitems{
margin-bottom: 5px;
background: #007fad;
}
.resultmenu > .menuitems{
background: #004068;
}
.menuitems div{
background: #00aeef;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
position: relative;
}
.menu1{
float: left;
width: 25%;
margin-right: 2px;
}
.menu2{
float: left;
width: 40.4%;
}
.menu3{
float: right;
width: 34%;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result_row"><div class="menuitems clearfix">
<div class="menu1">sfsdsf<span id="srno">4</span></div>
<div class="menu2">sfsdfs#saf</div>
<div class="menu3">sdfsdf<span id="cross">X</span></div>
</div>
</div>
Updated: This won't work in jQuery 1.9 onwards!
http://api.jquery.com/on/#additional-notes. Use mouseenter/mouseleave instead
A second anser as this one addresses binding handlers to dynamic elements
As you are dynamically adding elements to the page you want to use jquery's on method
Change gour jquery to
$(document).ready(function(){
$("#result_row").on(".menuitems", "hover", function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
The main difference is this will attatch the hover event handler any child of resultrow with a class of menuitems that exist now or that are added later.

Element not showing up in expected location (x)

I think I am doing the same for two different elements (#tu, #chr_1) but they behave differently for some reason I cannot figure out.
I want the feedback element to be in the same location as the dragged window and the target so that I can give some feedback in-place.
Interestingly, the #chr_1 properly aligns in the drop: function, but the #tu element fails to do the same. It aligns vertically just fine, but has a large offset to the right in respect to the expected location.
Additionally, the #tu element shows up under the #chr_x element even though its z-index is much higher.
What am I missing here?
https://jsfiddle.net/2s4c7o3c/
.draggable {font-size: 2em; text-align: center; vertical-align: middle; width: 30px; height: 30px; padding: 0em; float: left; margin: 0em; background-color: orange; z-index: 10; visibility: visible;}
.droppable {font-size: 2em; text-align: center; vertical-align: middle; width: 30px; height: 30px; padding: 0em; float: left; margin: 0em; background-color: orange; z-index: 10; visibility: visible;}
<div id="tu" class="draggable" style="visibility:hidden; z-index: 100;"> </div>
<script>
var feedback = $("#tu");
feedback.draggable();
document.write("<div id='chr_"+i+"' class='draggable' style='position:fixed;top:"+y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
var src = $( "#chr_"+i );
src.draggable();
//...
drop: function( event, ui ) {
var ep = $(this).data("pos");
var fp = $(ui.draggable).data("expos");
if(ep == fp) {
jQuery.data($(ui.draggable)[0],"placed",true);
$(ui.draggable).css("top",$(this).css("top"));
$(ui.draggable).css("left",$(this).css("left"));
//Here it works (#chr_1) and the elements are in the same location afterward.
feedback.css("top",$(this).css("top"));
feedback.css("left",$(this).css("left"));
//Here the feedback (#tu) doesn't occur in the expected location,
//but is at a few hundred px offset to the right.
feedback.css("visibility","visible");
feedback.css("background-color","red");
} else {
$(ui.draggable).data("moving",true);
}
}
});
//...
Merely adding position:fixed to the .draggable style solved the problem.

Text/Image button in Safari not clicking

I've been searching around the apple forums and did a search here but I can't seem to find a solution.
I have a button which has text in it.
The button is a 'sliding doors' image button.
The button has a javascript event listener.
When the user clicks the text in the button the button does not function, however when the user clicks the image area of the button it does work.
Any idea how to fix this?
HTML
<div class="buttonWrapper listener">
<div class="button">
<div class="buttonText">Next</div>
</div>
</div>
CSS
.buttonWrapper{
position: relative;
z-index: 3;
width:100%;
max-width: 477px;
height:152px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
background-color: green;
}
.button{
position: absolute;
z-index: 1;
width:100%;
max-width: 477px;
height:304px;
background-color:red;
}
.button:hover{
opacity:0.7;
}
.button:active{
top:-152px;
}
.buttonClicked{
top:-152px;
}
.buttonText{
position: absolute;
top:0;
width: 100%;
height:304px;
text-transform: uppercase;
font-size: 30px;
color: #fff;
line-height: 152px;
text-align: center;
}
I've put together a JSFiddle to show the issue.
http://jsfiddle.net/xv5of614/4/
On OSX Safari click the text, nothing happens.
Then click the read button area, an alert is triggered.
I should also add that this also happens if using an a href in place of the listener.
Does anyone know how to solve this?
Try adding pointer-events: none; to your .buttonText selector:
.buttonText{
pointer-events: none;
position: absolute;
top:0;
width: 100%;
height:304px;
text-transform: uppercase;
font-size: 30px;
color: #fff;
line-height: 152px;
text-align: center;
}
fiddle: http://jsfiddle.net/xv5of614/5/
MDN Documentation for pointer events: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Untested thought:
Move the event listener to the button text, so:
$('.buttonText').click(function(e){
alert('clicked');
});
Since the text inside the button sits on top of everything else, make that's the clickable item.
Hope that helps.

Add Javascript Onclick To .css File

I wonder whether someone may be able to help me please.
I'm using this page to allow users to view a gallery of their images.
You can see that I've added a cross at the bottom of each image which I will use to delete the image and this is set up in my .css file as:
.galleria-thumbnails .galleria-image {
width: 80px;
height: 80px;
float: left;
margin: 0 7px 7px 0;
border: 2px solid #fff;
cursor: pointer;
background: url(cross.png) no-repeat bottom;
padding-bottom: 20px;
background-color:#FFFFFF;
The problem I have is that I'm very unsure how to link the image in the separate .ccs file with the Javascript command to delete the image which is on my gallery page.
I just wondered whether someone may be able to provide some guidance on how I may go about overcoming this problem.
Thanks and regards
You need to add an element (e.g. span) which can handle the click. I can see that you actually already have something like this:
<span class="btn-delete icon-remove icon-white"></span>
You even have the click handler already:
$(".btn-delete").live("click", function()
{ var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ' + $(img).attr("src")); return false; });
All you need to do is apply the styles so you can actually use this. Something like:
.galleria-thumbnails .btn-delete {
display: block; /* Or just use a div instead of a span*/
position: absolute;
bottom: 0px; /*align at the bottom*/
width: 80px;
height: 80px;
cursor: pointer;
background: url(cross.png) no-repeat bottom;
}
CSS is for styling, while JS is for behavior. You can't mix the two, and both are not related in terms of functionality. what you need is a JS that removes the image.
a standards compliant, JS version
var db = document.querySelectorAll('.galleria-thumbnails .btn-delete'),
dbLength = db.length,
i;
for(i=0;i<dbLength;i++){
db[i].addEventListener('click',function(){
var thumbnail = this.parentNode;
thumbnail.parentNode.removeChild(thumbnail);
},false);
}
a jQuery 1.7+ version is this:
$('.galleria-thumbnails').on('click','.btn-delete',function(){
$(this).closest('.galleria-image').remove()
})
If you set this above style sheet with in a <td> just write onclick event...
here a sample
<td id="Homebutton" runat="server" style="height: 35px; width: 101px; cursor: pointer;"
class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
onmouseout="this.className= 'menubuttonhome'">
Home
</td>
here my css
.menubuttonhome
{
background-image: url('Images/homebutton.png');
background-repeat: no-repeat;
vertical-align: top;
color: #005a8c;
font-family: Arial;
padding-top:11px;
font-size: 10pt;
font-weight: 500;
}

Strange onclick behavior after add style to div

I have html:
<div>
<div id='icon_zoom_in' class='icon'>+</div>
<div id='icon_zoom_out' class='icon'>-</div>
</div>
And I add CSS:
.icon{
color: white;
font-size: 100px;
background-color: black;
opacity: 0.7;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
width: 70px;
height: 70px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
The result is nice (ignore the font, I installed a Chrome extension):
But when I add click event on their "buttons", strange things happen:
var $ = function(id) {
return document.getElementById(id);
}
$("icon_zoom_in").addEventListener("click", function() {
console.log("zoom in");
}, false);
$("icon_zoom_out").addEventListener("click", function() {
console.log("zoom out");
}, false);
When I click the "+" button, I got zoom out! I have to click the outer space of it to get zoom in.
jsfiddle: http://jsfiddle.net/wong2/w2dRB/
Super simple: in Chrome the text is overflowing. Actually when you click the plus you are clicking the minus because of this. Use overflow: hidden; and the plus and minus will stick inside the buttons.
Here (JSFiddle) you can test the correct behaviour.

Categories