Databases
StackOverflow2013
Postsdbo
POJavaScript function won't load html pages
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript function won't load html pages
    primarykey
    data
    text
    <p>I have been struggling with this for two days. This JavaScript should load my home.html page upon load and then my other pages when the links are clicked. Even the home page won't load. It doesn't make any sense to me why nothing is loading. Can anyone see where my mistake is?</p> <p>JAVASCRIPT:</p> <pre><code> $(document).ready(function(){ setOrientationListener(); changePage('home.html?v=1'); $('nav a').on('click', function(){ $('nav a').removeClass('selected'); $(this).addClass('selected'); }) }); function changePage(fileName){ $('.content_container').animate({opacity:0}, 500, function(){ $('.content_loading_container').load('assets/content/'+fileName, function(){ $('.content_container').delay(250).animate({opacity:1}, 500); }); }); } </code></pre> <p>CSS: </p> <pre><code>/* Global Styles */ body { margin: 0px; padding: 0px; font-family: Helvetica; font-size: 16px; background- color: #ddd;} /* Global Layout */ header { display: block; position: absolute; top: 0px; left: 0px; height: 55px; background: url(../images/template/background_banner.jpg?v=1) no-repeat 0px 0px; -webkit-box- shadow: 0px 5px 4px rgba(122,122,122,0.8); box-shadow: 0px 5px 4px rgba(122,122,122,0.8); } article { display: block; position: absolute; top: 55px; left: 0px; background: url(../images/template/background_content.jpg?v=1) repeat-x 0px 0px; } article .content_container { position: absolute; bottom: 30px; left: 0px; background: none; } article .content_container .content_loading_container { position: absolute; bottom: 30px; padding: 40px 20px 0px 40px; } footer { display: block; position: absolute; bottom: 0px; left: 0px; height: 30px; background-color: #ffb91d; } nav { position: absolute; top: 70px; left: 25px; } .banner_logo { position: absolute; top:0px; left:0px; } .engine_image, .commercial_image, .military_image, .uav_image { -webkit-transition: -webkit-transform 1s ease-in-out; } .engine_image { position: absolute; -webkit-transform: translate3d(1400px,200px,0px); } .commercial_image { position: absolute; -webkit-transform: translate3d(-500px,1400px,0px); } .military_image { position: absolute; -webkit-transform: translate3d(-700px,200px,0px); } .uav_image { position: absolute; -webkit-transform: translate3d(-10px,-800px,0px); } .icon { -webkit-border-radius:15px; -webkit-box-shadow:0 5px 10px 0 #aaaaaa; } nav a { padding: 5px 5px 15px 5px; background-color:#ffffff; background-position: 0px 0px; background-repeat; } nav a.selected { background-color: #ffb91d; repeat-y 0px 0px; } /* Page-specific Style and Layout */ .page.home article .content_container { background: url(../images/template/background_content_home.jpg?v=1) no-repeat 0px 0px; } /* Orientation-specific Layout - Landscape */ .page.landscape { position: relative; width: 1024px; height: 748px; overflow: hidden; } .page.landscape header { width: 1024px; } .page.landscape article { width: 1024px; height: 663px; } .page.landscape footer { width: 1024px; } .page.landscape article .content_container { width: 1024px; height: 663px; } .page.landscape.home .engine_image { position: absolute; -webkit-transform: translate3d(800px,150px,0px); } .page.landscape.home .commercial_image { position: absolute; -webkit-transform: translate3d(600px,500px,0px); } .page.landscape.home .military_image { position: absolute; -webkit-transform: translate3d(700px,375px,0px); } .page.landscape.home .uav_image { position: absolute; -webkit-transform: translate3d(700px,210px,0px); } /* Orientation-specific Layout - Portrait */ .page.portrait { position: relative; width: 768px; height: 1004px; overflow: hidden; } .page.portrait header { width: 768px; } .page.portrait article { width: 768px; height: 919px; } .page.portrait footer { width: 768px; } .page.portrait article .content_container { width: 768px; height: 919px; } .page.portrait.home .engine_image { position: absolute; -webkit-transform: translate3d(550px,380px,0px); } .page.portrait.home .commercial_image { position: absolute; -webkit-transform: translate3d(350px,730px,0px); } .page.portrait.home .military_image { position: absolute; -webkit-transform: translate3d(430px,550px,0px); } .page.portrait.home .uav_image { position: absolute; -webkit-transform: translate3d(450px,150px,0px); } </code></pre> <p>HTML:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt; &lt;link type="text/css" rel="apple-touch-icon-precomposed" href="assets/images/template/icon.png?v=1" /&gt; &lt;link type="text/css" rel="apple-touch-startup-image" href="assets/images/template/startup_landscape.jpg?v=1" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" /&gt; &lt;link type="text/css" rel="apple-touch-startup-image" href="assets/images/template/startup_portrait.jpg?v=1" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" /&gt; &lt;link rel="stylesheet" type="text/css" href="assets/includes/bom.css?v=1" /&gt; &lt;script type="text/javascript" src="assets/includes/jquery-1.7.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="assets/includes/Iscroll4/iscroll.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="assets/includes/bom.js?v=1"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="page home"&gt; &lt;footer&gt;&lt;/footer&gt; &lt;article&gt; &lt;div class="content_container"&gt; &lt;div class"content_loading_container"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/article&gt; &lt;header&gt;&lt;/header&gt; &lt;img class="banner_logo" src="assets/images/template/logo.png?v=1" /&gt; &lt;img class="engine_image" src="assets/images/template/engine.png?v=1" width="200" height="153" /&gt; &lt;img class="commercial_image" src="assets/images/template/A380.png?v=1" width="400" height="194" /&gt; &lt;img class="military_image" src="assets/images/template/f-35.png?v=1" width="300" height="157" /&gt; &lt;img class="uav_image" src="assets/images/template/uav.png?v=1" width="300" height="196" /&gt; &lt;nav&gt; &lt;a data-file="engines.html?v=1"&gt;&lt;img class="icon" src="assets/images/template/icon_engine.png?v=1" width="68" height="57" /&gt;&lt;/a&gt; &lt;a data-file="general.bus.html?v=1"&gt;&lt;img class="icon" src="assets/images/template/icon_gen.bus.png?v=1" width="68" height="57" /&gt;&lt;/a&gt; &lt;a data-file="helicopters.html?v=1"&gt;&lt;img class="icon" src="assets/images/template/icon_helicopter.png?v=1" width="68" height="57" /&gt;&lt;/a&gt; &lt;a data-file="commercial.html?v=1"&gt;&lt;img class="icon" src="assets/images/template/icon_commercial.png?v=1" width="68" height="57" /&gt;&lt;/a&gt; &lt;a data-file="military.html?v=1"&gt;&lt;img class="icon" src="assets/images/template/icon_military.png?v=1" width="68" height="57" /&gt;&lt;/a&gt; &lt;a data-file="military.ground.html?v=1"&gt;&lt;img class="icon" src="assets/images/template/icon_military-ground.png?v=1" width="68" height="57" /&gt;&lt;/a&gt; &lt;a data-file="missiles.html?v=1"&gt;&lt;img class="icon" src="assets/images/template/icon_missile.png?v=1" width="68" height="57" /&gt;&lt;/a&gt; &lt;a data-file="regional.html?v=1"&gt;&lt;img class="icon" src="assets/images/template/icon_regional.png?v=1" width="68" height="57"/&gt;&lt;/a&gt; &lt;a data-file="uav.html?v=1"&gt;&lt;img class="icon" src="assets/images/template/icon_uav.png?v=1" width="68" height="57" /&gt;&lt;/a&gt; &lt;/nav&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USLisa G.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJavaScript function won't load html pages
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POJavaScript function won't load html pages
      1. This table or related slice is empty.
      1. VTClose
    3. VO
      singulars
      1. POJavaScript function won't load html pages
      1. This table or related slice is empty.
      1. VTUpMod
    1. COwhy this anonymous down vote?
      singulars
      1. POJavaScript function won't load html pages
      1. USParv Sharma
    2. COI didn't down vote but my guess is that the question is a wall of code with little mention of what debugging steps the asker has taken. Generally it is expected that the asker tries to narrow down the code a little more and ask a more specific question. That said the asker won't benefit from a downvote with no explanation.
      singulars
      1. POJavaScript function won't load html pages
      1. USJias
    3. COWhat is a down vote? Thank you for not doing it though because it sounds negative. I will give more debugging details next time.
      singulars
      1. POJavaScript function won't load html pages
      1. USLisa G.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload