divhantering

[jan-erik]

jag har en div som innehåller en meny. Nu vill jag att output från denna meny ska hamna i en annan div.

F n gör jag så att jag sätter en parameter vid ett val, och denna tolkas i outputdiven.

Finns det nåt smartare sätt?

 

[Micke_skane]

Vad menar du med output ifrån en meny?

 

[jan-erik]

Antag att jag delat upp skärmen i divMENY och divOUTPUT.

Om jag har en menypunkt som heter "lista aktuella brudar" i divMENY och vill att denna lista ska visas i divOUTPUT, hur kan jag då göra?

 

[Micke_skane]

På vilket sätt finns denna lista?

 

[jan-erik]

På vilket sätt?????? Den ska synas på skärmen, output från php troligen.

 

[Micke_skane]

Listan måste komma ifrån någonstans.

Var vet bara du

 

Sen om det är Php, Asp eller Javascript som gäller det avgör Var/Hur listan finns och vilket ev serverspråk du använder.

Detta är ju Webbdesign-forumet

 

[jan-erik]

Förstår inte. Jag vill lägga ut en förteckning, med hjälp av ett php-script. det är allt.

 

[Micke_skane]

Nu vet vi att du använder php.

Finns förteckningen som en array, textfil, i en databas...?

 

[jan-erik]

Jag skrev 21.54 i går att det kan vara php.

Jag läser en mysql-tabell, och lägger ut i en tabell.

Om jag kör ett php-script i en viss div så kommer output från detta script förstås att hamna i denna div.

Min fråga gäller hur jag bäst ska initiera detta från en annan div.

Detta måste ju vara ett väldigt vanligt scenario i en menyhantering med själva menyn i en div och resulterande info i en annan.

 

[Mr Andersson]

Om du inte vill ladda om hela sidan måste du använda dig av AJAX. Det finns många trådar som beskriver hur man gör detta.

 

 

 

[Anjuna Moon]

Om du inte vill ladda om hela sidan måste du använda dig av AJAX.

Eller ladda in respetive menyinnehåll i separata lager och sätta display:none på dessa och sedan slå på önskat lager vid klick i den andra listan.

 

[Micke_skane]

Japp, det skrev du men det verkade inte som att det var säkert att du skulle göra det.

Visste inte heller varifrån info skulle komma.

 

Som Mr andersson skrev kan du lösa det genom en Ajax-lösning.

Annars får du skicka med en querystring i url:n och sen hämta ut den info som baseras på vilket värde querystring-variabeln har.

Visa sen info:n i den div du vill.

 

[jan-erik]

Moon:

Med "lager" menar du "layer", eller hur? Jag trodde man slutat använda sådana.

Skulle man kunna göra så att man med CSS lägger upp flera div med samma koordinater, och sedan med hjälp av z-index styr vad som ska synas? Detta har jag provat i ett annat sammanhang.

 

Micke:

Det jag gör nu är att jag sätter en sessionsvariabel vid menyval, och denna variabel läser jag av i den div jag vill ha resultatet. Dett funkar ganska bra, och påminner väl lite om din lösning.

 

Kan någon av er sätt mig på spåret vad gäller ajax-lösning av detta, dvs vilka trådar jag ska leta upp?

 

 

[Anjuna Moon]

Med "lager" menar du "layer", eller hur? Jag trodde man slutat använda sådana.

Nä, ett lager är ett element med block-egenskaper. Vanligast är att man använder DIV.

 

Skulle man kunna göra så att man med CSS lägger upp flera div med samma koordinater, och sedan med hjälp av z-index styr vad som ska synas?

Visst går det att använda z-index också, men vanligare är att du gör alla lager utom ett osynligt (style="display:none;"). En funktion för visning kan vara ex.

 

var selDiv;
function ShowLayer(id) {
 if (selDiv) selDiv.style.display='none';
 selDiv=document.getElementById(id);
 selDiv.style.display='block';
}

 

 

[inlägget ändrat 2008-03-13 08:00:19 av Anjuna Moon]

[Anjuna Moon]

Dett funkar ganska bra, och påminner väl lite om din lösning.

Nej, min lösning kräver ingen omladdning av sidan.

 

Kan någon av er sätt mig på spåret vad gäller ajax-lösning av detta, dvs vilka trådar jag ska leta upp?

Ajax må vara hett nu, men det är med stor sannolikhet onödigt i det här fallet, såvida det inte handlar om väldigt stora mängder data som måste läsas in för samtliga menyval.

 

[inlägget ändrat 2008-03-13 08:10:33 av Anjuna Moon]

[jan-erik]

verkar vara smart lösning med layers, och jag såg att dreamweaver har bra stöd för detta. Sen var jag ute o googlade och kunde då se att lösningen jag nämnde med z-index verkar vara användas en hel del. vad är nackdelen med denna lösning? krävs det omladdning?

 

Håller med om att ajax nog är att skjuta över målet i mitt fall.

 

[Micke_skane]

krävs det omladdning?

Nej, och är det bara små mängder info så lös det med lager och javascript.

 

[jan-erik]

 

var selDiv;
function ShowLayer(id) {
 if (selDiv) selDiv.style.display='none';
 selDiv=document.getElementById(id);
 selDiv.style.display='block';
}

 

Skulle du kunna förtydliga denna kod lite?

 

 

 

 

[jan-erik]

http://www.willmaster.com/blog/css/show-hide-floating-div.php

Detta verkar väl vara en vettig beskrivning?

 

[Micke_skane]

// sätt en global variabel som kommer innehålla vald div

var selDiv;

 

// här startar funktionen och tar emot en parameter som läggs i variabeln id

function ShowLayer(id) {

 

// Kolla om "selDiv" är synlig, dölj den i så fall(dolda div:s igen)

if (selDiv) selDiv.style.display='none';

 

// Ge selDiv värdet av vilken div(id) man nu skickat med som parameter

selDiv=document.getElementById(id);

 

// Visa den nya div:n

selDiv.style.display='block';

 

[Anjuna Moon]

Sen var jag ute o googlade och kunde då se att lösningen jag nämnde med z-index verkar vara användas en hel del.

Nackdelen är att du då måste positionera samtliga lager till samma position, vilket inte krävs om du använder display-metoden. Så länge ett lager inte har satt display:none så tar det upp utrymme på sidan. För två på varandra följande lager hamnar det andra direkt under (y-koordinatmässigt, inte z) det första. Om däremot alla lager utom ett är "tänt" så kommer respektive tända lager alltid att ligga på samma position.

 

[jan-erik]

Nu har jag följande:

 

function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}

 

 

 

<div 
  id="menkal" 
  style="display:none; 
     position:absolute; 
     left:300px; 
     top:100px;  ">
<?  include "TJkalBmax.php"; ?>
</div>
<div 
  id="menfor" 
  style="display:none; 
     position:absolute; 
     left:300px;
     width:400; 
     top:100px;">
<?  include "chat1.php"; ?>
</div>

 

 

<input 
name="menkal " type="button" title="kalender"value="Kalender"
onclick="ShowContent('menkal'); return true;"
  href="javascript:ShowContent('menkal')">

  <input name="menfor " type="button" title="kalender" value="Forum"
onclick="ShowContent('menfor'); return true;"
  href="javascript:ShowContent('menfor')">

 

Det funkar utmärkt, men ett problem är att övriga fönster inte stängs när jag öppnar ett nytt. Går detta att fixa till på ett även för mej begripligt sätt?

 

[Anjuna Moon]

Går detta att fixa till på ett även för mej begripligt sätt?

Ja, mitt exempel visade exakt hur det skulle se ut för att detta skulle fungera.

 

 

[Micke_skane]

Såg du på förklaringen jag gav dig på funktionen du frågade om?

Använd den funktionen.

 

[jan-erik]

Ok, men jag kan väl inte bara byta ut ShowContent mot din Showlayer?