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.

Kan ankaren signalera?

IvanB

Startad av IvanB,
i Webbutveckling

Rekommendera Poster

IvanB

IvanB

Postad
Postad

När jag klickar in i menyn, leder #-länken till en div bland många andra i mittkolumnen. Finns det css-kod som gör att den förankrade diven förändras för ett ögonblick, för att man ska tydligt se vilket ville man klicka fram? Ändrar färg eller blinkar en gång eller blir förstorad, vad som helst. Det är lika bra, om förändringen håller i sig till nästa klick, men inte längre.

 

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad

Skulle du kunna vara så generös att berätta, hur jag ska göra? Jag kämpar dag och natt och jag har mycket kvar.

 

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

först och främst måste varje div ha sitt eget id, för att javascriptet skall kunna veta vilken div som den skall kunna ändra.

 

till exempel

<div id="dennadiv1">

 

sedan: på ankarlänken får du lägga till 

<a href="#matratt1" onclick="document.getElementById('dennadiv1').style.bgColor='#ff0000';" > länk</a>

 

eller så kan man lösa det med att göra en funktion, men det behövs kanske inte i detta läge.

 

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad

Tack så mycket, Jonas! Det blir spännande. Jag skrev lite fel, det är inte div jag vill att den ska märkas utan klass, nämligen .matratt men det är säker samma sak.

 

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad

Den funkar inte för mig. Kolla förrätter. Jag ville bifoga csshover.htc som jag hämtade på http://butik.pagina.se/FB_Produkt.asp?art=6360910X för att popup ska funka i IE,, men det gick inte. Men hur som helst, popup funkar i FF. Jag försökte sätta javascript på Vårrullar, men jag gör något fel.

 

 

 

[log]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Containers</title>
<style type="text/css">

body, html {font-family: Trebuchet MS, Helvetica, Arial, Verdana, Sans-Serif; 
font-size: 90%; color: #454545;
behavior:url(css/csshover.htc);}
* {margin:0; padding:0;} 
h1 {
font-size: 24pt;
}
   div#header {
 background-image: url(dekor/backhead.jpeg);
 background-repeat: no-repeat;
 color: #FB0000;
 width: 765px;



text-align:center;
      border:1px solid #069; height: 120px; }

      div#header img {float:left;}

#footer {width: 765px; height: 30px; border-top: 1px solid #999; margin: 10px 0 0 0; clear: both;}
div#wrapper{width:765px; margin:3 auto auto auto;background-color:yellow;}

div#leftCol {float:left; width: 160px; min-height: 600px; height: auto !important;
height: 600px; border: 1px dashed blue; float: left; margin: 0; background-color: #66CC33;}

div#midCol {width: 425px; min-height: 600px; height: auto !important; height:
auto; border: 1px dashed red; float: left;
 display:inline;
}
div#rightCol {float:right ;width: 160px; height: 100%;  border: 1px dashed blue;
 margin: 0; clear:right; background-color:blue;
 }

div#contentarea {float:left; width:650px; background-color:#999;
               background:url(bilder_pres/neg_margin_faux_left.gif) repeat-y top left;
/* bilden för den falska vänstra spalten */ }
div#contentarea2 {float:left; width:650px; background-color:#333;
               background:url(bilder_pres/neg_margin_faux_right.gif) repeat-y top right;
/* bilden för den falska högra spalten */}


.matratt {

   width:425px;
   height: 85px;
 margin-bottom: 5px;
   border: green 1px  solid;

   }
.matratt img {
   float: left;
   margin: 1 2px 1px 0;

   width: 105x;
   height: 80px;



}



.nRatt {
   float:left;
   width:25px;
 margin: 0 2px 0 2px;
   height: 80px;
   text-align:center;
   font:italic 30px times;
   font-weight: bold;
   color: Lime;

   }
.RattText {

   float:left;
   width:210px;
   height:80px;
   margin-left: auto 10px auto 10px;
   font: 12px verdana;

   vertical-align: bottom;
   }
.RattText h1 {
       font: 1.5em verdana;
       font-weight: normal;
       color:red;

       }
.RattPris {
   color: Fuchsia;
   float:left;
   width:30px;
   height:80px;
   font: bold 14px verdana;
   text-align:right;
margin-left: 5px;
   }






/* den vågräta menyn börjar här */
div#matlist {
width:10em; 	/*  *ändrad****/
float:left; /*gör att div-elementet omsluter listan */
border-top:1px solid #069;	/* skapar en linje i div-elementets övre kant */
/*border-bottom:1px solid #069;	 /* skapar en linje i div-elementets nedre kant - borttaget eftersom vi nu har
avdelare */ 
font-size:.8em;	/* ANGE TECKENSTORLEKEN HÄR */
background-color:#CCF; /* ger div-elementet färg */
margin:0 auto auto 10px;
}
div#matlist ul {margin:0 0 0 0px;/* drar in ul från behållarens kant - vänster ändrad till 0 */
width:10em;
}
div#matlist li {
/*float:left;	/* får listan att justeras vågrätt i stället för lodrätt */ 	/*  *ändrad****/
position:relative; /* positioneringskontext för den absolut positionerade listmenyn */
list-style-type:none;	/* tar bort punkterna för varje listpost */
background-color:#FFA; /*anger bakgrunden för menyalternativen */
border-right:1px solid #069; /* skapar linjer mellan li-elementen */
border-left:1px solid #069; /*den första lodräta linjen på menyn */	/*  *LAGTS TILL****/
border-bottom:1px solid #069; /*avdelare på menyn */	/*  *LAGTS TILL****/
}
div#matlist li:first-child {
border-left:1px solid #069; /*den första lodräta linjen på menyn */
}
div#matlist li:hover { 
background-color:#FFF; /*anger bakgrunden för menyalternativen */
}
div#matlist a {
padding:0 6px; /*skapar luft på varje sida om menyalternativen*/
text-decoration:none;	 /* tar bort understrykningen av länken */
color:#069;	/* anger teckenfärgen */
}
div#matlist a:hover {
color:#F33;
}
/* den vågräta menyn slutar här */

/* listmenyn börjar här */
div#matlist ul li ul {
margin:0; /* förhindrar att det tillfälliga värdet från den vågräta menyn ärvs här - OK att ta bort om du också 
tar bort det tillfälliga värdet ovan */ 
margin-left:10em; /*  *LAGTS TILL**FLYTTAR UNDERMENYN SÅ ATT DEN HAMNAR TILL HÖGER OM HUVUDMENYN **/ 
position:absolute; /* positionerar ul-listmenyn i förhållande till dess relativt 
positionerade li-förälder */
width:10em; /*anger menyns bredd - i kombination med bredden 100% för li-elementet gör detta att menyn 
staplas*/
top:-1px; /* LAGTS TILL - JUSTERAR POPOUTMENYN MED DESS FÖRÄLDER */
left:-2px; /*justerar listmenyn exakt under den vågräta menyn */




}
div#matlist ul li ul li {
width:100%; /* får listposterna att fylla ut listbehållaren (ul) */
border-left:1px solid #069; /*  tre sidor på varje listpost på varje listmeny */
border-bottom:1px solid #069;
border-right:1px solid #069;
background-color:#EFF; /* LAGTS TILL - anger bakgrunden för alternativen på undermenyn */
}
div#matlist ul li ul li:first-child {
border-top:1px solid #069; /*högst upp på listmenyn */
}
/* gör att listmenyn visas när användaren pekar på menyn */
div#matlist ul li ul {display:none;} /* döljer listmenyn när användaren inte pekar på menyn */
div#matlist ul li:hover ul {display:block; } /* visar listmenyn när användaren pekar på menyn */

div#matlist ul li ul li:hover ul {display:block;} /* visar underlistmenyn när användaren pekar på listmenyn */ 
div#matlist ul li:hover ul ul {display:none;} /* döljer underlistmenyn när användaren inte pekar på listmenyn */ 

div#matlist ul li ul li ul {left:0px;} /*justerar underpopoutmenyn intill popoutmenyn - lagts till för den vertikala 
menyn-versionen */

/* HACK ZONE - hack för enbart IE */
* html div#matlist ul li ul {
   border-top:1px solid #069; /*övre kanten av listmenyn */
}

/* SLUT PÅ LISTBASERAD MENY */


div#footer{
   background-color: Aqua;
}


#rightCol1,#rightCol2, #rightCol3 { width: 160px; min-height: 200px;
height: auto !important; height: 200px; border: 1px dashed red; margin: 10px 10px 5px 10px;}



#img {width: 180px; height: 300px; padding: 0 10px 20px 0; float: left;}

p {margin: 0 0 5 0;}


/* här följer den briljanta "ingen-extra-kod"-metoden för friläggning (clearing) som
uppfunnits av Tony Aslett - www.csscreator.com */
/* lägg helt enkelt till klassen clearfix till den behållare som måste omge flytande element */
/* läs mer om hur och varför detta fungerar på http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
   content: ".";              /* punkten placeras på sidan som sista objekt innan div-elementet avslutas */
   display: block;          /* inline-element reagerar inte på egenskapen clear */
   height: 0;                 /* ser till att punkten inte är synlig */
   clear: both;               /* får behållaren att frilägga punkten */
   visibility: hidden;             /* försäkrar ytterligare att punkten inte är synlig */
}
.clearfix {display: inline-block;}   /* en fix för IE Mac */

/* härnäst en fix för den fruktade Guillotine-buggen i IE6 */
/* Gömmer för IE-mac \*/
* html .clearfix {height: 1%;}
display: block;}
/* Slut på gömning för IE-mac */
/* slut på "ingen-extra-kod"-metoden för friläggning (clearing) */.clearfix {






</style>
</head>


<body>
<div id="wrapper"  class="clearfix"><div id="wrapper">
<div id="header" >
<img src="dekor/logo_hel.gif" alt="Wok & Indisk take-away"/>
<h1>W I!<span> Välkomna till</span> W I!</h1><h2>En mat-stuga mitt i bussterminalen!</h2>
<h3>Ring och beställ!</h3>





</div>
<div id="leftCol">
<div id="matlist">
<ul>





       <li>Förrätter
           <ul>
             <li><a href="#var_f" onclick="document.getElementById('dennadiv1').style.bgColor=
'#ff0000';" >Vårrullar </a></li>
            <li><a href="#sam_f">Samosa</a></li>
       </li>
       </ul>




       <li>Kycklingrätter
       <ul>
	 <li><a href="#sat_c" onclick="document.getElementById('dennadiv1').style.bgColor=
'#ff0000';">Satay chicken</a></li>		
   <li><a href="#tan_c">Tandoori chicken</a></li>
   <li><a href="#spy_c">Spy chicken</a></li>
   <li><a href="#top_c">Top chicken</a></li>
   <li><a href="#tro_c">Tropical chicken </a></li>
   <li><a href="#yel_c">Yellow chicken</a></li>
       <li><a href="#tom_c">Tom yan chicken</a></li>
       <li><a href="#sha_c">Shanghai noodles</a></li>    
      <li><a href="#tik_c">Tikka masala</a></li>
   <li><a href="#cur_c">Curry</p></a></li>
   <li><a href="#sam_c">Sambal</p></a></li>
       </li>
       </ul>
       <li>Beefrätter
       <ul>
      <li><a href="#sat_b">Satay biff</a></li>
   <li><a href="#gin_b">Ginger bull</a></li>
   <li><a href="#ban_b">Bangkok bull</a></li>
       <li><a href="#wok_n">Wok-wok noodles </a></li>
          <li><a href="#tom_b">Tom yan beef</a></li>
       </li>
       </ul>
       <li>Räkrätter
           <ul>
<li><a href="#chi_r">Chili prawn</a></li>        
           <li><a href="#asi_r">Asian prawn</a></li>
               <li><a href="#sha_r">Shanghai noodles</a></li>
       <li><a href="#tom_r">Tom yam räkor</a></li>    

       </li>
       </ul>
       <li>Lammrätter
       <ul>

       <li><a href="#cur_l">Curry</p></a></li>
   <li><a href="#cur_l">Sambal</p></a></li>    
       </li>
       </ul>
       <li>Nudlar
       <ul>
   <li><a href="#sha_n">Shanghai noodles</a></li>
       <li><a href="#wok_n">Wok-wok noodles </a></li>        
       </li>
       </ul>
       <li>Vegetariska rätter
       <ul>
       <li><a href="#var_f">Vårrullar(förrätt) </a></li>

   <li><a href="#var_f">Samosa (förrätt)</a></li>
<li><a href="#fre_v">Fresh and green</a></li>
   <li><a href="#mix_v">Mix vegetable curry</a></li>
   </li>
       <li><a href="#wok_n">Wok-wok noodles </a></li>    
 </ul>
   </ul>
</div>



</div>
<div id="midCol">
<h2>WOK</h2>
<a name="sat_c">
       <div id="sat_c"  class="matratt">
        <span class="nRatt">1.</span>
    <span class="bild"></span><img src="matbilder/mat_satay_c.gif"></span>
   <span class="RattText"><h1>SATAY CHICKEN</h1>Marinerad kycklingfilé med jordnötsås och  grönsaker </span>
   <span class="RattPris">68:-</span>
   </div></a>

<a name="tan_c">      
           <a name="tan_c"><div class="matratt">
        <span class="nRatt">2.</span>
   <span class="bild"></span><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" /></span>
   <span class="RattText"><h1>TANDORI CHICKEN</h1>Marinerad kycklingngfilé med tandorikryddor och grönsaker </span>
   <span class="RattPris">68:-</span>
   </div></a>

<a name="spy_c">           
<div class="matratt">
        <span class="nRatt">3.</span>
    <span class="bild"></span><img src="matbilder/mat_satay_c.gif"></span>
   <span class="RattText"><h1>SPY CHICKEN</h1> Marinerad kycklingfilé med barbecuesås och grönsaker  </span>
   <span class="RattPris">68:-</span>
   </div></a>

        <a name="top_c">
                   <div class="matratt">
         <span class="bild"><span class="nRatt">4.</span>
   <img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
   <span class="RattText"><h1>TOP CHICKEN</h1> Kycklingfilé med
       asiatisk curry och grönsaker                                            </span>
   <span class="RattPris">68:-</span>
   </div></a>

<a name="tro_c">
               <div class="matratt">
        <span class="nRatt">5.</span>
    <span class="bild"></span><img src="matbilder/mat_satay_c.gif"></span>
   <span class="RattText"><h1>TROPICAL CHICKEN</h1> Kycklingfilé med mangosås och grönsaker </span>
   <span class="RattPris">68:-</span>
   </div></a>

         <a name="yel_c">
                     <div class="matratt">
        <span class="nRatt">6.</span>
   <span class="bild"></span><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
   <span class="RattText"><h1>YELLOW CHICKEN</h1> Kycklingfilé med lemongräs, kokosmjölk och grönsaker     </span>
   <span class="RattPris">68:-</span>
   </div>

<a name="mar_b">

           <div class="matratt">
        <span class="nRatt">7.</span>
   <span class="bild"></span><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" /></span>
   </span>
       <span class="RattText"><h1>SATAY BIFF</h1> Marinerad biff med jordnötsås coch grönsaker   </span>
   <span class="RattPris">68:-</span>
   </div></a>


   <a name="gin_b">        <div class="matratt">
        <span class="nRatt">8.</span>
    <span class="bild"></span><img src="matbilder/mat_satay_c.gif" alt="Tandori chicken"></span>
   <span class="RattText"><h1>GINGER BULL</h1> Biff med ingefära, chili, soya och grönsaker   </span>
   <span class="RattPris">68:-</span>
   </div></a>

   <a name="ban_b">        <div class="matratt">
        <span class="nRatt">9.</span>
    <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
   </span>
       <span class="RattText"><h1> BANGKOK BULL</h1> Biff med thaicurry, kokosmjölk och grönsaker</span>
   <span class="RattPris">68:-</span>
   </div></a>

<a name="chi_r"><div class="matratt">
        <span class="nRatt">10.</span>
    <span class="bild"><img src="matbilder/mat_satay_c.gif" /></span>
   <span class="RattText"><h1>CHLLI PRAWN</h1> Räkor med sötsursås och grönsaker (halvstark)</span>
   <span class="RattPris">78:-</span>
   </div></a>

<a name="asi_r"><div class="matratt">
        <span class="nRatt">11.</span>
   <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
   </span>
       <span class="RattText"><h1>ASIAN PRAWN</h1> Räkor med ingefära, sambal, soya och grönsaker  </span>
   <span class="RattPris">78:-</span>
   </div></a>

<a name="sha_n"><div class="matratt">
        <span class="nRatt">12.</span>
    <span class="bild"></span><img src="matbilder/mat_satay_c.gif"></span>
   <span class="RattText"><h1>SHANGHAI NOODLES</h1> Nudlar med räkor, kycklingfilé, chili, soya och grönsaker </span>
   <span class="RattPris">78:-</span>
   </div></a>

<a name="wok_n"> <div class="matratt">
        <span class="nRatt">13.</span>
   <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
  </span> <span class="RattText"><h1>WOK-WOK NOODLES </h1>Nudlar med biff, curry och grönsaker   </span>
   <span class="RattPris">68:-</span>
   </div></a>

<a name="fre_v"> <div class="matratt">
        <span class="nRatt">14.</span>
    <span class="bild"></span><img src="matbilder/mat_satay_c.gif"></span>
   <span class="RattText"><h1> FRESH AND GREEN</h1> Vegetariskt med ris eller nudlar och grönsaker</span>
   <span class="RattPris">68:-</span>
   </div></a>

<a name="tom_c"> <div class="matratt">
        <span class="nRatt">15.</span>
   <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
 </span>  <span class="RattText"><h1>TOM YAM CHICKEN</h1> Marinerad kycklingfile med tomya-sås och grönsaker </span>
   <span class="RattPris">68:-</span>
   </div></a>

<a name="tom_b"><div class="matratt">
        <span class="nRatt">16.</span>
   <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
 </span>
     <span class="RattText"><h1> TOM YAM BIFF</h1> Marinerad biff med tomyam-sås och grönsaker </span>
   <span class="RattPris">68:-</span>
   </div></a>

<a name="tom_r"><div class="matratt">
        <span class="nRatt">17.</span>
    <span class="bild"></span><img src="matbilder/mat_satay_c.gif"></span>
   <span class="RattText"><h1>TOM YAM RÄKOR</h1> Marinerad räkor med tomyam-sås och grönsaker</span>
   <span class="RattPris">78:-</span>
   </div></a>
      <h2>INDISK</h2>

<a name="var_f">           <div class="matratt"><div id="mat18">

        <span class="nRatt">18.</span>
   <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
 </span>
     <span class="RattText"><h1>VÅRRULLAR</h1> Förrätt <em> (5 stycken)</em>  </span>
   <span class="RattPris">30:-</span>
   </div></div></a>

<a name="sam_f">          <div class="matratt">
        <span class="nRatt">19.</span>
   <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
   <span class="RattText"><h1>SAMOSA "förrätt"</h1> <em>(2 stycken)</em> Indisk delikat grönsakspirog,med mintsås</span>
   <span class="RattPris">30:-</span>
   </div></a>

<a name="tik_c">  <div class="matratt">
        <span class="nRatt">20.</span>
   <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
 </span>
   <a name="tik_c">
     <span class="RattText"><h1>CHICKEN TIKKA MASALA</h1> Kycklingfile, marinerad och grillad med tandoorisås  </span>
   <span class="RattPris">85:-</span>
   </div></a>

<a name="cur_c"><a name="cur_l"> <div class="matratt">
        <span class="nRatt">21.</span>
   <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" />
   <span class="RattText"><h1> CHICKEN eller LAMM CURRY</h1> Traditionell indisk currysås</span>
   <span class="RattPris">75:-</span>
   </div></a></a>

<a name="sam_c"><a name="sam_l">          <div class="matratt">
        <span class="nRatt">22.</span>
   <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" /></span>
   <span class="RattText"><h1>CHICKEN eller LAMM SAMBAL</h1> <em>(Medium stark)</em> tiilagad med sambalsås </span>
   <span class="RattPris">75:-</span>
   </div>
       </a></a>

<a name="mix_v">          <div class="matratt">
        <span class="nRatt">23.</span>
   <span class="bild"><img src="matbilder/mat_tandoori_c.gif" alt="Tandori chicken" /></span>
   <span class="RattText"><h1>MIX VEGETABLE CURRY </h1> Färska blandade grönsaker i sås </span>
   <span class="RattPris">70:-</span>
   </div>
 </div>         
</a>                                  





<div id="rightCol">


<h2>LUNCH 60 kr</h2>
<p>Mån-Fre 11-15</p>
<p>Dagsfärska grönsaker ingår i alla rätter</p>

<p>Mån-fr 10.30 - 20.30</p>
<p>Lör 12.00 - 20.30 </p>
<p>Sön 13.00 - 20.30</p>





</div>

<div id="footer"><p>&copy; 2007 Ivan Bogardi. All Rights Reserved</p><p>ibogardi@gmail.com</p></div>
</div>
</body>
</html>

[/log]

 

 

 

 

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad

Skulle någon kunna hjälpa mig med den ovannämnda javascripten i ovannämnda koden?

När man klickar på en mat i pop-up listan då ska en av .matratterna hoppa fram. Den funkar redan, men det är svårt att se vilkaen man har valt bland de som syns. Därför ska den signaera på något sätt, med bakgrundeller kant.

Jag klarar inte sj'öv.

/Ivan

 

[inlägget ändrat 2007-07-19 00:17:14 av IvanB]

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad
varje div ha sitt eget id, för att javascriptet skall kunna veta vilken div som den skall kunna ändra.

 

Nu alla mina maträtter har sina egna id, t ex vårrullar heter var_f

Jag för musen över Förrätter i vänstra menyn, där ser jag vårrullar, klickar på och var_f i mittkolumnen hamnar överst på sidan. Den är ankaren. Den har sin id.

 

sedan: på ankarlänken får du lägga till

<a href="#matratt1" onclick="document.getElementById('dennadiv1').style.bgColor='#ff0000';" > länk</a>

 

Så ska jag lägga även denna kod i ankaren som ser ut så här:

 

[log]

<div id="var_f" class="matratt">
        <span class="nRatt">18.</span>
   <span class="bild"><img src="bilder/mat_tandoori_c.gif" alt="VÅRRULLAR" />
 </span>
     <div class="RattText"><h3><a name="var_f">VÅRRULLAR</a></h3><h3> förrätt,  <em>(5 stycken)</em></h3></div>
   <span class="RattPris">30:-</span>
   </div>

[/log]

 

Så behöver jag inte skriva någonting i själva länken i sidomenyn? Ska jag skriva 

#var_f

där du skrev 

#matratt1

och i så fall vad ska jag skriva istället för 'dennadiv1'?

 

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

För att t ex påverka var_f blir det:

onclick="document.getElementById('[b]var_f[/b]').style.bgColor='#ff0000';"

 

[inlägget ändrat 2007-07-20 11:01:27 av Micke_skane]

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad

Jag vet ingenting om javascripter, så jag helt enkelt stoppade in koden i linken:

 

 

 <li><a href="#var_f"onclick="document.getElementById('var_f')
.style.bgColor='#ff0000';">Vårrullar </a></li>

 

Tydligen, det var inte rätt, för att det händer inte ett smack. Ska man kanske skriva någonting i html-head också?

 

 

[inlägget ändrat 2007-07-20 11:25:07 av IvanB]

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad

Vad ska jag skriva till för att ankaren ska inte lägga sig högst uppe, utan längre ner, helst mitt i sidan?

En möjlighet är att placera ankaren en div ovanför den ankrade diven, men det finns säkert elegantare lösning.

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

Du kan använda scrollBy() som du anropar i onclick.

onclick="document.getElementById('val_f').style.backgroundColor='#ff0000';setTimeout('scrollIt()',10);

Sen skapar du en funktion som du lägger innan </head>:

<script type="text/javascript">
function scrollIt() {
window.scrollBy(0,-parseInt(window.screen.height/2));
}
</script>

Då borde den hamna i mitten.

Vill du bara ändra den en liten bit ifrån ovankanten får du ändra andra koordinaten(y) i scrollBy(x,y).

 

Edit: en tanke som slog mig är att det blir fel om man placerar det i mitten.

Då syns ju bara samma div. Bör bara justeras ifrån kanten men det kan ändå bli fel o man inte kollar var man är på sidan innan man försöker justera värdet med scrollIt().

Får se om jag hinner testa något annars kanske någon annan hinner...

 

[inlägget ändrat 2007-07-20 12:48:38 av Micke_skane]

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

Pröva att lägga en return false; sist i din ankares onclick:

<li><a href="#var_f" onclick="document.getElementById('var_f')
.style.backgroundColor='#ff0000';return false;">Vårrullar </a></li>

 

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad

Det var svårare, än jag trodde. Jag gjorde allt vad du sa, men nu funkar inte länken alls.

 

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad

Nej, förlåt, jag la till din tips också med return false; med då försvann länken. Den funkade inte med Mickes heller.

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

TEstade detta som allra hastigast och det fungerar på dem diven som har tillräcklig yta under sig...

[log]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="sv" />
<script type="text/javascript">
function scrollIt() {
//window.scrollBy(0,-parseInt(window.screen.height/2));
window.scrollBy(0,-100);
}
</script>
</head>

<body>
<a href="#micke" onclick="document.getElementById('micke').style.backgroundColor='#ff0000';setTimeout('scrollIt()',10);">Scroll till Micke</a><br />
<a href="#isak" onclick="document.getElementById('isak').style.backgroundColor='#ff0000';setTimeout('scrollIt()',10);">Scroll till Isak</a>
<div id="x">x-diven</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="micke">Micke</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="isak">Isak</div>

</body>
</html>

[/log]

 

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad

"Skroll till Isak" funkade inte för mig.

Jag trodde, att det fanns färdiga lösningar för sådant.

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

Vad menar du med att det inte fungerade?

Tänk på att det inte finns något under den diven, därför försvinner den ner under fönsterkanten i botten.

Det är scrollBy() som gör det.

 

Har dock inte tid/ork att göra något seriöst förslag på det just nu, tyvärr!

Någon annan som känner sig motiverad?

 

Länk till kommentar
Dela på andra webbplatser
IvanB

IvanB

Postad
  • Trådskapare
Postad

Ja, nu ser jag, Isak gömde sig under listen.

Men - för den som tar över - jag skulle vilja ha både Micke och Isak mitt i skärmen, med alla <br>-kompisar över och under.

 

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...