15 replies to this topic

[jared hoffa]

Been hacking away a this for awhile.

I setup tubepress to display in SOLO mode inside a div. When first visiting the page, the thumbnails show up vertically all messed up but once I click a link and go back to that page, they show up fine. I'm noticing this on Safari. Here's the link: http://vgtvnow.com/_.../runningonjava/ (click videos tab).

Any help would be appreciated!

Thanks,
JPH

[eric]

Hi,

Sorry that you're having some trouble getting your thumbnails to layout correctly. We should be able to get it fixed up. Do you experience the problem if you revert back to the "default" TubePress theme? If so, please revert back to the "default" theme now and I'll be glad to take a look for you. Everything else looks good to me, so hopefully it will be a simple CSS fix.

Thanks and Happy New Year!

[jared hoffa]

Thanks for quick response! Yes, this is happening with the default theme as well. It's also happening with Firefox as well. Could it be the fact that it's inside a div?

[jared hoffa]

It appears it is definitely the DIVs of my other work, specifically the class="st_subcontent". Once I removed that, it worked but I need that class as is since it does a drop-down of the content. Anyway to work around that?

Thanks!

[eric]

I think it has something to do with the fact that it's loaded from an iframe, yeah. Notice that if you visit the actual source of the iframe then everything looks pretty much normal.

First thing we need to figure out is what's constraining the width of the gallery to 100px. Here's a screenshot of what I'm talking about: http://i.imgur.com/uGd8o.png. It seems like there's some JavaScript somewhere that's explicitly setting the width of this div to 100px, which is in turn squishing your gallery to that narrow column. Do you have any idea what might be doing that?

Also, in videos.php I would change

<?php print TubePressPro::getHtmlForHead(true); ?>

to

<?php print TubePressPro::getHtmlForHead(false); ?>

since you're already including jQuery elsewhere. This will speed up your load time and could cause lots of other weirdness with TubePress.

[jared hoffa]

I have discovered the div that's messing it up.

when I took the iframe out of that div it worked fine. Also, I tried removing the iframe and just using the php to invoke tubepress. While it showed up correctly, I couldn't click any video links, and once I clicked "prev" or "1" and "2" it reloaded the whole page. Bottom line: it's that DIV.

Thanks! Sorry I'm being a pain!

• Back to top

[eric]

You're not being a pain at all! Glad to hear that you've narrowed it down to that div.

Also, I tried removing the iframe and just using the php to invoke tubepress. While it showed up correctly, I couldn't click any video links, and once I clicked "prev" or "1" and "2" it reloaded the whole page.

My gut is telling me that this option will be the easiest to get working. Would you mind setting it up like this again so I can take a first-hand look?

[jared hoffa]

All setup without the iframe:

http://vgtvnow.com/_.../runningonjava/

[eric]

Excellent. Next step would be to reduce it to a single jQuery load - right now you're loading it twice and I believe this is what's causing the unclickable thumbs. You'll need to edit videos.php and change it from

<?php print TubePressPro::getHtmlForHead(true); ?>

to

<?php print TubePressPro::getHtmlForHead(false); ?>

Please give that a go and let me know how it works. Thanks!

[jared hoffa]

Ok did that. Seems to be same result...can't click links.

**update** Since I removed the iframe, videos.php isn't part of my page anymore. That was holding all the code for the tubepress. Now tubepress is invoked inside that div.

[eric]

Hmm it seems that TubePress is still loading it's own copy of jQuery. Right now your site is loading jQuery from both

• http://www.vgtvnow.com/_4/players/runningonjava/tubepresspro/sys/ui/static/js/jquery-1.6.1.min.js
• http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js

I assume that you're calling getHtmlForHead() from index.php instead? Please triple-check that you are calling it with "false" as the argument. e.g.

<?php print TubePressPro::getHtmlForHead(false); ?>

[jared hoffa]

Ok turned it to false on the index.php page. Same result.

[eric]

Great, that looks much better. We're getting there piece by piece. Next thing we need to fix is the fatal JS error that we get on page load. Screenshot: http://i.imgur.com/xUWIu.png. (We can safely ignore the errors from twitter's JS).

To fix this, you'll need to move the getHtmlForHead() call to somewhere below the jQuery include from googleapis.com. i.e. right now in your HTML head we have

...
<script type="text/javascript">function getTubePressBaseUrl(){return "http://www.vgtvnow.com/_4/players/runningonjava/tubepresspro/";}</script>
<script type="text/javascript" src="http://www.vgtvnow.com/_4/players/runningonjava/tubepresspro//sys/ui/static/js/tubepress.js"></script>
<link rel="stylesheet" href="http://www.vgtvnow.com/_4/players/runningonjava/tubepresspro//sys/ui/themes/default/style.css" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
...

but we want to make it look like

...
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<script type="text/javascript">function getTubePressBaseUrl(){return "http://www.vgtvnow.com/_4/players/runningonjava/tubepresspro/";}</script>
<script type="text/javascript" src="http://www.vgtvnow.com/_4/players/runningonjava/tubepresspro//sys/ui/static/js/tubepress.js"></script>
<link rel="stylesheet" href="http://www.vgtvnow.com/_4/players/runningonjava/tubepresspro//sys/ui/themes/default/style.css" type="text/css" />
...

[jared hoffa]

Awesome! Ok so that made the links clickable. Now it looks similar to how it did as an iframe...thumbnails are getting pushed vertically.

Thanks!!

[eric]

Well that's weird. It's getting constrained to 100px again. I'm not familiar enough with your setup to figure out exactly what's sizing it like that - do you have any idea? Last time you fixed it, I think you simply loaded videos.php directly instead of an iframe, right?

[jared hoffa]

Yeah I'm puzzled. Actually videos.php IS the iframe. What I did was move the iframe out of that div and it worked. Obviously by moving it out of that div the content didn't load correctly (wasn't hiden until clicked). Also, on each click, the entire page reloads itself which then shows the change in navigation. If it seems like my combination of code isn't working for it, I'll just have to ditch the fancy div drop and maybe make a link open a fancy box or something.