How can I make my button work on mobile devices?

user_10867239 0
Viewed 941

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

button css html jquery javascript
4 Answers

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.

user_78494350

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.

user_41149070

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>

user_43619990

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>

user_98800900
Related