We Keep Coding

Simple onclick event not triggering on Android devices

I have some simple HTML displaying a calendar as below. Once rendered the calendar has either 5 or 6 rows relative to the number of days in the month and which day of the week the 1st of the month is. Each day cell is clickable to execute some javascript. This all works fine on all desktop browsers and on iOS. However, with all versions of Android tested the bottom row of cells do not trigger the onclick event when clicked. Any ideas?
<div id="cal">
<div id="cal-caption">
<span id="cal-last"><img src="/assets/images/arrow-left.png"></span>
<span id="cal-month">May 2021</span>
<span id="cal-next"><img src="/assets/images/arrow-right.png"></span>
</div>
<div id="cal-header">
<div class="cal-head">MON</div>
<div class="cal-head">TUE</div>
<div class="cal-head">WED</div>
<div class="cal-head">THU</div>
<div class="cal-head">FRI</div>
<div class="cal-head">SAT</div>
<div class="cal-head">SUN</div>
</div>
<div id="cal-body">
<div class="cal-row">
<div id="cl00" onclick="cal.click('cl00')"></div>
<div id="cl01" onclick="cal.click('cl01')"></div>
<div id="cl02" onclick="cal.click('cl02')"></div>
<div id="cl03" onclick="cal.click('cl03')"></div>
<div id="cl04" onclick="cal.click('cl04')"></div>
<div id="cl05" onclick="cal.click('cl05')"></div>
<div id="cl06" onclick="cal.click('cl06')"></div>
</div>
<div class="cal-row">
<div id="cl10" onclick="cal.click('cl10')"></div>
<div id="cl11" onclick="cal.click('cl11')"></div>
<div id="cl12" onclick="cal.click('cl12')"></div>
<div id="cl13" onclick="cal.click('cl13')"></div>
<div id="cl14" onclick="cal.click('cl14')"></div>
<div id="cl15" onclick="cal.click('cl15')"></div>
<div id="cl16" onclick="cal.click('cl16')"></div>
</div>
<div class="cal-row">
<div id="cl20" onclick="cal.click('cl20')"></div>
<div id="cl21" onclick="cal.click('cl21')"></div>
<div id="cl22" onclick="cal.click('cl22')"></div>
<div id="cl23" onclick="cal.click('cl23')"></div>
<div id="cl24" onclick="cal.click('cl24')"></div>
<div id="cl25" onclick="cal.click('cl25')"></div>
<div id="cl26" onclick="cal.click('cl26')"></div>
</div>
<div class="cal-row">
<div id="cl30" onclick="cal.click('cl30')"></div>
<div id="cl31" onclick="cal.click('cl31')"></div>
<div id="cl32" onclick="cal.click('cl32')"></div>
<div id="cl33" onclick="cal.click('cl33')"></div>
<div id="cl34" onclick="cal.click('cl34')"></div>
<div id="cl35" onclick="cal.click('cl35')"></div>
<div id="cl36" onclick="cal.click('cl36')"></div>
</div>
<div class="cal-row">
<div id="cl40" onclick="cal.click('cl40')"></div>
<div id="cl41" onclick="cal.click('cl41')"></div>
<div id="cl42" onclick="cal.click('cl42')"></div>
<div id="cl43" onclick="cal.click('cl43')"></div>
<div id="cl44" onclick="cal.click('cl44')"></div>
<div id="cl45" onclick="cal.click('cl45')"></div>
<div id="cl46" onclick="cal.click('cl46')"></div>
</div>
<div id="cal-extra" class="cal-row">
<div id="cl50" onclick="cal.click('cl50')"></div>
<div id="cl51" onclick="cal.click('cl51')"></div>
<div id="cl52" onclick="cal.click('cl52')"></div>
<div id="cl53" onclick="cal.click('cl53')"></div>
<div id="cl54" onclick="cal.click('cl54')"></div>
<div id="cl55" onclick="cal.click('cl55')"></div>
<div id="cl56" onclick="cal.click('cl56')"></div>
</div>
</div>
<div id="cal-footer">
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
</div>

The HTML is part of a bootstrap responsive layout. The issue only occurs in Chrome, when the viewport is narrow (phone sized). The calendar sits in the left hand 6 columns, with some text in the right 6 columns. As the page cascades and the viewport narrows the right hand 6 columns drop below the left hand columns but crucially in Chrome there is an overlap. The overlap is obscuring the bottom row of the calendar. To solve the issue I added a high z-index to the left hand columns and a low z-index to the right. So now the overlap still occurs but the calendar is on top and still clickable. Many thanks to T.Trassoudaine for pointing me in the right direction.

How to go to specific section using jQuery?

This is my site: http://2helix.com.au/v-04/ It's simple, built with HTML.
Now you can right side navbar. When you click on any link it will show you content. By default all content is hidden.
Now I want to point that section when I click on the link. For example: If I click on social link it's should go to social content section.
I know, If I use this It's should work:
<li><a class="showSingle social" target="1" href="social">SOCIAL</a></li>
<div id="social"></div>
If I do this then page is open on new window.
How can I smoothly go to that section without new window?
Thanks.
Here is my code:
<ul class="nav">
<li>SOCIAL</li>
<li><a class="showSingle" target="2">DIGITAL</a></li>
<li><a class="showSingle" target="3">DESIGN</a></li>
<li><a class="showSingle" target="4">DEVELOPMENT</a></li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<div id="div1 mySocial" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</strong></p>
</div>
</div>
</div>
</div>
</div>
// jQuery code...
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
});

You've a huge number of problems with your basic HTML code that you need to fix before you even look at adding jQuery
You cannot give an element 2 ids. <div id="div1 mySocial" class="targetDiv socialContent"> is not valid. You will need to create a separate element for your anchor e.g. <a id="mySocial"></a>
To link to an anchor you need to use # in the href, e.g. <a href="#mySocial" class="social" >
You cannot use target like that. There are specific values that are allowed and numbers are not any of them. Instead you could use the data-target
Now to what you are trying to do with jQuery...
You are hiding all content except for the one you click on, so there is no scrolling required... see the working example below. What exactly are you trying to achieve?
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).data('target')).show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>SOCIAL</li>
<li>DIGITAL</li>
<li>DESIGN</li>
<li>DEVELOPMENT</li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<a id="mySocial"></a>
<div id="div1" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<a id="digital"></a>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<a id="design"></a>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<a id="development"></a>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</p>
</div>
</div>
</div>
</div>
</div>

Try to change your jquery code like This:
$(document).ready(function() {
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
$('html, body').animate({
scrollTop: $('#div' + $(this).attr('target')).offset().top
}, 500);
return false;
});
});
});

Add also this code on click.
jQuery('html').animate({
scrollTop: jQuery(".content").offset().top
});

If you replace
target = "1"
with
data-target = "#social"
then the link will jump down to a div with the id = "social"
<li><a class="showSingle social" data-target="social" href="social">SOCIAL</a></li>
<div id="social"></div>

Button on HTML page doesn't work

Hello I have an HTML page. I use the button to navigate on this page. But in the 2 section where there are slides, the button doesn't work.
I try to solve it for hour, but I don't understand the problem. You can find the site here.
And you can find the JSFiddle here.
Here there are the part html:
<div class="section" id="section5">
<div class="slide" id="slide1">
<div class="intro">
<h1>#your Led Solution 1 of 2</h1>
<br><br>
<p>Use an ILS LED Flasher Unit, connecting an ILS booster for each LED indicator lamp in the circuit</p>
<img src="http://i.imgur.com/DQ2i9iz.png" class="imgProduct" alt="ILS LED Flasher Unit and ILS booster" style="height:350px;">
<div id="type2">
<div class="btn-5" width="50px">→ VIEW PRODUCT</div>
<br><br>
</div>
<br>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
<div class="slide" id="slide2">
<div class="intro">
<h1>#your Led Solution 2 of 2</h1>
<br><br>
<p>Use an ILS LED Flasher Unit & LED indicator lamps with integrated pulse</p>
<img src="http://www.autoelettric.com/images/stories/virtuemart/product/ils-led-flasher-2022H4ILS.png" class="imgProduct" alt="ILS LED Flasher Unit & LED indicator lamps" style="height:350px;">
<div id="type2">
<div class="btn-5" width="50px">→ VIEW PRODUCT</div>
<br><br>
</div>
<br>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>

.fp-slides has z-index: 1; which place it on the top of back-to-button, so either remove z-index value of .fp-slides or add z-index to back-to-top button.
Also there is another set of #ExactPower and #SafeConversion buttons inside .fp-slides .slides.

fullPage.js only shows first page - hides every page but the first. Why?

Developing site and when I use fullPage js I can only see the first page..The links are in a proper head on dev site. I currently have to disable fullpage to get any work done on the site. I would like to have the feature at end of development but may have to just have a normal scroll...
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.css">
<body id='fullpage'>
<div class='section'>
<nav>
<div id="logo"></div>
<div id='menu'>
<p>Home</p>
<p>Resources</p>
<p>About</p>
<p>Contact</p>
<p>Books</p>
<p>Blog</p>
</div>
<div id='social'>
<img src="img/facebookIcon.png">
<img src="img/twitterIcon.png">
<img id='share' src="img/shareIcon.png">
</div>
</nav>
<div id='bookPromotion'>
<div id='bookStack'></div>
<div id='bookStackText'>
<h2>College is expensive.<br> Your books don't have to be.</h2>
<h1>Get 7 books for the price of 2</h1>
<div>
<p>28 SAT Math Lessons - Beginner</p>
<p>28 SAT Math Lessons - Intermediate</p>
<p>28 SAT Math Lessons - Advanced</p>
<p>320 SAT Math Problems</p>
<p>32 Most Effective Math Strategies</p>
<p>SAT Math Study Guide Companion</p>
<p>New Math Problems - Revised SAT</p>
</div>
<button>Get my books now</button>
</div>
</div>
<div id="bookSlider">
<div id="sliderCatBtn">
<p id='SAT'>SAT</p>
<p id='ACT'>ACT</p>
<p id='AP'>AP</p>
<p id='Other'>Other</p>
</div>
<div id="sliderNextBtn"></div>
</div>
</div>
<div class='section'>
<div id='newsletterTexts'></div>
<p id='newsletterHeadline'>GET 800 Newsletter</p>
<form id='newsletterBanner'>
<div class='left'>
<p>Tips and strategies delivered right to your email</p>
<input type='email' placeholder='Type Email Here'>
</div>
<div class='right'>
<div></div>
<input type='submit' value='Join'>
</div>
</form>
</div>
<div id='resources' class='section'>
<h1>Learning made easy with these free resources</h1>
<div class="colWrap">
<div id='lImg'></div>
<div id='centerCol'>
<div class="resource">
<img src="img/iconDiploma.jpg">
<h3>SAT Math Prep Course</h3>
<h4>This 12 part SAT math prep course has in-depth solutions to all math questions from Test 1 of the Official SAT Study Guide</h4>
</div>
<div class="resource">
<img src="img/iconVideo.jpg">
<h3>Videos</h3>
<h4>Our videos show you how to do your best on your next test</h4>
</div>
<div class="resource">
<img src="img/iconArticle.jpg">
<h3>Articles</h3>
<h4>Our articles are written to help you do your best on your next test</h4>
</div>
<div class="resource">
<img src="img/iconForum.jpg">
<h3>Forum</h3>
<h4>Come join in on the discussion. Ask your SAT, ACT, or SAT Subject Test questions now</h4>
</div>
</div>
<div id='rImg'></div>
</div>
</div>
<div class='section'>
<p id='aboutHeadline'>About Get 800 and Dr. Steve Warner</p>
<div id="aboutCol">
<img src="img/steve.jpg">
</div>
<div id='aboutBtn'></div>
</div>
<div class='section'>
<div id='contactBg'>
<form type=POST>
<input type='text' placeholder='Message Here'>
<input type'text' placeholder='Your Name Here'>
<input type'email' placeholder='Your Email Here'>
</form>
</div>
<footer>Copywright 2-15 Get 800 All Rights Reserved</footer>
</div>
</body>

Fullpage.js can not have the body as the wrapper.
Change:
<body id='fullpage'>
YOUR SECTIONS HERE
</body>
For
<body>
<div id='fullpage'>
YOUR SECTIONS HERE
</div>
</body>
You can find it in the documentation:
Sections should be placed inside a wrapper ( in this case). The wrapper can not be the body element.

Adding rows to a jquery grid with javascript

So basically, i'm actually doing a web app with html/css/javascript and im pretty much a beginner in it (i'm a c++/c# guy). I have seen many kind of solution already, but they always use stuff not related with actual ui-grid. So far, I made my headers (which won't change) and now i'm looking for a way to add rows in the grid. So, here is my headers :
<div class="ui-grid-a" id="currentgrid" style="height: 38px">
<div class="ui-block-a">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e">Info1</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e">Info2</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e">Info3</div>
</div>
</div>
</div>
<div class="ui-block-b">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e">Info4</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e">Info5</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e">Info6</div>
</div>
</div>
</div>
</div>
And here is how i will call the js function to add the rows i will need
Search
For exemple, if i can choose the number of rows added by changing only the value of a number in a loop, that could be awesome.
Help me =(

You can loop and append HTML-elements in this way:
for(var i = 1; i <= 10; i++) {
$('#currentgrid').append('<div class="ui-bar ui-bar-e">Info'+i+'</div>');
}