I'm trying to make a feed from a json link into separate divs in an html document, but nothing I try works. I've got a json link from three newspapers and I've tried different things with the different sources, but nothing I do works.
Hope someone can help me.
Here's everything from the four files I'm using. I have not included the css file.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="sunnmoer.js"></script>
<script src="adressa.js"></script>
<script src="romsdal.js"></script>
<title>Kultur</title>
</head>
<body>
<div id="header">
<h1>Kultur</h1>
</div>
<div id="container">
<div id="div-side">
</div>
<div id="div-mid">
<div id="div-romsdal"></div>
<div id="div-adressa"></div>
<div id="div-sunnmoer"></div>
</div>
<div id="div-side">
</div>
</div>
<script type="text/javascript">
sunnmoerFunction();
</script>
<script type="text/javascript">
adressaFunction();
</script>
<script type="text/javascript">
romsdalFunction();
</script>
</body>
</html>
adressa.js (wrote some of the data from the json in the document and tried to get it to the html document as divs)
const items = [
{
id: 17501980,
url: "https://www.adressa.no/nyheter/innenriks/2018/09/12/L%C3%B8nnsutbetaling-til- offentlige-ansatte-forsinket-av-IT-tr%C3%B8bbel-17501980.ece",
title: "Lønnsutbetaling til offentlige ansatte forsinket av IT- trøbbel",
content_text: "En feil hos bankenes IT-leverandør gjorde at lønnen til offentlig ansatte her i landet ikke kom inn på konto før sent onsdag ettermiddag.",
date_published: "2018-09-12T22:47:24",
date_modified: "2018-09-12T22:47:24",
_polaris_extra: {
breakingtitle: "",
kicker: "",
title_prefix: "",
paywall: "false",
section: "innenriks",
pub_name: "adressa",
pub_id: 167
}
},
{
id: 17498454,
url: "https://www.adressa.no/nyheter/innenriks/2018/09/12/L%C3%B8nnsutbetaling-til- offentlige-ansatte-forsinket-av-IT-tr%C3%B8bbel-17498454.ece",
title: "Lønnsutbetaling til offentlige ansatte forsinket av IT- trøbbel",
content_text: "En feil hos bankenes IT-leverandør gjorde at lønnen til offentlig ansatte her i landet ikke kom inn på konto før sent onsdag ettermiddag.",
date_published: "2018-09-12T22:13:21",
date_modified: "2018-09-12T22:13:21",
_polaris_extra: {
breakingtitle: "",
kicker: "",
title_prefix: "",
paywall: "false",
section: "innenriks",
pub_name: "adressa",
pub_id: 167
}
}
];
function itemBoxDiv(items) {
return `
<a href="$(items.url)">
<div class=itemBox>
<h1>${items.title}</h1>
</div>
</a>
`
};
function adressaFunction() {
document.getElementById("div-adressa").innerHTML = `
<h1>Adresseavisen</h1>
${.map(function(itemBoxDiv).join('')}
`
romsdal.js (Tried two different things here, but I think I might have messed things up a bit)
function setup() {
loadJSON("https://www.rbnett.no/?service=jsonfeed", toArray, 'jsonp');
}
function toArray() {
var romsdalItems = [];
for (var key in json) {
if (json.hasOwnProperty(key)) {
var item = json[key];
romsdalItems.push({
url: item.url,
title: item.title,
content_text: item.content_text
});
}
}
};
function itemBoxDiv(items) {
return `
<a href="$(items.url)">
<div class=itemBox>
<h1>${items.title}</h1>
</div>
</a>
`
};
function romsdalFunction(){
document.getElementById("div-romsdal").innerHTML = `
<h1>Romsdals Budstikke</h1>
${romsdalItems.map(function(itemBoxDiv).join('')}
`
}
sunnmoer.js (here I tried to make it as simple as I could by writing my own data, but can't get that to work either, so I ended up just trying to get something into the html file, but that doesn't work either)
const petsData = [
{
name: "Tim",
dyr: "Katt",
alder: "2 år"
},
{
name: "Ponnikloppen",
dyr: "Hest",
alder: "6 år"
},
{
name: "Ola",
dyr: "Hund",
alder: "3 år"
}
];
function sunnmoerFunction() {
document.getElementById("div-sunnmoer").innerHTML = <h1>Hello</h1>
}
edit: Copied one file twice. Fixed it
Try this and let me know if you have any errors
<script type="text/javascript" src="adressa.js"></script>
<script type="text/javascript" >
let div-romsdal = document.getElementById("div-romsdal");
function load() {
var mydata = JSON.parse(items);
alert(mydata.length);
var div = document.getElementById('data');
for(var i = 0;i < mydata.length; i++)
{
div-romsdal.innerHTML = div-romsdal.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].id +"</p>" + "<br>";
}
}
</script>
Or you could also use Promises
Related
I am creating a simple rest api in javascript, I want upon initialization, the widget must display a list of all characters.
here is folder structure :
├───book
└───book.js
├───store
│ └───store.js
here is my store.js
window.Store = {
create: function() {
var self = {};
var props = {
name: 'string',
species: 'string',
picture: 'string',
description: 'string'
};
var listProps = ['name', 'species'];
var detailProps = ['name', 'species', 'picture', 'description'];
var characters = [
{
id: makeID(),
name: 'Ndiefi',
species: 'Wookie',
picture: 'store/img/ndiefi.png',
description: 'A legendary Wookiee warrior and Han Solo’s co-pilot aboard the Millennium Falcon, Chewbacca was part of a core group of Rebels who restored freedom to the galaxy. Known for his short temper and accuracy with a bowcaster, Chewie also has a big heart -- and is unwavering in his loyalty to his friends. He has stuck with Han through years of turmoil that have changed both the galaxy and their lives.',
_delay: 500
},
];
}
}
here is index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Character Book</title>
<!-- 3rd party vendor libraries -->
<link rel="stylesheet" href="vendor/font-awesome-4.6.3/css/font-awesome.min.css">
<script src="vendor/jquery-3.1.0.min.js"></script>
<script src="vendor/underscore-1.8.3.min.js"></script>
<!-- 1st party internal libraries -->
<script src="store/store.js"></script>
<script src="tests/start-test.js"></script>
<script src="tests/test-book.js"></script>
<!-- The source of the 'Book' widget -->
<link href="book/book.css" rel="stylesheet">
<script src="book/book.js"></script>
<script>
$(function() {
var frame = $('#test-frame');
var run = $('#test-run');
var results = $('#test-results');
var store = Store.create();
run.click(function() {
run.prop('disabled', true).text('Running Tests');
results.removeClass('test-pass test-fail').text('');
testBook(frame).then(
function success() {
run.prop('disabled', false).text('Run Tests');
results.addClass('test-pass').text('All tests passed');
},
function failure(err) {
run.prop('disabled', false).text('Run Tests');
results.addClass('test-fail').text('Test failed, see console');
}
);
});
Book.init(frame, store);
});
</script>
</head>
<body>
<button id="test-run">Run Tests</button>
<span id="test-results"></span>
<div id="test-frame">
</div>
</body>
</html>
here is what I have tried :
books.js
var data = JSON.parse(characters);
data.forEach(characters => {
console.log(characters.name)
});
so when I run the app in my browser I see the following error :
Uncaught ReferenceError: characters is not defined
what is wrong with my code ? any suggestion or help will be helpfull thanks
I am trying to fetch data into Tableau using Web Data Connector. The API I am pulling the data from has Basic Auth.
The code runs perfectly fine in WDC Simulator but fails when I run from Tableau Desktop. It throws this error -
"missing password"
But I have integrated the password. (It works fine in simulator as well). Any help is appreciated
HTML Code
<html>
<head>
<title>API Fetch</title>
<meta http-equiv="Cache-Control" content="no-store" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-2.0.latest.js" type="text/javascript"></script>
<script src="my_js_above.js" type="text/javascript"></script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4">
<button type = "button" id = "submitButton" class = "btn btn-success" style = "margin: 10px;">Get Storage Data!</button>
</div>
</div>
</div>
</body>
</html>
JS code
(function() {
// Create the connector object
var myConnector = tableau.makeConnector();
//Setting up the Basic Authorization Header
$.ajaxSetup({
headers: {'Authorization': "Basic " + btoa("my_username" + ":" + "my_password")}
})
myConnector.init = function(initCallback) {
tableau.authType = tableau.authTypeEnum.basic;
initCallback();
};
// Define the schema
myConnector.getSchema = function(schemaCallback) {
var cols = [{
id: "Name",
alias: "Name",
dataType: tableau.dataTypeEnum.string
}, {
id: "Size",
alias: "Size",
dataType: tableau.dataTypeEnum.string
}, {
id: "timeStamp",
alias: "Timestamp",
dataType: tableau.dataTypeEnum.datetime
}];
var tableSchema = {
id: "Storage",
alias: "Fetches data storage",
columns: cols
};
schemaCallback([tableSchema]);
};
// Download the data
myConnector.getData = function(table, doneCallback) {
$.getJSON("https://my_API_URL", function(resp) {
var feat = resp.content,
tableData = [];
// Iterate over the JSON object
for (var i = 0, len = feat.length; i < len; i++) {
tableData.push({
"Name": feat[i].Name,
"Size": feat[i].Size,
"timeStamp": feat[i].timeStamp
});
}
table.appendRows(tableData);
doneCallback();
});
};
tableau.registerConnector(myConnector);
// Create event listeners for when the user submits the form
$(document).ready(function() {
$("#submitButton").click(function() {
tableau.connectionName = "Storage"; // This will be the data source name in Tableau
tableau.submit(); // This sends the connector object to Tableau
});
});
})();
This js-fiddle example is working as it should:
https://jsfiddle.net/qf089a0a/51/
But when I try to load this example on my own, the dropdown menu doesn't show anything -- even though it does in the js-fiddle example (try entering "wireless" in the input box.)
This is my html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="app">
<input v-model="offer.tags"></input>
<select>
<option v-for="(key, value) in offer.units" v-bind:value="offer.units">
{{ key }}
</option>
</select>
</div>
</body>
<script src="./js/app.js"></script>
</html>
And here is the js:
var protocol = {
"wireless": {
"units": {
"bandwidth": "bit/s, Mb/s, Gb/s",
"distance": "kilometers, miles"
},
"children": [],
}
};
var vm = new Vue({
el: '#app',
data: {
offer: {
tags: '',
units: {}
},
protocol: protocol
},
watch: {
'offer.tags': {
handler: function() {
var tagList = this.offer.tags.split(',');
console.log(tagList);
for (var i = 0; i < tagList.length; i++) {
console.log(tagList[i]);
try {
var unitsObj = this.protocol[tagList[i]]["units"];
var unitKeys = Object.keys(unitsObj);
for (var i = 0; i < unitKeys.length; i++) {
if (!unitsObj[unitKeys[i]]) {
console.log("updating units");
// update dict only if it doesn't already contain key
this.offer.units[unitKeys[i]] = unitsObj[unitKeys[i]];
}
this.offer.units[unitKeys[i]] = unitsObj[unitKeys[i]];
}
console.log(this.offer.units);
} catch (e) {
return true
}
}
}
}
}
});
Any ideas as to what could be the problem?
Here's what the console prints out in the offline version - it's the same as the online version:
Array [ "wireless" ]
app.js:27:9
wireless
app.js:30:11
Object { bandwidth: "bit/s, Mb/s, Gb/s", distance: "kilometers, miles", 1 more… }
So, apparently the dictionary is being updated as I expect.
The Problem is the Version of Vue JS you are using. the one you mentioned here is different and the one you are using in jsfiddle is different.
Please remove the one u mentioned here and add the following.
<script type="text/javascript" src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
It will work fine.
So here's a great example from https://developer.forecast.io/docs/v2
What I want to do and trying is this:
I have a simply webpage whereby I want to display the current forecast and extended forecast.
Here's my Index.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html lang="en" class="no-js" ng-app="myApp">
<head>
<title>Weather Forecaster</title>
<meta charset="UTF-8">
<!-- favicon -->
<link rel="shortcut icon" href="images/Oxygen-Icons.org-Oxygen-Status-weather-clear.ico" />
<!-- END favicon -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.jdigiclock.css" rel="stylesheet" type="text/css" />
<link href="css/wx-custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
</head>
<body ng-controller="wxController as ctrlWx">
<div class="container">
<div class="row">
<div class="col-10">
<div id="my-div" ng-model="myiFrame">
<iframe src="http://www.latlong.net/convert-address-to-lat-long.html" id="my-iframe" scrolling="no"></iframe>
</div>
<div id="plugin_container" class="forecast-panel">
<h1>Here's Today's Weather</h1>
<div class="fc forecast-panel1">
<p class="dayTitle">Day 1</p>
</div>
<div class="spacer"></div>
<div class="fc forecast-panel2">
<p class="dayTitle">Day 2</p>
</div>
<div class="spacer"></div>
<div class="fc forecast-panel3">
<p class="dayTitle">Day 3</p>
</div>
<div class="spacer"></div>
<div class="fc forecast-panel4">
<p class="dayTitle">Day 4</p>
</div>
<div class="spacer"></div>
<div class="fc forecast-panel5">
<p class="dayTitle">Day 5</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/angular/angular.min.js" type="text/javascript"></script>
<script src="js/angular/app.js" type="text/javascript"></script>
<script src="js/angular/controller.js" type="text/javascript"></script>
<script src="js/angular/services.js" type="text/javascript"></script>
<script src="js/angular/ang-custom.js" type="text/javascript"></script>
</body>
</html>
Notice the "IFRAME".... the src is this: http://www.latlong.net/convert-address-to-lat-long.html
Now, if you go there, which is pretty cool, you can put ANY address to get the LAT LON for that address:
Here's a screen shot with an example LAT LON from DC... the Whitehouse.
OK, now, my code uses Angular with a simple controller and service...
Here:
APP:
/* global angular */
// Code goes here
var myApp;
myApp = angular.module("myApp", []);
myApp.config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
});
console.log("Host name is: " + document.location.hostname);
//if (document.location.hostname === "localhost") {
// myApp.constant('URL', '/WeatherForecaster/js/json/');
//} else if (document.location.hostname === "omnimanger.co/wx" || "www.omnimanager.co/wx") {
// myApp.constant('URL', '/js/json/');
//} else {
// myApp.constant('URL', '/wx/js/json/');
//}
myApp.constant("URL", {
//Default LAT/LON for CONCRETE
apiKey: "3bb0f0fe93c92922f0b42f9eabda48d0/",
lat: "48.530031",
lon: ",-121.879460",
country: "us",
uri: "https://api.forecast.io/forecast/"
}).config(function($httpProvider){
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});;
myApp.constant("wx", {
data: {
latitude: 0,
longitude: 0,
currently: {},
minutely: {
summary: "",
icon: "",
data: []
},
hourly: {
summary: "",
icon: "",
data: []
},
daily: {
summary: "",
icon: "",
data: []
},
flags: {
sources: [],
"lamp-stations": [],
"isd-stations": [],
"madis-stations": [],
units: ""
}
}
});
CONTROLLER:
'use strict';
myApp.controller('wxController', function (wxDataService) {
var ctrlWx = this;
//Listen for the Submit (FIND) button on the iFrame
ctrlWx.content = {};
console.log("LAT/LON: ", ctrlWx.latlon);
ctrlWx.fetchWx = function () {
//General Data
wxDataService.getWxData().then(function (result) {
ctrlWx.content = result;
console.log("All Data: ", result);
});
};
ctrlWx.fetchWx();
});
SERVICE:
myApp.factory('wxDataService', function ($http, URL) {
console.log("URL", URL);
//DEFAULT Headers for KEY and AUTH TOKEN
var headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': ['GET', 'POST'],
'Access-Control-Allow-Headers': 'Content-Type',
'Content-Type': 'application/json'
};
var myURL = {
data: {
header: headers,
uri: URL.uri + URL.apiKey + URL.lat + URL.lon
}
};
var getWxData = function () {
return $http.get(myURL)
.success(function (data) {
console.log("SUCCESS!");
console.log("The Weather Data is here: " + data);
return data;
})
.error(function (e) {
console.log("He\'s dead Jim!<br>", e);
return e;
});
};
return {
getWxData: getWxData
};
});
SOLUTION I'm Trying to Achieve:
When the user enters the address and clicks the "FIND" button, which generates the LAT LON, I want to capture that LAT LON inside the IFRAME.
This is what I'm trying to do, but I know I need to make a directive that BINDS the "CLICK" or "SUBMIT" event to the FIND button. What I have below is NOT that; yet.
var latlon = {};
$(function () {
$('#my-iframe').load(function () {
$(this).contents().find("#latlongform, #gadres").live('blur', function (e) {
latlon = {
mylat: $("input[name='lat']").val(),
mylon: $("input[name='lon']").val()
};
if (e) {
console.log("Err: ", e);
return e;
}
});
});
});
GIVENS:
The FORM and the LAT LON are as follows:
<div class="row">
<div class="col-8 graybox">
<form id="latlongform">
<label for="gadres">Address</label>
<input id="gadres" type="text" class="width70" placeholder="Type address here to get lat long" required="">
<button title="Find lat long coordinates" class="button">Find</button><br>
<small>Write city name with country code for better results.</small>
</form>
<div class="row">
<div class="col-6 m2">
<label for="lat">Latitude</label>
<input type="text" name="lat" id="lat" placeholder="lat coordinate">
</div>
<div class="col-6 m2">
<label for="lng">Longitude</label>
<input type="text" name="lng" id="lng" placeholder="long coordinate">
</div>
</div>
</div>
</div>
QUESTION:
How can I get the LAT LON, "AFTER" the user clicks FIND, THEN fire my angular service to inject the CALL to the URL which gets the WEATHER DATA...as described. Here's that WEATHER DATA JSON OBJECT. It uses an API KEY which mine is limited to 1000 uses per day.
If you'd like to see what the result is on the weather API, you need to get a FREE API_KEY.... it gives 1000 hits per day...
Thanks everyone and I hope you can all this this is a VALID question.
Accessing the Forecast.io API with JSONP
The forecast.io website doesn't support CORS (Cross Origin Resource Sharing) for GET operations but it does support JSONP.
Revised Code
var url = myURL.data.uri;
var jsonpURL = url+"?callback=JSON_CALLBACK";
var getWxData = function () {
return $http.jsonp(jsonpURL)
.then(function (response) {
console.log("SUCCESS!");
console.log(response.data);
//return to chain data
return response.data;
})
.catch(function (e) {
console.log("He\'s dead Jim!");
console.log(e);
//throw to chain rejection
throw e;
});
};
Sample Result
LAT: 48.530031
LOG: -121.87946
TIMEZONE: America/Los_Angeles
SUMMARY: Partly Cloudy
TEMP: 56.02
The DEMO on JSFiddle.
Notice that I changed the .success and .error methods to .then and .catch respectively. Those old methods are deprecated and ignore return values.
I'm working on a simple web app and I receive the above error. Would you guys please lend me a hand?
app.js:
var movieApp = movieApp || {};
(function () {
movieApp.controller = {
init:function() {
movieApp.router.init();
movieApp.section.init();
}
};
movieApp.router = {
init:function() {
routie({
'/about': function() {
movieApp.section.toggle('section[data-route="about"]');
},
'/movies': function() {
movieApp.section.toggle('section[data-route="movies"]');
},
' ': function() {
movieApp.section.toggle('section[data-route="about"]');
},
});
}
};
movieApp.content = {
about: {
title: "About this app",
description: "...",
},
movies: [
{
title: "Shawshank Redemption",
releaseDate: "14 October 1994",
description: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
cover: "../WebApp/static/images/shawshank-redemption.jpg"
},
{
title: "The Godfather",
releaseDate:"24 March 1972",
description:"The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",
cover: "../WebApp/static/images/the-godfather.jpg"
},
{
title: "Pulp Fiction",
releaseDate: "14 October 1994",
description: "The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.",
cover: "../WebApp/static/images/pulp-fiction.jpg"
},
{
title: "The Dark Knight",
releaseDate: "18 July 2008",
description: "When Batman, Gordon and Harvey Dent launch an assault on the mob, they let the clown out of the box, the Joker, bent on turning Gotham on itself and bringing any heroes down to his level.",
cover: "../WebApp/static/images/the-dark-knight.jpg"
}
]
};
movieApp.section = {
init:function() {
this.about();
this.movies();
},
about:function() {
var aboutSection = {
'title': movieApp.content.about.title,
'description': movieApp.content.about.description
};
Transparency.render(document.querySelector('section[data-route="about"]'),aboutSection);
},
movies:function() {
var moviesSection = {
'header': "Favorite Movies",
'movies': movieApp.content.movies
}
// dit zorgt ervoor dat de src van img tag veranderd naar wat er staat in this.cover
var directives = {
movies: {
cover: {
src: function(params){
return this.cover
}
}
}
}
Transparency.render(document.querySelector('section[data-route="movies"]'),moviesSection, directives);
},
toggle:function(section) {
section = typeof section !== 'undefined' ? section : 'section[data-route="about"]';
document.querySelector(section).classList.toggle('active');
}
};
movieApp.controller.init();
})();
The html file looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Movies Web App</title>
<link rel="stylesheet" href="static/stylesheets/main.css">
</head>
<body>
<header>
<nav>
<ul>
<li>About</li>
<li>Movies</li>
</ul>
</nav>
</header>
<main id="content">
<section data-route="about">
<header>
<h1 data-bind="title"></h1>
<p data-bind="description"></p>
</header>
</section>
<section data-route="movies">
<h1 data-bind="header"></h1>
<div data-bind="movies">
<article data-bind="movie">
<header>
<h1 data-bind="title"></h1>
<em><time data-bind="releaseDate"></time></em>
</header>
<figure>
<img data-bind="cover" src="" alt="">
</figure>
<p data-bind="description"></p>
</article>
</div>
</section>
</main>
<script src="static/js/lib/routie.js"></script>
<script src="static/js/lib/transparency.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>
When I run the index page, I get the following error: Uncaught TypeError: Cannot read property 'classList' of null.
Thanks for the help.
In this section this is equivalent to movieApp.section.
movieApp.section = {
init:function() {
this.about();
this.movies();
this.toggle();
},
};
So this.toggle() is calling movieApp.section.toggle() and is then not passing a parameter to that function.
If you wanted to set a default active class on the 'about' section you would need to do this to your function:
toggle:function(section) {
section = typeof section !== 'undefined' ? section : 'section[data-route="about"]';
document.querySelector(section).classList.toggle('active');
}
UPDATE
As per the comments you can just remove the toggle line from here:
movieApp.section = {
init:function() {
this.about();
this.movies();
},
};