Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Markeringskedja

Admini

Startad av Admini,
i Webbutveckling

Rekommendera Poster

Admini

Admini

Postad
Postad

Hej

Jag skriver ut månaders namn m.h.a ett script från denna tråd

//eforum.idg.se/topic/341439-ga-tillbaka-i-tiden-5-mandaer/page__p__1607148#entry1607148

 

Nu ser utskriften ut så här:

december ← januari ← februari ← mars ← april ← maj

 

Nu vill jag mha javascript få månaderna att bli markerade, men bara de som är "före" markeringen, så här:

När jag för musen över t.ex. februari i raden ovan, så ska februari t.o.m maj bli markerade (annan bakgrundsfärg och/eller förgrundsfärg)

och när jag är över mars, så ska bara mars, april och maj vara markerade

 

Förstår Ni vad jag är ute efter?

Alltså Fr.o.m nu (maj) t.o.m den månad musen är över

 

tack på förhand

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad

Visa gärna hur din markup (html-koden) ser ut för detta.

 

 

Jag hade tänkt något så här:

function mahMark(iAn)
  {var iBn=iAn;
  document.getElementById("monad"+iBn).style.backgroundcolor="blue";
  }

 

Och sedan i html:

<div id="monad"& i &" "><a href='#' onMouseOver='javascript:mahMark("&i&");'> ← " & strThisMonthName & "</a></div>

 

Men det funkar inte

Länk till kommentar
Dela på andra webbplatser
Cluster

Cluster

Postad
Postad

Du säger "före" men på beskrivningen så låter det som att det ska vara efter? blink.gif

 

Om jag uppfattat dig rätt så är det något sånt här du är ute efter? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>341439 @ eforum</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {
     $(".pseudoHover").addClass('inactiveElement');
     $(".pseudoHover").hover(function () {
       $(".pseudoHover").removeClass("activeElement").addClass("inactiveElement");
       $($(this)).removeClass("inactiveElement").addClass("activeElement");
       $($(this)).nextAll().removeClass("inactiveElement").addClass("activeElement");        
     });
   });
 </script> 
 <style type="text/css">
   .pseudoHover {
     cursor: pointer;
     }

   .inactiveElement {
     background-color: #fff;
     }

   .activeElement {
     background-color: #FFFF99;
     }  
 </style>
</head>

<body>
 <div id="september" class="pseudoHover">september</div>
 <div id="oktober" class="pseudoHover">oktober</div>
 <div id="november" class="pseudoHover">november</div>
 <div id="december" class="pseudoHover">december</div>
 <div id="januari" class="pseudoHover">januari</div>
 <div id="februari" class="pseudoHover">februari</div>
 <div id="mars" class="pseudoHover">mars</div>
 <div id="april" class="pseudoHover">april</div>
 <div id="maj" class="pseudoHover">maj</div>
</body></html>

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

Jag hade tänkt något så här:

function mahMark(iAn)
  {var iBn=iAn;
  document.getElementById("monad"+iBn).style.backgroundcolor="blue";
  }

 

Och sedan i html:

<div id="monad"& i &" "><a href='#' onMouseOver='javascript:mahMark("&i&");'> ← " & strThisMonthName & "</a></div>

 

Men det funkar inte

 

 

function _over(elm)
  {
  document.getElementById('monad-'+elm).style.backgroundColor="blue";
  }
  function _out(elm)
  {
  document.getElementById('monad-'+elm).style.backgroundColor="white";
  }

 

Och sedan i html:

<div id=""monad-"& i &"""><a href='#' onMouseOver='javascript:_over("&i&");' onMouseOut='javascript:_out("&i&");'> ← " & strThisMonthName & "</a></div>

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad 

function _over(elm)
  {
  document.getElementById('monad-'+elm).style.backgroundColor="blue";
  }
  function _out(elm)
  {
  document.getElementById('monad-'+elm).style.backgroundColor="white";
  }

 

Och sedan i html:

<div id=""monad-"& i &"""><a href='#' onMouseOver='javascript:_over("&i&");' onMouseOut='javascript:_out("&i&");'> ← " & strThisMonthName & "</a></div>

 

 

Detta funkar som en onMouseOver bara.

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad

Du säger "före" men på beskrivningen så låter det som att det ska vara efter? blink.gif

 

Om jag uppfattat dig rätt så är det något sånt här du är ute efter? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>341439 @ eforum</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {
     $(".pseudoHover").addClass('inactiveElement');
     $(".pseudoHover").hover(function () {
       $(".pseudoHover").removeClass("activeElement").addClass("inactiveElement");
       $($(this)).removeClass("inactiveElement").addClass("activeElement");
       $($(this)).nextAll().removeClass("inactiveElement").addClass("activeElement");        
     });
   });
 </script> 
 <style type="text/css">
   .pseudoHover {
     cursor: pointer;
     }

   .inactiveElement {
     background-color: #fff;
     }

   .activeElement {
     background-color: #FFFF99;
     }  
 </style>
</head>

<body>
 <div id="september" class="pseudoHover">september</div>
 <div id="oktober" class="pseudoHover">oktober</div>
 <div id="november" class="pseudoHover">november</div>
 <div id="december" class="pseudoHover">december</div>
 <div id="januari" class="pseudoHover">januari</div>
 <div id="februari" class="pseudoHover">februari</div>
 <div id="mars" class="pseudoHover">mars</div>
 <div id="april" class="pseudoHover">april</div>
 <div id="maj" class="pseudoHover">maj</div>
</body></html>

 

Jag förstår inte dollar-tecknet, Är det PHP eller ?...

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad

Nej det är jQuery (javascript-ramverk)

 

Det funkar men de hamnar över varandra, jag vill ha dem i en enda rad efter varann.

Jag vet inte vad det är som får det att bete sig på det sättet.

 

Tacksam för hjälp

Länk till kommentar
Dela på andra webbplatser
Cluster

Cluster

Postad
Postad
Det funkar men de hamnar över varandra, jag vill ha dem i en enda rad efter varann.
Det fixar du ju enkelt med CSS (eller byta från div:ar till inline-element) cool.gif

 

 

 

Edit: bjuder på lite mer kod 

 
.pseudoHover {
  cursor: pointer;
  display:inline;
}

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad

Det fixar du ju enkelt med CSS (eller byta från div:ar till inline-element) cool.gif

 

 

 

Edit: bjuder på lite mer kod 

 
.pseudoHover {
  cursor: pointer;
  display:inline;
}

 

Tack!

Nu funkar det fint :thumbsup:

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...