WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Vad skriva i href om ingenting skall hända (https://www.wn.se/forum/showthread.php?t=18910)

swan 2007-01-26 09:10
Jag har en länk som jag endast använder för att trigga en javascriptfunktion vid onmouseover. Ingenting skall hända när man klickar på länken.

Vad skall jag sätta href till att vara?

Sätter jag den till href="#" så hamnar jag alltid överst på sidan. Sätter jag den till href="javascript:void(0)" så händer det absolut ingenting.

Är void(0) det bästa sättet att göra "ingenting", och vad innebär egentligen void(0)?

DeSoto 2007-01-26 09:16
Det bästa är väl att inte använda en anchor-tag, utan använda div/span och lägga onclick-event på den. Med CSS kan du göra så att man får en pekar-hand när man hovrar elementet. Tänk på att det är snyggast att tilldela eventet med javascript, och inte <div onclick="">. Dvs, sätt id på elementet, hämta det med getElementById() och tilldela onclick-event-handlern.

viod(0) betyder i stort sett bara att "inget ska hända". Läs mer här annars: http://www.tizag.com/javascriptT/javascriptvoid.php

swan 2007-01-26 09:53
Tack för tipset!

Jag skulle gärna vilja tilldela eventet med javascript, som du föreslår - men har problem att göra det då jag inte vill ge varje "länk" ett eget id utan endast en klass. Men det kanske går att lösa på något annat sätt?

Kolla på den här koden så förstår du vad jag menar. Jag vill kunna klicka på valfri rubrik (class="rubrik") och dölja underliggande lista.

<ul>
<li class="rubrik">rubrik 1
<ul>
[*]Inställningar
[*]Hjälp
[/list]<li class="rubrik">rubrik 2
<ul>
[*]Logga in
[*]Kontoinformation
[*]Diverse[/list][/list]
Har du något tips på hur jag kan göra detta?

DeSoto 2007-01-26 10:03
Du menar att ifall man klickar på t.ex. "Hjälp", så ska rubrik 1, Inställningar och Hjälp döljas? Eller menar du att man ska trycka på "rubrik 1" för att bara dölja listan under?

swan 2007-01-26 10:10
Klickar man på "rubrik 1" så skall listan under (inställningar, hjälp) döljas.

Jag skulle kunna ge id till både rubrik 1 och den underlinggande <ul>, men då skulle jag behöva en särskild funktion till respektive rubrik. Det måste finnas något enklare sätt där man kan generellt kan koda

om klick på class="rubrik" så skall den underliggande <ul> döljas

Ps. Jag lyckades få rubriken att likna en länk så här
.rubrik {
color: #36c;
text-decoration: underline;
cursor: pointer;
}

DeSoto 2007-01-26 10:36
Något i den här stilen? :)

Kod:
<html>
<head>
<script type="text/javascript">
<!--
window.onload = function()
{
  var li = document.getElementById( 'clicker' ).getElementsByTagName( 'li' );

  for( var i = 0, l = li.length; i < l; i++ )
  {
    if( li[i].className == 'rubrik' )
    {
        var span = li[i].getElementsByTagName( 'span' );
        span[0].onclick = showOrHideList;
    }
  }
}

function showOrHideList( e )
{
  if( !e ) { e = window.event }
  var target = e.target || e.srcElement;

  var list = target.parentNode.getElementsByTagName( 'ul' );

  if( list[0].style.display == 'none' )
  {
    list[0].style.display = 'block';
  }
  else
  {
    list[0].style.display = 'none';
  }
}
-->
</script>
<style type="text/css">
<!--
.rubrik span
{
  cursor: pointer;
}
-->
</style>
</head>
<body>

<ul id="clicker">

  <li class="rubrik"><span>rubrik 1</span>
    <ul>
        <li><a href="#">Inställningar</a></li>
        <li><a href="#">Hjälp</a></li>
    </ul>
  </li>

  <li class="rubrik"><span>rubrik 2</span>
    <ul>
        <li><a href="#">Logga in</a></li>
        <li><a href="#">Kontoinformation</a></li>
        <li><a href="#">Diverse</a></li>
    </ul>
  </li>
</ul>

</body>
</html>
Glöm sen inte att lägga JS:en i en egen fil, ser mycket trevligare ut!

swan 2007-01-26 10:54
Stort tack!!! Elegant!

Patek Philippe 2007-01-26 11:14
Vill man slippa rubrikclassen kan man i stället söka efter LI:s som har en UL som firstChild.

DeSoto 2007-01-26 11:29
Mjo, men Firefox (och andra webbläsare) har ju en tendens att även göra whitespace till children i DOM-trädet, så isåfall måste man vara säker att det inte finns någon mellanrum mellan li:n och ul:n, vilket inte är en helt bra lösning.

Patek Philippe 2007-01-26 11:51
Citat:
Originally posted by DeSoto@Jan 26 2007, 12:29
Mjo, men Firefox (och andra webbläsare) har ju en tendens att även göra whitespace till children i DOM-trädet, så isåfall måste man vara säker att det inte finns någon mellanrum mellan li:n och ul:n, vilket inte är en helt bra lösning.
Brukar köra följande funktion när jag behöver navigera i DOM-trädet och vill ta bort whitespaces (John Resigs kod om jag inte minns fel). Kan förstås bli lite tungt om det är stora dokument. Men man behöver ju inte köra den i hela dokumentet utan bara där man ska navigera.

Kod:
function cleanWhitespace( element ) {
 element = element || document;
 while ( cur != null ) {
  if ( cur.nodeType == 3 && ! /\S/.test(cur.nodeValue) ) {
  element.removeChild( cur );
  } else if ( cur.nodeType == 1 ) {
  cleanWhitespace( cur );
  }
  cur = cur.nextSibling;
 }
}

dotvoid 2007-01-27 13:44
Upptäckte den här tråden idag. Normalt sett bör man använda sig av

Min länk

Det finns flera fördelar med detta. Istället för # kan man använda en länk som är en javascript-fri backup om användaren har stängt av javascript. Funktionen doSomething() bör alltid returnera false vilket innebär att ett klick på länken inte följs. Om man använder javascript som kanske inte stöds av alla webbläsare kan man i doSomething() testa detta. Stöds inte den aktuella webbläsaren så kan man returnera true och då följs länken som en vanlig länk istället.

Sedan kan man också använda sig av ovan method som deSoto beskriver. Jag skulle dock göra det lite elegantare genom "behaviour"-tekniken som beskrivs på http://www.dotvoid.com/view.php?id=56.

DeSoto 2007-01-27 13:55
Håller med om det du skriver, men kanske inte i detta fallet eftersom det bara handlar om att visa gömda lager, och då bör man inte använda en anchor-tag. I detta fallet bör man från början ha alla lager framme, och i onload gömma dem, och då även lägga cursor:pointer på rubrikerna.

På så sätt märker inte den som har javascript avslaget något, och den som har javascript på får all javascript-funktionalitet ändå.

EDIT:
Liten brasklapp, handlar det om väldigt många lager så är det bra att köra med anchor-tag, eftersom det är lite taskigt att göra så att de utan javascript måste scrolla igenom metervis med lager.

swan 2007-02-01 06:31
Citat:
Det bästa är väl att inte använda en anchor-tag, utan använda div/span och lägga onclick-event på den. Med CSS kan du göra så att man får en pekar-hand när man hovrar elementet.
Ps. Angående att imitera länkar genom att ge en text en viss färg och att göra den understruken. Nu har jag läst lite om detta och det verkar som en bra idé - MEN det förstör för blinda. De kan nämligen inte använda den inbyggda navigeringen (via tangentbordet) för att ta sig "låtsas-länken". Därför är det nog bäst att använda en riktig länk ändå...

tedeh 2007-02-01 15:14
Citat:
Originally posted by swan@Feb 1 2007, 07:31
Citat:
Det bästa är väl att inte använda en anchor-tag, utan använda div/span och lägga onclick-event på den. Med CSS kan du göra så att man får en pekar-hand när man hovrar elementet.
Ps. Angående att imitera länkar genom att ge en text en viss färg och att göra den understruken. Nu har jag läst lite om detta och det verkar som en bra idé - MEN det förstör för blinda. De kan nämligen inte använda den inbyggda navigeringen (via tangentbordet) för att ta sig låtsas-länken. Därför är det nog bäst att använda en riktig länk ändå...
Naturligtvis ska man inte försöka imitera något, finns det en tagg som beskriver det man vill uppnå så ska man också använda den. En sak vore ju att inte alls definera href i länken, men då validerar ju inte din sida, dessutom ändras inte muspekaren när man hovrar över den.

mazada 2007-02-03 21:51
kass på javascript... o det verkar som DeSoto e nordisk mästare... så jag ställer frågan:

om jag vill att i detta fallet underlänkarna ska vara dolda från START med hjälp av javascript och inte CSS hur skriver jag då?


I mitt eget fall... hur gör jag om jag vill att:
<div id="hej> </div>
ska vara dolt från start med ett javascript?


Om man tar det i seo syfte... det verkar ju som sökmotorer inte fattar javascript.. men dom fattar css??? då kan man ju *lura* dom på detta sättet?

martine 2007-02-04 03:02
<body onload="document.getElementById('hej').style.displ ay='none'">

Det kan dock hända att divver "blippar till" eftersom du inte kan gömma den innan du vet att den finns där (sidan har laddats)

Sökmotorerna blir nog klokare och klokare vad det gäller upptäcka att man "fuskar bort" text med css eller js på sidan skulle jag tro…

Edit: lite trist om detta bara skulle missbrukas, det finns bra skäl att använda ovan t ex
<div id="hej">Du har tyvärr inte javaskript påslaget eller … så därför fungerar vissa inte funktioner på …</div>

swan 2007-02-04 08:54
Ni kanske kan starta en egen tråd?

DeSoto 2007-02-04 09:23
För att slippa "blippandet" av att ett element syns när man gömmer det i window.onload, så kan man i head köra:

document.write( '<style type="text/css"> #mitt-element { display: none; } </style>' );

På så sätt skriver Javascript ut CSS-regeln innan DOM-trädet är laddat, vilket gör att elementet döljs innan det hinner "blippa" till.

mazada 2007-02-04 23:21
Citat:
lite trist om detta bara skulle missbrukas,
Nej, för min del ska jag inte fuska... hela sidans meny ska döljas från början o då skulle jag bli knäckt om sökmotorerna skulle uppfatta det som fusk pga dolda länkar... det är ju inte dolt på det viset, det är ju lika mycket meny som en meny som visas från början Det är ju bara för att det ska se snyggt ut.. eh.. svårt o förklara.. men men... hoppas sökmotorerna utvecklas så dom förstår mig i mitt webbsidebyggande oxå då :)

Citat:
document.write( '<style type="text/css"> #mitt-element { display: none; } </style>' );
Stålande, exakt vad jag ville se!

Citat:
Ni kanske kan starta en egen tråd?
Förlåt jag drog tråden lite off topic.. men det va lite lite lite på spåret, o nu e jag färdig :)


Alla tider är GMT +2. Klockan är nu 10:49.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson