via dropdownmenu inhoud openen in naar ander iframe, het lukt niet

Status
Niet open voor verdere reacties.
R

ritaka

Gebruiker
Lid geworden
8 mrt 2011
Berichten
7
ik gebruik het dropdownmenu uit het boek 'DHTML en CSS"van jason cranford. Het menu staat in een iframe en ik wil de inhoud in een ander iframe openen. de frmes heb ik benoemd met ID=" ...".
Maaar de inhoud opent niet in een ander frame maar in een nieuw venter als ik target + framenaam (=MIDDEN)gebruik, of in hetzelfde frame als ik geen gebruik maak van target. Dat zit hem ongetwijfels ergens in de js code, maar ik zie niet hoe dat dan aan te passen en waas. De code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>CSS, DHTML &amp; Ajax | Drop-down Menu</title>

<script type="text/javascript">
var objNavMenu = null;
var prevObjNavMenu = null;
var prevObjDropMenu = null;
var numDropMenu = 7;
////// link styles
var bgLinkColor = '#000';
var bgLinkHover = '#f00'
var bgLinkActive = '#900'
var linkColor = '#fff'
var linkHover = '#fff'
var linkActive = '#fff'

var isIE = null;
if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) isIE=1;

function initDropMenu () {
document.onclick = hideDropMenu;
for (i=1; i<=numDropMenu; i++) {
menuName = 'dropMenu' + i;
navName = 'navMenu' + i;
objDropMenu = document.getElementById(menuName);
objNavMenu = document.getElementById(navName);
objDropMenu.style.visibility = 'hidden';
objNavMenu.onmouseover = showDropMenu;
objNavMenu.onmouseout = menuOut;
objNavMenu.onclick = showDropMenu;
}
objNavMenu = null;
return;
}


function menuOut (e) {
document.onclick = hideDropMenu;
outObjNavMenu = document.getElementById(this.id);
if (outObjNavMenu != objNavMenu) {
outObjNavMenu.style.color = linkColor;
outObjNavMenu.style.backgroundColor = bgLinkColor;
}
}

function showDropMenu(e) {
menuName = 'drop' + this.id.substring(3,this.id.length);
objDropMenu = document.getElementById(menuName);
if (prevObjDropMenu == objDropMenu) {
hideDropMenu();
return;
}
if (prevObjDropMenu != null) hideDropMenu();
objNavMenu = document.getElementById(this.id);
if ((prevObjNavMenu != objNavMenu ) || (prevObjDropMenu == null)) {
objNavMenu.style.color = linkActive;
objNavMenu.style.backgroundColor = bgLinkActive;
}

if (objDropMenu) {
xPos = objNavMenu.offsetParent.offsetLeft + objNavMenu.offsetLeft;
yPos = objNavMenu.offsetParent.offsetTop + objNavMenu.offsetParent.offsetHeight;
if (isIE) {
yPos -= 1;
xPos -= 6;
}
objDropMenu.style.left = xPos + 'px';
objDropMenu.style.top = yPos + 'px';
objDropMenu.style.visibility = 'visible';
prevObjDropMenu = objDropMenu;
prevObjNavMenu = objNavMenu;
}

}

function hideDropMenu() {
document.onclick = null;
if (prevObjDropMenu) {
prevObjDropMenu.style.visibility = 'hidden';
prevObjDropMenu = null;
prevObjNavMenu.style.color = linkColor;
prevObjNavMenu.style.backgroundColor = bgLinkColor;
}
objNavMenu = null;
}

window.onload=initDropMenu;

</script>
<style type="text/css" media="screen">
body {
font-size: 1em;
font-family: Georgia, 'Times New Roman', times, serif;
color: #000000;
margin: 0px;
padding: 0px;

}

h1 {
font:small-caps bold italic 2.5em Georgia, 'Times New Roman', times, serif;
color: red;
}

h2 {
color:#999;
}

.page {
position: relative;
top: 190px;
left: 165px;
width: 480px;
}

#menuBar {
display: block;
margin-bottom: 5px;
position: relative;
top: 0px;
left: 0px;
right: 0px;
width: 99%;
overflow: hidden;
background-color: #000;
}

.menuHeader {
color: #fff;
font-size: 12px;
font-family: arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
padding: 50 px;
margin: 5px;
padding-right: 15px;
display: inline;
position: relative;
background-color: #000;
border-right: 1px solid #000000;
}

.menuDrop {
position: absolute;
visibility: hidden;
z-index: 1000;
top: 60px;
left: 0;
width: 175px;
height: auto;
margin: 0;
padding: 0;
color: #999999;
font-size: 12px;
font-family: arial, Helvetica, sans-serif;
background-color: #ffffff;
background-repeat: repeat;
border-style: solid;
border-width: 0 1px 1px;
border-color: #003365
}

.menuDrop a {
display: block;
text-align: left;
padding: 2px 5px;
border-top: 1px solid #ccc;
text-decoration: none
}

.menuDrop a:link {
color: #f00;
}

.menuDrop a:visited {
color: #f00;
}

.menuDrop a:hover {
color: #fff;
background-color: #f00;
}

.menuDrop a:active {
color: #ffffff;
background-color: #c00;
}
</style>
</head>
<body>

<div id="menuBar">
<div id="navMenu1" class="menuHeader">Information</div>
<div id="navMenu2" class="menuHeader">Works on paper</div>
<div id="navMenu3" class="menuHeader">Other works</div>
<div id="navMenu4" class="menuHeader">Order</div>
<div id="navMenu5" class="menuHeader">Books</div>
<div id="navMenu6" class="menuHeader">Links</div>
<div id="navMenu7" class="menuHeader">Contact</div>
</div>

<div id="dropMenu1" class="menuDrop">
<a href="info.html" target="midden" onfocus="if (this.blur) this.blur();">cv</a>
<a href="overklaucke.html" target="midden" onfocus="if (this.blur) this.blur();">About </a>
<a href="over.html" onfocus="if (this.blur) this.blur();">Klaucke about Klaucke</a>

</div>
<div id="dropMenu2" class="menuDrop">
<a href="2011.html" target="midden" onfocus="if (this.blur) this.blur();">2011</a>
<a href="2011.html" onfocus="if (this.blur) this.blur();">2010</a>
<a href="t2011.html" onfocus="if (this.blur) this.blur();">2009</a>
<a href="te2011.html" onfocus="if (this.blur) this.blur();">before</a>
</div>
<div id="dropMenu3" class="menuDrop">
<a href="../dhtml code/ch08.html" onfocus="if (this.blur) this.blur();">Photography</a>
<a href="../dhtml code/ch09.html" onfocus="if (this.blur) this.blur();">Video</a>
<a href="../dhtml code/ch10.html" onfocus="if (this.blur) this.blur();">Archive</a>
</div>
<div id="dropMenu4" class="menuDrop">
<a href="../dhtml code/ch08.html" onfocus="if (this.blur) this.blur();">buy?</a>

</div>
<div id="dropMenu5" class="menuDrop">
<a href="../dhtml code/ch08.html" onfocus="if (this.blur) this.blur();">books on BLURB</a>
<a href="../dhtml code/ch09.html" onfocus="if (this.blur) this.blur();">books </a>

</div>
<div id="dropMenu6" class="menuDrop">
<a href="../dhtml code/ch08.html" onfocus="if (this.blur) this.blur();">k on other sites</a>
<a href="../dhtml code/ch09.html" onfocus="if (this.blur) this.blur();">others</a>





</div>
<div id="dropMenu7" class="menuDrop">
<a href="../dhtml code/ch08.html" onfocus="if (this.blur) this.blur();">e-mail</a>
<a href="../dhtml code/ch09.html" onfocus="if (this.blur) this.blur();">skype</a>

</div>

</body>
</html>
 
aanvulling op de vraag

Dit had ik er nog bij moeten zetten:
Dat target niet werkt is natuurlijk duidelijk, dat heb ik begrepen, maar ik weet niet waar ik die 'set.frames' of top.frames of i.d. in de javascriptcode moet verwerken?????
dank voor elke reaktie die me verder helpt
 
nogmaals

weining reaktie hier, ik zal wel te ongeduldig zijn
heb inmiddels ontdekt dat 'name' weliswaar obsolete genoemd wordt ... maar dat als ik de frames niet alleen met ID maar ook met NAME benoem, de Target wèl werkt.
 
weining reaktie hier, ik zal wel te ongeduldig zijn
Klik om te vergroten...
ja, vind je het gek, het kan even duurt altijd (lees: dag of 2, 3) voordat iemand een reactie levert.

heb inmiddels ontdekt dat 'name' weliswaar obsolete genoemd wordt ... maar dat als ik de frames niet alleen met ID maar ook met NAME benoem, de Target wèl werkt.
Klik om te vergroten...
dat komt omdat target net zo obsolete is als name ;)

Dus, lekker frames (... frames zijn ook obsolete...) een name geven.
 
IFRAMES en W3org

oh nou, bedankt voor je vriendelijke antwoord.

ik heb ze gewoon nog beschreven gezien bij W3org. Iframes dus.
Wat zou jij dan doen om vanuit een top met navigatiemenu de inhoud naar een ander Iframe/column/tabel/..... te sturen?
 
Well, uiteraard bestaan ze nog. Maar het is gebleken dat iframes/frames een Slecht Idee zijn. Zie de link voor een grote hoeveelheid info waarom precies.



In ieder geval, frames zitten gewoon in HTML versie 4. Nu, er zijn een paar verschillende versies van #4, waarvan bijvoorbeeld transitional en strict.

Nu, de stricte versie heeft wat verschillen met de transitional. In de strict versie mag je bijvoorbeeld geen iframe gebruiken, maar in de transitional versie wel.

Nu, je gebruikt deze doctype:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Klik om te vergroten...
ofwel, de XHTML 1.0 Strict versie. Deze gaat nog net een stapje 'verder' qua strictheid dan HTML 4.01 strict [edit: okay, niet precies helemaal waar, maargoed], maar het punt is, dat iframes nogsteeds 'verboden' zijn. Zie hier - je hebt een transitional OF frameset-dtd nodig.

Voor de technische beschrijving, zie de w3 html4 spec. Zie de quote van het name attribuut:
name = cdata [CI]: This attribute assigns a name to the current frame. This name may be used as the target of subsequent links.
Klik om te vergroten...


Anyway, het punt is dus dat als je frames wilt blijven gebruiken (wat dus af te raden is), je een correct doctype moet hebben (transitional of frameset), of een andere oplossing moet vinden.
Het hele punt van frames is dat je niet voor elke pagina (bijvoorbeeld) het menu hoeft te veranderen. Nu zijn er uiteraard oplossingen voor, onder andere server-side includes en includes met PHP.

Dit is in principe niet een heel erg moeilijk onderwerp, maar, er zitten wel wat dingen aan vast. Voor een goede intro heeft een collega-forummember (csshunter) een goede tutorial geschreven. De link weet ik niet precies, maar die staat volgens mij in zn signature.



:thumb:
 
Laatst bewerkt:
iframes

ja, ik zie die strict, ipv transitional en dat is dom want dat had ik moeten zien (automatisch geopend vanuit dreamweaver, hm, beter opletten dus).
Ik ga al je links nalezen, en dan aan een betere oplossing werken voor die menubar. Dank je wel.:thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan