Infrastructure Map Server Forum
Welcome to Autodesk’s Infrastructure Map Server Forums. Share your knowledge, ask questions, and explore popular Infrastructure Map Server topics.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Some issues on designing web layouts by the fusion

3 REPLIES 3
Reply
Message 1 of 4
mapguide2009
511 Views, 3 Replies

Some issues on designing web layouts by the fusion

Hello,
I want to use the fusion examples to design my own map website layouts.
However,I get some issues when I use it.
I made experiments on the slate which in the folder:C:\Program Files\MapGuideOpenSource2.0\WebServerExtensions\www\fusion\templates\mapguide\slate.There are two spliterarea in the primary layout ,so I change the code in the index.html in order to show three parts,the code is as show below:
var splitter = new Jx.Splitter('SplitterArea',
{splitInto:2,
elements:[$('Sidebar'),$('MapArea')],
layout:'horizontal',
containerOptions: [{minWidth:8, width: 218}],
snappers: [$('SidebarCollapse'),null]});
var splitter = new Jx.Splitter('SplitterArea',
{splitInto:3,
elements:[$('Sidebar'),$('MapArea'),$('RightSidebar')],
layout:'horizontal',
containerOptions: [{minWidth:8, width: 218,minWidth:8}],
snappers: [$('SidebarCollapse'),null]});

and also set other segments,but when I preview the html,I did see the page which divided by three parts,but the width of the right one is too large.What is the reason,and how to set so that the left width equals the right one's and the remaining is the middle width?This is the first question.
Another question is that:the style cannot be previewed in the aspx pages.
Excuse my very poor english,and any useful comments and helps would be appreciated!
Truly,
yuan in China
3 REPLIES 3
Message 2 of 4
mapguide2009
in reply to: mapguide2009

I have resolved it by changing :containerOptions: [{width:8},{},{width:8}],
Message 3 of 4
shrad_k
in reply to: mapguide2009

Thanks  Your answer help me alot but I done find the way to change the splitter collaps bar before the third panel. I have tried to change some css and the following code?

snappers: [$('SidebarCollapse'),$('LigendbarCollapse'),$('LigendbarCollapse')]}); But it dosent work out?

 

Message 4 of 4

I am not sure about your intention.
Also: snappers is not a JxLib element.

However, maybe this helps:
http://www.geoportal.hilden.de/karten/luftbildkarte/

You can use web developer tools to inspect html and css.

1) index.html
...
var COLLAPSED_SIDEBAR_WIDTH = 8;
var PANEL_WIDTH = $('AppContainer').getWidth() * 0.15;
if (PANEL_WIDTH < 250) PANEL_WIDTH = 250;
...
 splitter = new Jx.Splitter('SplitterArea',
  {
  elements:[$('Sidebar_left'),$('MapArea'),$('Sidebar_right')],
  layout:'horizontal',
  useChildren: true,
  containerOptions:
      [ 
       {
       minWidth: COLLAPSED_SIDEBAR_WIDTH ,
       width: PANEL_WIDTH,
       maxWidth: 350
       },
       {
       resizeWithWindow: true
       },
       {
       minWidth: COLLAPSED_SIDEBAR_WIDTH ,
       width: PANEL_WIDTH,
       maxWidth: 350
       }
      ],
  barOptions:  [
       {
       snap: 'before',
       snapElement: $('SidebarCollapse_left'),
       snapEvents: ['click']
       },
       {
       snap: 'after',
       snapElement: $('SidebarCollapse_right'),
       snapEvents: ['click']
       }
      ]
  }
 );
...

2) slate.css
...
#SidebarCollapse_left {
  position: absolute;
  width: 8px;
  top: 0px;
  right: 0px;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  cursor: pointer;
}

#SidebarCollapse_right {
  position: absolute;
  width: 8px;
  top: 0px;
  right: 0px;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  cursor: pointer;
}

.jxSnapOpened #SidebarCollapseButton_left {
  background: url(images/sidebarCloseButton.png) center no-repeat;
}

.jxSnapClosed #SidebarCollapseButton_left {
  background: url(images/sidebarOpenButton.png) center no-repeat;
}

.jxSnapOpened #SidebarCollapseButton_right {
  background: url(images/sidebarOpenButton.png) center no-repeat;
}

.jxSnapClosed #SidebarCollapseButton_right {
  background: url(images/sidebarCloseButton.png) center no-repeat;
}
...

Bernhard

Can't find what you're looking for? Ask the community or share your knowledge.

Post to forums  

Autodesk Design & Make Report