Page 1 of 2 12 Last
  1. #1
    Jive1's Avatar
    Registered
    09/10/04
    Location
    Blaasveld - België
    Posts
    54
    iTrader
    0
    Mentioned
    0 Post(s)

    window openen in cel van een tabel

    Hey!
    Ik wil in één cel van een tabel een scrollable window openen vanuit het menu dat op de zelfde page staat.
    Ik bedoel: vanuit het menu wil ik binnenin één cel van de tabel op dezelfde page één window kunnen openen met afwisselend verschillende inhoud naargelang wat ik in het menu kies.
    Bovendien wens ik dus alle variabelen te kunnen aanpassen aan de grootte en achtergrondkleur van de cel in de tabel kunnen aanpassen.
    Wie weet raad?
    Groeten
    Jive1
    no votes  

  2. #2
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    iFrames al bekeken? Dat doet wel ongeveer wat ge wilt.
    Anders is het ook via Javascript/JQuery realiseerbaar, maar dat is wel iets ingewikkelder.

    Nu, zowel iFrames als het gebruiken van tables voor uw layout zijn vrij verouderde technieken van werken.
    no votes  

  3. #3
    woony's Avatar
    Registered
    03/12/03
    Location
    Oostende
    Posts
    2,599
    iTrader
    78 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/10
    waarom zou je dat willen
    no votes  

  4. #4
    Jive1's Avatar
    Registered
    09/10/04
    Location
    Blaasveld - België
    Posts
    54
    iTrader
    0
    Mentioned
    0 Post(s)
    Hey!
    Bedankt tot zo ver...
    Maar ik wil niet bepaald frames gebruiken. De cel waarin ik het venster wil openen is zo groot gekozen juist om te vermijden dat ik frames zou moeten gebruiken.
    Momenteel experimenteer ik met
    <SCRIPT LANGUAGE="javascript">
    <!--
    window.open ('titlepage.html', 'newwindow', config='height=400, width=750,toolbar=no, menubar=no, scrollbars=yes, resizable=no, location=no, directories=no, status=no')
    -->
    </SCRIPT>
    maar ik kom er niet goed uit. Hierbij gaat get 'te openen' window onmiddellijk bij de start reeds open. Ik wens dat window echter niet te laten opengaan tezamen met het basiswindow waar het menu op staat, maar pas als ik één bepaalde keuze in het menu heb gedaan en dus geklikt heb op één der menukeuzen.
    Anderzijds probeer ik ook dat window aan te passen in uitzicht dat het onopvallend is tov het basiswindow....
    ( Ik ben eigenlijk nog beginner in website maken.... )
    Groeten
    Jive1
    no votes  

  5. #5
    woony's Avatar
    Registered
    03/12/03
    Location
    Oostende
    Posts
    2,599
    iTrader
    78 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/10
    maak dan een functie van uw javascript
    function doeschermopen()
    {
    window.open ('titlepage.html', 'newwindow', config='height=400, width=750,toolbar=no, menubar=no, scrollbars=yes, resizable=no, location=no, directories=no, status=no')
    }

    en op uw menu doeschermopen(); ?

    heb je daar een online voorbeeld van? Ik zie nog altijd niet goed wat de point is
    no votes  

  6. #6
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    dat is toch helemaal niet nodig? Zet gewoon uw content in die cel in een aparte div
    en zet die div op een breedte en hoogte en geef de juiste waarde aan de css overflow property:

    Code:
    #divincell{
      display:none;
      width:100px;
      height: 100px;
      overflow: auto / overflow-y / overflow-x;
    }
    bij onclick in uw anchor in het menu doet ge dit:

    <a href="normalehtmlactie" onclick="document.getElementById('divincell').styl e.display='block';return false;">Klik hier</a>

    Dit sluit ook direct aan het op de vermelding van het ajax gebruiken door Zero Grav.

    De code snippet die ik u gegeven heb is alleen maar een aanzet tot het maken van een volledig werkende applicatie. Maar die code gaat ge hier niet helemaal kunnen verwachten denk ik..

    Bekijk de JavaScript Library van jQuery ne keer
    Last edited by adrianhates; 09-04-2010 at 15:56.
    no votes  

  7. #7
    Jive1's Avatar
    Registered
    09/10/04
    Location
    Blaasveld - België
    Posts
    54
    iTrader
    0
    Mentioned
    0 Post(s)
    Hey!
    Momenteel heb ik, door in te geven zoals woony me aanraadde, bereikt dat mijn window inderdaad pas opengaat als ik in het menu één keuze aanklik, en namelijk met volgend commando:
    <a href="titlepage.html" onclick="window.open('titlepage.html', 'hulp', config='height=100,
    width=400, toolbar=no, menubar=no, scrollbars=yes, resizable=no,location=no, directories=no, status=no'); return false">
    Dat is dus OK? Maar nu moet ik de size van dat window nog in orde krijgen, want met de gegevens zoals hierboven ( height=100, width=400 ) blijft toch mijn window opengaan tot de grootte van mijn scherm.
    Bovendien moet ik dan de juiste afmetingen geven aan mijn opengaande window om het in die éne cel nog krijgen ipv van volledig open. Dat lijkt me geen probleem.
    En tenslotte ik zou de kleur van de scroll bar nog moeten aanpassen aan het geheel. De basiskleur van die scroll bar moet #00a4de zijn.
    Dus echt geen makkelijke klus voor een beginneling als ik....
    Wie me nog wat kan verderhelpen, ben ik zeer dankbaar!
    Greetz
    Jive1
    no votes  

  8. #8
    Jive1's Avatar
    Registered
    09/10/04
    Location
    Blaasveld - België
    Posts
    54
    iTrader
    0
    Mentioned
    0 Post(s)
    Hey!
    Ik heb even mijn experimenten online gezet. Je kan het vinden op farmingwhiteandreddeerfromparks
    Het window dat opengaat als ik één der keuzen van het menu aanklik zou in de grote cel moeten komen van de basispagina, en mag die cel echt wel bijna volledig vullen.
    Misschien helpt dit mijn doel te verduidelijken....
    Greetz
    Jive1
    no votes  

  9. #9
    bicklo's Avatar
    Registered
    08/02/10
    Location
    Harelbeke
    Posts
    125
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/1
    Indien we de code konden zien zou dit natuurlijk ook helpen.
    no votes  

  10. #10
    Jive1's Avatar
    Registered
    09/10/04
    Location
    Blaasveld - België
    Posts
    54
    iTrader
    0
    Mentioned
    0 Post(s)
    Hey bicko,
    Kan je de code niet zien, mijn experimenten staan online op farmingwhiteandreddeerfromparks
    Greetz
    Jive1
    no votes  

  11. #11
    Curahee Q's Avatar
    Registered
    07/12/07
    Location
    Hoogstraten
    Posts
    854
    iTrader
    0
    Mentioned
    0 Post(s)
    Even een paar punten op rij zetten
    1. Tables voor je design gebruiken is een no-go. Gebruik div's en css om dit te realiseren. Gebruik elementen waarvoor ze dienen, het table element dus voor tabulaire data. Een krant gebruik je ook niet om je achterwerk af te vegen, het gaat wel maar het is een pain in the ass en bijgevolg ook niet proper.
    2. Wat jij wil bereiken kan al helemaal niet met window.open, deze opent namelijk een nieuw scherm en zal helemaal je content niet inladen in een vakje...
    3. Stylen van tekst gebeurd met css en niet met de <font>-tags of dergelijke
    4. etc.

    Waarom je de raad van goeie webdesigners gewoon in de wind slaat is mij nog een raadsel.

    Wat volgens mij jouw doel is
    Je wilt je webpagina zo maken dat wanneer je iets in het design moet aanpassen, je slechts 1 pagina wilt aanpassen en dat het overal aangepast is.

    Propere oplossingen
    1. Met behulp van een serverside taal zoals PHP, ASP(.NET), JSP
    2. Met behulp van Ajax (Kan je nog zoiets als JQuery gaan gebruiken, vrij handig). Het nadeel hierbij is dat google je content wel niet kan indexeren zonder dat je hier expliciet rekening mee gaat houden.
    3. Met SSI (ServerSide Includes -> Server Side Includes - Wikipedia).

    Vieze oplossing
    1. (i)frames

    De vieze oplossing ga ik niet behandelen...

    Wat volgens mij niet kan op jouw host zijn 1 en 3 met als gevolg dat er nog maar 1 optie overblijft en dat is degene met JQuery.
    Let me google that for you
    no votes  

  12. #12
    Jive1's Avatar
    Registered
    09/10/04
    Location
    Blaasveld - België
    Posts
    54
    iTrader
    0
    Mentioned
    0 Post(s)
    Hey!
    Wat ik echt zoek is iets zoals ik nu ook online gezet heb op farmingwhiteandreddeerfromparks , maar dan in de plaats van een textarea een area waar gewoon een html-page kan in weergegeven worden ( let op!.. dit model werkt niet, het is fake en alleen samengesteld om te tonene wat ik echt zoek.
    Greetz
    Jive1
    no votes  

  13. #13
    bicklo's Avatar
    Registered
    08/02/10
    Location
    Harelbeke
    Posts
    125
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/1
    Indien u daar dus een html pagina wil laten zien vrees ik dat het toch Iframe zal worden voor u LINK.

    Php #include is normaal een veel betere oplossing voor iets dergelijks maar ik vrees dat dit voor u niet zo eenvoudig zal zijn (alhoewel includen met php niet echt moeilijk is).

    Verder zoals Curahee Q zegt probeer van die frames af te komen of toch al die border op 0 zetten.
    no votes  

  14. #14
    Albireo's Avatar
    Registered
    21/10/05
    Location
    Herentals
    Posts
    1,515
    iTrader
    5 (100%)
    Mentioned
    0 Post(s)
    Reputation
    2/13
    Ik heb wat in mekaar geknutseld gebruik makende van JQuery. Live demo op Including HTML-fragments using JQuery

    Dit is nu met JQuery gemaakt maar dit kan even gemakkelijk met PHP (maar ik heb geen PHP op m'n telenet-webruimte en ik had meer zin om wat met JQuery te spelen).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>Including HTML-fragments using JQuery</title>
    		<style type="text/css">
    			body  {
    				background-color: #000000;
    				color: #FFFFFF;
    			}
    			#header {
    				width: 940px;
    				margin: 0px auto;
    				padding: 10px;
    				text-align: center;
    				background-color: #BBBBBB;
    				color: #000000;
    			}
    			#main {
    				overflow: hidden;
    				width: 960px;
    				margin: 0px auto;
    				background-color: #BBBBBB;
    				color: #000000;
    			}
    			#content {
    				float: left;
    				width: 800px;
    				height: 600px;
    				background-color: #FFFFFF;
    				color: #000000;
    				overflow: auto;
    			}
    			#menu {
    				float: left;
    				width: 160px;
    			}
    			#menu ul {
    				margin: 0px;
    				padding: 0px;
    			}
    			#menu li {
    				margin: 0px;
    				padding: 5px;
    				list-style-type: none;
    			}
    			#footer {
    				width: 940px;
    				margin: 0px auto;
    				background-color: #BBBBBB;
    				color: #000000;
    				padding: 10px;
    				text-align: center;
    			}
    		</style>
    		<script type="text/javascript" src="js/jquery.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function() {
    				$("#content").load("inc/home.html");
    				$("a.contentlink").click(function() {
    					$("#content").load($(this).attr("href"));
    					return false;
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div id="header"><h1>Including HTML-fragments using JQuery</h1></div>
    		<div id="main">
    			<div id="content"></div>
    			<div id="menu">
    				<ul>
    					<li><a href="inc/home.html" class="contentlink">Home</a></li>
    					<li><a href="inc/sterrenbeelden.html" class="contentlink">Sterrenbeelden</a></li>
    					<li><a href="inc/sterrennamen.html" class="contentlink">Namen van sterren</a></li>
    					<li><a href="inc/constanten.html" class="contentlink">Astronomische en fysische constanten</a></li>
    					<li><a href="http://www.jquery.com/">JQuery</a></li>
    				</ul>
    			</div>
    			
    		</div>
    		<div id="footer">groetjes aan 9lives :-)</div>
    	</body>
     </html>
    edit: voorbeeld gewijzigd; i.p.v. het rel-attribuut wordt nu class gebruikt om de links te selecteren. Het rel-attribuut is niet zomaar vrij te kiezen (rel="section" was misschien wel passend geweest).
    Last edited by Albireo; 10-04-2010 at 10:42.
    "And we wept, Precious. We wept to be so alone." --- Gollum
    "Sometimes there are no words. No clever quotes to neatly sum up what happened that day. Sometimes, the day just . . . ends." --- Hotch (Criminal Minds)
    no votes  

  15. #15
    bicklo's Avatar
    Registered
    08/02/10
    Location
    Harelbeke
    Posts
    125
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/1
    Kijk eens aan een kant en klare oplossing.

    Dank u Albireo daar heb ik ook iets aan, ik probeer die JQuery ook eens onder de knie te krijgen, even die code van dichtbij bekijken.

    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in