SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    100
    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
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 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 Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    100
    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
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 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 Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    100
    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
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 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?

  7. #7
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I noticed this also using firebug testing locally on FF tried IE as well same error.

    Certain its the tabs as when I took the
    Code:
    <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>
    out of the tab container it works fine....

  8. #8
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    OK, I'm getting the same problem when I use FF... if I load the page and then switch to the Interactive Charts tab, I get a loading spinner forever. However, if I reload the page then it starts working.

    It's probably something to do with the way that the content of inactive tabs is hidden that prevents the chart from loading properly. I do have a workaround, although it's a bit hacky I'm afraid:
    Code:
    <script type="text/javascript">
      // Add the five lines below
      $(window).bind( 'hashchange', function(e) { 
        if (location.hash === "#simple2") {
          window.tableau.vizs[0].refresh();
        }
      });
      $(document).ready(function() {
        $("#buttonForModal").click(function() {
          $("#MapModal").reveal();
        });
      });
      </script>

  9. #9
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems a problem with tabs in general - Google maps also causes these issues - http://stackoverflow.com/questions/1...-in-jquery-tab

    I'll try the hack above and again always appreciate your advice - i've 6 beers to buy you at this stage!!!

    (Even works in IE8 - bonus!!!!)

  10. #10
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    No worries - I'll look forward to a Guinness if I find myself in your neck of the woods


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
  •