I'm working on a dynamic layout for a tumblr page. So far I have successfully been able to do a time-sensitive switch for the css stylesheets but now I want to switch out the banner also.
I whipped up some code (javascript) to do this, but keep getting an error and don't know why. I'm also unsure about where to place the code exactly. Since this is a tumblr layout, the header is placed just below the opening tag. So i'm not sure if I should place the javascript there or should I place it just below the tag
Here is the code I come up with. It's giving me a syntax error in DW, but since i'm a newbie I have no clue what the problem is.
<script type="text/JavaScript">
<!--
function getHeader() {
if (7 <= currentTime&¤tTime < 18) {
document.write("<h1><img src="http://itsnotch.com/tumblr/images/NotchTheGuru_VCbanner.jpg" border "0" /></h1>");
}
else {
document.write(" <h1><img src="http://itsnotch.com/tumblr/images/NotchTheGuru_Banner.jpg" border "0" /></h1>");
}
}
getHeader();
-->
</script>
it gives me a error on the 'document.write' lines.
Here is the entire source code for the page to give you guys a better look at what i'm doing
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="description" content="Big Notch, Notch the Guru, Notch Blog, Notch's Blog, Word of Notch" />
<!-- DEFAULT SETTINGS -->
<meta name="font:Title" content="Arial" />
<meta name="font:Body" content="Lucida Sans" />
<meta name="text:Disqus Shortname" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<meta name="viewport" content="width=850"/> <!-- iPhone -->
<!--[if lt IE 7]>
<style type="text/css">
.post div.labels {
right: 450px;
}
</style>
<![endif]-->
<!--Google Tracker Code--->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19744657-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!--SCM Music Player by Adrian Shum - http://scmplayer.asweb.info-->
<script type='text/javascript'><!--
document.write(unescape('%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%73%63%6D%70%6C%61%79%65%72%2E%61%73%77%65%62%2E%69%6E%66%6F%2F%73%63%72%69%70%74%2E%6A%73%22%20%3E%3C%2F%73%63%72%69%70%74%3E'));
//--></script>
<script type="text/javascript"><!--
SCMMusicPlayer.init("{'skin':'skins/cyber/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'70'},'playlist':[{'title':'BattleCat Instrumental Loop','url':'http://itsnotch.com/music/BattleCat%20Instrumental(loop).mp3'},{'title':'Curren$y - Skybourne','url':'http://itsnotch.com/music/skybourne.mp3'},{'title':'Dam-Funk','url':'http://itsnotch.com/music/10_west.mp3'},{'title':'Curren$y - Flight Briefing','url':'http://itsnotch.com/music/FlightBriefing.mp3'},{'title':'B-Ducey - Let Me Be (prod.by Big Notch)','url':'http://itsnotch.com/music/Let%20me%20be.mp3'},{'title':'Vado - Council Music (looped by Big Notch)','url':'http://itsnotch.com/music/Council%20Music%20(Instrumental).mp3'},{'title':'Snoop Dogg - No Bitch','url':'http://itsnotch.com/music/No_Bitch.mp3'},{'title':'Little Brother - That Aint No Love','url':'http://itsnotch.com/music/LittleBrother.mp3'}],'placement':'bottom','showplaylist':'false'}");
//--></script>
<!--End of SCM Music Player script-->
<div id="content">
<div id="description">
<div>
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form>
</div>
{Description}
<p id="nav_container">
Archive
<span class="dim">/</span>
RSS
</p>
</div>
</div>
{block:SearchPage}
<div id="searchresultcount">
<p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
</div>
{/block:SearchPage}
{block:Posts}
<div class="post">
<div class="labels">
{block:NewDayDate}
<div class="date">{Month} {DayOfMonth}</div>
{/block:NewDayDate}
{block:SameDayDate}
<div class="date"></div>
{/block:SameDayDate}
</div>
{block:Regular}
<div class="regular">
{block:Title}<h2>{Title}</h2>{/block:Title}
{Body}
</div>
<div id="separator"></div>
{/block:Regular}
{block:Photo}
<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
<div id="separator"></div>
{/block:Photo}
{block:Quote}
<div class="quote">
<span class="quote">
<big class="quote"></big> {Quote}
</span>
{block:Source}<span class="source">{Source}</span>{/block:Source}
</div>
<div id="separator"></div>
{/block:Quote}
{block:Link}
<div class="link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<span class="description">{Description}</span>
{/block:Description}
</div>
<div id="separator"></div>
{/block:Link}
{block:Conversation}
<div class="conversation">
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul>
{block:Lines}
<li>
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
<div id="separator"></div>
{/block:Conversation}
{block:Audio}
<div class="audio">
{AudioPlayerGrey}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
<div id="separator"></div>
{/block:Audio}
{block:Video}
<div class="video">
{Video-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
<div id="separator"></div>
{/block:Video}
</div>
{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
<noscript>View the discussion thread.</noscript>
<div style="text-align: right; margin-top: 5px">
blog comments powered by <span class="logo-disqus">Disqus</span>
</div>
{/block:Permalink}
{/block:IfDisqusShortname}
{/block:Posts}
<div id="footer">
{block:PreviousPage}
« Previous
{/block:PreviousPage}
{block:NextPage}
Next »
{/block:NextPage}
</div>
</div>
{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
<script type="text/JavaScript">
<!--
function getStylesheet() {
var currentTime = new Date().getHours();
if (22 <= currentTime&¤tTime < 7) {
document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/nighttime.css' type='text/css'>");
}
if (7 <= currentTime&¤tTime < 18) {
document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/vice.css' type='text/css'>");
}
if (18 <= currentTime&¤tTime < 20) {
document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/evening.css' type='text/css'>");
}
if (20 <= currentTime&¤tTime < 22) {
document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/dusk.css' type='text/css'>");
}
}
getStylesheet();
-->
</script>
<noscript><<link rel="stylesheet" type="text/css" href="http://itsnotch.com/tumblr/files/dusk.css" /></noscript>
<script type="text/JavaScript">
<!--
function getHeader() {
if (7 <= currentTime&¤tTime < 18) {
document.write("<h1><img src="http://itsnotch.com/tumblr/images/NotchTheGuru_VCbanner.jpg" border "0" /></h1>");
}
else {
document.write(" <h1><img src="http://itsnotch.com/tumblr/images/NotchTheGuru_Banner.jpg" border "0" /></h1>");
}
}
getHeader();
-->
</script>
</body>
</html>
the header was originally posted below the '' tag
do not nest double quotes
comment out the end comment // -->
currenttime needs to be a global var
Here is some code
<script type="text/javascript">
var currentTime = new Date().getHours();
function getStylesheet() {
var css = "dusk.css"; // default
if (22 <= currentTime&¤tTime < 7) css = "nighttime.css";
else if (7 <= currentTime&¤tTime < 18) css = "vice.css";
else if (18 <= currentTime&¤tTime < 20) css = "evening.css";
document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/'+css+'" type="text/css">');
}
getStylesheet();
function getHeader() {
var img = "http://itsnotch.com/tumblr/images/";
img += (7 <= currentTime && currentTime < 18) ? "NotchTheGuru_VCbanner.jpg" : "NotchTheGuru_Banner.jpg";
document.write('<h1><img src="'+img+'" border "0" /></h1>');
}
getHeader();
</script>
<noscript>
<link rel="stylesheet" type="text/css" href="http://itsnotch.com/tumblr/files/dusk.css" />
<h1><img src="http://itsnotch.com/tumblr/images/NotchTheGuru_Banner.jpg" border "0" />
</noscript>
Related
I don't know why code is executed right after loading the page. It should be executed after clicking the button (function onclick). Script is returning "koszt paliwa:0zł." The browser isn't returing any errors (.........................................................................................)
//javascript
var rodzaj = document.getElementById("rodzajPaliwa").value;
var ilosc = document.getElementById("litry").value;
function pierwszyrodzaj(){
ilosc *= 4
document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa:" + ilosc + "zł";
}
function drugirodzaj(){
ilosc *= 3.5
document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa:" + ilosc + "zł";
}
function inny(){
document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa: 0zł";
}
function marcin (){
if(rodzaj = 1){
pierwszyrodzaj();
}else if(rodzaj = 2){
drugirodzaj();
}else{
inny();
}
}
document.getElementById("oblicz").onclick = marcin();
//html
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STACJA PALIW</title>
<link rel="stylesheet" href="styl3.css">
</head>
<body>
<div id="baner-lewy">
<h1>Stacja paliw</h1>
</div>
<div id="baner-prawy">
<a href="index.html">
<img src="home.png" alt="">
</a>
<a href="obliczenia.html">
<img src="znak.png" alt="">
</a>
</div>
<main>
<h3>Oblicz koszt paliwa</h3>
<label for="rodzajPaliwa">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" name="" id="rodzajPaliwa"><br><br>
<label for="litry">Ile litrów: </label><br>
<input type="number" id="litry"><br>
<br>
<button id="oblicz" >OBLICZ</button>
</br>
<span id="koncowacenapaliwa"></span>
<script src="skrypt.js"></script>
</main>
<div id="blok-lewy">
Pobierz kwerendy
</div>
<div id="blok-prawy">
<img src="samochod.png" alt="samochód">
</div>
<footer id="">
<p>© Stronę wykonał: Jan Kupczyk 4TID</p>
</footer>
</body>
</html>
I am trying to call newsize(picture_src) after the function resizeimg().
It appears that the function newsize(picture_src) is always called first.
The function resizeimg() has to be called first because it sets the sizepic() function that newsize(picture_src) uses to change the image src.
Here's my html:
<html>
<head>
<meta charset="UTF-8" />
<title>TP n°1 - Mise en place d'une grille responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/reset.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<script>
if(window.innerWidth>1200){
var sizepic='1200';
}
else if(window.innerWidth<1200 && window.innerWidth>900){
var sizepic='990';
}
else if(window.innerWidth<990 && window.innerWidth>768){
var sizepic='768';
}
else if(window.innerWidth<768 && window.innerWidth>590){
var sizepic='590';
}
else if(window.innerWidth<590){
var sizepic='petit';
}
function newsize(picture_src, picture){
picture_src.src=='img/'+sizepic+'/'+picture+sizepic+'.jpg';
alert(picture_src.src);
}
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<!-- 1ère ligne -->
<div class="row">
<div class="col100">
<div class="row">
<div class="col60 cs100">
<div id='september'class="xs-contenu">
<h1>Experience the web</h1>
<p><strong>September 2013 Club Theme</strong></p>
</div>
</div>
<div class="col40 cs100">
<div class="xs-contenu">
<div id='dv-icon'>
<img src='img/1200/iconchat.jpg'>
<img src='img/1200/icontwitter.jpg'>
<img src='img/1200/iconbasket.jpg'>
<img src='img/1200/iconfacebook.jpg'>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 2nde ligne -->
<!-- 3ème ligne -->
<div class="row">
<div class='col20 cs50'>
<div class="row">
<div class="col100">
<div class="contenu">
<p class='square'>Design and styled with Ulkit.</p>
</div>
</div>
<div class="col100">
<div class="contenu">
<img onload='newsize(this, 'cube')'src=""/>
</div>
</div>
</div>
</div>
sizepic appears local to resizeimg; picture_src does not set src of img element.
Try this:
Define sizepic outside of and before calling resizeimg().
Remove the onload event from body that calls resizeimg().
Pass this to newsize() (setting picture_src to this). Make sure to set the onload event to null during the function to prevent recursive calls the newsize after setting src of picture_src.
<body>
<script>
// declare variable `sizepic`
var sizepic;
function resizeimg() {
if (window.innerWidth > 1200) {
sizepic = '1200';
alert(sizepic);
} else if (window.innerWidth < 1200 && window.innerWidth > 900) {
sizepic = '990';
} else if (window.innerWidth < 990 && window.innerWidth > 768) {
sizepic = '768';
} else if (window.innerWidth < 768 && window.innerWidth > 590) {
sizepic = '590';
} else if (window.innerWidth < 590) {
sizepic = 'petit';
}
console.log("resizeimg called")
};
// call `resizeimg` here
resizeimg();
function newsize(picture_src) {
picture_src.src ="http://lorempixel.com/" + sizepic + "/" + sizepic;
console.log("newsize called", picture_src, event);
// remove `onload` event from `picture_src`
picture_src.onload = null;
}
</script>
<img onload="newsize(this)" src="http://lorempixel.com/1/1/" />
</body>
This is my code, everything is working good only when i try to output an array, i get the whole array again and again with the new value each time. But i actually want is to output the whole array as a block below eachother and each time i click on check i get the new value in the array and printed in the left Woorden Geprobeerd list With no duplicated value. Does someone know how i can fix this.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Lingo spel</title>
<meta name="Lingo" content="Making an lingo project for school">
<meta name="Author" content="Ronald Julian Dewindt">
<meta name="Made Date" content="18-11-2015">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<link href='https://fonts.googleapis.com/css?family=Oswald|Montserrat|Raleway|Poiret+One|Indie+Flower|Dosis' rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="border col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row">
<!--<div class="col-xs-12">
<img src="lingo_logo.jpg">
</div>-->
<div class="col-xs-12">
<label>Typ een eu land hier in:</label>
<input class="form-control input" type="text" id="woord">
<button class="btn btn-primary" type="button" onclick="lingo()">Check</button>
<p style="padding-left:10px; display:inline-block;"><b>punten:</b></p><p style="display:inline-block;" id="punten">0</p>
<p style="padding-left:20px; display:inline-block;"><b>Kansen:</b></p><p style="display:inline-block;" id="kans">30</p>
</div>
<div class="col-xs-5">
<h4>Woorden Geprobeerd</h4>
<p class="try" id="try"></p>
</div>
<div class=" col-xs-3">
<h4>Correcte woord</h4>
<p class="word" id="hiddenWord"></p>
</div>
<script type="text/javascript">
var euLanden = new Array('Nederland','Belgie','Bulgarije','Cyprus','Denemarken','Duitsland','Estland','Finland','Frankrijk','Griekeland','Ierland','Italie','Luxemburg','Malta','Oostenrijk','Polen','Spanje','Zweden','Hongarije','Kroatie','Letland','Litouwen','Portugal','Roemenie','Slovenie','Tsjechie');
var random = euLanden[Math.floor(Math.random() * euLanden.length)];
var woordenTry= new Array();
var tryOutput = "";
var punten= 0;
var kans= 30; document.getElementById("hiddenWord").innerHTML="?".repeat(random.length);
function lingo(countryName, textInput)
{
textInput = document.getElementById("woord").value;
textInput = textInput.toLowerCase();
countryName = random.toLowerCase();
var output = "";
for(var i=0; i< countryName.length; i++)
{
if(textInput.indexOf(countryName[i])!== -1)
{
output += countryName[i];
}
else
{
output += "?";
}
}
woordenTry.push(output);
for(w=0; w<woordenTry.length; w++)
{
document.getElementById("hiddenWord").innerHTML=output;
tryOutput+= woordenTry[w] + "<br>";
document.getElementById("try").innerHTML=tryOutput;
}
if(textInput != countryName)
{
kans--;
}
if(kans == 0)
{
alert("U heeft verloren, Probeer opnieuw");
location.reload();
}
if(textInput === countryName)
{
random = euLanden[Math.floor(Math.random() * euLanden.length)];
random.length
alert("Je hebt het woord gevonden");
punten++;
alert("Zoek het nieuw woord op!");
document.getElementById("hiddenWord").innerHTML="?".repeat(countryName.length);
}
document.getElementById("punten").innerHTML=punten;
document.getElementById("kans").innerHTML=kans;
}
</script>
</div>
</div>
</div>
</body>
</html>
Lately I've been having terrible trouble trying to get audio to play on my android device via my phonegap build. I've seen many others have had several issues (mainly pertaining to the correct file path) but none of the solutions I've come across have led to a result. Here is my script for loading and playing the audio:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Audio</title>
</head>
<body>
<div class="container-fluid">
<div class="col-xs-12 col-md-12">
<div class="s-it">Tap Here</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4"></div>
<div class="col-xs-4 col-md-4">
<div class="container">
<span style="display:none;" id="vX"></span>
<span style="display:none;" id="vY"></span>
<span style="display:none;" id="vZ"></span>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div id="sbell">
<img src="img/bell.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="s-text">Test</div>
</div>
<div class="col-md-12 col-xs-12">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><br><br></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><br><br></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="well">
<span class="sts">
<img src="img/shake-banner.png">
</span>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
var myMedia1 = null;
var myMedia2 = null;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady () {
var src1 = '';
var src2 = '';
if (device.platform == 'Android') {
src1 = '/android_asset/www/audiomp3/audio1.mp3';
src2 = '/android_asset/www/audiomp3/audio2.mp3';
}
myMedia1 = new Media(src1, onSuccess, onError);
myMedia2 = new Media(sec2, onSuccess, onError);
myMedia1.addEventListener('ended', function () {
setTimeout(function () {
$('#sbell').removeClass('animate-bell');
}, 2000);
setTimeout(function () {
$('.s-text').fadeOut(200);
}, 500);
}, false);
}
function onSuccess () {
alert("Audio Loaded");
}
function onError (e) {
alert(e.message);
}
window.ondevicemotion = function (event) {
var accX = event.accelerationIncludingGravity.x;
var accY = event.accelerationIncludingGravity.y;
var accZ = event.accelerationIncludingGravity.z;
if (accX >= 8 || accX <= -8) {
myMedia2.play();
}
document.getElementById('vX').innerHTML = accX;
document.getElementById('vY').innerHTML = accY;
document.getElementById('vZ').innerHTML = accZ;
};
$(document).ready(function () {
$('#sbell').click(function(event){
$(this).addClass('animate-bell');
$('.s-text').css('color', 'red').fadeIn(300);
myMedia1.play();
});
});
</script>
</body>
#ZyOn (deleted previous comment)
You can use my Media Demo example to find your issue.
Phonegap Demo Apps (core)
The source is on github. It contains sound samples too. I have additional notes, if you need them.
Also, your app.initialize() should be called AFTER the deviceready event.
Problem
I have a small navigation containing seven pets names, a scroll listener is checking to see how far a person scrolls down the page. It then and adds a class of active to <p class="nameNav> when the person scrolls to that pet and points to expanded adoption information.
However, this active class is only being added to the first seven items in the navigation, not all forty and I'm wondering if it's because of problems with the scroll listener or how var index= has been declared.
JSFiddle: http://jsfiddle.net/jja9vecc/
scripts.js
$(function(){
// Deals with loading the pets
var public_spreadsheet_url = "https://docs.google.com/spreadsheets/d/1TOIGfwdi1GhV7BMhc5fH481icHi7zEEyXZZx3Y5J61I/pubhtml";
$(document).ready( function() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
parseNumbers: true } );
});
function showInfo(data, tabletop) {
var source = $("#pets").html();
var template = Handlebars.compile(source);
// The actual name of the sheet, not entire .csv
$.each(tabletop.sheets("Pets").all(), function(i, fact) {
var html = template(fact);
// You need an element with this id or class in your HTML
$("#pets-list").append(html);
$('.container').eq(i).addClass(data.Pets.elements[i]);
// console.log(data.Pets.elements[i].name);
// Deals with the left menu
$(".nameNav").click(function(){
$(".nameNav").removeClass("active");
$(this).toggleClass("active");
});
$(window).scroll(function(){
var $pets = $('.pet').map(function(_, i){
return $(i).offset().top;
});
var scroll = $(window).scrollTop();
var index = $pets.filter(function(i, v){ if(v < scroll) return i; }).length;
$(".nameNav").removeClass("active");
$(".nameNav").eq(index).addClass("active");
// console.log(index);
if (index >= 7 && index <= 13) {
$(".first").html(data.Pets.elements[7].name);
$(".second").html(data.Pets.elements[8].name);
$(".third").html(data.Pets.elements[9].name);
$(".fourth").html(data.Pets.elements[10].name);
$(".fifth").html(data.Pets.elements[11].name);
$(".sixth").html(data.Pets.elements[12].name);
$(".seventh").html(data.Pets.elements[13].name);
} else if (index >= 14 && index <= 20) {
$(".first").html(data.Pets.elements[14].name);
$(".second").html(data.Pets.elements[15].name);
$(".third").html(data.Pets.elements[16].name);
$(".fourth").html(data.Pets.elements[17].name);
$(".fifth").html(data.Pets.elements[18].name);
$(".sixth").html(data.Pets.elements[19].name);
$(".seventh").html(data.Pets.elements[20].name);
} else if (index >= 21 && index <= 27) {
$(".first").html(data.Pets.elements[21].name);
$(".second").html(data.Pets.elements[22].name);
$(".third").html(data.Pets.elements[23].name);
$(".fourth").html(data.Pets.elements[24].name);
$(".fifth").html(data.Pets.elements[25].name);
$(".sixth").html(data.Pets.elements[26].name);
$(".seventh").html(data.Pets.elements[27].name);
} else if (index >= 28 && index <= 34) {
$(".first").html(data.Pets.elements[28].name);
$(".second").html(data.Pets.elements[29].name);
$(".third").html(data.Pets.elements[30].name);
$(".fourth").html(data.Pets.elements[31].name);
$(".fifth").html(data.Pets.elements[32].name);
$(".sixth").html(data.Pets.elements[33].name);
$(".seventh").html(data.Pets.elements[34].name);
} else if (index >= 35 && index <= 38) {
$(".first").html(data.Pets.elements[35].name);
$(".second").html(data.Pets.elements[36].name);
$(".third").html(data.Pets.elements[37].name);
$(".fourth").html(data.Pets.elements[38].name);
} else {
$(".first").html(data.Pets.elements[0].name);
$(".second").html(data.Pets.elements[1].name);
$(".third").html(data.Pets.elements[2].name);
$(".fourth").html(data.Pets.elements[3].name);
$(".fifth").html(data.Pets.elements[4].name);
$(".sixth").html(data.Pets.elements[5].name);
$(".seventh").html(data.Pets.elements[6].name);
}
if (index >= 35 && index <= 38) {
$(".fifth").addClass("hide");
$(".sixth").addClass("hide");
$(".seventh").addClass("hide");
} else {
$(".fifth").removeClass("hide");
$(".sixth").removeClass("hide");
$(".seventh").removeClass("hide");
}
});
});
};
});
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Name of Website</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<!-- <link rel="icon" type="image/png" href="assets/img/favicon.ico"> -->
</head>
<body>
<nav class="vertical">
<div class="rectangle">
<p class="nameNav first active">Adonis</p>
<p class="nameNav second">Billy</p>
<p class="nameNav third">Comet</p>
<p class="nameNav fourth">Dexter</p>
<p class="nameNav fifth">Evan</p>
<p class="nameNav sixth">Fritz</p>
<p class="nameNav seventh">Grommit</p>
</div><!-- /.rectangle -->
</nav>
<main>
<div id="pets-list"></div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<!-- This is where the template for facts goes -->
<script id="pets" type="text/x-handlebars-template">
<div class="container">
<div class="pet">
<p class="nameTitle" id="{{name}}">{{name}}</p>
<img src="{{image}}" alt="">
<p class="breed">{{breed}}</p>
<p class="description">{{description}}</p>
<p class="cost">{{cost}}</p>
<hr>
</div><!-- /.pet -->
</div><!-- /.container -->
</script>
</body>
</html>