Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Snelle vraag | Forwarden pagina-deel?

23 antwoorden
  • Goedenavond allemaal, al behoorlijk ge-googled en hier ook op gezocht, echter krijg ik het maar niet gevonden. Ik ben opzoek naar een methode om er voor te zorgen dat het browser automatisch naar onderzakt wanneer er op een button word geklikt. Er is een pagina waar ik momenteel werkzaam aan ben wat gebruikt maakt van een scrollbalk. De menu structuur zit bovenaan, en de pagina moet dus zakken naar beneden om de tekst te kunnen zien. Ik ben dit vaak zat tegengekomen, echter kan ik nergens een script terug vinden voor dit feit. Is hier iemand bekend mee en kan iemand mij hier wellicht mee helpen?
  • Ik heb het 2x gelezen, maar snap je nog niet helemaal... Kun je een voorbeeldje geven van een site die heeft wat jij bedoeld?
  • Ik denk dat ie links binnen de pagina bedoeld. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations
  • [quote:7e45c9003a="vuurtoren"]Ik denk dat ie links binnen de pagina bedoeld. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations[/quote:7e45c9003a] Exact! Excuus als het wat vaag was, maar het was wat lastig uit te leggen. Enkel, hoe doe je dit met een roll-over button voor elkaar?
  • Zolang je de url met anchor(#) goed in de link zet, dan maar het niet uit of het een platte tekst link is of een roll-over button.
  • [quote:b05fb6c617="vuurtoren"]Zolang je de url met anchor(#) goed in de link zet, dan maar het niet uit of het een platte tekst link is of een roll-over button.[/quote:b05fb6c617] Dat is goed om te horen.. maar hoe maak ik dan de scripting in orde? Script van de Roll-over buttons: [code:1:b05fb6c617] <div id="Layer18"><a href="aboutme.html" target="iframe" onmouseover="MM_swapImage('Image15','','imgs/images_mainmenu/aboutme_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="imgs/images_mainmenu/aboutme.png" name="Image15" width="147" height="48" border="0" id="Image15" /></a></div>[/code:1:b05fb6c617] Iemand?
  • wat wil je precies? dat die pagina op een bepaald punt word geopend? plaats op die pagina een anker op de bepaalde plek [code:1:4d7fb92781]<a name="hiereennaam">[/code:1:4d7fb92781] en verander aboutme.html in aboutme.html#hierdienaam voorbeeld: [code:1:4d7fb92781]<a href="pets.html#cavias">meer over cavia's</a> OP PETS.HTML: ... (andere tekst) ... <a name="cavias">Een cavia ...[/code:1:4d7fb92781] bedoel je dat?
  • [quote:581bbd141a="MichaelKlomp"]wat wil je precies? dat die pagina op een bepaald punt word geopend? plaats op die pagina een anker op de bepaalde plek [code:1:581bbd141a]<a name="hiereennaam">[/code:1:581bbd141a] en verander aboutme.html in aboutme.html#hierdienaam voorbeeld: [code:1:581bbd141a]<a href="pets.html#cavias">meer over cavia's</a> OP PETS.HTML: ... (andere tekst) ... <a name="cavias">Een cavia ...[/code:1:581bbd141a] bedoel je dat?[/quote:581bbd141a] Dit geprobeerd in de huidige situatie, maar het wilt niet echt werken.. Het zit zo; de mouse-over buttons staan in een Layer, het scriptje hiervoor: [code:1:581bbd141a] <div id="Layer17"><a href="news.html" target="iframe" onmouseover="MM_swapImage('Image14','','imgs/images_mainmenu/news_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="imgs/images_mainmenu/news.png" name="Image14" width="111" height="48" border="0" id="Image14" /></a></div>[/code:1:581bbd141a] Aan de onderkant van de pagina staat een iframe waar alle pagina's in geladen worden (geen fan van iframes, maar voor deze websites was dit een goede oplossing in verband met een flash-header die dan constant blijft draaien en daardoor niet opnieuw begint) Als er dus op een menu knop met bovenstaand script wordt geklikt moet de pagina automatisch naar onder schieten waar zich de iframe bevind zodat de desbetreffende pagina geladen zal worden. :) Ik hoop dat ik het zo een beetje beter uitleg...?
  • Je pakt het veel te ingewikkeld aan. Voor de wisselende plaatjes met een mouseover kun je veel beter gewoon CSS gebruiken ipv javascript. Dat doe je door de twee afzonderlijke plaatjes samen te voegen tot 1 plaatje waarbij je ze onder elkaar zet. Dus stel even dat in de normale situatie de afbeelding van 60x15px rood is en bij een mouseover zwart wordt. Dat voeg je samen tot dit plaatje: [img:17305456f9]http://fotopocket.nl/fpimages/2010/05/09/c2ab313f4e755652b92f1184f198c42d/cssvoorbeeld.jpg[/img:17305456f9] Dat is dus 1 geheel van 60x30. Dat definieer je als achtergrond bij de knop dmv CSS: [code:1:17305456f9]#knop a { background-image: url('knop.gif'); background-repeat: no-repeat; } [/code:1:17305456f9] [code:1:17305456f9] Vervolgens wil je dus het hover-effect bereiken. Dat doe je als volgt: #knop a:hover { background-position: 0 -15px; }[/code:1:17305456f9] Ofwel: je schuift het plaatje een klein stukje op. Deze aanpak heeft 2 voordelen. Allereerst werkt het ook bij mensen die javascript uitgeschakeld hebben in hun browser, wat toch nog zo nu en dan voorkomt (bedrijfsnetwerken bijvoorbeeld). Verder heb je het voordeel dat het plaatje al geladen is en dus óók bij trage verbindingen meteen beschikbaar is. Je hebt dus geen vertraging meer in je effect. (Een derde voordeel is dat er een HTTP-request minder nodig is, maar dat is eigenlijk verwaarloosbaar dus tel ik niet echt mee.) Bovenstaande staat overigens helemaal los van het "spring-effect" dat je wil bereiken. Dat is ook vrij simpel overigens: [code:1:17305456f9]<a href="#anker" onclick="window.open('news.html', 'iframenaam'); return false">Klik mij!</a>[/code:1:17305456f9] Ofwel: met het href attribuut spring je naar beneden, met het onclick attribuut controleer je de iframe.
  • Hi Ger, dank je voor je reactie. Ik weet inderdaad dat het met CSS beter zal gaan, enkel is dit echt het enige wat er nog moet gebeuren om de website af te ronden; dus ik hoop eigenlijk dat ik het alsnog kan instellen zonder dat ik op dit moment de website opnieuw moet bouwen middels een CSS sheet. Ik heb jou voorbeeld code gebruikt: [code:1:83d3c7281f]<a href="#anker" onclick="window.open('news.html', 'iframenaam'); return false">Klik mij!</a>[/code:1:83d3c7281f] En zelfs niet eens op de bestaande knop, maar enkel in een nieuwe layer om te kijken wat het deed, maar helaas springt hij niet naar onder? Zou je me kunnen zeggen wat ik fout doe, en hoe ik met de huidige code van de mouse-over buttons het springeffect naar beneden bereik? [code:1:83d3c7281f] <div id="Layer17"><a href="news.html" target="iframe" onmouseover="MM_swapImage('Image14','','imgs/images_mainmenu/news_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="imgs/images_mainmenu/news.png" name="Image14" width="111" height="48" border="0" id="Image14" /></a></div> [/code:1:83d3c7281f]
  • Misschien een vieze oplossing (daar ben ik van :) ) maar kan je niet een onclick eventhandler gebruiken die naar beneden scrollt? [code:1:0795c97b1e]onClick="window.scroll(0,300);"[/code:1:0795c97b1e]
  • [quote:9479174bb7="teacher"]Misschien een vieze oplossing (daar ben ik van :) ) maar kan je niet een onclick eventhandler gebruiken die naar beneden scrollt? [code:1:9479174bb7]onClick="window.scroll(0,300);"[/code:1:9479174bb7][/quote:9479174bb7] En hoe combineer je dit dan met de bovenstaande code van de mouse-over button(s)?
  • ik snap de bedoeling nog niet, wil je het dynamish (spelllieng ;p)? welke pagina moet verspringen, de pagina waarop de iframe staat toch? of die ín de frame? anders is het anker denk ik toch het meest stabiele(denk aan lettertype en andere weergave verschillen) btw: die link die ik je gaf, stont toch wel target= en dan het element met et anker? suc6
  • [quote:55b015fb66] En hoe combineer je dit dan met de bovenstaande code van de mouse-over button(s)?[/quote:55b015fb66] ergens tussen de punthaakjes (<>) van de A tag. [code:1:55b015fb66]<A href="aboutme.html" onclick="javascript:window.scroll(0,300);" ...>[/code:1:55b015fb66] mocht de positie niet kloppen moet je wat met de waarden rommelen die nu op 300 staat. hoe HOOGER getal hoe verder naar benede.
  • [quote:de02f6cc6f="MichaelKlomp"]ik snap de bedoeling nog niet, wil je het dynamish (spelllieng ;p)? welke pagina moet verspringen, de pagina waarop de iframe staat toch? of die ín de frame? anders is het anker denk ik toch het meest stabiele(denk aan lettertype en andere weergave verschillen) btw: die link die ik je gaf, stont toch wel target= en dan het element met et anker? suc6[/quote:de02f6cc6f] Nogmaals; het is 1 gehele pagina, bovenaan staat een flash-animatie, maar omdat die wat groot is moet je een stukje naar beneden scrollen waar zich een iframe bevind waar alle pagina's in laden. Net onder de flash-animatie staan de mouse-over menu buttons met deze code: [code:1:de02f6cc6f]<div id="Layer17"><a href="news.html" target="iframe" onmouseover="MM_swapImage('Image14','','imgs/images_mainmenu/news_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="imgs/images_mainmenu/news.png" name="Image14" width="111" height="48" border="0" id="Image14" /></a></div> [/code:1:de02f6cc6f] Maar om het scrollen tegen te houden wil ik er voor zorgen dat de pagina automatisch naar beneden springt wanneer iemand op een menu-button drukt om de desbetreffende pagina te laden in het iframe. Mijn vraag is dan ook; hoe doe ik dit, en hoe ziet bovenstaande code er dan uit?
  • [quote:731cfbea65="MaartenE"]Ik weet inderdaad dat het met CSS beter zal gaan, enkel is dit echt het enige wat er nog moet gebeuren om de website af te ronden; dus ik hoop eigenlijk dat ik het alsnog kan instellen zonder dat ik op dit moment de website opnieuw moet bouwen middels een CSS sheet.[/quote:731cfbea65]Je werkt zonder überhaupt een stylesheet? :o [quote:731cfbea65="MaartenE"]helaas springt hij niet naar onder? Zou je me kunnen zeggen wat ik fout doe[/quote:731cfbea65] Ik zie het ja. Mijn code werkt inderdaad niet ideaal, je zult de return: false moeten vervangen door return: true om het te laten werken. Ik had er niet voldoende bij nagedacht. :oops: Code is dan dus: [code:1:731cfbea65]<a href="test.html#anker" onclick="window.open('news.html', 'iframenaam'); return true">Klik mij!</a>[/code:1:731cfbea65]
  • Dat pakt hij ook niet...:( Code zo toegevoegd: [code:1:546eaa1768] <div id="Layer17"><a href="test.html#anker" onclick="window.open('news.html', 'iframe'); return true"><a href="news.html" target="iframe" onmouseover="MM_swapImage('Image14','','imgs/images_mainmenu/news_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="imgs/images_mainmenu/news.png" name="Image14" width="111" height="48" border="0" id="Image14" /></a></a></div>[/code:1:546eaa1768] Wat doe ik fout?
  • Je moet natuurlijk niet zomaar code kopieren en plakken zonder te kijken. Ik kan me niet voorstellen dat je pagina test.html heet. Dat moet je dus uit de code halen (alleen het anker in de href is voldoende). Ook moet je zorgen dat je het anker op de juiste plaats hebt staan, dus direct boven de iframe. En de iframe moet ook de juiste naam hebben. Begrijp me niet verkeerd, ik wil je graag helpen, maar ik heb het idee dat je maar half weet waar je mee bezig bent. Dit zijn toch echt basic dingen als je het over webdesign hebt. Plus dat voorbeeldcode copy-pasten nu niet echt getuigt van zelf moeite willen doen in het begrijpen. Hoe dan ook: ik raad je aan [url=http://forum.computertotaal.nl/phpBB2/viewtopic.php?t=186553]dit topic[/url] eens door te nemen. Hopelijk heb je er wat aan.
  • [quote:3f14ff8979="Ger"]Je moet natuurlijk niet zomaar code kopieren en plakken zonder te kijken. Ik kan me niet voorstellen dat je pagina test.html heet. Dat moet je dus uit de code halen (alleen het anker in de href is voldoende). Ook moet je zorgen dat je het anker op de juiste plaats hebt staan, dus direct boven de iframe. En de iframe moet ook de juiste naam hebben. Begrijp me niet verkeerd, ik wil je graag helpen, maar ik heb het idee dat je maar half weet waar je mee bezig bent. Dit zijn toch echt basic dingen als je het over webdesign hebt. Plus dat voorbeeldcode copy-pasten nu niet echt getuigt van zelf moeite willen doen in het begrijpen. Hoe dan ook: ik raad je aan [url=http://forum.computertotaal.nl/phpBB2/viewtopic.php?t=186553]dit topic[/url] eens door te nemen. Hopelijk heb je er wat aan.[/quote:3f14ff8979] Sorry; maar dat is niet waar. Ik weet wel degelijk waar ik mee bezig ben, en uiteraard heb ik "test" eruit gehaald in het script. (ook al zat hij wel in de quote) Maar ook zonder test werkt het helaas niet. Een topic sturen met basics html is heel aardig van je, maar behalve het feit dat ik de basics al beheers gaat het me in eerste instantie om dit probleem. Vergelijk mij dan ook aub niet met 9 van de 10 andere nieuwe mensen die een topic openen om iets te weten te komen. Zelf moeite doen doe ik absoluut, dus ga aub geen dingen roepen wat je dus duidelijk niet weet. Als ik er zelf echt uit zou kunnen komen zou ik dit topic dus daadwerkelijk niet openen, maar ik heb dus echt al alles geprobeerd maar kan maar niet achter de goede code komen. :? Ik hoef dus enkel alleen "#anker" te plaatsen achter news.html? Het iframe heb ik ook gewoon "iframe" genoemd, dus dat staat goed in de code. Enkel dan de vraag nog; hoe en waar zet ik dan de code neer waar de anker naar verwijst, en wat moet dat voor regeltje zijn?
  • Ah, het is gelukt! Met de code/oplossing van MichaelKlomp, dank je Michael! Iedereen erg bedankt voor jullie hulp, jij ook Ger!

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.