I have two different presets which both work fine on their own.

I've created a view, one which uses one preset and the other uses a different preset.

One is a page, and one is a block.

However the styling is breaking when I put it inside the block. I've tried various css techniques, but to no avail.

Attached a screenshot. Using the latest version of drupal and the dev version of OSM.

CommentFileSizeAuthor
#20 qtmf.png37.6 KBtbenice
osm_bug.png620 KBccoppen
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

travist’s picture

travist CreditAttribution: travist commented

Is this on a Windows Server? I am having some major issues trying to reproduce the latest round of issues, and I need to figure out what is different with my setup.

Also, you wouldn't happen to have a live site that I could debug do you?

Please let me know.

Thanks,

Travis.

ccoppen’s picture

ccoppen CreditAttribution: ccoppen commented

It's not live yet. It's going live in 2 weeks, hopefully. I hope to have a test version of it up in about a week. I've used firebug to try to determine exactly what the styling is doing, but no such luck. If it helps, I have it placed inside a Quicktabs (module) tab.

I am about to test it outside the Quicktabs to see what it does.

As for the server, it's Linux (Ubuntu).

ccoppen’s picture

ccoppen CreditAttribution: ccoppen commented

So, I tested the block apart from the quicktabs module and it works fine.

I'm exploring what's going on with the CSS of the quicktabs module in addition to the CSS of the panel that it is in.

travist’s picture

travist CreditAttribution: travist commented
travist’s picture

travist CreditAttribution: travist commented
Title: Styling breaks inside block » Mediafront module breaks when inserted in Quicktabs.
travist’s picture

travist CreditAttribution: travist commented
Category: support » bug
ccoppen’s picture

ccoppen CreditAttribution: ccoppen commented

Okay, I can show you a "live" test page.

It's not meant to be shown to the public for another two weeks, but if we can get this debugged and fixed, then this would be great.

http://new.ciu.edu

In the lower right box where the Facebook box is, you should see a YouTube button.

Click that to see what's going on.

In FireFox, you see the messed up styling as seen in the screenshot.

In IE, you just see a spinning icon.

The following is what my media page is supposed to look like. IE still has an issue with the playlist.
http://new.ciu.edu/media

travist’s picture

travist CreditAttribution: travist commented

Is there anyway that you could enable the "Player Debugging" in the mediafront presets under "Other Options"? I will probably be able to debug this tomorrow.

Thanks,

Travis.

travist’s picture

travist CreditAttribution: travist commented
Status: Active » Postponed (maintainer needs more info)
ccoppen’s picture

ccoppen CreditAttribution: ccoppen commented

Well, debugger is turned on, but I'm not sure what supposed to be seen.

travist’s picture

travist CreditAttribution: travist commented
Status: Postponed (maintainer needs more info) » Fixed

This one was really tricky, but think I got to the bottom of it.

Basically what was going on here is that QuickTabs initializes all of the tabs to be invisible. Apparently, the Open Standard Media Player does not like to be initialized when any of his parent elements are invisible ( which sets it as invisible ). So, I fixed this by initially making the parents visible while the player is being initialized, and then reset it back when it is done. This seems to have worked.

SPECIAL NOTE ABOUT QUICKTABS: There are two ways to show content in QuickTabs: Using AJAX or not using AJAX. If you are NOT using AJAX, then you won't have to do anything after getting the latest DEV. It should just work. However, if you are using AJAX, there is a possibility that the media player will not work. This is because the JavaScript and CSS files that are required to make this player work are not dynamically loaded when the block is loaded into the tabs. Fortunately, there is a workaround for this use case... Simply manually add the jquery.media.osmplayer.js file and your template CSS file ( which you can see when you go to your preset settings ) to your page that is using the AJAX quick tabs. This should then work.

Let me know if this works for everyone.

Thanks,

Travis.

ccoppen’s picture

ccoppen CreditAttribution: ccoppen commented

Thank you, thank you, thank you. That works awesome. I'm glad I was able to submit a solvable bug. Hopefully, it will be useful for others. It looks totally awesome inside the Quicktabs box. I messed with the CSS of quicktabs until I was blue in the face. I appreciate the work on it.

Edit: It seems I spoke too soon. It works as expected in Firefox. IE8 (IE7 compatibility as well) fails. You see it loading, but then it disappears in the quicktab display.

I'm pushing my latest changes to my test site.

travist’s picture

travist CreditAttribution: travist commented
Status: Fixed » Needs work

So, are you saying that it works in IE7 and IE8, but that you just see it load and then disappear? What happens when you click on the tab after it disappears in the tab? Does the player function as expected then?

I am thinking that I can maybe throw the player outside of view while it is initializing, but would like the answer above answered before I do so.

Thanks,

Travis.

ccoppen’s picture

ccoppen CreditAttribution: ccoppen commented

It's not working in IE7/IE8 at all. When I click the tab, it's not there. I'm thinking it's disappearing inside the tab.

Duarte Cancela’s picture

Duarte Cancela CreditAttribution: Duarte Cancela commented

I have the same problem :(

ccoppen’s picture

ccoppen CreditAttribution: ccoppen commented

Here's an update on this. I just installed the latest dev version just to let you know.

What I have recently discovered is that the class names are not getting added to the block in IE. This only happens with the MediaFront being used as a block in QuickTabs. I moved it to a different position and it still happened with just the Media Player.

I removed the block from the quicktabs and it displayed fine. In other words, there is still some kind of conflict between quicktabs and Mediafront still that is keeping the class names from being added to the Mediaplayer inside the quicktabs.

ccoppen’s picture

ccoppen CreditAttribution: ccoppen commented

Some narrowing down on this issue.

There appears to be a conflict with JQuery.

I'm using the JQuery Update Dev. version updated with a patch from http://drupal.org/node/858578
The only reason it's the Dev version with the patch is because I was hoping this would solve the issue, but it didn't.

I turned off the particular tab calling the Media Player and verified that an error was not thrown. The error is not thrown in a standalone version of the player.

It is only thrown when this is added to the Quicktab.

Here's the error: Invalid argument. jquery.min.js?f, line 12 character 12949

This file is in the /sites/modules/jquery_update/replace folder.

I hope this helps. I may have the solution soon. There might be a conflict between JQuery used by Quicktab and by Mediafront.

travist’s picture

travist CreditAttribution: travist commented
Status: Needs work » Needs review

What time did you grab the latest DEV? I accidentally checked in an old version on the 14th. I would try the next DEV, which should be ready by tomorrow. Let me know if you see the same thing.

ccoppen’s picture

ccoppen CreditAttribution: ccoppen commented

Okay, grabbed the latest Dev version and still have the problem.

You can see it happening at http://new.ciu.edu. If you turn on javascript debugger in IE, you'll get the popup detailing it in Jquery.

The failure with JQuery is causing it to not add the Class names.

Modules that appear to be affected are:
Mediafront Dev
Jquery Update Dev with the patch I pointed to earlier
Quicktabs.

tbenice’s picture

tbenice CreditAttribution: tbenice commented
FileSize
qtmf.png37.6 KB

I'm having a similar problem with mediafront inserted in a quicktab or when there is a qtab on the same page. I get a strange 'sample title' instead of a playlist. This is a view block and it works fine outside of a qtab unless there is a quicktab block on the same page. So, the mediafront player looks strange regardless if there is a quicktab block present.

screenshot attached.

Any insight into why this might be happening? I'm using the latest dev of mediafront.

Thanks!!
Ted

brycesenz’s picture

brycesenz CreditAttribution: brycesenz commented

I am facing the same problem as #20.

As an aside, since folks on this queue have may have encountered a similar issue, I can't figure out how to make the media stop playing when the media tab is not active. Has anyone faced a similar problem?

devillized’s picture

devillized CreditAttribution: devillized commented
Issue summary: View changes

Probably not to do with quick tabs, But I've faced an issue with AJAX & mediafront as well. Details on this thread :https://www.drupal.org/node/2223917

I think views-ajax changes the css class names dynamically, and that messes with mediafront. not sure. am new to all this.