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 373 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
  • 7 983 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 373 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
  • 7 983 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 382 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 373 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 373 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
  • 7 983 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 373 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
  • 7 983 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 373 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 inläggen

 

Senaste trådarna

pc för alla Senaste nytt

  • TV Sverige: Behändig box för hemmaplan

    Igår, kl 14:00
    TV Nordics lilla mediaspelare är som ett mellanting mellan Apple TV och Google Chromecast. Fast något snålt med funktioner och väldigt, väldigt sve...
  • Microsoft hånar Siri i ny reklamfilm

    Igår, kl 10:47
    I en ny reklamfilm antyder Microsoft att företagets Cortana är en långt bättre digital assistent än Apples Siri.
  • Pirate Bay satsar mobilt

    Igår, kl 07:00
    Efter nästan tio år har Pirate Bay släppt en ny version av fildelarsajten som nu fungerar på mobila enheter.
  • 6 sajter att besöka i dag på Bellmandagen

    2014-jul-26, 07:01
    I dag, 26 juli, är det Bellmandagen. Det firas på bland annat Skansen, men även du därhemma kanske vill plocka fram några epistlar och sjunga och s...
  • 13 gratis tidsfördriv för regniga sommardagar

    2014-jul-25, 14:29
    Regn? Inga vänner hemma? Då och då är det skönt med enkla "tidsdödarspel", som får fylla stunderna i väntan på något annat.
  • Här är hotellen med snabbast internet

    2014-jul-25, 10:40
    Är internet viktigt för dig när du är ute och reser finns det nu en smart guide som visar hotellen med de bästa internetkopplingarna världen över.
  • Här är nya betan av Chrome för Android

    2014-jul-25, 07:32
    Den senaste testversionen av Chrome för Android ger en försmak av hur nästa version av Android kommer att se ut.
  • Här är Firefox 31

    2014-jul-24, 12:30
    Mozilla släppte i går Firefox 31 som innehåller en bunt buggfixar samt bättre skydd mot skadliga webbplatser.
  • Microsoft skrotar Surface Mini

    2014-jul-24, 02:49
    Än en gång har Microsoft tvingats göra en nedskrivning av Surface och antyder att planerna på en Surface Mini har lagts ned.
  • Här är nya Google Play

    2014-jul-23, 10:44
    Google meddelade i dag företaget släpper en ny version av app-butiken Google Play.

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