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.

  • 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.

  • 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>

  • 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,

    In this embed code

    Code
    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.

  • 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">

  • Hi,

    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

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!