View Full Version : trouble sending link to IFrame from ddaccordian

09-18-2008, 09:29 PM
1) Script Title: Apple style Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-apple.htm

3) Describe problem: !Newbie! - I am trying to create a menu that uses the ddaccordion menu to drive information to an IFrame.

I'm trying to integrate Maps.Live into my website, and switch different maps through the menu.

BIG problem - I can't get the links to open in the IFrame
<iframe name="_mapframe" , they keep opening in a new tab?

here is the site:


Just in case - here is a base map HTML page I'm trying to load in the IFrame - just in case there is a conflict between the two (i've tried any page, not just this on, they all load in a new window instead of the IFrame).

Being new, I'm probably messing up something easy - I'm better at Mapping, GIS etc....

I tried setting:

<base target="_mapframe" />

I tried setting multiple variations of JavaScript:

onclick=" self.frames['_mapframe'].location.href

Please take a look at the site (the first accordian -"Site Pics" is the one I've been trying things on)

Any help would be great - I've spent two days trying to figure out something that is probably easy.

09-18-2008, 11:25 PM
In other words, you're trying to get the page to load in the IFRAME when "Checking A" below for example is checked:

<form name="001" target="_mapframe">
<input type="checkbox" name="cbtestA" onclick="bbevent()"/> Checking A<br />
<input type="checkbox" name="cbtestB" onclick="bbevent()"/> Checking B

It really depends on how the page is currently being loaded, which I can't tell at a glance. What does function bbevent() actually do that causes the page to be loaded?

09-19-2008, 03:56 AM
to be honest, I didn't catch that function call:

I've been working with a seperate javascript file, because that was the way it was set up on the file i used as a starting point - not because I know what I'm doing.

each seperate page I created has its own seperate js file just like the other, except this part changes up top and the maps.live reference number changes:


This function creates the initial map (here is the .js file basically - i have things turned off I haven't tried getting to work yet)

Should I try to format this so that its all contained on the one page and doesn't call a seperate file? I just started this and I'm learning as I go sorry.

I was thinking that if I kept it on the seperate page I could figure out a way to use the ddaccordian menu list to just call out the 3 or 4 different types of maps (windows.live, .kml, MapCruncher and possibly GeoRSS) and then I would only have to update the one js file to update all the pages down the road as I learn more what i'm really doing though so i left it the way it was. Kind of like the CSS file which I'm also learning about.

window.onload = GetMap;
window.onresize = Resize;

var map = null;
var mapWidth = null;
var mapHeight = null;

function GetMap()
map = new VEMap('divMap');

//Load and resize the map
//VEMapStyle{ Road Shaded Aerial Hybrid Oblique Birdseye BirdseyeHybrid }


//Load KML Files
//VEDataType ( GeoRSS VECollection ImportXML }

var layer = new VEShapeLayer();
var sourceSpec = new VEShapeSourceSpecification(VEDataType.VECollection, "A588B0C5DBACE219!325", layer);
map.ImportShapeLayerData(sourceSpec, onFeedLoad, true);

//var shapeLayer = new VEShapeLayer();
//var shapeSpec = new VEShapeSourceSpecification(VEDataType.ImportXML,"http://www.dry-utility.com/XXXX.kml", shapeLayer);


//function GetTiles()
//var bounds = [new VELatLongRectangle(new VELatLong(90,-180),new VELatLong(-90,180))];
//var tileSourceSpec = new VETileSourceSpecification("Layer_NewLayer",
//"http://www.dry-utility.com/Topo Mashup/Layer_NewLayer/%4.png");
//tileSourceSpec.NumServers = 1;
//tileSourceSpec.Bounds = bounds;
//tileSourceSpec.MinZoomLevel = 10;
//tileSourceSpec.MaxZoomLevel = 18;
//tileSourceSpec.Opacity = opacity;
//tileSourceSpec.ZIndex = 100;

//map.AddTileLayer(tileSourceSpec, true);

function onFeedLoad(feed)
alert('KML data loaded! ' + feed.GetShapeCount());

//Resize map and controls whenever the size of the browser window changes
//Also load the minimap
function Resize()
var mapDiv = document.getElementById("divMap");
var accordion = document.getElementById("ddaccordion");
var windowWidth = document.body.clientWidth;
var windowHeight = document.body.clientHeight;
mapWidth = windowWidth - 255;
//mapWidth = windowWidth - 10;
mapHeight = windowHeight - 70;
//mapHeight = windowHeight - 10;
mapDiv.style.width = mapWidth + "px";
mapDiv.style.height = mapHeight + "px";
accordion.style.height = (windowHeight - 65) + "px";
map.Resize(mapWidth, mapHeight);
//map.ShowMiniMap(mapWidth-205, 13, VEMiniMapSize.Large);

I suppose I could make each button(checkbox, image: either one) in the ddaccordian use that script to change the map - I'm not sure how yet, but would that make more sense?

Likewise, if the button thing makes sense - I don't even have to go out to a seperate site to get the maps as long as I can load a map i can use the click event to open .kml files, MapCruncher Files and store them right in the same folder as the website just like the images.

Hannes's VE Blog http://johanneskebeck.spaces.live.com/default.aspx is where the idea came from, this is the page I saved from all his examples: http://mappointemea.members.winisp.net/MapCruncher/Default.aspx

When you save this stuff though, its way more involved than what I need or understand, so I am trying to bring this down to a very simple level.

I really want to use the checkbox's, like in his example, to just turn on and off layers (when I use the check box and get it to function, it refreses the page when you click it on, and off but right now all I really want is to get the 5 maps to load.

Or get one map to load and use the 5 functions to turn on and off information in that mapspace like his?