zoukankan      html  css  js  c++  java
  • View and Data API Tips: Constrain Viewer Within a div Container

    By Daniel Du

    When working with View and Data API, you probably want to contain viewer into a <div> tag, the position and size of <div> can be defined with CSS. The HTML can be simple as below, a <div> tag as a container, the position and style is defined in a CSS class named as “viewer”:

        <h2>Autodesk View and Data API</h2>
        <div id="viewer" class="viewer">
    
        </div>

    For example, here is my css class, make the viewer container with 800px * 500px, and to make it easy to see, I also add a background color:

    .viewer {
    
        background-color: darksalmon;
        height: 500px;
         800px;
      }

    Here is how it looks like, seems good:

    Screen Shot 2016-01-31 at 2.29.30 PM

    Now let’s add viewer, the code snippet is simple, you can go to github for complete code:

            var viewerContainer = document.getElementById(containerId);
            var viewer = new Autodesk.Viewing.Private.GuiViewer3D(
                viewerContainer);

    But just with this style, the viewer is “overflow” out of the <div> container,:

    Screen Shot 2016-01-31 at 2.39.12 PM

    Here is a tip to contains the viewer into the <div> container, just edit the CSS as below, add “position : relative” :

    .viewer {
    
        background-color: darksalmon;
        height: 500px;
         800px;
        position: relative;
    }

    Here is how it looks after the change, the viewer is constrained within the div tag:

    Screen Shot 2016-01-31 at 2.43.25 PM

    Not a big deal, just a small tip in case you do not know.

  • 相关阅读:
    Agile方法
    电子书下载:Beginning Nokia Apps Development: Using MeeGo, Mobile QT and OpenSymbian
    电子书下载:Pro Oracle SQL
    电子书下载:Algorithms of the Intelligent Web
    BlogEngine .NET 日期控件显示问题
    电子书下载:Beginning JavaScript, 4th Edition
    电子书下载:Sams Teach Yourself iPhone Application Development in 24 Hours, 2nd Edition
    电子书下载:Pro ASP.NET 4 in VB 2010, 3rd Edition
    电子书下载:MCTS SelfPaced Training Kit (Exam 70515): Web Applications Development with Microsoft .NET Framework 4
    电子书下载:Unity 3D Game Development by Example: Beginner’s Guide
  • 原文地址:https://www.cnblogs.com/junqilian/p/5173316.html
Copyright © 2011-2022 走看看