Sie sind nicht angemeldet.

Using CSS to control tour element: Flash vs HTML5

kyle

Schüler

  • »kyle« ist der Autor dieses Themas

Beiträge: 71

Wohnort: Grand Rapids, Michigan, USA

  • Nachricht senden

1

Samstag, 22. September 2012, 16:23

Using CSS to control tour element: Flash vs HTML5

I have found that my CSS rules for the tour element behave differently when using HTML5 vs. Flash. I would like to be able to use CSS to create alternate layouts for a page that may have different sizes for the pano.

When using embedPano with Flash, if you don't specify a height or width swfkrpano will default to 100%. However, since these values are set on the width and height attributes of the embed tag I can override theses values with CSS.

But if you are using HTML5, the default width and height are set on the style attribute, overriding my external CSS.

I'm sure I can find a way to work around this, but it does make things a little bit more difficult.

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

  • Nachricht senden

2

Sonntag, 23. September 2012, 15:13

Why do you not edit your template/html/swfkrpano.html with an external CSS and delete the style.

Hans

kyle

Schüler

  • »kyle« ist der Autor dieses Themas

Beiträge: 71

Wohnort: Grand Rapids, Michigan, USA

  • Nachricht senden

3

Sonntag, 23. September 2012, 20:57

I'm not using the template just swfkrpano.js and krpanoiphone.js. The styles are being set by JavaScript using the style attribute so my CSS can't override.

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

  • Nachricht senden

4

Sonntag, 23. September 2012, 22:11

Well you must have used something to create the html page.

If you use the droplets it has a template for the html at the place I specified.

Hans

kyle

Schüler

  • »kyle« ist der Autor dieses Themas

Beiträge: 71

Wohnort: Grand Rapids, Michigan, USA

  • Nachricht senden

5

Montag, 24. September 2012, 02:29

Sorry, I misunderstood you. I thought you were referring to the templates provided by klaus. Not sure why I read it that way.

I created my own HTML and CSS. The problem is that the width and height in my CSS are not being used because embedPano is setting the width and height on the style attribute of the tour element. According to CSS rules, the style attribute has priority over CSS declared in any other location. This means that I can't change the width and height using my external CSS.

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

6

Montag, 24. September 2012, 04:42

Try using !important

#pano {
width:500px !important;
}
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

  • Nachricht senden

7

Montag, 24. September 2012, 14:48

Sorry but you still do not understand.
The embed with the style CSS is made by the Template/html/ swfkrpano.html

In that html you find the style. You can easy transfer all the internal CSS to an external and make an id="pano" in the external CSS.

Then just delete the height and width in the swfkrpano.html so that you just have this, all the css is now in your external CSS and you can make different CSS for what you want using the functions for this either javascript or the ones based on screensize to load CSS. You can include the external CSS in your config file so that you do not need to copy it.

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="embed.css" rel="stylesheet" media="screen">
<style>
@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
</style>
</head>
<body>

<script src="[JS]"></script>

<div id="pano" >
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({swf:"[SWF]", xml:"[XML]", target:"pano", html5:"auto", passQueryParameters:true});
</script>
</div>

kyle

Schüler

  • »kyle« ist der Autor dieses Themas

Beiträge: 71

Wohnort: Grand Rapids, Michigan, USA

  • Nachricht senden

8

Montag, 24. September 2012, 15:51

Thanks sachagriffin. I completely forgot about !important.

Hans, I don't use swfkrpano.html or the droplet at all so I know the default CSS style is not coming from another style sheet but from JavaScript. I have my own system for creating tours and I only have my own CSS and HTML on my system, none of the krpano templates are on my server.

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

9

Donnerstag, 27. September 2012, 10:04

Hi,

sorry, but I'm not sure what you mean... but the size of the container element can be changed anytime, regardless if via css or js... the viewer will automatically fit it's size inside it...

best regards,
Klaus

kyle

Schüler

  • »kyle« ist der Autor dieses Themas

Beiträge: 71

Wohnort: Grand Rapids, Michigan, USA

  • Nachricht senden

10

Freitag, 28. September 2012, 04:47

Klaus,

In this embed code

Quellcode

 
1

embedpano({swf:"krpano.swf", xml:"pano.xml", target:"pano",id:"swfobject"});


The default height and width of 100% are applied to the dynamically embedded element with id swfobject. When embedding flash, the height and width are set using the height and width attribute of the embed tag. This can be overridden by an external style sheet.

However, for HTML5 player, the element with id swfobject is a div so the height and width are set using the style attribute of the div tag instead. External CSS cannot override this (except with !important, as Sachs suggested).

I have two different style sheets for my page that i am using. In one of them, I set the height and width of swfobject to 100%, but for the other, I needed to set the width and height to pixel values instead. This worked when embedding flash but not for the html5 player. I ended up working around this by wrapping it all in another div before sacha mentioned !important.

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

  • Nachricht senden

11

Freitag, 28. September 2012, 09:10

Zitat von »kyle«

However, for HTML5 player, the element with id swfobject is a div so the height and width are set using the style attribute of the div tag instead. External CSS cannot override this (except with !important, as Sachs suggested).


Sorry kyle but this is of course not true. I already told you what to do.

Just make an id in the div for example called id="pano" the same way as the default embed has but place the css for this id in the external CSS instead of inside the div tag.

This is what you are talking about.
<div id="pano" style="width:100%; height:100%;">

You just do this and in the external css you make an id=pano with the height and width.
<div id="pano">

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

12

Freitag, 28. September 2012, 13:05

Hi,

Zitat von »kyle«

The default height and width of 100% are applied to the dynamically embedded element with id swfobject. When embedding flash, the height and width are set using the height and width attribute of the embed tag. This can be overridden by an external style sheet.
Okay, you are talking about the dynamically created internal html object which has the given viewer 'id' ('swfoject' in your case) - this object will be created dynamically when the viewer will be created and during this also the default styles (100%) need to be set.

That internal object itself shouldn't be 'styled' directly. It would be better to set the styles to the container html element, like in the "pano" element in the example from Hans above.

Best regards,
Klaus

Ähnliche Themen