Slice HTML Iframe>?

levworld · 24 feb 2010

Beste,

Ik ben net nieuw op forum dus kan best zijn dat hier de verkeerde vraag stel.
Maar ik heb er een aantal.

Ik ben op het moment een eigen kleinen radio site aan maken. Gewoon puur voor me eigen. Nu zit alleen met probleem dat ik me layout niet kan slice omdat het gewoon niet kan

Maar mijn vraag was wat is de makkelijkste manier om het te leren zo kan het toch nog eerst zelf proberen voordat het aan iemand anders vraag.

Veder zou ik me site zo willen bouwen dat als je van pagina wisselt alleen de pagina verandert. Dus niet dat radio enz allemaal mee veranderen. Ik hoorde iets dat dat met Iframe temaken zou hebben en iemand zij dat dat ook met een scipt gedaan kan worden.

Op moment ben ik ook bezig met iets te zoeken dan moet je denken aan forum alleen dan als een soort prikboard die je op je site kan zetten met allemaal kleine kopjes zo als forum alleen die linken dan door naar andere pagina.

Alvast bedankt
Levi

ecross · 24 feb 2010

Nu zit alleen met probleem dat ik me layout niet kan slice omdat het gewoon niet kan

kun je uitleggen wat je met slice bedoelt?
ik zou frames (en dus ook iframes) af raden de redenen: zie google

levworld · 24 feb 2010

ecross zei:
kun je uitleggen wat je met slice bedoelt?
ik zou frames (en dus ook iframes) af raden de redenen: zie google

Slice de layout omzetten in HTML codes. Zodat je hem kan gebruiken voor op je website.

En hoe kun je veder dan ervoor zorgen dat als je radio op je site hebt staan die niet heel de tijd uit gaat als je van pagina wisselt.

ecross · 24 feb 2010

ik weet niet hoe je layout eruit ziet maar dit is een voorbeeld hoe je zonder frames

index.html:

PHP:

<html>
<head>
<script>
function changeSite(url){
var oRequest = new XMLHttpRequest();
var sURL  = "http://www.website.nl/"+url;

oRequest.open("GET",sURL,false);
oRequest.setRequestHeader("User-Agent",navigator.userAgent);
oRequest.send(null)

if (oRequest.status!=200) alert("Error executing XMLHttpRequest call!");
document.getElementById("tekst").innerHTML = oRequest.responseText;
}
</script>
<body onload='changeSite("pagina1.html")'>
<h1>radio radio rado</h1>
<span onclick='changeSite("pagina1.html")' style='cursor:pointer; text-decoration: underline; color:blue; '>toon pagina 1</span>
<span onclick='changeSite("pagina2.html")' style='cursor:pointer;  text-decoration: underline; color:blue;'>toon pagina 2</span>
<div id='tekst'></div>
</body>
</html>

je moet www.website.nl even aanpassen naar je website
en verder maak je pagina1.html en pagina2.html, voorbeeld:

PHP:

<h1>pagina 1</h1>
dit staat op pagina 1

als je wil dat ik je help met het wat mooier maken moet je je layout even posten

levworld · 24 feb 2010

ecross zei:

ik weet niet hoe je layout eruit ziet maar dit is een voorbeeld hoe je zonder frames

index.html:

PHP:

<html>
<head>
<script>
function changeSite(url){
var oRequest = new XMLHttpRequest();
var sURL  = "http://www.website.nl/"+url;

oRequest.open("GET",sURL,false);
oRequest.setRequestHeader("User-Agent",navigator.userAgent);
oRequest.send(null)

if (oRequest.status!=200) alert("Error executing XMLHttpRequest call!");
document.getElementById("tekst").innerHTML = oRequest.responseText;
}
</script>
<body onload='changeSite("pagina1.html")'>
<h1>radio radio rado</h1>
<span onclick='changeSite("pagina1.html")' style='cursor:pointer; text-decoration: underline; color:blue; '>toon pagina 1</span>
<span onclick='changeSite("pagina2.html")' style='cursor:pointer;  text-decoration: underline; color:blue;'>toon pagina 2</span>
<div id='tekst'></div>
</body>
</html>

je moet www.website.nl even aanpassen naar je website
en verder maak je pagina1.html en pagina2.html, voorbeeld:

PHP:

<h1>pagina 1</h1>
dit staat op pagina 1

als je wil dat ik je help met het wat mooier maken moet je je layout even posten

ecross · 25 feb 2010

zo, ik heb even lopen knutselen en de pagina kun je knip !! het werkt nog niet helemaal in internet explorer maar wel in firefox !!

hier onder de html code:

index.html:

PHP:

<html>
<!-- deze layout is gemaakt door ecross; -->
<head>
<title>web pagina</title>
<LINK REL='StyleSheet' HREF="layout_css.css" TYPE="text/css">
<script>
function changeSite(url){
var oRequest = new XMLHttpRequest();
var sURL  = ""+url;
 
oRequest.open("GET",sURL,false);
oRequest.setRequestHeader("User-Agent",navigator.userAgent);
oRequest.send(null)
 
if (oRequest.status!=200) alert("Error executing XMLHttpRequest call!");
document.getElementById("content").innerHTML = oRequest.responseText;
}
</script>

</head>
<body onload='changeSite("pagina1.html")'>
<!-- dit is het script voor de div met ronde hoeken -->
<div class='wrapper'>
<div class='nifty' style='float:left; width:28%;'>
    <b class='rtop'><b class='r1'></b><b class='r2'></b><b class='r3'></b><b class='r4'></b></b>
     hier de radio?<br>
     hier de radio?<br>
     hier de radio?<br>
    <b class='rbottom'><b class='r4'></b><b class='r3'></b><b class='r2'></b><b class='r1'></b></b>
</div>
<div id='rechthoek'>
<div id='inner_rechthoek'>
	rechthoek<br>
	rechthoek<br>
	rechthoek
</div>
</div>
<div id='langerechthoek'>
	lange rechthoek - 
	<span class='link' onclick='changeSite("pagina1.html")'>pagina 1</span> 
	<span class='link' onclick='changeSite("pagina2.html")'>pagina 2</span>
</div>
<div id='vakje1'>
	<div id='vakje_hoofd1'>&nbsp;</div>
	<div id='vakje_hoofd2'>&nbsp;</div>
	vakje 1<br>
	vakje 1
</div>
<div id='vakje2'>
	<div id='vakje_hoofd1'>&nbsp;</div>
	<div id='vakje_hoofd2'>&nbsp;</div>
	<div id='content'>
	dit is de standaard tekst<br>
	die standaard word geladen.<br>
	</div>
</div>
<div id='vakje1'>
	<div id='vakje_hoofd1'>&nbsp;</div>
	<div id='vakje_hoofd2'>&nbsp;</div>
	vakje 3<br>
	vakje 3<br>
</div>

<div class="push"></div>
</div>
<div id='footer'>
	<div>
	<div id='footer5'>&nbsp;</div>
	<div id='footer4'>&nbsp;</div>
	<div id='footer3'>&nbsp;</div>
	<div id='footer2'>&nbsp;</div>
	<div id='footer1'>&nbsp;</div>
	</div>
	<div id='footertext'>
	<div id='coppy'>coppyright</div>
	<div id='ecross'>mede gemaakt door ecross (</a>)</div>
	</div>
</div>
</body>
</html>

layout_css.css:

PHP:

 html, body {
 height: 100%;
 margin:0px;
 padding:0px;
 }
 .wrapper {
   min-height:87%;
   margin:1% 1% 0 1%;
	padding:0px;
   }
   #footer, .push {
   clear:both;
   }

body{background-color:d8d8d8; }
div.nifty{ margin: 0px 0px 2% 0px; background: white;}
b.rtop, b.rbottom{display:block;background: #d8d8d8;}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: white;}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}
div#rechthoek {background-color:white; margin-left:2%; border:1px solid #acacac; float:left; width:68%;}
div#inner_rechthoek {border:1px solid #000000; width:100%;}
div#langerechthoek {background-color:white; clear:both; border: 1px solid #acacac; width:98%;}
div#vakje1 {float:left; clear:left; background-color:white; border: 1px solid #acacac; margin-top:2%; width:26%;}
div#vakje2 {float:left; background-color:white; border: 1px solid #acacac; margin-top:2%; margin-left:2%; width:70%;}
div#vakje_hoofd1 {margin: 2px 2px 0px 2px; background-color:#000000; height:12px;}
div#vakje_hoofd2 {margin: 0px 2px 0px 2px; background-color:#3d3d3d; height:12px;}

span.link {color:blue; text-decoration: underline; cursor:pointer;}

div#footer {clear:both; height:30px; padding:0; margin:0; width:100%;}
div#footer1 {position:relative; bottom:0px; height:3px; background-color:#181818; width:100%;}
div#footer2 {position:relative; bottom:0px; height:11px; background-color:#202020; width:100%;}
div#footer3 {position:relative; bottom:0px; height:13px; background-color:#2b2b2b; width:100%;}
div#footer4 {position:relative; bottom:0px; height:2px; background-color:#373737; width:100%;}
div#footer5 {position:relative; bottom:0px; height:1px; background-color:#000000; width:100%;}
#footertext {color:white; position:relative; bottom:22px;}
#coppy {float:left;}
#ecross {float:right;}
#ecross a {color:white;}

ik wist niet helemaal in welk stukje de linkjes en de andere pagina's moeten dus ik heb maar wat gedaan. Als dat anders moet kun je het zeggen!

That Guy · 25 feb 2010

ik zou frames (en dus ook iframes) af raden de redenen: zie google

Okay, dat is inderdaad een goed punt. Maar, om dan over te stappen naar xmlhttprequest, is ook een slecht idee. Ik noem maar wat, 'geen javascript aan' en 'zoekmachine problemen'.

Uiteindelijk komt het neer op het volgende: wil je een goede pagina hebben, moet je a). goede (geen-js) fallback hebben of b). een andere oplossing zoeken. Onder andere oplossingen vallen bijvoorbeeld opties als een 'popup' openen met daarin de radio.

Goede fallback met deze 'ajax' dingen is lastig, maar kan zeker wel gemaakt worden als je je er wat in verdiept. Hint: noscript-tag kan best helpen. Event handlers die doorbubelen tegengaan ook.

Daarnaast: als je nog HTML aan het leren bent moet je NIET gelijk met (moeilijke) javascript beginnen, want dan raak je alleen maar in de war.

Nu, wat ge***** op ecross' script:

1 - oRequest.setRequestHeader("User-Agent",navigator.userAgent); is overbodig. Dit is een call die door je browser wordt gemaakt, dus doet die dat zowiezo zelf wel.

2 - var oRequest = new XMLHttpRequest(); werkt alleen in niet-IE-browsers. IE gebruikt activeX hiervoor.

3 - <body onload='changeSite("pagina1.html")'> gebruik event listeners ipv. onX-events. Zie ook punt 5

4 - tags met kleine letters (xhtml iig)

5 - javascript en html zoveel mogelijk scheiden, geen JS in je head als het niet nodig is

6 - Vanwaar de 5 verschillende footers???

:thumb:

ecross · 26 feb 2010

Nu, wat ge***** op ecross' script:

1 - oRequest.setRequestHeader("User-Agent",navigator.userAgent); is overbodig. Dit is een call die door je browser wordt gemaakt, dus doet die dat zowiezo zelf wel.

2 - var oRequest = new XMLHttpRequest(); werkt alleen in niet-IE-browsers. IE gebruikt activeX hiervoor.

3 - <body onload='changeSite("pagina1.html")'> gebruik event listeners ipv. onX-events. Zie ook punt 5

4 - tags met kleine letters (xhtml iig)

5 - javascript en html zoveel mogelijk scheiden, geen JS in je head als het niet nodig is

6 - Vanwaar de 5 verschillende footers???

1+2+3 - javascript is niet mijn sterkste kant, ik had dit ook van een andere internet pagina, ik ben zelf ook bezig om dat 'ajax' onder de knie te krijgen. Normaal zou ik namelijk php gebruiken maar dan moet de pagina elkekeer als er op een knop word gedrukt herladen worden en dat werkt (denk ik) niet goed met de radio. Dit is wat ik nu heb. Kun je er misschien nog even naar kijken? (zie hier onder)
4 - dat is inderdaad slordig. ik was even vergeten hoe je je een extern css moest aanroepen en dus even gekopieerd, verder heb ik er wel op gelet
5 - het was niet zo veel javascript en ik wou het simpel houden

6 - in het voorbeeld is de footer 5 verschillende kleurtjes in de footer dus ik vond het wel netjes om dat er in te doen.

dit is de aangepaste ajax code:

PHP:

<!--
// Get the HTTP Object
function getHTTPObject()
{
	if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
	else if (window.XMLHttpRequest) return new XMLHttpRequest();
	else 
	{
	alert("Your browser does not support AJAX.");
	return null;
	}
}
// Change the value of the outputText field
function setOutput()
{
	if(httpObject.readyState == 4)
	{
	document.getElementById('tekst').innerHTML = httpObject.responseText;
	}
}
// Implement business logic
function changeSite(url)
{
	httpObject = getHTTPObject();
	if (httpObject != null) 
	{
	httpObject.open("GET", url);
	httpObject.send(null);
	httpObject.onreadystatechange = setOutput;
	}
}
var httpObject = null;
//-->

zo beter?

That Guy · 26 feb 2010

Hm, dat komt meer in de buurt. Omdat dit een beetje off-topic gaat ga is dit mn laatste bericht in dit threat (mocht je meer info willen oid, start er 1 in het javascript forum!

)

Nu, over je code: Voor elke change van pagina maak je een nieuw xmlhttp object aan, dat is niet heel netjes. Nu, hier een 'correctere' code (naar mijn mening)

[JS]function getXMLHttp()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
return false;
}

function getData(dataLoc, async)
{
if(xmlhttp !== false) /* als het bestaat (zie functie hierboven) */
{
xmlhttp.open("GET", dataLoc, async);
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
outputHandle.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
return true;
}
return false;
}

var xmlhttp = getXMLHttp();
var outputHandle = document.getElementById('uitvoer');[/JS]niet getest!

Functie returnt true als het gelukt is, of false als t niet gelukt is. Overgens betekent 'gelukt' niet dat de text al op t scherm staat!

Zoals je ziet maak je maar 1 xmlhttp object aan. Daarnaast ondersteund dit ook asynchrone download, door de async-parameter op true te zetten (als je het niet wilt kan je er 'false' van maken, of m gewoon helemaal weglaten!)

Overgens heb ik ooit ergens eeen tutorial geschreven (moet zeggen lichtelijk outdated, maargoed). Zie mn handtekening voor link.

:thumb:

Slice HTML Iframe>?

levworld

Gebruiker

ecross

Gebruiker

levworld

Gebruiker

ecross

Gebruiker

levworld

Gebruiker

ecross

Gebruiker

That Guy

Meubilair

ecross

Gebruiker

That Guy

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy