I'm creating HTML 5 application sketch to run on mobile device.
In my project, I needed to use different versions of jQuery for the events to work:
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
I used functions like Animate and Swipe of jQuery Mobile . The problem is when I add jQuery Mobile , my internal links stop working. The console gives the following message:
XMLHttpRequest can not load file: ///Users/username/AndroidStudioProjects/WebViewOficial/app/src/main/assets/testeTouch.html. Cross origin requests are only supported for protocol schemes: http, date, chrome, chrome-extension, https, chrome-extension-resource.
Only external links work. Obviously I already researched there. But no solution that looks like my case.
Complete Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="appJS/arrastaEsquerda.js"></script>
<style type="text/css">
div:first-child {
opacity: .99;
}
#header{
/*position: absolute;*/
background: #ccc;
position: fixed;
top: 10px;
}
html
{
position:fixed;
width:100%;
height:100%;
}
#quadro {
position: fixed;
background-color: #CCC;
left: -250px;
top: 0px;
width: 250px;
height: 100%;
margin: 5px;
}
#fechaMenu {
position: fixed;
background-color: blue;
top: 0px;
right: -250px;
width: 250px;
height: 100%;
opacity: 0.2;
}
#menuAberto
{
position: fixed;
top: 20px;
left: 0px;
background-color: #ccc;
}
.clicavel{
position: fixed;
background-color: green;
filter: alpha(opacity=50); /* For IE8 and earlier */
/*opacity: 0.3;*/
background-color: green;
bottom: 0px;
}
#clicavel1{
left: 10px;
/* background-image: url('layout-manual/botao1.png');*/
background-repeat: no-repeat;
}
#clicavel2{
left: 28%;
background-image: url('layout-manual/botao2.png');
background-repeat: no-repeat;
}
#clicavel3{
right: 28%;
background-image: url('layout-manual/botao3.png');
background-repeat: no-repeat;
}
#clicavel4{
right: 10px;
background-image: url('layout-manual/botao4.png');
background-repeat: no-repeat;
}
.conteudo{
width: 100%;
align-content: center;
align-self: center;
left: 0px;
}
#sugestoes
{
position: relative;
width: 100%;
align-self: center;
background: #708090;
top: 200px;
overflow: scroll;
}
#parceiros
{
position: absolute;
overflow: scroll;
width: 100%;
align-self: center;
background-color: yellow;
bottom: 70px;
height: 60px;
left: 0px;
}
#footer
{
position: fixed;
bottom: 5px;
width: 100%;
align-self: center;
/*background-color: blue;*/
height: 60px;
left: 0px;
}
#banner
{
background-color: #ccc;
position: absolute;
top: 90px;
height: 120px;
overflow: scroll;
}
#menu
{
position: fixed;
left: 0px;
top: 30px;
align-self: center;
/*background: #ccc;*/
}
#logo
{
position: fixed;
left: 50%;
top: 80px;
/*background: #ccc;*/
margin-top:-50px;
margin-left:-50px;
}
#pesquisaEcestinha
{
position: fixed;
right: 0px;
top: 35px;
/*background: #ccc;*/
}
</style>
</head>
<body>
<div id="todaPagina">
<div id="navegacao"></div>
<div id="header">
<div id="menu">
<img src="img/botaomenu.png" id="right"></button>
<div id="fechaMenu" class="fechaMenu" ></div>
<div id="quadro" class="block">
</div>
</div><div id="logo" align="center"><a href="http://www.google.com"><img src="img/logoHome50.png"></a></div><div id="pesquisaEcestinha" align="right"><img src="img/cestinhaBotao.png" width="50" height="50"><img src="img/pesquisaBotao.png" width="50" height="40"></div>
</div>
<content >
<div id="banner" align="center" class="conteudo" >
<img src="img/poster.png"></center>
</div>
<div id="sugestoes" class="deslizante">
<center><canvas id="myCanvas" width="180" height="200" style="border:1px solid #000000;">Conteudo</canvas></center>
<div data-role="main" class="ui-content">
</div>
</div>
</content>
<div data-role="page" id="pageone" id="parceiros">
<div data-role="header">
<center>
<h1>Evento arrastar para os lados em Jquery!</h1>
</div>
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">
<canvas class="deslizante" width="300" height="300" style="border:1px solid #000000;">Para testar o evento, arraste o touch para os lados/p>
</div>
<h3>Para instalar, copie e cole as pastas do projeto na raiz, cole os scripts no head, e configure uma div com a id deslizante!</h3>
<div id="sugestoes" class="deslizante">
<center><canvas id="myCanvas" width="180" height="200" style="border:1px solid #000000;">Conteudo</canvas></center>
</div>
<!-- fim do
</div> <!-- fim da id navegacao -->
<div id="footer">
<center>
<a href="testeTouch.html" id="clicavel1" class="clicavel"><img src="layout-manual/botao1.png"></a><!-- Primeiro botao -->
<canvas id="clicavel2" width="70" height="70" style="border:1px solid #87CEEB" class="clicavel"></canvas> <!-- Segundo botao -->
<canvas id="clicavel3" width="70" height="70" style="border:1px solid #87CEEB" class="clicavel"></canvas> <!-- Terceiro botao -->
<canvas id="clicavel4" width="70" height="70" style="border:1px solid #87CEEB" class="clicavel"></canvas> <!-- Quarto botao -->
<!-- canvas para melhor visualizacao em modelo
<canvas id="myCanvasFooter" width="200" height="90" style="border:1px solid #000000;">
</canvas>
--></center>
</div>
<div id="menuEscondigo"></div>
</div>
<div id="flutuante" style="position: fixed; top: 10px; left: 30px;" onclick="animacaoMenuFecha()">FLUTUANTE3</div>
<script src="js/menu.js"></script>
</body>
</html>