Hoppa till innehåll

Foto

Markeringskedja


  • Vänligen logga in för att kunna svara
10 svar till detta ämne

#1 Admini

Admini

    Veteran

  • Medlemmar
  • PipPipPipPipPip
  • 2 397 inlägg
  • Ort:Borås

Postad 19 maj 2013 klockan 19:52

Hej
Jag skriver ut månaders namn m.h.a ett script från denna tråd
http://eforum.idg.se...48#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
jalla, jalla, jalla, WWW till alla!

#2 Cluster

Cluster

    Omniscient

  • Moderatorer
  • 8 010 inlägg

Postad 20 maj 2013 klockan 08:04

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

#3 Admini

Admini

    Veteran

  • Medlemmar
  • PipPipPipPipPip
  • 2 397 inlägg
  • Ort:Borås

Postad 20 maj 2013 klockan 13:21

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&");'> &larr; " & strThisMonthName & "</a></div>

Men det funkar inte
jalla, jalla, jalla, WWW till alla!

#4 Cluster

Cluster

    Omniscient

  • Moderatorer
  • 8 010 inlägg

Postad 20 maj 2013 klockan 14:07

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

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>

Redigerat av Cluster, 20 maj 2013 klockan 14:10.
code-taggar


#5 Jonas__B

Jonas__B

    Stjärna

  • Moderatorer
  • 4 437 inlägg
  • Ort:Göteborg

Postad 20 maj 2013 klockan 14:10

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&");'> &larr; " & 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&");'> &larr; " & strThisMonthName & "</a></div>

Jonas :: Moderator - CD/DVD-bränning, Kameror, Print - om trycksaker samt Bildredigering.
 


#6 Admini

Admini

    Veteran

  • Medlemmar
  • PipPipPipPipPip
  • 2 397 inlägg
  • Ort:Borås

Postad 20 maj 2013 klockan 14:30

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&");'> &larr; " & strThisMonthName & "</a></div>



Detta funkar som en onMouseOver bara.
jalla, jalla, jalla, WWW till alla!

#7 Admini

Admini

    Veteran

  • Medlemmar
  • PipPipPipPipPip
  • 2 397 inlägg
  • Ort:Borås

Postad 20 maj 2013 klockan 14:31

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

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 ?...
jalla, jalla, jalla, WWW till alla!

#8 Cluster

Cluster

    Omniscient

  • Moderatorer
  • 8 010 inlägg

Postad 20 maj 2013 klockan 14:33

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

Nej det är jQuery (javascript-ramverk)




#9 Admini

Admini

    Veteran

  • Medlemmar
  • PipPipPipPipPip
  • 2 397 inlägg
  • Ort:Borås

Postad 21 maj 2013 klockan 19:57

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
jalla, jalla, jalla, WWW till alla!

#10 Cluster

Cluster

    Omniscient

  • Moderatorer
  • 8 010 inlägg

Postad 22 maj 2013 klockan 10:44

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) Postad bild



Edit: bjuder på lite mer kod
.pseudoHover {
   cursor: pointer;
   display:inline;
} 

Redigerat av Cluster, 22 maj 2013 klockan 10:48.


#11 Admini

Admini

    Veteran

  • Medlemmar
  • PipPipPipPipPip
  • 2 397 inlägg
  • Ort:Borås

Postad 22 maj 2013 klockan 10:59

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



Edit: bjuder på lite mer kod

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


Tack!
Nu funkar det fint :thumbsup:
jalla, jalla, jalla, WWW till alla!




0 användare läser detta ämne

0 medlemmar, 0 gäster, 0 anonyma medlemmar

 
 

Senaste trådarna

 

pc för alla Senaste nytt


Prenumerera på nyheter

Missa inte PC för Allas
smarta nyhetsbrev
Läs mer om nyhetsbreven här!
  PFA Express
  Veckans surftips
  Extreme
PC för Alla-nätverket