Gå til innhold

Åpne side i div


Anbefalte innlegg

Holder på å ordne meg en hjemmeside. Sitter da med et spørsmål.

 

Jeg har laget siden i div koder. Så lurer jeg på om det er mulig å åpne en side i en div, f.eks. div#right som jeg vil bruke. Og hvordan kode jeg bruker for å få den åpnet i den.

 

Håper dere skjønner hva jeg vil ha svar på. Og på forhånd takk for alle svar :)

Lenke til kommentar
Videoannonse
Annonse

Om det er dynamisk på klient du mener:

Med jquery, laste side med get:

$( function () {
   $("#right").load(urlToMyPage);
});

 

Laste resultat av post:

$( function () {
   $.ajax({
       type: 'post',
       url: 'urlTilMinDynamiskeSide',
       data: {parameter1: value1, parameter2, value2...},
       success: function (response) { $("#right").html(response); },
       dataType: 'html'
   });
});

 

 

 

Mener du statisk er det whatever #include/loadPartial direktiv plattformen din har.

Endret av MailMan13
Lenke til kommentar

Om det er dynamisk på klient du mener:

Med jquery, laste side med get:

$( function () {
   $("#right").load(urlToMyPage);
});

 

Laste resultat av post:

$( function () {
   $.ajax({
       type: 'post',
       url: 'urlTilMinDynamiskeSide',
       data: {parameter1: value1, parameter2, value2...},
       success: function (response) { $("#right").html(response); },
       dataType: 'html'
   });
});

 

 

 

Mener du statisk er det whatever #include/loadPartial direktiv plattformen din har.

 

Hm. Dette hjalp meg ikke så mye. Evnt. er det jeg som ikke skjønner.

Hjemmesiden er da satt opp i CSS, men forsiden er satt opp i forskjellige div områder.

Kan jeg ved hjelp av koder bruke de forskjellige div områdene på nesten samme måte som f.eks. frames. Legger ved et bilde så du/dere kanskje skjønner bedre hva jeg vil ha til...

 

Trenger dere kodene også så er det for siden her;

[quote][code]
<!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">
<head>
<title>CV- Foto</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
.style2 {color: #ffffff}
-->
</style>
</head>
<body>

<div id="wrap">

<div id="header">
</div>

<div id="right">

<h2> </h2>
<p> </p>
</div>

<div id="left"> 

<h3><a href="index.html" class="style1">CV - Foto</a></h3>
<blockquote>
 <blockquote>
   <blockquote>
     <p align="left"> Hesteleiken</p>
   </blockquote>
 </blockquote>
</blockquote>
<h3><a href="http://c-vangen.com">C-vangen</a></h3>
</div>
<div style="clear: both;"> </div>

<div id="footer">
 <p>Siden er laget av Cecilie Vangen. Alle bilder og tekst er COPYRIGHT!  </p>
</div>
</div>


</body>
</html>

[/code]

post-206761-1278361942,1666_thumb.png

Lenke til kommentar

Mer om jQuery her: http://docs.jquery.com/Tutorials

 

Kort sagt: Å laste innhold dynamisk i html manuelt er et h***** av nettleserspesifikke quirks og bugs som man ikke ønsker å forholde seg til. jQuery pakker inn mye kompleksiteten og "støyen" man vanligvis har i javascript og har allerede implementert svært kort og god syntaks for vanlige operasjoner og mange workarounds for nettleserspesifikke rariteter.

 

"$()" er rot-funksjonen i jQuery. Kalles den med en funksjon som argument er det en snarvei til document.ready eventen, kalles den med en tekststreng er det et query til sidens DOM. I mine eksempler vil f.eks $("#right") returnere en liste med alle elementer med id="right" (forhåpentligvis bare ett siden id'er skal være unike, men det er ikke viktig i denne sammenheng). Tenk på det litt som Linq for javascript om du er kjent med .Net.

 

I tillegg til til spørringen legger jQuery på en del nyttige standard funksjoner og events på elementene. Blandt dem load og ajax funksjonene. load(...) sier rett og slett "Last ned denne URL'en med og vis innholdet i meg".

 

ajax-funksjonen er litt mer kompleks, men ikke mye. Siden det ikke ser ut som du har noe dynamisk innhold på siden er kanskje ikke så interessant nå.

 

Last ned jQuery og includer den på toppen av siden din, så kan du sette inn load() scriptet på denne måten:

<script type="text/javascript>
$( function ( {
   $('#right').load('side.html');
});
</script>

Da vil den, når siden er parset og klar, søke opp alle elementer som har id='right' og sette innholdet i dem til å vise page.html.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...