Avmarkera allt annat

[Admini]

Hej

Hoppas att rubriken är tydlig, men här är problemet:

 

M.h.a onMouseOver (och document.getElementById(id).style.backgroundColor="#dbdbdb";) markerar jag den post jag befinner mig på utav flera, och med onMouseOut avmarkeras rutan.

 

Men nu vill jag gå ett steg längre så här:

 

Att markera rutan med onMouseOver, men markeringen blir kvar, alltså ingen onMouseOut.

Tills jag flyttar musen till en annan ruta och markerar den nya rutan och föregående ruta avmarkeras.

 

Kan man göra det? Alltså att markering av en ruta avmarkerar ALLA andra rutor?

 

Tack på förhand + poäng

[Kim..]

Hm, jag ser två sätt.

 

1.

Antingen spara i en variabel vad du satt som aktivt sist och sätt den som inaktiv innan du sätter den nya som aktiv och spara sedan den nya aktiva i variabeln. blir det av någon anledning ur synk så får man ladda om sidan för att det skall bli rätt igen.

 

2.

Spara alla fältid i en array, loopa igenom arrayn och sätt allt till inaktivt, sätt sedan den nya som aktiv. Skapas fälten på servern så se till att skapa arrayn på servern också och printa ut till javascriptet. Blir aldrig ur synk men med en slö javascriptmotor eller annat så kan man eventuellt få en lite delay, men det tror jag knappt.

 

Återkom om du vill ha hjälp med specifik kod, men du verkade ha koll på det.

[Admini]

Hm, jag ser två sätt.

 

1.

Antingen spara i en variabel vad du satt som aktivt sist och sätt den som inaktiv innan du sätter den nya som aktiv och spara sedan den nya aktiva i variabeln. blir det av någon anledning ur synk så får man ladda om sidan för att det skall bli rätt igen.

 

2.

Spara alla fältid i en array, loopa igenom arrayn och sätt allt till inaktivt, sätt sedan den nya som aktiv. Skapas fälten på servern så se till att skapa arrayn på servern också och printa ut till javascriptet. Blir aldrig ur synk men med en slö javascriptmotor eller annat så kan man eventuellt få en lite delay, men det tror jag knappt.

 

Återkom om du vill ha hjälp med specifik kod, men du verkade ha koll på det.

 

Hej Kim

Tack för förslagen!

Jag vill gärna lära mig båda sätten, det kan komma till användning senare.

Metod 1 försökte jag själv men upptäckte att javascript sparar inte en variabel så här:

 

{

...(s1).style.backgroundColor="#ffffff"; // Inaktivera sparad id

...(id).style.backgroundColor="#bdbdbd"; // Aktivera ny id

var s1=id; // Spara till nästa gång

}

vad gör jag för fel?

 

Metod 1 verkar mycket snabbare och vettigare, men metod 2 är också välkommen

Tack för din hjälp

[Kim..]

vad gör jag för fel?

 

Först och främst måste du deklarera variabeln utanför din funktion, sedan får man först kolla så att s1 faktiskt är satt innan man försöker använda den. Exempelvis enligt nedan.

<script language="JavaScript">
var s1=0;
function doStuff(id) {
if(s1) {
	document.getElementById(s1).style.backgroundColor="#ffffff";
}
document.getElementById(id).style.backgroundColor="#dbdbdb";
s1=id;
}
</script>

 

Sedan fungerar i alla fall detta för mig, bara att fylla på med hur många du vill och namnge dem som du vill, det skall inte spela någon roll.

<div id="hepp" onMouseOver="doStuff(this.id)">Tada för första gången</div><br />
<div id="hopp" onMouseOver="doStuff(this.id)">Tada en gång till</div>

[Kim..]

men metod 2 är också välkommen

 

Såhär borde det bli.

<script language="JavaScript">
var fields = new Array("hepp", "hopp");
function doStuff(id) {
for(i=0;i<fields.length;i++) {
	document.getElementById(fields[i]).style.backgroundColor="#ffffff";
}
document.getElementById(id).style.backgroundColor="#dbdbdb";
}
</script>

 

<div id="hepp" onMouseOver="doStuff(this.id)">Tada för första gången</div><br />
<div id="hopp" onMouseOver="doStuff(this.id)">Tada en gång till</div>

 

Förmodligen finns det dessutom fler sätt att lösa problemet på.

[Cluster]

Vad är det för rutor?Om det bara är när du för musen över rutorna (dvs. inte click el.dyl.) som du vill att något skall hända, varför inte jobba med :hover ?

[Admini]

Först och främst måste du deklarera variabeln utanför din funktion, sedan får man först kolla så att s1 faktiskt är satt innan man försöker använda den. Exempelvis enligt nedan.

<script language="JavaScript">
var s1=0;
function doStuff(id) {
   if(s1) {
       document.getElementById(s1).style.backgroundColor="#ffffff";
   }
   document.getElementById(id).style.backgroundColor="#dbdbdb";
   s1=id;
}
</script>

 

Sedan fungerar i alla fall detta för mig, bara att fylla på med hur många du vill och namnge dem som du vill, det skall inte spela någon roll.

<div id="hepp" onMouseOver="doStuff(this.id)">Tada för första gången</div><br />
<div id="hopp" onMouseOver="doStuff(this.id)">Tada en gång till</div>

 

Tack!

Det funkar precis som jag vill ha det redan med metod 1.

Nu behöver jag bara hitta ett sätt att rulla sidan mjukt upp och/eller ner till önskad ruta (i det här fallet en tabell med unik id)

Kan man göra det med enkelt javascript eller måste jag ha andra metoder?

mvh

[Admini]

Vad är det för rutor?Om det bara är när du för musen över rutorna (dvs. inte click el.dyl.) som du vill att något skall hända, varför inte jobba med :hover ?

 

Ja, det handlar om hover och/eller mouseOver, men bara tills nästa ruta(en tabell med unik id) blir aktiverad. Och då inaktiveras förra rutan.

 

Men förklara gärna vad HOVER är/gör för något

[Cluster]

Inte helt säker på vad det är du egentligen är ute efter... men om det är så att du vill att en table skall få en annan bakgrundsfärg när man för musen över den så räcker det ju (om du inte har en massa annan styling) med att lägga till pseudoklassen :hover på table, typ:

<!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>339296 @ eforum</title>
 <style type="text/css">
   body {
     background-color: #ccc;
     }

   table {
     background-color: #fff;
     border: 1px solid #000;
     margin: 1px;
     }

   table:hover {
     background-color: #FFFF99;
     border: 1px solid #FF9900;
     cursor: pointer;
     }
 </style>
</head>

<body>
 <table id="myTable_one">
   <thead><tr><th>Col One</th><th>Col Two</th></tr></thead>
   <tbody>
     <tr><td>Cell 1:1</td><td>Cell 1:2</td></tr>
     <tr><td>Cell 2:1</td><td>Cell 2:2</td></tr>
   </tbody>
 </table>
 <table id="myTable_two">
   <thead><tr><th>Col One</th><th>Col Two</th></tr></thead>
   <tbody>
     <tr><td>Cell 1:1</td><td>Cell 1:2</td></tr>
     <tr><td>Cell 2:1</td><td>Cell 2:2</td></tr>
   </tbody>
 </table>
 <table id="myTable_three">
   <thead><tr><th>Col One</th><th>Col Two</th></tr></thead>
   <tbody>
     <tr><td>Cell 1:1</td><td>Cell 1:2</td></tr>
     <tr><td>Cell 2:1</td><td>Cell 2:2</td></tr>
   </tbody>
 </table>
</body>
</html>

[Admini]

Inte helt säker på vad det är du egentligen är ute efter... men om det är så att du vill att en table skall få en annan bakgrundsfärg när man för musen över den så räcker det ju (om du inte har en massa annan styling) med att lägga till pseudoklassen :hover på table, typ:

 

Nej det var det inte, men tack ändå

Du kan läsa hela tråden så förstår du vad jag ville ha

Har i alla fall lärt mig HOVER

[Cluster]

Ah, missade att du ville att den "aktiva" bakgrunden skulle stanna kvar till dess att man för musen över en annan tabell.

 

Jag använder mig gärna av jQuery och då skulle du (som alternativ till den lösning som Kim.. kommit med) kunna göra såhär:

<!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>339296 @ eforum</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {

     $(".pseudoHover").addClass('inactiveTable');

     $(".pseudoHover").hover(function () {
       $(".pseudoHover").removeClass("activeTable").addClass("inactiveTable");
       $(this).removeClass("inactiveTable").addClass("activeTable");
     });

     $(".pseudoHover").click(function () {
       $("#response").text("Du tryckte på: " + $(this).attr('id'));
     });

   });
 </script> 
 <style type="text/css">
   body {
     background-color:#ccc;
     }

   table {
     float:left;
     margin: 1px;
     }

   .pseudoHover {
     cursor: pointer;
     }

   .inactiveTable {
     background-color: #fff;
     border: 1px solid #000;
     }

   .activeTable {
     background-color: #FFFF99;
     border: 1px solid #FF9900;
     }

   #response {
     clear:both;
     }
 </style>
</head>

<body>
 <table id="myTable_one" class="pseudoHover">
   <thead><tr><th>Col One</th><th>Col Two</th></tr></thead>
   <tbody>
     <tr><td>Cell 1:1</td><td>Cell 1:2</td></tr>
     <tr><td>Cell 2:1</td><td>Cell 2:2</td></tr>
   </tbody>
 </table>
 <table id="myTable_two" class="pseudoHover">
   <thead><tr><th>Col One</th><th>Col Two</th></tr></thead>
   <tbody>
     <tr><td>Cell 1:1</td><td>Cell 1:2</td></tr>
     <tr><td>Cell 2:1</td><td>Cell 2:2</td></tr>
   </tbody>
 </table>
 <table id="myTable_three" class="pseudoHover">
   <thead><tr><th>Col One</th><th>Col Two</th></tr></thead>
   <tbody>
     <tr><td>Cell 1:1</td><td>Cell 1:2</td></tr>
     <tr><td>Cell 2:1</td><td>Cell 2:2</td></tr>
   </tbody>
 </table>
 <div id="response"></div>
</body>
</html>

 

jQuery kan iof kanske vara lite overkill om det bara är detta du tänkt göra men om du kommer fortsätta och utveckla med js så kan det förenkla en hel del framöver.

[Admini]

Ah, missade att du ville att den "aktiva" bakgrunden skulle stanna kvar till dess att man för musen över en annan tabell.

 

Jag använder mig gärna av jQuery och då skulle du (som alternativ till den lösning som Kim.. kommit med) kunna göra såhär:

<!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>339296 @ eforum</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {

     $(".pseudoHover").addClass('inactiveTable');

     $(".pseudoHover").hover(function () {
       $(".pseudoHover").removeClass("activeTable").addClass("inactiveTable");
       $(this).removeClass("inactiveTable").addClass("activeTable");
     });

     $(".pseudoHover").click(function () {
       $("#response").text("Du tryckte på: " + $(this).attr('id'));
     });

   });
 </script> 
 <style type="text/css">
   body {
     background-color:#ccc;
     }

   table {
     float:left;
     margin: 1px;
     }

   .pseudoHover {
     cursor: pointer;
     }

   .inactiveTable {
     background-color: #fff;
     border: 1px solid #000;
     }

   .activeTable {
     background-color: #FFFF99;
     border: 1px solid #FF9900;
     }

   #response {
     clear:both;
     }
 </style>
</head>

<body>
 <table id="myTable_one" class="pseudoHover">
   <thead><tr><th>Col One</th><th>Col Two</th></tr></thead>
   <tbody>
     <tr><td>Cell 1:1</td><td>Cell 1:2</td></tr>
     <tr><td>Cell 2:1</td><td>Cell 2:2</td></tr>
   </tbody>
 </table>
 <table id="myTable_two" class="pseudoHover">
   <thead><tr><th>Col One</th><th>Col Two</th></tr></thead>
   <tbody>
     <tr><td>Cell 1:1</td><td>Cell 1:2</td></tr>
     <tr><td>Cell 2:1</td><td>Cell 2:2</td></tr>
   </tbody>
 </table>
 <table id="myTable_three" class="pseudoHover">
   <thead><tr><th>Col One</th><th>Col Two</th></tr></thead>
   <tbody>
     <tr><td>Cell 1:1</td><td>Cell 1:2</td></tr>
     <tr><td>Cell 2:1</td><td>Cell 2:2</td></tr>
   </tbody>
 </table>
 <div id="response"></div>
</body>
</html>

 

jQuery kan iof kanske vara lite overkill om det bara är detta du tänkt göra men om du kommer fortsätta och utveckla med js så kan det förenkla en hel del framöver.

 

 

Tack för det!

Kan denna kod göra så att sidan rullar mjukt dvs glider (slides) ner eller upp när jag klickar på en länk som pekar på något på samma sida längre bort?

Eller är mycket avancerad?

Tack

[Cluster]

Det går bra och är inte så avancerat

 

Du lägger till denna kod:

$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
 && location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
     var targetOffset = $target.offset().top;
     $('html,body').animate({scrollTop: targetOffset}, 1500);
     return false;
   }
 }
});

i $(document).ready(function() ovan.

 

Testa hur det funkar samt kika på "källkoden" här: http://eforum.kicks-ass.net/demo/339296/

[Admini]

Det går bra och är inte så avancerat

 

Du lägger till denna kod:

$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
 && location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
     var targetOffset = $target.offset().top;
     $('html,body').animate({scrollTop: targetOffset}, 1500);
     return false;
   }
 }
});

i $(document).ready(function() ovan.

 

Testa hur det funkar samt kika på "källkoden" här: http://eforum.kicks-...et/demo/339296/

 

Wow! så enkelt och så bra!

Tack för det

Jag ska baka in den i min kod imorgon, nu är trött.

Kan man "bromsa in" rörelsen mot slutet så det blir så där fint o mjukt?

Just nu går Text One riktigt mjukt, men Text Two och Text Three glider snabbt och stannar hårt.

mvh

[Cluster]

Det har med duration (i mitt exempel ovan satt till 1500) att göra.

Om den "sträcka" som skall skrollas är kort och animeringen skall hålla på i 1500 millisekunder så blir själva skrollhastigheten långsammare och inbromsningen därmed mjukare. Omvänt så blir skrollhastigheten snabbare om man skall långt ned på sidan, och då blir inbromsningen mer tvärt.

 

Du skulle ju i koden ovan använda värdet i targetOffset (som är hur långt ned på sidan som man skall skrolla för att komma till önskat element) och t.ex. multiplicera med lämplig siffra för att ha en lite mer dynamisk duration. Dock så kan det ju bli galet lång animationstid (och därmed extremt långsam skroll) om elementet man "ska till" är långt ned på en lång sida.

 

Du kan även anpassa animationen ytterligare genom laborera med jQueryUI's utökade easing-effekter: http://jqueryui.com/effect/#easing

T.ex. genom att lägga till dess easeOutCubic:

$.easing.easeOutCubic = function (x, t, b, c, d) {
 return c*((t=t/d-1)*t*t + 1) + b;
}

innan din $('a[href*=#]').click(function()

sen ändrar du annimate-raden till:

$('html,body').animate({scrollTop: targetOffset}, 1500, 'easeOutCubic');

Jag har lagt till detta i min demo samt lagt till ytterligare text på slutet så att du kan testa funktionen samt se komplett kod. Gör dock inte så jättestor skillnad tycker jag.

[Admini]

Såhär borde det bli.

<script language="JavaScript">
var fields = new Array("hepp", "hopp");
function doStuff(id) {
   for(i=0;i<fields.length;i++) {
       document.getElementById(fields[i]).style.backgroundColor="#ffffff";
   }
   document.getElementById(id).style.backgroundColor="#dbdbdb";
}
</script>

 

<div id="hepp" onMouseOver="doStuff(this.id)">Tada för första gången</div><br />
<div id="hopp" onMouseOver="doStuff(this.id)">Tada en gång till</div>

 

Förmodligen finns det dessutom fler sätt att lösa problemet på.

 

Hej igen

Hur fyller jag på den här om jag har typ 50 tals poster på sidan med varsin id:

var fields = new Array("hepp", "hopp");

För det är väl meningen att vi sparar ALLA id:ar innan vi börjar med funktionen

 

Tack än en gång

[Admini]

Hej igen

Hur fyller jag på den här om jag har typ 50 tals poster på sidan med varsin id:

var fields = new Array("hepp", "hopp");

För det är väl meningen att vi sparar ALLA id:ar innan vi börjar med funktionen

 

Tack än en gång

 

Jag förstår att jag måste fylla arrayen med ASP-kod, kanske så här:

 

<script language="javascript">

var numArr = new Array (<%=antInl%>);
var i;
for (i = 0; i < <%=antInl%>; i++)
{
numArr[i] = <%=sId%>,<%=iSvar%>;
}

</script> 

Men är osäker på det ...

[Cluster]

Det måste väl då vara ett bättre tillvägagångssätt att söka upp alla element med en viss klass än att behöva hålla reda på alla unika id:n?

 

Tyvärr har inte alla versioner av alla webbläsare inbyggt stöd för document.getElementsByClassName("dittKlassNamn").

Antingen så får du:

* Bortse från de webbläsare/webbläsarversioner som inte hanterar det

* Skapa en egen funktion som gör det åt dig (se t.ex. här)

* Använda jQuery (eller annat ramverk för den delen) $('.dittKlassNamn') som jag visat här.

[Admini]

Det måste väl då vara ett bättre tillvägagångssätt att söka upp alla element med en viss klass än att behöva hålla reda på alla unika id:n?

 

Tyvärr har inte alla versioner av alla webbläsare inbyggt stöd för document.getElementsByClassName("dittKlassNamn").

Antingen så får du:

* Bortse från de webbläsare/webbläsarversioner som inte hanterar det

* Skapa en egen funktion som gör det åt dig (se t.ex. här)

* Använda jQuery (eller annat ramverk för den delen) $('.dittKlassNamn') som jag visat här.

 

Jag har gjort så här istället (det sätt mina kunskaper tillåter):

Skapa 2 Arrayer, innan SQL-satsen...........

 

<script language="javascript">
var iArr = new Array (<%=antInl%>);
var sArr = new Array (<%=antInl%>);
</script>

Efter SQL, fylla på dem med

While Not rs.Eof
sId=rs("id")
iSvar=rs("svar")%>
<script language="javascript">
iArr[<%=i%>] = <%=sId%>;
sArr[<%=i%>] = <%=iSvar%>;
</script> 

Senare i javascript function, via for-sats avaktiverar jag ALLT och

därefter aktiverar jag det som är aktuellt m.h.a. en if-sats inuti en for-loop:

if ((iArr[i] <= tr) && (iArr[i] > rt) && (sArr[i]!=0)) 

 

Det funkar ok just nu

 

Det som inte funkar däremot är glidningen som funkar bara första gången men alla andra gånger så glider den antingen åt motsatt håll eller för långt ner eller för långt upp...

Jag har ingen Top-länk i alla fall. kanske därför...