+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Ładowanie podstron w div - PROBLEM (/thread-%C5%82adowanie-podstron-w-div-problem)
Ładowanie podstron w div - PROBLEM - RasPL - 15-07-2010
Siemka,
Byłem właśnie w trakcie tworzenia strony www, kiedy napotkałem bardzo frapujący mnie problem
Stworzyłem już gotowy szablon strony, a tu nagle nie mam pomysłu, jak zrobić, żeby liki z MENU otwierały stronę w innym bloku div'a o nazwie "TREŚĆ". Myślałem, aby zastosować pływające ramki IFRAME, które mają bardzo przydatne odniesienie target="nazwa", ale po pierwsze zaburzyłyby moją koncepcje strony, a po za tym wychodzą już z użycia, tak więc po co je wstawiać gdy nie wiadomo kiedy wyjdą do końca z użycia.
Nie zniechęcony zacząłem szukać jakiś informacji w znanej i kochanej przez nas wszystkich wyszukiwarce google. Pierwsze co napotkałem to było coś w kodzie PHP z poleceniem include, ale ni jak nie znam się na PHP, tak wiec gdy zacząłem coś z tym kombinować to tylko dziwne znaczki mi wychodziły XD. Doszedłem do wniosku, że szkoda moich nerwów, po za tym żeby strona poprawnie chodziła trzeba ją umieścić na serwerze obsługującym kod PHP.
W trakcie moich dwudniowych poszukiwań napotkałem się na dobre rozwiązanie napisane w JavaScript. Powiem, że nawet dobrze działa i mój dylemat byłby rozwiązany. Jednak jest małe ale. Skrypt poprawnie działa w Firefox'ie, Operze, ale za Chiny ludowe nie w IE. Wyskakuje błąd w wierszu 14(plik: link.js ) "ODMOWA DOSTĘPU".
Tak więc zwracam się do was ekspertów piszący nie od dziś, mających większe doświadczenie ode mnie i przede wszystkim znających JavaScript [ja niestety nie ;( ] - POMÓŻCIE LUDZIE, bo jak widzę po różnych forach problem nadal stanowi duże utrudnienie.
Tu macie moje wypociny:
index.html
Kod:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="pl"
xml:lang="pl">
<!-- GŁOWA STRONY --!>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="Strona o elektronice. Różne projekty itp." />
<meta name="Keywords" content="elektronika; elektryka; elektrotechnika;" />
<title>ras-elektronix.pl</title>
<script type="text/javascript" src="link.js"> </script>
<!-- STYLE CSS --!>
<link rel="stylesheet" href="style.css" type="text/css" />
<?xml-stylesheet type="text/css" href="style.css" ?>
<style>
BODY
{
background-image:url(obrazki/tlo.png);
background-color:#E9FFBF;
color:#000;
margin:0px 0px 0px 50px;
padding:0;
text-align:left;
}
</style>
<!-- Koniec STYI --!>
</head>
<!-- CIAŁO STRONY --!>
<body onload="getData('glowna.html');">
<div id="KONTENER">
<!-- LOGO --!>
<div id="LOGO">
<img src="obrazki/logo.png" id="LOGO"/>
</div>
<!-- BANNER --!>
<div id="BANNER">BANNER</div>
<!-- MENU --!>
<div id="MENU">
<p id="A1">MENU</p>
<ul id="U1">
<li><a href="" onclick="getData('glowna.html'); return false">HOME</a></li>
<li><a href="" onclick="getData('eva1.html'); return false">Evangelion 1.11</a></li>
<li><a href="" onclick="getData('eva2.html'); return false">Evangelion 2.22</a></li>
<li><a href="" onclick="getData('eva1f.html'); return false">Evangelion 1.11<br/>film</a></li>
</ul>
<br/>
</div>
<!-- TREŚĆ --!>
<div id="TRESC">
</div>
<!-- STOPKA --!>
<div id="STOPKA">
by RasPL gg:2376989 e-mail: [email protected]
</div>
</div>
</body>
</html>style.css
Kod:
<!-- STYLE CSS --!>
<style type="text/css">
BODY
{
background-image:url(obrazki/tlo.png);
background-color:#E9FFBF;
color:#000;
margin:0px 0px 0px 50px;
padding:0;
text-align:left;
}
DIV#LOGO
{
width:905px;
background-color:#E9FFBF;
margin:0;
}
DIV#BANNER
{
width:905px;
background:#fff000;
border-top:3px dashed #E90707;
border-bottom:3px dashed #E90707;
color:red;
font-weight:bold;
text-align:center;
text-decoration:blink;
}
DIV#KONTENER
{
width:900px;
background:none;
background-color:#E9FFBF;
padding-right:5px;
margin:0;
float:left;
position:absolute;
}
DIV#MENU
{
width:100px;
height:100%;
background-color:#99CC00;
float:left;
margin:5px 0px 0px 0px;
padding:0;
text-align:left;
border:3px double #000;
}
DIV#TRESC
{
width:770px;
height:100%;
background-color:#339966;
float:right;
margin-top:5px;
padding:5px;
border:1px solid #003300;
}
DIV#STOPKA
{
width:885px;
background:#2C4007;
padding:10px;
float:left;
margin-top:5px;
font-size:8pt;
font-weight:bold;
text-align:center;
color:#E9FFBF;
}
/* STYLE AKAPITÓW \*/
P#A1
{
font-family:times new roman;
font-weight:bold;
text-align:center;
color:#fff;
margin-top:0;
background:#252D15;
border-bottom:3px double #fff ;
}
P#B1
{
font-family:times new roman;
font-size:10pt;
margin-top:5px;
}
/* STYLE LIST \*/
UL#U1, UL#U1 LI
{
list-style-type:none;
text-align:left;
background:#C3DAA0;
padding:0;
font-size:10pt;
}
UL#U1
{
border:1px solid #99CC00;
margin:1px;
}
UL#U1 LI
{
border:1px solid #000;
}
UL#U1 a:link, UL#U1 a:visited
{
display:block;
font-weight:bold;
color:#000;
text-decoration:none;
border-left:10px solid #3E522A;
padding-left:5px;
}
UL#U1 a:hover
{
text-align:left;
background:#EBF8D5;
border-left:20px solid #3E522A;
padding-left:5px;
}
/* OBRAZKI \*/
IMG#LOGO
{
width:100%;
height:100%;
}
</style>
<!-- Koniec STYI --!>link.js
Kod:
var ObiektXMLHttp = false
if (window.XMLHttpRequest)
{
ObiektXMLHttp = new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
biektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
function getData(zrodlo)
{
if(ObiektXMLHttp)
{
ObiektXMLHttp.open("GET", zrodlo)
ObiektXMLHttp.onreadystatechange = function()
{
if (ObiektXMLHttp.readyState == 4)
{
document.getElementById('TRESC').innerHTML=ObiektXMLHttp.responseText
}
}
ObiektXMLHttp.send(null)
}
}P.S. Dzięki wam wszystkim, którzy dojrzycie ten frapujący problem
RE: Ładowanie podstron w div - PROBLEM - Engine - 15-07-2010
JS:
Kod:
<script type="text/javascript">
function addborder(did)
{
var i;
for(i=1; i<=4; i++)
{
var n = parseInt(i);
document.getElementById("o"+n).style.border='0';
document.getElementById("o"+n).style.background='0';
document.getElementById("o"+n).style.padding='0';
}
}
</script>HTML:
<a href="ogiery.html#o1" onclick="addborder('o1')"><span>coś tam</span></a>
.........
i żeby przeskoczyć:
<div id="o1"></div>
Działa w IE.
RE: Ładowanie podstron w div - PROBLEM - RasPL - 15-07-2010
Albo ja jestem taki ciemny, albo nie wiem co XD
dalej mi nie chodzi
BŁĄD "WYMAGANY JEST OBIEKT" przy poleceniu
Kod:
document.getElementById("o"+n).style.border='0';RE: Ładowanie podstron w div - PROBLEM - Engine - 16-07-2010
Daj link do strony, będzie najłatwiej.
RE: Ładowanie podstron w div - PROBLEM - RasPL - 16-07-2010
RE: Ładowanie podstron w div - PROBLEM - Engine - 16-07-2010
Już rozumiem o co Ci chodziło i co chcesz osiągnąć. To tym rozwiązaniem nie załadujesz treści w div, a jedynie możesz przeskoczyć do danego miejsca na stronie np:
http://www.sil-ven-blackarabians.com/ogiery.html
Możesz zrobić to tak:
http://flowplayer.org/tools/tabs/index.html
RE: Ładowanie podstron w div - PROBLEM - Kartofelek - 16-07-2010
Twój kod był dobry, poza poniższym:
Co to jest <!-- .... --!> ??? bo to nie jest komentarz...
UZYWAJ EDYTOROW Z KOLOROWANIEM SKLADNI (np NOTEPAD ++) + FIREBUGA W FIREFOXIE. Bez tego takie kwiatki ci wychodza, ze na samych komentarzach lerzysz.
Poczytaj mój wpis:
http://doman.art.pl/index.php?c=9
Poza tym twoje rozwiazanie tez jest kiepskie. Glowne menu zbudowane z js? A same linki nigdzie nie prowadzace? Tak nie mozna robic! Ogolnie niech prowadza w te pobierane strony. Jak komus nie zadziala Ajax, to chociaz content strony zobaczy.
pozdrawiam
RE: Ładowanie podstron w div - PROBLEM - RasPL - 16-07-2010