Archief - window openen in cel van een tabel

Jive1 · 9 apr 2010

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

Zero Grav · 9 apr 2010

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.

woony · 9 apr 2010

waarom zou je dat willen

Jive1 · 9 apr 2010

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">

</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

woony · 9 apr 2010

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

adrianhates · 9 apr 2010

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').style.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

Jive1 · 9 apr 2010

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

Jive1 · 9 apr 2010

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

bicklo · 9 apr 2010

Indien we de code konden zien zou dit natuurlijk ook helpen.

Jive1 · 9 apr 2010

Hey bicko,
Kan je de code niet zien, mijn experimenten staan online op farmingwhiteandreddeerfromparks
Greetz
Jive1

Curahee Q · 9 apr 2010

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

Jive1 · 9 apr 2010

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

bicklo · 9 apr 2010

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.

Albireo · 9 apr 2010

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).

bicklo · 9 apr 2010

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.

Jive1 · 10 apr 2010

Hey!
Héél erg bedankt allemaal!
Die iFrame is eigenlijk helemaal wat ik zoek!... Denk ik tochi
Ik ga nu een beetje verder zoeken hoe ik de frame zelf helemaal aan het voorkomen van de basispagina kan aanpassen. Ttz. de juiste afmetingen, kleur en misschien nog andere. Ik zal wanneer ik ermee klaar ben alles nog eens online zetten wat ik er dan van zal gemaakt hebben.
Die iFrame..... Spotgemakkelijk blijkbaar!...
Thanks!!!! en tot later nog wel.
Greetz
Jive1

Jive1 · 10 apr 2010

Hey!
Met al jullie hulp, en met ook zelf een beetje zoeken, ben ik gekomen tot het resultaat dat nu online staat op farmingwhiteandreddeerfromparks
Er hangen aan het menu 2 pages, één met aangepaste scroll bar kleuren, en één met de normale scroll bar kleuren.
Eigenlijk was het allemaal héél eenvoudig, maar... Ik was aanvankelijk in de war door het gebruik van het woordje "iFrame", waardoor ik verstaan had dat het met "Frames" te maken zou hebben. Maar dat is het dus niet.
Heel erg bedankt voor de hulp!
Greetz
Jive1

Curahee Q · 10 apr 2010

En nog steeds niet willen luisteren...

I give up...

Jive1 · 11 apr 2010

Sorry, Curahee Q!
Wat bedoel je eigenlijk?
Greetz
Jive1

woony · 12 apr 2010

Jive1 zei:
Hey!
Er hangen aan het menu 2 pages, één met aangepaste scroll bar kleuren, en één met de normale scroll bar kleuren.

I lol'ed

Jive1 zei:
Hey!
Ik was aanvankelijk in de war door het gebruik van het woordje "iFrame", waardoor ik verstaan had dat het met "Frames" te maken zou hebben. Maar dat is het dus niet.
Jive1

then I lol'ed some more...

Archief - window openen in cel van een tabel

Jive1

Legacy Member

Zero Grav

Legacy Member

woony

Legacy Member

Jive1

Legacy Member

woony

Legacy Member

adrianhates

Legacy Member

Jive1

Legacy Member

Jive1

Legacy Member

bicklo

Legacy Member

Jive1

Legacy Member

Curahee Q

Legacy Member

Jive1

Legacy Member

bicklo

Legacy Member

Albireo

Legacy Member

bicklo

Legacy Member

Jive1

Legacy Member

Jive1

Legacy Member

Curahee Q

Legacy Member

Jive1

Legacy Member

woony

Legacy Member