no64
Posts: 60
Joined: Mon Apr 09, 2007 8:05 am

borderless html highslide CSS problem

I'm back again to this "Flash-Movie-Thing".
I'm trying to embed the Nonverblaster Player into Highslide - not via swf, like I did here:
http://pac7.de/appleMoviesClone

but via the "html" function.
It works fine so far, as you can see here:
http://pac7.de/highslideTests/NonverBlaster.html

My problem is, I wanted to have all the Highslides "borderless".
I changed the CSS to hide "header" and "footer" for the html frame and also all margins and paddings.
Everything is ok if open a text, but if embedding the swf I got a "padding" of 17px on the right side.
In Safari it is there all the time and in Firefox it appears on first time loaded or on reload of the site, but if closing the Highslide and open it again it is gone.

I can't see what causes this extra "padding".

Thank's for any help,
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: borderless html highslide CSS problem

Hi,
This seems to be caused by the embedded video, because it happens only when embedding a flash in the highslide-html-content div.
The only solution I have is to use width: 495 instead of width: 512.

Another thing is that you shouldnÔÇÖt embed flash inside a highslide-main-content div because it will most likely fail in older IE versions (from IE7 and below).
The best is to use objectType: 'swf', and if you can't use that method you should embed the video in its own page and open that page using objectType: 'iframe'.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
no64
Posts: 60
Joined: Mon Apr 09, 2007 8:05 am

Re: borderless html highslide CSS problem

... yes, that "hack" with the width seems to be the only thing.

I don't want to use object type "iframe", cause then I have to make a new page for every video I use.
Ajax also don't work.

Is there a way to use the object type "swf" in a better way as I did?
I need it more like the way I did for the "highslide-html-content" div, so I can use all parameters and flashvars for the player in a more "clearly arranged" way and not in a single line.


var flashvars = {};
flashvars.mediaURL = "mymovie.mov";
flashvars.teaserURL = "teaser.jpg";
flashvars.allowSmoothing = "true";
flashvars.autoPlay = "false";
flashvars.buffer = "6";
flashvars.showTimecode = "true";
flashvars.loop = "false";
flashvars.controlColor = "0xCCCCCC";
flashvars.controlBackColor = "0x000000";
flashvars.scaleIfFullScreen = "true";
flashvars.showScalingButton = "true";
flashvars.defaultVolume = "100";
flashvars.crop = "true";
// this variable controls what should happen if the playing video is clicked:
// - "http://www.somedomain.com/": The specified domain is opened in the same window
// - "togglePlay": The Video plays / pauses
// - "" or "disabled": nothing happens
flashvars.onClick = "togglePlay";

var params = {};
params.menu = "false";
params.allowFullScreen = "true";
params.allowScriptAccess = "always"

var attributes = {};
attributes.id = "movie1";
attributes.name = "movie1";
attributes.bgcolor = "#000000"
function embedSWF(){
swfobject.embedSWF("NonverBlaster.swf", "movie1", "512", "288", "9", "expressinstall.swf", flashvars, params, attributes);
}
embedSWF();
no64
Posts: 60
Joined: Mon Apr 09, 2007 8:05 am

Re: borderless html highslide CSS problem

just tried it with iFrame, but if setting the size of the iFrame the same size as the movie I get scrollbars.
Also if the page with the embed video have margin and padding set to "0".
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: borderless html highslide CSS problem

Yes, an iframe will get scrollbars when giving it the same size as the content. I tried adding height: 100%; overflow: hidden; to .highslide-container div, but then the movie disappeared. The only good alternative is using the swf method since this method is designed to open flash movies.
Instead of doing all the markup in your HTML code, you can use a configuration object like this:

Code: Select all

var flashUniqueName = {
	objectType: 'swf',
	swfOptions: {
		version: '9',
		flashvars: { file: '&mediaURL=trailer/upstairs_short.mov&teaserURL=trailer/upstairs_long.jpg&allowSmoothing=true&buffer=6&showTimecode=true&loop=false&controlColor=0xcccccc&controlBackColor=0x000000&scaleFullscreen=true&showScalingButton=true&defaultVolume=100' 
		},
		params: { 
			menu: 'false', 
			allowscriptaccess: 'always', 
			allowfullscreen: 'true', 
			wmode: 'transparent'
		}
	},
	width: 512, 
	objectWidth: 512, 
	objectHeight: 288, 
	dimmingOpacity: 0.55, 
	fadeInOut: true,
	preserveContent: false, 
	allowSizeReduction: false,
	wrapperClassName: 'borderless-html', 
	maincontentText: 'You need to upgrade your Flash player'			
};
Put it in a new js file and include the file below the included highslide-full.js file.
Do the HTML markup like this:

Code: Select all

<a href="NonverBlaster.swf" onClick="return hs.htmlExpand(this, flashUniqueName)" >Click to open video</a>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
no64
Posts: 60
Joined: Mon Apr 09, 2007 8:05 am

Re: borderless html highslide CSS problem

ok, I tried this too, like you recommend.

Still have one pixel border at the bottom and the hover of the Player is not working right... only if hovering in the upper left corner the controls of the player appears.

This happen if using the Transition "fade" instead of "expand"
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: borderless html highslide CSS problem

1px border
See AdminÔÇÖs answer in this post: http://www.highslide.com/forum/viewtopi ... ash#p16580

Hover not working right
The hover seems to work in Firefox 3.6.3 on the Mac ÔÇô see video: http://screencast.com/t/NTVkMWEzO
What OS and browser are you using?
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
no64
Posts: 60
Joined: Mon Apr 09, 2007 8:05 am

Re: borderless html highslide CSS problem

1px border - I know this is the background color, I can change it or make it transparent, but the border will still be there.
Is there another solution?
If you look at the code via Firebug, the "highslide-html" and the "highslide-wrapper-1" have that additional 1px in the height.
The object is 288px and those are 289px.

I use also Safari on Mac.
The hover works in Firefox, but not in Safari.
It seems this is a bug when using the "transition - fade", cause the problem is the same when using "inline html".
no64
Posts: 60
Joined: Mon Apr 09, 2007 8:05 am

Re: borderless html highslide CSS problem

Is there any solution for this problem with the 1px "border" and the "hover" ?
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: borderless html highslide CSS problem

Sorry, Torstein (the author of Highslide) havenÔÇÖt had time to look at the transition: ['fade']/hover issue in Safari and the 1px gap yet.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
no64
Posts: 60
Joined: Mon Apr 09, 2007 8:05 am

Re: borderless html highslide CSS problem

I just tested to set the height also for the highslide same as the Object height and that kills the 1px gap:

width: 512,
height: 288,
objectWidth: 512,
objectHeight: 288,

It wouldn't be a big issue to do that anyway.
For the hover-thing I have no idea what causes that, but meanwhile I use "expand" instead of "fade" as transition.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: borderless html highslide CSS problem

Hi,
The best solution for the 1px gap is using both height and objectHeight.

IÔÇÖve talked to Torstein, and he canÔÇÖt find any solution for the hover issue in Safari. BTW - heÔÇÖs on Mac/Tiger and canÔÇÖt see any problem. IÔÇÖm on Mac/Snow Leopard and can see the same issue as you, so this seems to depend on the OS.
The best solution we can offer for this issue is using expand instead of fade ÔÇô as you already are using.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
no64
Posts: 60
Joined: Mon Apr 09, 2007 8:05 am

Re: borderless html highslide CSS problem

yes, ... nevermind - it works somehow. Maybe there will be a solution in the future.
no64
Posts: 60
Joined: Mon Apr 09, 2007 8:05 am

Re: borderless html highslide CSS problem

hmmm,.... I have a new problem with this... seems something is different now in Safari 5.0 on Mac.

if embedding the movie flashplayer with the swf object type the movie does not get visible the first time clicking on the link - only audio is there - closing it and open it again shows the video.

http://pac7.de/highslideTests/NonverBlaster.html
(last link on the site)

I tried with clearing the cache to reproduce the problem.

*
In Firefox there is no problem with this.
Just tested Google Chrome and there it also works like expected
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: borderless html highslide CSS problem

Same result as I have had the last few days.
Are you on Mac OS 10.6.4 and Safari 5.0 (6533.16)? I tested another Mac yesterday with the same setup without any problems. Do you have Adblock for Safari installed (http://safariadblock.com/)? This plugin is causing problems for Highslide. I installed it a couple weeks ago for testing and was wondering if I didnÔÇÖt get rid of it... But if you donÔÇÖt have this plugin installed, we have trouble with Highslide in Safari 5.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no

Return to “Highslide JS Usage”