LaadDrieFrames / "Back-button"

Status
Niet open voor verdere reacties.
Z

zabazab

Nieuwe gebruiker
Lid geworden
9 jul 2008
Berichten
4
Op mijn site heb ik ingesteld dat je met 1 link in drie frame-vensters een nieuwe pagina opent. Dat werkt allemaal heel goed met de volgende code's:

Code: 
<SCRIPT LANGUAGE="JavaScript">
<!--
function LaadDrieFrames(EersteBestand,TweedeBestand,DerdeBestand) {
parent.UBH.location = EersteBestand;
parent.HOME.location = TweedeBestand;
parent.MENU.location = DerdeBestand;
return true;
}

//-->
</SCRIPT>

De link:
Code: 
<a HREF="#" onClick="LaadDrieFrames('pagina_ubh.html','pagina_home.html','pagina_menu.html'); return false">Link</a>

Probleem
Dit werkt allemaal heel goed. Alleen wanneer je dan op de "back-button" klikt gaat hij eerst terug in het frame-venster "MENU" wanneer je nog een keer klik gaat hij terug in het frame-venster "HOME" en daarna in het frame-venster "UBH".
Dit zou eigenlijk in 1 keer moeten is hier een oplossing voor?

Groeten,
Bas
 
Met .location.replace('nieuwe locatie'); kun je voorkomen dat een pagina in de geschiedenis van de backbutton komt, of in history.back().

Ik ga er vanuit dat je groepen hebt als:
pagina_ubh_a.html, pagina_menu_a.html, pagina_home_a_01.html, pagina_home_a_02.html, pagina_home_a_03.html ...
pagina_ubh_b.html, pagina_menu_b.html, pagina_home_b_01.html, pagina_home_b_02.html, pagina_home_b_03.html ...

Waarbij je wilt dat de pagina's in het ubh- en menu-frame zich aanpassen aan de pagina in het home-frame.

Dat kan zo:
Code: 
<script type="text/javascript">
 <!--
  // Egel 080710 ;)
  var isLoaded = false;
  function feedback() {
   if (isLoaded) {
    var homeTest = home.document.location.href.match(/_./g)[1];
    var menuTest = menu.document.location.href.match(/_./g)[1];
    if (menuTest != homeTest) {
     ubh.location.replace('pagina_ubh' + homeTest + '.html');
     menu.location.replace('pagina_menu' + homeTest + '.html');
     };
    };
   };
 // -->
</script>


<frameset onload="isLoaded=true;">
 <frame name="ubh" src="pagina_ubh_a.html">
 <frame name="menu" src="pagina_menu_a.html">
 <frame name="home" src="pagina_home_a_01.html" onload="feedback();">
</frameset>
Via de onload="feedback();" wordt bij het laden van een pagina in het home-frame gekeken of het menu klopt, zo niet dan worden de bijpassende uhb- en menu-frames geladen.

Als links gebruik je dan gewoon:
Code: 
<a href="pagina_home_b_01.html" target="home">linktekst</a>
Maar als je naar een ander groep linked kun je beter iets als dit gebruiken:
Code: 
<a href="pagina_menu_b.html" target="menu" onclick="parent.home.location='pagina_home_b_01.html'; return false;">linktekst</a>
Zo wordt voor iemand zonder javascript menu b geopent. :)


Vr.Gr. Egel.
 
Egel,

Bedankt voor je reactie maar ik kom er nog niet uit. Ik heb niet gewerkt met de groepen zoals jij zegt. Maar ik heb groepen aangemaakt om toch jou code uit te proberen maar dan lukt het mij nog niet.
Het gaat om de volgende site: www.ceccnv.com. Kan je mij misschien aan de hand van de site opweg helpen?

Groeten,
Bas

ps. Kwam er net achter dat hij het aanpassen van de frames in volgorde doet zoals ze in mijn <FRAMESET> staan.
 
Laatst bewerkt:
Als je toch met javascript bezig bent kun je het ook totaal anders aanpakken.

Je header hoeft geloof ik niet herladen te worden. Je kunt je menu één pagina maken en het uitklappen met javascript regelen, of zelfs met CSS alleen (maar dat is lastiger). Dan kun je met normale html links uit de voeten met target="HOME".

Er zijn genoeg uitklap menu scripts op internet te vinden mocht je dit willen proberen. En als je php kunt gebruiken raad ik je af om uberhaupt frames te gebruiken, maar zonder php kan het wel nodig zijn.
 
Dit is een uitklapmenu met terugkoppeling. :)

Het menu:
Code: 
<html>
 <head>
  <style type="text/css">
   a { color: #999; font-weight: bold; text-decoration: none;}
   a:hover { text-decoration: underline;}
   a.x { color: #f00; cursor: default;}
   a.x:hover { text-decoration: none;}
   div { margin-left: 12px; display: block;}
  </style>
  <base target="home">
 </head>
 <body>
  <a href="home/index.html">Home</a><br>
  <a href="afdelingen/index.html">Afdelingen</a><br>
  <div id="afdelingen">
   <a href="afdelingen/elektro.html">Elektrotechniek</a><br>
   <div id="elektro">
    <a href="afdelingen/elektro_inspectie.html">Inspectie</a><br>
    <a href="afdelingen/elektro_meting.html">Metingen</a><br>
   </div>
   <a href="afdelingen/installatie.html">Installatietechniek</a><br>
   <a href="afdelingen/lucht.html">Luchtbehandeling</a><br>
  </div>
  <a href="projecten/index.html">Projecten</a><br>
  <div id="projecten">
   <a href="projecten/woningen.html">Woningen</a><br>
   <a href="projecten/hotel.html">Hotels / resort</a><br>
  </div>
  <a href="contact/index.html">Contact</a><br>
 </body>
</html>
De index:
Code: 
<title>Uitklappend menu met feedback - Egel 080713 ;)</title>

<script type="text/javascript">
 <!--
  // Egel 080713 ;)
  var isLoaded = false;
  function feedback() {
   if (isLoaded) {
    var h = home.document.location.href;
    var d = menu.document.getElementsByTagName('div');
    for (var i = 0; i < d.length; i++) {
     d[i].style.display = (h.indexOf(d[i].id) > -1 ? 'block' : 'none');
     };
    var a = menu.document.links;
    for (var i = 0; i < a.length; i++) {
     a[i].className = (h.indexOf(a[i].href) > -1 ? 'x' : '');
     };
    };
   };
 // -->
</script>


 <frameset cols="180,*" onload="isLoaded=true; feedback();">
  <frame name="menu" src="menu.html" scrolling="auto">
  <frame name="home" src="home/index.html" onload="feedback();">
 </frameset>
Bijlage is een werkend voorbeeld!

Het script wordt steeds aangeroepen door de onload van het home-frame en
- bladert door de div's van het menu en klapt alleen de goede uit,
- bladert door de links van het menu en maakt de gekozen link zichtbaar.

:cool: ;)


Vr.Gr. Egel.
 

Bijlagen

Nog even een versie die de span-tag in het menu gebruikt. Zo zit het niet in de weg met de div's die je nu in je menu hebt :) (Zip-bijlage!)

Je kunt het zo toepassen:
Code: 
<a href="projecten/projecten.html" target="home">Projecten</a>

 <span id="projecten">

  <a href="projecten/woningen.html" target="home">Woningen</a>
  <a href="projecten/hotel.html">Hotels / resort</a>
  <a href="projecten/utiliteit.html">Utiliteitsbouw</a>
  <a href="projecten/industrie.html">Industrie</a>
  <a href="projecten/inspecties.html">Inspecties</a>

 </span>

<a href="werken/vacatures.html">Werken bij CECC</a>
Elke pagina in het home-frame met projecten in het adres laat de <span id="projecten"> ... </span> zien. :)

(In de css kun je div a { ...;} en span a { ...;} gebruiken.)


Vr.Gr. Egel.
 

Bijlagen

Egel vriendelijk bedankt voor je laatste oplossing. Deze heb ik ondertussen toegepast en het werkt.
Volgens mij past het menu zich aan, aan wat er op het home-frame staat. Maar hoe kan ik het aanpassen dat ook het ubh-frame zich aanpast aan het home-frame?

Bijlage: De site aangepast.
 

Bijlagen

zabazab zei:
Volgens mij past het menu zich aan, aan wat er op het home-frame staat. Maar hoe kan ik het aanpassen dat ook het ubh-frame zich aanpast aan het home-frame?
Klik om te vergroten...
Dat zou kunnen door voor bijv. afdelingen/elektro.html een pagina in de ubh-map te zetten met de naam afdelingen_elektro.html

Met het script in de index is het dan te maken dat de pagina in het uhb-frame zich aanpast aan de pagina in het home-frame.

Dat komt dan nog ... maar kijk eerst even hier naar: de zip-bijlage bevat menu.html en menu.css

Als je die gebruikt dan zie je hoe de terugkoppeling met kleuren werkt en heb je misschien het ubh-frame helemaal niet meer nodig. :)

De style voor de links werkt met:
a
span a
span span a

En de terugkoppeling met:
a.x


Vr.Gr. Egel.
 

Bijlagen

Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan