7 replies to this topic

[Destroyer X]

Hi everyone!

 

First, I would like to say that I love TubePress for its ability to be able to create a separate page with a YouTube playlist, and that's the primary reason why I've downloaded it.  Eventually, I'll customize the CSS to get the text displayed how I want it, but I'll do that closer to when my Website is ready to become live.

 

However, my current situation is related to the thumbnails and hypertext the plugin generates after putting in the appropriate shortcode information.  While the primary video plays just fine, when I click one of the thumbnails or hypertext to switch to the next video, the main video player would fade, but the video will not switch to whatever video I've clicked.

 

At the moment, I'm using my computer as my development server with XAMPP being the tool that I use to work on my Website locally, so unfortunately, I don't have a URL for anyone to visit to look through my code.  Nonetheless, I have attached any relevant files to this post so that a solution may be found.

 

Thank you very much for your time and cooperation.

 

 

 

[Destroyer X]

Here is all the code from all the files I have so far to create my WordPress theme:

 

 

category.php

<?php get_header( ); ?>
  <section id="topAds">
    <!-- <a href="#" title="Website Advertisement"><img src="images/sampleTopAd.png" alt="Advertisement" class="topAdvertisement"></a> -->
  </section>
  <section id="content">

  <!-- The if statement for WordPress would start here -->
  <?php if ( have_posts( ) ) : ?>

    <!-- The while loop for WordPress would start here -->
    <?php while ( have_posts( ) ) : the_post( ); ?>
    <div class="postContainer">
      <div id="postID-<?php the_ID( ); ?>">
        <article>
          <header class="postHeader">
            <div class="postTitle">
              <h2><a href="<?php the_permalink( ); ?>" title="<?php the_title_attribute( ); ?>"><?php the_title( ); ?></a></h2>
            </div>
            <div class="postAuthor">
              <?php the_author( ); ?>
            </div>
            <div class="postDate">
              <?php the_time( 'F j, Y' ); ?> &raquo; <?php the_time( 'g:i A' ); ?>
            </div>
          </header>
          <div class="postContent">
            <?php the_excerpt( ); ?>
          </div>
          <footer class="postFooter">
            Categories:  <?php the_category( ' &gt; ' ); ?>
          </footer>
        </article>
      </div>
    </div>
    <?php endwhile; ?>
    <!-- The while loop for WordPress would end here -->

    <!-- This is the start of the blog navigation -->
    <?php wp_pagenavi( ); ?>
    <!-- This is the end of the blog navigation -->

  <?php endif; ?>
  <!-- The if statement for WordPress would end here -->

  </section>

<?php get_sidebar( ); ?>

<?php get_footer( ); ?>
</body>
</html>

footer.php

  <nav id="bottomNavigation">
    <ul id="bottomNav">
      <?php wp_nav_menu( array( 'theme_location' => 'bottom-menu' ) ); ?>
      <!-- <li><a href="#" title="Home">Home</a> |</li> -->
      <!-- <li><a href="#" title="Blog">Blog</a> |</li> -->
      <!-- <li><a href="#" title="Artwork">Artwork</a> |</li> -->
      <!-- <li><a href="#" title="Photo Gallery">Photo Gallery</a> |</li> -->
      <!-- <li><a href="#" title="Videos">Videos</a> |</li> -->
      <!-- <li><a href="#" title="R&eacute;sum&eacute;">R&eacute;sum&eacute;</a> |</li> -->
      <!-- <li><a href="#" title="About the Site">About the Site</a> |</li> -->
      <!-- <li><a href="#" title="Contact Me">Contact</a></li> -->
    </ul>
  </nav>
  <footer id="footer">
    &copy; <?php echo date( "Y" ); ?> <a href="http://www.destroyerx.com/" title="Destroyer X Productions">Destroyer X Productions</a>.  All Rights Reserved.
  </footer>

</div>
<!-- This is where the wrapper of the Website ends -->

<!-- JavaScript at the bottom for fast page loading -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   window.jQuery || document.write( '<script src="js/libs/jquery-1.9.1.min.js"><\/script>' )
</script>

<!-- scripts concatenated and minified via build script -->
<script src="<?php bloginfo( 'url' ); ?>/wp/wp-content/themes/christophereastman/js/plugins.js"></script>
<script src="<?php bloginfo( 'url' ); ?>/wp/wp-content/themes/christophereastman/js/script.js"></script>
<!-- end scripts -->

<!--
   Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.

   mathiasbynens.be/notes/async-analytics-snippet
-->
<script>
   var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
   (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
   g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
   s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<?php wp_footer( ); ?>

functions.php

<?php

function register_my_menus( ) {
   register_nav_menus(
      array(
         'top-menu' => __( 'Top Navigation Menu' ),
         'bottom-menu' => __( 'Bottom Navigation Menu' )
      )
   );
}
add_action( 'init', 'register_my_menus' );


/* IDs for sidebars must be in lowercase */
if ( function_exists( 'register_sidebar' ) )
   register_sidebar( 
      array(
         'name' => __( 'Main Sidebar' ),
         'id' => 'main-sidebar',
         'description' => __( 'This is the widget area for the main sidebar', 'christophereastman' ),
         'before_widget' => '<aside id="%1$s" class="%2$s">',
         'after_widget' => '</aside>',
         'before_title' => '<h3 class="widgettitle">',
         'after_title' => '</h3>',
      )
   );

?>

header.php

<!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" <?php language_attributes( ); ?>><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" <?php language_attributes( ); ?>><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" <?php language_attributes( ); ?>><![endif]-->

<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--><html class="no-js" <?php language_attributes( ); ?>><!--<![endif]-->

<head>
<title><?php bloginfo( 'name' ); ?><?php wp_title( '|', true, '' ); ?></title>

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">

<!--
   Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons
-->

<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

<!--
   All JavaScript at the bottom, except this Modernizr build.
   Modernizr enables HTML5 elements & feature detects for optimal performance.

   Create your own custom Modernizr build: www.modernizr.com/download/
-->
<script src="<?php bloginfo( 'url' ); ?>/wp/wp-content/themes/christophereastman/js/libs/modernizr-2.6.2.min.js"></script>


<?php wp_head( ); ?>
</head>
<body>

<!-- This is where the wrapper of the Website begins -->
<div id="wrapper">

  <header id="topHeader">
    <a href="#" id="headerLogo" title="Christopher Eastman.com">Christopher Eastman.com</a>
  </header>
  <nav id="topNavigation">
    <ul id="topNav">
      <?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?>
      <!-- <li><a href="#" title="Blog">Blog</a></li> -->
      <!-- <li><a href="#" title="Artwork">Artwork</a></li> -->
      <!-- <li><a href="#" title="Photo Gallery">Photo Gallery</a></li> -->
      <!-- <li><a href="#" title="Videos">Videos</a></li> -->
      <!-- <li><a href="#" title="R&eacute;sum&eacute;">R&eacute;sum&eacute;</a></li> -->
      <!-- <li><a href="#" title="About the Site">About the Site</a></li> -->
      <!-- <li><a href="#" title="Contact Me">Contact</a></li> -->
    </ul>
  </nav>

index.php

<?php get_header( ); ?>
  <section id="topAds">
    <!-- <a href="#" title="Website Advertisement"><img src="images/sampleTopAd.png" alt="Advertisement" class="topAdvertisement"></a> -->
  </section>
  <section id="content">

  <!-- The if statement for WordPress would start here -->
  <?php if ( have_posts( ) ) : ?>

    <!-- The while loop for WordPress would start here -->
    <?php while ( have_posts( ) ) : the_post( ); ?>
    <div class="postContainer">
      <div id="postID-<?php the_ID( ); ?>">
        <article>
          <header class="postHeader">
            <div class="postTitle">
              <h2><a href="<?php the_permalink( ); ?>" title="<?php the_title_attribute( ); ?>"><?php the_title( ); ?></a></h2>
            </div>
            <div class="postAuthor">
              <?php the_author( ); ?>
            </div>
            <div class="postDate">
              <?php the_time( 'F j, Y' ); ?> &raquo; <?php the_time( 'g:i A' ); ?>
            </div>
          </header>
          <div class="postContent">
            <?php the_content( ); ?>
          </div>
          <footer class="postFooter">
            Categories:  <?php the_category( ' &gt; ' ); ?>
          </footer>
        </article>
      </div>
    </div>
    <?php endwhile; ?>
    <!-- The while loop for WordPress would end here -->

    <!-- This is the start of the blog navigation -->
    <?php wp_pagenavi( ); ?>
    <!-- This is the end of the blog navigation -->

  <?php endif; ?>
  <!-- The if statement for WordPress would end here -->

  </section>

<?php get_sidebar( ); ?>

<?php get_footer( ); ?>
</body>
</html>

page.php

<?php  

/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 */

?>
<?php get_header( ); ?>
  <section id="topAds">
    <!-- <a href="#" title="Website Advertisement"><img src="images/sampleTopAd.png" alt="Advertisement" class="topAdvertisement"></a> -->
  </section>
  <section id="content">

  <!-- The if statement for WordPress would start here -->
  <?php if ( have_posts( ) ) : ?>

    <!-- The while loop for WordPress would start here -->
    <?php while ( have_posts( ) ) : the_post( ); ?>
    <div id="pageContainer">
      <h2><?php wp_title( "", true ); ?></h2>
      <?php the_content( ); ?>
    </div>         
    <?php endwhile; ?>
    <!-- The while loop for WordPress would end here -->

  <?php endif; ?>
  <!-- The if statement for WordPress would end here -->

  </section>

<?php get_sidebar( ); ?>

<?php get_footer( ); ?>
</body>
</html>

sidebar.php

  <section id="rightSidebar">
    <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar( 'Main Sidebar' ) ) : ?>
    <?php endif; ?>
  </section>

single.php

<?php get_header( ); ?>
  <section id="topAds">
    <!-- <a href="#" title="Website Advertisement"><img src="images/sampleTopAd.png" alt="Advertisement" class="topAdvertisement"></a> -->
  </section>
  <section id="content">

  <!-- The if statement for WordPress would start here -->
  <?php if ( have_posts( ) ) : ?>

    <!-- The while loop for WordPress would start here -->
    <?php while ( have_posts( ) ) : the_post( ); ?>
    <div class="postContainer">
      <div id="postID-<?php the_ID( ); ?>">
        <article>
          <header class="postHeader">
            <div class="postTitle">
              <h2><a href="<?php the_permalink( ); ?>" title="<?php the_title_attribute( ); ?>"><?php the_title( ); ?></a></h2>
            </div>
            <div class="postAuthor">
              <?php the_author( ); ?>
            </div>
            <div class="postDate">
              <?php the_time( 'F j, Y' ); ?> &raquo; <?php the_time( 'g:i A' ); ?>
            </div>
          </header>
          <div class="postContent">
            <?php the_content( ); ?>
          </div>
          <footer class="postFooter">
            Categories:  <?php the_category( ' &gt; ' ); ?>
          </footer>
        </article>
      </div>
    </div>

    <!-- This is the start of the single post navigation -->
    <footer class="bottomPostNavigation">
      <div class="nextNav"><?php next_post_link( '&laquo; Previous Post: %link' ); ?></div>
      <div class="previousNav"><?php previous_post_link( 'Next Post: %link &raquo;' ); ?></div>
    </footer>
    <!-- This is the end of the single post navigation -->

    <?php endwhile; ?>
    <!-- The while loop for WordPress would end here -->

  <?php endif; ?>
  <!-- The if statement for WordPress would end here -->

  </section>

<?php get_sidebar( ); ?>

<?php get_footer( ); ?>
</body>
</html>

The current version of WordPress I'm running is WordPress 3.5.1, current version of jQuery that I've extracted from HTML5 Boilerplate v4.2.0 is jQuery 1.9.1, current version of Modernizr that I've extracted from HTML5 Boilerplate v4.2.0 is Modernizr 2.6.2, and the current version of TubePress that I'm running is TubePress Version 3.0.1.

 

Additionally, I'm running XAMPP 1.8.1., the version of jQuery that came with WordPress is v1.8.3, and my currently activated WordPress Plugins are the following:

 

• Annual Archive
• Dynamic To Top
• Link Manager
• NextGEN Gallery
• Smart YouTube PRO
• TubePress
• Twitter Widget Pro
• WP-PageNavi
• WP-Polls

 

If there's any additional information that is needed, please feel free to let me know, and once again, thank you very much for your time and cooperation.

 

 

Update 8:15 PM CDT on June 4, 2013:  I ended up updating a little bit of the code because Modernizr wasn't being called.

[brandon]

Hi Destroyer,

 

Thank you for your compliments about TubePress, we're all very happy that you love it.  We're sorry to hear that you are having some difficulties with your TubePress installation.

 

Please follow the directions here: http://tubepress.com...hoot:ClientSide

 

in order to see any errors that are being returned when you attempt to switch videos.

 

I believe that the issue is being caused by one of two things:  jQuery issue (check to ensure you don't have multiple versions of jQuery loading and running) or it could be a "cross-domain ajax issue."

 

Either way, the linked page contains step's to resolve both of these issues.

 

Let us know what you find.

 

Thanks!

[Destroyer X]

When I first pulled up the Website in Firefox with Firebug 1.11.4, I received the following error in Console:

 

Error:  Permission denied to access property 'toString'

 

 

Additionally, clicking either the hypertext or the thumbnail gives me this error in Console:

 

SyntaxError:  JSON.parse: unexplained character

 

 

After clicking JS in Net, here are all the instances of the words "jquery" I could find:

 

http://chris/wp/wp-i...ry.js?ver=1.8.3

   Status:  304 Not Modified, Domain:  chris

http://chris/wp/wp-c...n.js?ver=2.9995

   Status:  304 Not Modified, Domain:  chris

http://ajax.googleap...1/jquery.min.js

   Status:  304 Not Modified, Domain:  ajax.googleapis.com

http://chris/wp/wp-c...sing.js?ver=1.3

   Status:  304 Not Modified, Domain:  chris

 

 

Finally, here are all the instances of jquery that I found when I actually looked at the source code for http://chris/tubepress-test-playlist/

<script type='text/javascript' src='http://chris/wp/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

<script type='text/javascript' src='http://chris/wp/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   window.jQuery || document.write( '<script src="http://chris/wp/wp-content/themes/christophereastman/js/libs/jquery-1.9.1.min.js"><\/script>' )
</script>

<script type='text/javascript' src='http://chris/wp/wp-content/plugins/dynamic-to-top/js/libs/jquery.easing.js?ver=1.3'></script>

Here are the current settings for my installation of WordPress until I upload the files from the XAMPP development server to the HostGator live Web server:

 

WordPress Address (URL):  http://chris/wp

Site Address (URL):  http://chris

 

 

Finally, here are some TubePress settings that may or not be handy in solving my problem:

 

Implementation:  Provider default

"Lazy" play videos:  Checked

Enable JavaScript API:  Checked

Theme:  default

Enable API Cache:  Unchecked

Enable debugging:  Checked

 

 

It looks like jquery.easing.js?ver=1.3 is related to the Dynamic To Top WordPress Plugin since I didn't see any mention of a jQuery version number in the file.  I went ahead and commented out where my theme would attempt to grab Google CDN's jQuery, and I honestly can't tell if jquery.cycle.all.min.js?ver=2.9995 is just another instance of jQuery or not.

 

If this isn't enough for a diagnosis, then I'll upload my files to my Web server in a few days so the members of the forum can take a look at my code.

 

Once again, thank you very much for your time and cooperation.

 

 

Edited June 5, 2013 - 5:49 PM CDT:

 

I went ahead and disabled all of the plugins except TubePress, and when I accessed the page containing my test playlist, I ended up getting the "Error:  Permission denied to access property 'toString'" error message in Firebug, and when I clicked one of the thumbnails, I ended up getting the "SyntaxError:  JSON.parse:  unexplained character" error message.

[brandon]

Destroyer,

 

The syntax error: JSON.parse: unexplained character error that you are receiving, was there a + symbol next to it that you could then expand the error and get greater details? You will need to look at the details and see if the ajaxEndpoint.php file returned JSON script or HTML.  It is very possible that it returned a 404 Error and tried displaying it, which caused this issue.

 

Again, this issue seems to be caused by a cross-domain ajax error, however since your site is not online/accessible to me it makes it very difficult to troubleshoot.

 

Let us know.

 

Thanks!

[Destroyer X]

Although this probably isn't very odd, but when I uploaded my files from my development server (a.k.a. my computer using XAMPP) to my live server on HostGator, the thumbnails and hypertext started working.  I'm not sure if something wasn't configured on XAMPP that would allow the hypertext and thumbnails to work properly, but I'm not going to worry about it.  I'll just have to research how to make XAMPP work with TubePress if I want to create additional Websites.

 

Anyway, I don't know how things were solved, but I'm going to go ahead and mark this problem as being solved.

 

Thank you very much for assisting me, brandon.

[brandon]

Destroyer X,

 

Glad to hear it is all working for you when live on your site!

 

Let us know if you have any other problems.

 

Thanks!

[ARSNmedia]

My thumbnails are blank.

-> http://GeorgiaNORML.org/videos

 

Only the hyperlinked title shows up.

The video the the top is blank too,

until it is clicked and starts playing.

 

How the heck to I fix this?

 

(I do not speak 'code')

 

Thanks