Infrastructure Map Server General Discussion

Infrastructure Map Server General Discussion

Reply
Contributor
mapguide2009
Posts: 13
Registered: ‎07-02-2009
Message 1 of 4 (287 Views)

Some issues on designing web layouts by the fusion

287 Views, 3 Replies
07-24-2009 02:03 AM
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
Contributor
mapguide2009
Posts: 13
Registered: ‎07-02-2009
Message 2 of 4 (287 Views)

Re: Some issues on designing web layouts by the fusion

07-28-2009 01:14 AM in reply to: mapguide2009
I have resolved it by changing :containerOptions: [{width:8},{},{width:8}],
New Member
shrad_k
Posts: 2
Registered: ‎12-17-2013
Message 3 of 4 (193 Views)

Re: Some issues on designing web layouts by the fusion

12-17-2013 10:36 PM 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?

 

Active Member
bernhard.maehler
Posts: 6
Registered: ‎08-09-2007
Message 4 of 4 (170 Views)

Betreff: Some issues on designing web layouts by the fusion

12-18-2013 10:13 AM in reply to: mapguide2009

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

Post to the Community

Have questions about Autodesk products? Ask the community.

New Post
Announcements
Do you have 60 seconds to spare? The Autodesk Community Team is revamping our site ranking system and we want your feedback! Please click here to launch the 5 question survey. As always your input is greatly appreciated.