I'm currently working on developing an iOS7 WebApp using a template that I came across on this website:
After writing some JavaScript/jQuery to create a fading effect for a picture and a toolbar, and testing it successfully on a blank page, I encountered an issue when trying to implement the exact same code on the live page. The jQuery doesn't seem to load at all and throws an error message:
Uncaught TypeError: Object # has no method 'fadeOut'
The intended functionality is for the fading effect to take place after 3 seconds, serving as a splash screen.
Below is the JS/jQuery code snippet:
$(document).ready(function() {
fadeAwaySplash();
navFadeIn();
//Additional Functions Here
});
function fadeAwaySplash() {
//setTimeout(function() {
$("#splash-screen").fadeOut();
//}, 3000);
}
function navFadeIn(){
setTimeout(function() {
$("nav").fadeIn();
}, 3000);
}
And here is the CSS styling used:
nav {
position: fixed;
bottom: 0;
width: 100%;
height: 49px;
text-align: center;
background-color: rgba(248, 248, 248, 0.9);
background-image: linear-gradient(180deg, rgb(200, 199, 204), rgb(200, 199, 204) 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top center;
z-index: 100;
display: none;
}
#splash-screen {
position: absolute;
z-index: 999999;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
}
The HTML setup is as follows:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<img src="/img/ipadSplash.png" id="splash-screen">
If anyone could provide assistance or guidance on resolving this issue, it would be greatly appreciated.
Thank you in advance, Emanuel