visa lager som inte försvinner?

Hej
Jag försöker med följande funktion.

När man håller över en av mina länkar så vill jag att det ska visas en lite ruta pris under länken med ett par klickbara länkar..

Jag har gjort en vanlig länk <a href> och använt mig av onmouseover för att visa ett lager precis under länken och detta lager innehåller några länkar. Jag har ju också använt mig av onmouseout i länk taggen för att lagret ska försvinna när man för musen bort från länken..
Men om man nu håller musen på länken som då visar lagret så ska ju inte lagret försvinner om man för över markörern på lagret och vill trycka på någon av länkarna ? Kommer inte på hur jag får lagret att visas vid övergången med markören från länka taggen <a href> till självaste lagret`?

Mvh

lägg in ett element som skall visas, på så sätt kan du ju även ha musen över "blocket" med fler länkar... även om jag kan tycka att det bli jobbigt, eller lägg mouseover eventet runt ett annat element än a-elementet

<span class="mouseOver"><a href="#">Main Link</a><span class="box">...</span></span>

Och jobba med eventen på .mouseOver istället för a-elementen.

a det är ju ett sätt, jag har gjort så att jag har en lång lista med länkar och använder samma lager (block) för att visa dom extra länkarna. Så om man håller musen över en länk så är det samma lager som visas men jag ändrar innehållet med innehtml samt dess position som kommer av muspekarens position..

Jag är inne på att använda ett timer för att lösa övergången. Säg att markören försvinner från <a> elementet då ska lager döljas men att det körs ett n kort timer innan det försvinner och den timern kan avbrytas så fort musen når lagret..

Problemet är att jag inte fattar hur jag använder timer objektet nu
Provade så här

function hideLayerOnclick(e,obj,layer) {
var t = setTimeout("document.getElementById(layer).style.display = 'none'",1000);    
}

den koden funkar ju givetvis inte men fattar inte varför?

mvh

evilaid skrev:

a det är ju ett sätt, jag har gjort så att jag har en lång lista med länkar och använder samma lager (block) för att visa dom extra länkarna. Så om man håller musen över en länk så är det samma lager som visas men jag ändrar innehållet med innehtml samt dess position som kommer av muspekarens position..

Jag är inne på att använda ett timer för att lösa övergången. Säg att markören försvinner från <a> elementet då ska lager döljas men att det körs ett n kort timer innan det försvinner och den timern kan avbrytas så fort musen når lagret..

Problemet är att jag inte fattar hur jag använder timer objektet nu
Provade så här

function hideLayerOnclick(e,obj,layer) {
var t = setTimeout("document.getElementById(layer).style.display = 'none'",1000);    
}

den koden funkar ju givetvis inte men fattar inte varför?

mvh

Saken är att a-element kan inte ha ett a-element som child: http://www.w3.org/TR/html4/struct/links.html#idx-link-6

Så det är inte en lösning i mina ögon, sen att skriva objekt som strängar är så dåligt, kör en anonym funktion istället om något, men samtidigt så ser jag inte att du behöver en timeout, varför skall du ha det just nu? Känns som det är en av de sista problemen du behöver lösa. Vad skall hänta efter timeouten har körts, om du ha länkar i "boxen" hur skall man hinna få markera den innan den försvinner?

Gjorde ett snabbt exempel nu: http://jsbin.com/enala5/2/

Är det något i den stilen du är ute efter?

Jag tänkte så att som det är nu så om du håller markören över ett a element så visas ett lager i princip över länken, försvinner markören från a element så ansropas funktionen för att dölja lagret. Men istället för att direkt dölja det så är det en fördröjning på kanske max en sekund. och om du inom denna sekunden flyttar markören till lagret så avbryts timern och lagret döljs inte. samtidigt använder jag "onmouseout" för lagret som gör att när markören förflyttas utanför lagret så döljs lagret igen..

Tror jag fått det att funka rätt bra men jag kan inte få timer funktionen att acceptera ovan kod, kan man bara anropa en funktion med timer, går det inte skriva koden direkt i timerobjektet??

<a href="#" onMouseover="showLayerOnclick(event,this,'editArticleBlock')" onMouseOut="hideLayerOnclick(event,this,'editArticleBlock')">032110009</a>

<div id="editArticleBlock" style="display:none; position:absolute; width:140px;height:50px; background-color:#FFFFCC; border:1px solid black; font-size:10px;" onMouseOver="stopTimer()" OnmouseOut="hideLayer()">
	<a href="">Snabbredigera Artikel</a><br>
	<a href="">Administrera artiklar</a><br>
</div>

function showLayerOnclick(e,obj,layer) {
	document.getElementById(layer).style.display = "Block"
	document.getElementById(layer).style.left = (e.clientX + document.documentElement.scrollLeft ) + "px";
	document.getElementById(layer).style.top = (e.clientY + document.body.scrollTop) + "px";
}

function hideLayerOnclick(e,obj,layer) {
var t = setTimeout("document.getElementById(layer).style.display = 'none'",1000);
    
}

evilaid skrev:

Jag tänkte så att som det är nu så om du håller markören över ett a element så visas ett lager i princip över länken, försvinner markören från a element så ansropas funktionen för att dölja lagret. Men istället för att direkt dölja det så är det en fördröjning på kanske max en sekund. och om du inom denna sekunden flyttar markören till lagret så avbryts timern och lagret döljs inte. samtidigt använder jag "onmouseout" för lagret som gör att när markören förflyttas utanför lagret så döljs lagret igen..

Känns extremt onödigt, kolla länken med exemplet, gör exakt(?) det du är ute efter.

Tror jag fått det att funka rätt bra men jag kan inte få timer funktionen att acceptera ovan kod, kan man bara anropa en funktion med timer, går det inte skriva koden direkt i timerobjektet??

Jo, med en anonym funktion.

setTimeout(function ( ) {/*Anonym*/}, 1000);

Men som sagt, känns onödigt då det inte behövs i huvudtaget.

Jag förstår ungefär hur du tänker men sidan som skrivs ut med asp kommer ju se olika ut hela tiden och placeringen kommer ändras m.m.

Jag ska försöka prova det ikväll och se om jag kan få till det med ditt exempel..

Nu har jag kanske hakat upp mig lite men hur ser det ut om man använder en anonym funktion? Skriver jag bara in min kod istället för "Anonym"
typ

function hideLayerOnclick(e,obj,layer) {
setTimeout(function ( ) {/*document.getElementById(layer).style.display = 'none'*/}, 1000);
}

evilaid skrev:

Jag förstår ungefär hur du tänker men sidan som skrivs ut med asp kommer ju se olika ut hela tiden och placeringen kommer ändras m.m.

Det kommer den ju alltid göra... sen kan du ju alltid ändra DOM-trädet.

Nu har jag kanske hakat upp mig lite men hur ser det ut om man använder en anonym funktion? Skriver jag bara in min kod istället för "Anonym"
typ

function hideLayerOnclick(e,obj,layer) {
setTimeout(function ( ) {/*document.getElementById(layer).style.display = 'none'*/}, 1000);
}

Ja, förutom att plocka bort kommentar taggarna.

Sen behöver du inte ens lösa detta med JS, du kan ju använda dig av ren CSS (de läsare som inte ha :hover på andra element än a, typ alla förutom äldre versioner av IE se http://jsbin.com/enala5/5/ ).

Okey, jag provade ditt exempel. Förstår inte riktigt hur javascriptkoden funkar som du lagt till, ska inte det fungera utan den om man nu använder hover?

<script>$(".mouseOver").hover(function ( e ) {
  $(this).addClass("hover");
},function ( e ) {
  $(this).removeClass("hover");
});
</script>

Positionen av lagret blir ju inte så bra heller, iom att den är absolute och du angivit fasta postioner, provade att använda relative istället men då flyttas ju alla anna text när llagret visas?

Hade varit riktigt tacksam om du kunde hjälpa mig med timer raden, blir inte klok på det..'

function hideLayerOnclick(e,obj,layer) {
setTimeout(function ( ) {document.getElementById(layer).style.display = 'none'}, 1000);
}

Jag verkar ju inte få med värdet i "layer"?

tack för din tid och hjälp

Koden i 5:an (förra inlägget) fungera både med och utan JS, gör samma sak, dock så fungera inte :hover på äldre läsare (stäng av JS i firefox så ser du att koden ändå fungera).

Du få ju positionera om elementen och eftersom parent elementet har en position relative så gå det utmärkt att köra absolut på positioneringen. så det är korrekt, även om mitt exempel är just ett exempel.

din JS kod fungera för mig, även om jag inte fattar vad du har e och obj till, när du inte verkar använda de i koden.

Okey, då sitter jag på en äldre för utan js fungerar inte exemplet, men..

jag är inte riktigt med på hur jag ska positionera om elementen? Nu har jag länken mitt på sidan och när jag håller marköern över så visas ju lagret längst upp i vänstra hörnet med en förskjutning på 10px??

fattar inte varför absolute inte fungerar utan blir absolute i förhållande till hela sidan istället för parent objektet ??

Btw: jag gav upp min egna ideé, var tvungen att se med egna ögon hur dålig den var..

evilaid skrev:

Okey, då sitter jag på en äldre för utan js fungerar inte exemplet, men..

jag är inte riktigt med på hur jag ska positionera om elementen? Nu har jag länken mitt på sidan och när jag håller marköern över så visas ju lagret längst upp i vänstra hörnet med en förskjutning på 10px??

fattar inte varför absolute inte fungerar utan blir absolute i förhållande till hela sidan istället för parent objektet ??

Btw: jag gav upp min egna ideé, var tvungen att se med egna ögon hur dålig den var..

Bra att du gav upp den, är extremt mycket krångligare än vad det behöver vara, så länge du ha en position relative på föräldern så om du kör absolut på barn elementen så kommer den bli korrekt, lägger upp ett nytt exempel

Du kan nog även se att jag inte skriver rätt heller poistion skall ju exempelvis vara position så det är inte bara att kopiera och klistra in.

Där har vi det... den lilla felstavning som pajade det.! Fan va frustrerad man kan bli på sånt...

Nu har jag nog faktiskt något som kan bli riktigt bra.

Stort tack för hjälpen!

Såg föresten en liten detalj:

Om du har ter main link, ex:
Main link1
Main Link2
Main Link3

Så är det så att om du håller musen på "main link1" så syns inte lagret riktigt då det hamnar under dom två andra länkarna? Försökte sätta ett värde på z-index men det hjälpte inte..

När det blir ånga listor kanske det inte bli optimalt, funderar på om man ska ha en funktion som gör att när man klickar på länken så syns lagret och klickar man en gång till så försvinner det..

byt ut hover till click och ta js koden från första exemplet jag gav, med toggleClass istället.

Ok, jag fattar itne riktigt denna koden

<script>$(".mouseOver").click(function ( e ) {
  $(this).toggleClass("click");
});
</script>

$(this).toggleClass("click");
???

Fortfarande så hamnar inte lagret längst fram utan skyms av dom andra i listan?

$(this).toggleClass("click")

den kollar om elementet (.mouseOver) har klassen "click" eller inte, beroende på det så lägger den till eller plocka bort klassen "click".

Vad menar du med z-index, är dina "moueOver" element så pass nära varandra så att menyerna gå över varandra, i så fall få du bygga om koden att se till att .box få ett högre z-index för varje click som ske

$(function() {var zIndex = 1;
	$(".mouseOver").click(function ( e ) {
		$(this).toggleClass("hover").find(".box").css("z-index", zIndex++);
	});
});

(ej testad).

Okey, smart funktion med toggleClass, fan va mycket det finns att lära sig!

Precis, det är en lång lista med kanske 50 rader och alla meny är till för att gå in och redigera varje rad. Som det är nu så hamnar menyn bakom nästa rad som ligger i listan..

Jag provade att i css koden lägga till z-index: 200 men det var inget som hjälpte..
Provade din kod där men det gav ingen skillnad... Förstår inte hur det kan hamna under hela tiden??

kör inte med någon z-index i din CSS, kör det med ren JS, ändra zIndex variablen annars till 200 om du ha det i din CSS.

okey. jag gjorde så att jag i css koden satte z-index:1 i mouseover classen.. Sen använder jag följande js kod men fortfarande lyser texten från mouseover igenom själva lagret med meny..

Synd att jag inte har någon ftp att ladda upp med här men koden jag använder är följande:

  <span class="mouseOver">Main Link<span class="box"><ul><li><a href="#">Link #1</a></li><li><a href="#">Link #2</a></li></ul></span></span>
<br>
  <span class="mouseOver">Main Link<span class="box"><ul><li><a href="#">Link #1</a></li><li><a href="#">Link #2</a></li></ul></span></span>
<br>
  <span class="mouseOver">Main Link<span class="box"><ul><li><a href="#">Link #1</a></li><li><a href="#">Link #2</a></li></ul></span></span>

CSS

  .mouseOver {position:relative}
  
  .mouseOver .box {display:none; z-index:2}
  
  .mouseOver.click .box,
  .mouseOver:click .box {position: absolute;top:10px;left:2px;border:1px solid #000;display:block;background-color:yellow;}
  
  .mouseOver .box ul{list-style:none;padding:0;margin:0;}

JS

<script>
$(function() {var zIndex = 200;
	$(".mouseOver").click(function ( e ) {
		$(this).toggleClass("click").find(".box1").css("z-index", zIndex++);
	});
});

</script>