Tekstskift med javascript

F.eks. kan du:

<script type="text/javascript">
var actNum = 0;
function moveTxt(dir){
  actNum = (actNum+dir+texts.length)%texts.length;
  //alert(actNum);
  document.getElementById("showText").innerHTML = texts[actNum];
  document.getElementById("actual").innerHTML = actNum + 1;
}
var texts = new Array();
texts[texts.length] = "Den første tekst";
texts[texts.length] = "Den anden tekst";
texts[texts.length] = "Den tredje tekst";
texts[texts.length] = "Den fjerde tekst";
texts[texts.length] = "Den femte tekst";
texts[texts.length] = "Den sjette tekst";
</script>

<div id="showText"><script type="text/javascript">document.write(texts[0]);</script></div>
<div id="navigateTxt" style="text-align:center;">
  <button onclick="moveTxt(-1);return false;" style="height:20px;padding-top:-2px;">&lt;</button>&nbsp;&nbsp;&nbsp;&nbsp;
  Nummer <span id="actual">1</span>&nbsp;af ialt <script type="text/javascript">document.write(texts.length);</script>&nbsp;&nbsp;&nbsp;&nbsp;
  <button onclick="moveTxt(1);return false;" style="height:20px;padding-top:-2px;">&gt;</button>
</div>

-- og måden du skriver dine tekster ud fra databasen:

var texts = new Array();
<?php
while(din løkke){
?>
texts[texts.length] = "<?php echo row["txt"] ?>";
<?php
}
?>
</script>

Hmmm... Okaj... Jeg har ikke ret meget tjek på javascript... Kan du udpensle det lidt?

Hvadfor noget af det ?-)

-- for du kan jo prøve at kopiere eksemplet ind i et dokument, og så kigge på det i browseren !-)

Kan man godt bruge php indenfor <script>-tagget?

Ja, da, for når det når browseren er php jo fortolket til almindelig html inklusiv javascript !-)

Okay.... Så er der bare det problem at den gerne skulle stoppe så man ikke kan komme længere ned end 1 og højere end hvad det nu er det højeste er... Er det noget du også kan hjælpe med?

Du har ikke prøvet eksemplet ?-)

-- for det gør den allerede ...

JO jeg har.. Og det gør den ikke

Hos mig wrapper den ganske uden problemer i alle mine browsere ...

Men selvfølgelig, hvis du vil have, at den ikke skal wrappe, skal koden laves noget anderledes !-)

Hmmmm... i min bliver den bare ved med at køre rundt og rundt lige så længe man trykker... Prøver den lige af i explorer!

Den wrapper rundt, ja ...

Vil du have at vi disabler pile, når den når en ende, skal der lige noget mere kode til, og oftest er jeg stødt ind i, at folk egentlig helst ville have den til at cykle videre forfra, så det lavede jeg umiddelbart !-)

Nå... Det var jo det jeg spurgte om... Den skal gerne stoppe så man ikke kan komme længere, og så skal billedet (jeg bruger et billede af en lille pil) laves om til et andet billede (en lille grå pil)

Så skal du tilføje:

  if(actNum == 0)
    document.getElementById("moveBack").disabled = true;
  else
    document.getElementById("moveBack").disabled = false;
  if(actNum == texts.length-1)
    document.getElementById("moveForward").disabled = true;
  else
    document.getElementById("moveforward").disabled = false;

-- jeg går ud fra, at du godt kan finde ud af at ændre det til at skifte billede, og at der skal id på billederne !-)

Hmmm... det kunne jeg åbenbart ikke

Nu vil den bare ikke nogen vegne...

if(actNum == 0)
    document.getElementById("moveBack").src = "pilgraa.gif";
  else
    document.getElementById("moveBack").src = "pil.gif";
  if(actNum == texts.length-1)
    document.getElementById("moveForward").src = "pilgraa.gif";
  else
    document.getElementById("moveforward").src = "pil.gif";


-- og på billederne skal der så id på:

<img id="moveBack" src="pilgraa.gif">

<img id="moveForward" src="pil.gif">

Hmmm.... Virker stadig ikke... Hvor skal de stå, er det ikke i moveTxt()?

Joda ...

<script type="text/javascript">
var actNum = 0;
function moveTxt(dir){
  actNum = (actNum+dir+texts.length)%texts.length;
  //alert(actNum);
  document.getElementById("showText").innerHTML = texts[actNum];
  document.getElementById("actual").innerHTML = actNum + 1;
  if(actNum == 0)
    document.getElementById("moveBack").src = "pilgraa.gif";
  else
    document.getElementById("moveBack").src = "pil.gif";
  if(actNum == texts.length-1)
    document.getElementById("moveForward").src = "pilgraa.gif";
  else
    document.getElementById("moveforward").src = "pil.gif";

}
var texts = new Array();
texts[texts.length] = "Den første tekst";
texts[texts.length] = "Den anden tekst";
texts[texts.length] = "Den tredje tekst";
texts[texts.length] = "Den fjerde tekst";
texts[texts.length] = "Den femte tekst";
texts[texts.length] = "Den sjette tekst";
</script>

<div id="showText"><script type="text/javascript">document.write(texts[0]);</script></div>
<div id="navigateTxt" style="text-align:center;">
  <img id="moveBack" src="pilgraa.gif" onclick="moveTxt(-1);">&nbsp;&nbsp;&nbsp;&nbsp;
  Nummer <span id="actual">1</span>&nbsp;af ialt <script type="text/javascript">document.write(texts.length);</script>&nbsp;&nbsp;&nbsp;&nbsp;
  <img id="moveForward" src="pil.gif" onclick="moveTxt(1);return false;">
</div>

-- at ændre det til de forskellige udgaver skulle jo ikke være noget problem, men jeg har så ikke disablingen med ...

function moveTxt(dir){
  if(actNum == 0 && dir == -1 || actNum == texts.length && dir == 1)
    return;
  actNum = (actNum+dir+texts.length)%texts.length;

Hmmmm... Den wrapper altså bare rundt som om intet var hændt...

Billederne ændrer sig heller ikke... Det virker rimelig underligt

Kan du linke til et eksempel ?-)

ligro.hhwl.dk under referencer og "pia i skive"

Her er lidt kode fra min:

<script language="JavaScript" type="text/JavaScript">
var actNum = 0;
function moveTxt(dir){
  if(actNum == 0 && dir == -1 || actNum == texts.length && dir == 1)
    return;
  actNum = (actNum+dir+texts.length)%texts.length;
  //alert(actNum);
  document.getElementById("showText").innerHTML = texts[actNum];
  document.getElementById("actual").innerHTML = actNum + 1;
  if(actNum == 0)
    document.getElementById("moveBack").scr = "../grafik/pil_left_b.jpg";
  else
    document.getElementById("moveBack").scr = "../grafik/pil_left.jpg";
  if(actNum == texts.length-1)
    document.getElementById("moveForward").scr = "../grafik/pil_right_b.jpg";
  else
    document.getElementById("moveforward").scr = "../grafik/pil_right.jpg";
}
</script>

og

<div id="Layer11" style="position:absolute; left:455px; top:0px; width:14px; height:19px; z-index:1">
<a href='#'><img id='moveForward' src='../grafik/pil_right.jpg' width='22' height='17' border='0' onclick='moveTxt(1);return false;'></a>
</div>
    <div id="Layer12" style="position:absolute; left:0px; top:0px; width:18px; height:18px; z-index:2">
<a href='#'><img id='moveBack' src='../grafik/pil_left_b.jpg' width='22' height='17' border='0' onclick='moveTxt(-1);return false;'></a>
</div>

Hvis det kan bringe lidt lys over land!

Kan du ikke til en anden gang huske at bruge enten http:// eller www på links, så de bliver klikbare ?-)

-- men jeg fik overhovedet ikke noget frem, andet end en sikkerhedsadvarsel !-)

-- og jeg fik i hvert fald øje på en blunder ...

  if(actNum == 0 && dir == -1 || actNum == texts.length-1 && dir == 1)

-- hvorfor positionerer du absolut, det virker totalt tåbeligt, medmindre man laver en windows-applikation ...

<div id="Layer11" style="width:470px">
<img id='moveForward' src='../grafik/pil_right.jpg' style="width:22px;height:17px;border:0;cursor:pointer;float:right;' onclick='moveTxt(1);'>
<img id='moveBack' src='../grafik/pil_left_b.jpg' style="width:22px;height:17px;border:0;cursor:pointer;float:left;' onclick='moveTxt(-1);'>
</div>

Hmmm... Det r ikkemig der sætter det op.. ham der er dsigneren bruger bare den visuelle del af dreamweaver

Nu virker stoptingen... Men billede tingen virker ikke... Den er stadig bare grå til venstre og sort til højre... http://ligro.hhwl.dk

.src og ikke .scr !-)

Ahhh...Min fejl... point?

Velbekomme '-)

tak

-- og jeg takker for point ;~}