SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    js file not loading in foundation tab

    I'm using the foundation 3 framework and tabs - http://foundation.zurb.com/old-docs/f3/tabs.php

    Within one tab I want this to open up yet the JS file is not loading. Can I add a snippet of code to solve this?

    Code:
    <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/viz_v1.js"></script>
                      <div class="tableauPlaceholder" style="width:900px; height:700px;">
                          <noscript><a href="#"><img alt="" src="http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;ni&#47;ni_age_population&#47;Treemapshowing60ofresidentpopulation-Census2011&#47;1_rss.png" style="border: none" /></a>
                          </noscript><object class="tableauViz" width="900" height="700" style="display:none;"><param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F" /><param name="site_root" value="" /><param name="name" value="ni_age_population&#47;Treemapshowing60ofresidentpopulation-Census2011" /><param name="tabs" value="yes" /><param name="toolbar" value="yes" /><param name="static_image" value="http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;ni&#47;ni_age_population&#47;Treemapshowing60ofresidentpopulation-Census2011&#47;1.png" /><param name="animate_transition" value="yes" /><param name="display_static_image" value="yes" /><param name="display_spinner" value="yes" /><param name="display_overlay" value="yes" /><param name="display_count" value="no" /></object></div><div style="width:900px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;"><div style="float:right; padding-right:8px;"><a href="http://www.tableausoftware.com/public/about-tableau-products?ref=http://public.tableausoftware.com/views/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011" target="_blank">Learn About Tableau</a></div></div>

  2. #2
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,255
    Mentioned
    32 Post(s)
    Tagged
    4 Thread(s)
    Try doing a search and replace on your code, replacing all the &#47; with / - I managed to get it running after I'd done that.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No its still hanging onload - really weird because outside of the tabs it works fine. I need to f5 it to load in the tabs?

  4. #4
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,255
    Mentioned
    32 Post(s)
    Tagged
    4 Thread(s)
    Is the whole page online somewhere, or could you put it up somewhere? As the snippet you posted seems to be working, it's difficult to know what might be causing the problem without seeing it in context.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apologies yes I think its conflicting with another script.

    Code:
    <!DOCTYPE html>
    
    <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
    <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
      <meta charset="utf-8" />
    
      <!-- Set the viewport width to device width for mobile -->
      <meta name="viewport" content="width=device-width" />
    
      <title>title</title>
      
      <!-- Included CSS Files (Uncompressed) -->
      <!--
      <link rel="stylesheet" href="stylesheets/foundation.css">
      -->
      
      <!-- Included CSS Files (Compressed) -->
      <link rel="stylesheet" href="stylesheets/foundation.min.css">
      <link rel="stylesheet" href="stylesheets/app.css">
      <script src="javascripts/modernizr.foundation.js"></script>
    </head>
    <body>
      
      <!-- Header and Nav -->
      
      <div class="row">
        <div class="six columns">
          <h1>Ward <span class="light">Maps</span></h1>
        </div>
        <div class="six columns">
          <ul class="nav-bar right">
            <li><a href="index.php">Index</a></li>
             <li class="has-flyout active"><a href="#">Maps</a>
                 <a href="#" class="flyout-toggle"><span> </span></a>
                 <ul class="flyout">
                     <li><a href="lgd-map.php">LGD Map</a></li>
                     <li class="active"><a href="ward-map.php">Ward Map</a></li>
                </ul>
             </li>
            <li><a href="help.php">Help</a></li>
            <li><a href="logout.php">Log Out</a></li>
          </ul>
        </div>
        <hr><br><br>
      </div>
      
      <!-- End Header and Nav -->
      
      
      <!-- First Band (Image) -->
        
      <div class="row">
        <div class="twelve columns">
        <p>Click on each tab to view data</p><br>
        </div>
      </div>
    
      <div class="row">
        <div class="twelve colums">
            <dl class="tabs">
              <dd class="active"><a href="#simple1">Interactive Map</a></dd>
              <dd><a href="#simple2">Interactive Charts</a></dd>
              <dd><a href="#simple3">More Information</a></dd>
            </dl>
            <ul class="tabs-content">
              <li class="active" id="simple1Tab">
                  <div class="ten columns">
                      <p>Map showing </p>
                  </div>
                  <div class="two columns" style="margin-bottom: 20px;">
                      <a href="#" class="secondary button" data-reveal-id="MapModal">Fill Sreen</a>
                  </div>
                  <div class="twelve columns">
                    <iframe id="map-ward" src="maps/ward/atlas.html" style="width:100%; height:900px" frameborder="0"></iframe>
                  <hr />
                 </div>
              </li>
              <li id="simple2Tab">
                  <div class="ten columns">
                        <p><strong>Click F5 to refresh if charts do not load!</strong></p>
                      <div class="twelve columns">
                      <div class="tableauPlaceholder" style="width:900px; height:700px;">
                          <noscript><a href="#"><img alt="" src="http://public.tableausoftware.com/static/images/ni/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011/1_rss.png" style="border: none" /></a>
                          </noscript><object class="tableauViz" width="900" height="700" style="display:none;"><param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F" /><param name="site_root" value="" /><param name="name" value="ni_age_population/Treemapshowing60ofresidentpopulation-Census2011" /><param name="tabs" value="yes" /><param name="toolbar" value="yes" /><param name="static_image" value="http://public.tableausoftware.com/static/images/ni/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011/1.png" /><param name="animate_transition" value="yes" /><param name="display_static_image" value="yes" /><param name="display_spinner" value="yes" /><param name="display_overlay" value="yes" /><param name="display_count" value="no" /></object></div><div style="width:900px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;"><div style="float:right; padding-right:8px;"><a href="http://www.tableausoftware.com/public/about-tableau-products?ref=http://public.tableausoftware.com/views/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011" target="_blank">Learn About Tableau</a></div></div>
                  </div>
                    </div>
              </li>
              <li id="simple3Tab">
                <div class="eight columns">
                  <h4>Whats on this map?</h4>
                  <p>The map shows the location of all icons.</p>
                  <p>The map also shows.</p>
                </div>
                <div class="four columns">
                  <img src="images/lgd_boundary.png" alt="lgd_boundary" title="Local Government Districts" />
                </div>
              </li>
            </ul>
        </div>
      </div>
    
      <!-- Third Band (Image Right with Text) -->
      
      <div class="row">
        
      </div>
      
      
      <!-- Footer -->
      
      <footer class="row">
        <div class="twelve columns">
          <hr />
          <div class="row">
            <div class="nine columns">
              <p>&copy; Copyright 2013</p>
            </div>
            <div class="three columns" style="margin-bottom: 20px;">
                <a href="index.html"><img src="images/hsc.jpg" alt="hsc logo"/></a>
            </div>
          </div>
        </div> 
      </footer>
    
      <!--modal for map fill-->
    
        <div id="MapModal" class="reveal-modal expand">
            <iframe id="map-ward" src="maps/ward/atlas.html" frameborder="0" width="100%" height="800px"></iframe>
          <a class="close-reveal-modal">&#215;</a>
        </div>
    
    
      <!-- Included JS Files (Uncompressed) -->
      <!--
      
      <script src="javascripts/jquery.js"></script>
      
      <script src="javascripts/jquery.foundation.mediaQueryToggle.js"></script>
      
      <script src="javascripts/jquery.foundation.forms.js"></script>
      
      <script src="javascripts/jquery.event.move.js"></script>
      
      <script src="javascripts/jquery.event.swipe.js"></script>
      
      <script src="javascripts/jquery.foundation.reveal.js"></script>
      
      <script src="javascripts/jquery.foundation.orbit.js"></script>
      
      <script src="javascripts/jquery.foundation.navigation.js"></script>
      
      <script src="javascripts/jquery.foundation.buttons.js"></script>
      
      <script src="javascripts/jquery.foundation.tabs.js"></script>
      
      <script src="javascripts/jquery.foundation.tooltips.js"></script>
      
      <script src="javascripts/jquery.foundation.accordion.js"></script>
      
      <script src="javascripts/jquery.placeholder.js"></script>
      
      <script src="javascripts/jquery.foundation.alerts.js"></script>
      
      <script src="javascripts/jquery.foundation.topbar.js"></script>
      
      <script src="javascripts/jquery.foundation.joyride.js"></script>
      
      <script src="javascripts/jquery.foundation.clearing.js"></script>
      
      <script src="javascripts/jquery.foundation.magellan.js"></script>
      
      -->
      
    
        <script type="text/javascript">
          $(document).ready(function() {
            $("#buttonForModal").click(function() {
              $("#MapModal").reveal();
            });
          });
        </script>
    
    
      <!-- Included JS Files (Compressed) -->
      <script src="javascripts/jquery.js"></script>
      <script src="javascripts/foundation.min.js"></script>
      
      <!-- Initialize JS Plugins -->
      <script src="javascripts/app.js"></script>
      <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/viz_v1.js"></script>
    </body>
    </html>

  6. #6
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,255
    Mentioned
    32 Post(s)
    Tagged
    4 Thread(s)
    Hmm, that's odd.. it's working for me loading the page off my local server.. although I did get a JS error complaining about $ being undefined - looks like you've got code trying to call jquery before it's been loaded. Try moving this block:
    HTML Code:
    <script type="text/javascript">
          $(document).ready(function() {
            $("#buttonForModal").click(function() {
              $("#MapModal").reveal();
            });
          });
        </script>
    just before </body> tag.
    What browser are you using, and are you getting any other console errors?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •