tojaMedlem sedan mars 2001218 inlägg Hej...
Håller på att bli tokig...
Har provat, flyttat om, ändrat och försökt... men icke sa nick... synd att man inte är så haj på Javascript...
Det jag vill göra.. är att på något sätt kombinera dessa två script...
1. http://www.webforum.nu/showthread.php?s=&postid=973678#post973678
2. http://www.webforum.nu/showthread.php?s=&postid=713652#post713652
I det ena scriptet, en grej.. precis som jag vill ha det, att ett LAGER visas när man håller musen över länken... och sedan döljs när man tar bort...
Det andra scriptet... en perfekt infade/utfade av LAGER...
Skulle vilja ha den fade efekten så den fadar in LAGRET när man har musen över... samt fadar ut när man tar bort musen...
Borde inte vara så svårt..?! men jag är inte så haj på dessa lager...
Båda fungerade för mig i IE / Mozilla... så det är också en fördel...
Hoppas verkligen någon kan hjälpa mig, suttit i timmar och provat nu...
tojaMedlem sedan mars 2001218 inlägg Eftersom ingen svarar.. så provar jag själv hela tiden...
har gjort detta för att se om man kan få en att fada in på befallning.. vet inte om det är på rätt väg.. eller om det änns är i närheten.. fast det känns så... men nu klagar den helt plötsligt på att ett objekt krävs...??!
<a href="javascript:fade('fadea',1);">Visa lager 1</a>
<br>
<br>
<div id="fadea" style="position:absolute;top:100px;left:100px;visibility:hidden;"><img src="http://www.webforum.nu/images/wfstandard/logo_webforum.gif"></div>
<script type="text/javascript">
function fade(layid,diff,opacity){
opacity=(opacity)?opacity:(diff<0)?100:0; opacity+=diff;
if(document.getElementById&&document.all){
document.getElementById(layid).style.filter="alpha(opacity="+opacity+")";
}else if(document.getElementById&&!document.all){
document.getElementById(layid).style.MozOpacity = opacity/100;
}
document.getElementById(layid).style.visibility="visible";
setTimeout("fade("+layid+","+diff+","+opacity+");",10);
}
</script>
Här klagar IE på att ett objekt krävs:
document.getElementById(layid).style.filter="alpha(opacity="+opacity+")";
Samma rad säger Mozilla så här om:
Fel: document.getElementById(layid) has no properties
Fattar inte.. har inte ändrat den raden ju... sen det automatiserade, fungerande scriptet...
tojaMedlem sedan mars 2001218 inlägg Vart är Eliten... de brukar ju hänga här på WF... svar brukar komma asfort, i alla fall i php-forumet...
Din sista rad i javascriptet är det som går snett... Du har missat ett par "fnuttar".
setTimeout("fade('"+layid+"',"+diff+","+opacity+");",10);
tojaMedlem sedan mars 2001218 inlägg tack jawbreaker, äntligen!
Nu börjar jag närma mig... nu vill jag bara ha en till lika funktion som gör tvärtom...
typ:
<a href="javascript:fade('fadea',1);">Visa lager 1</a> <a href="javascript:fade2('fadea',1);">dölj lager 1</a>
<br>
<br>
<div id="fadea" style="position:absolute;top:100px;left:100px;visibility:hidden;"><img src="http://www.webforum.nu/images/wfstandard/logo_webforum.gif"></div>
<script type="text/javascript">
function fade(layid,diff,opacity){
opacity=(opacity)?opacity:(diff<0)?100:0; opacity+=diff;
if(document.getElementById&&document.all){
document.getElementById(layid).style.filter="alpha(opacity="+opacity+")";
}else if(document.getElementById&&!document.all){
document.getElementById(layid).style.MozOpacity = opacity/100;
}
document.getElementById(layid).style.visibility="visible";
setTimeout("fade('"+layid+"',"+diff+","+opacity+");",10);
}
function fade2(layid,diff,opacity){
opacity=(opacity)?opacity:(diff<0)?100:0; opacity+=diff;
if(document.getElementById&&document.all){
document.getElementById(layid).style.filter="alpha(opacity="+opacity+")";
}else if(document.getElementById&&!document.all){
document.getElementById(layid).style.MozOpacity = opacity/100;
}
document.getElementById(layid).style.visibility="visible";
setTimeout("fade2('"+layid+"',-"+diff+","+opacity+");",10);
}
</script>
Detta är säkert fel, fade() fungerar som den ska... fade2() gör det inte.. och det är för att jag inte ändrat något förutom ett minut på "diff" när funktionen körs om... antar att det inte är allt som måste göras...
antar att det har med denna rad att göra:
opacity=(opacity)?opacity:(diff<0)?100:0; opacity+=diff;
skulle någon kunna förklara hur man löser det.. och gärna också steg för steg.. vad hela den raden gör... med alla frågetecken, colon, mm..
Heja javascript eliten! :D
tojaMedlem sedan mars 2001218 inlägg Hmm... ändrade lite småsaker i fade2()
nu kommer inga felmess.. men den typ blinkar... istället för att fadeas...
function fade2(layid,diff,opacity){
opacity=(opacity)?opacity:(diff>100)?0:100; opacity-=diff;
if(document.getElementById&&document.all){
document.getElementById(layid).style.filter="alpha(opacity="+opacity+")";
}else if(document.getElementById&&!document.all){
document.getElementById(layid).style.MozOpacity = opacity/100;
}
document.getElementById(layid).style.visibility="visible";
setTimeout("fade2('"+layid+"',"+diff+","+opacity+");",10);
}
Testa det här istället:
<a href="javascript:fade('fadea',1);">Visa lager 1</a> <a href="javascript:fade('fadea',-1);">dölj lager 1</a>
<br>
<br>
<div id="fadea" style="position:absolute;top:100px;left:100px;visibility:hidden;"><img src="http://www.webforum.nu/images/wfstandard/logo_webforum.gif"></div>
<script type="text/javascript">
var g_tmr = null;
var g_opacity = 0;
function fade( layid, diff )
{
if ( g_tmr )
clearTimeout( g_tmr );
g_opacity += diff;
if ( 100 < g_opacity )
g_opacity = 100;
else if ( 0 > g_opacity )
g_opacity = 0;
if ( g_opacity > 0 && g_opacity < 100 )
{
if ( document.getElementById && document.all )
{
document.getElementById(layid).style.filter = "alpha(opacity="+g_opacity+")";
}
else if ( document.getElementById && !document.all )
{
document.getElementById(layid).style.MozOpacity = g_opacity/100;
}
document.getElementById(layid).style.visibility = "visible";
g_tmr = setTimeout( "fade('"+layid+"',"+diff+");", 10 );
}
}
</script>
tojaMedlem sedan mars 2001218 inlägg Hehe... Fan.. du löser det här åt mig jawbreaker...
en liten till fråga bara... ditt script fungerar än så länge precis som jag vill ha det... förrutom en sak!
När den fadear ut.. så försvinner den inte helt... den synns jättesvagt.. försökte testa lite.. men allt jag får den att göra är att gå långsammare..!!
Hmmm, testa det här då...
function fade( layid, diff )
{
if ( g_tmr )
clearTimeout( g_tmr );
g_opacity += diff;
if ( g_opacity >= 0 && g_opacity <= 100 )
{
if ( document.getElementById && document.all )
{
document.getElementById(layid).style.filter = "alpha(opacity="+g_opacity+")";
}
else if ( document.getElementById && !document.all )
{
document.getElementById(layid).style.MozOpacity = g_opacity/100;
}
document.getElementById(layid).style.visibility = "visible";
g_tmr = setTimeout( "fade('"+layid+"',"+diff+");", 10 );
}
}
tojaMedlem sedan mars 2001218 inlägg hmm.. nope... synns fortfarande.!!
tojaMedlem sedan mars 2001218 inlägg men det gör igentligen inget... nöjd så... nu är bara nästa problem.. att få den in i den andra funktionen... provar lite..!!
Det var rackarns... Jag ser inte bilden. Men ett litet tillägg som borde gömma hela lagret, och då borde inte bilden kunna synas i alla fall...
function fade( p_id, p_diff )
{
if ( g_tmr )
clearTimeout( g_tmr );
g_opacity += p_diff;
if ( g_opacity > 100 )
g_opacity = 100;
else if ( g_opacity < 0 )
g_opacity = 0;
document.getElementById( p_id ).style.visibility = "visible";
if ( document.getElementById && document.all )
document.getElementById( p_id ).style.filter = "alpha(opacity="+g_opacity+")";
else if ( document.getElementById && !document.all )
document.getElementById( p_id ).style.MozOpacity = g_opacity / 100;
if ( g_opacity > 0 && g_opacity < 100 )
g_tmr = setTimeout( "fade('"+p_id+"',"+p_diff+");", 10 );
else if ( 0 == g_opacity )
document.getElementById( p_id ).style.visibility = "visible";
}
tojaMedlem sedan mars 2001218 inlägg Haha... det fungerade.. men nu kom en annan bugg...! hehe...
så här går det nu ... Visa lager --> Dölj lager --> händer inget vad man än trycker på!!!
Och jag som trodde att man programmerade bättre efter ett par öl. Så fel man kan ha, hehe. Jag uppdaterade inlägget ovan, så plocka funktionen igen och testa...
tojaMedlem sedan mars 2001218 inlägg Haha... därför jag hoppade ölen.. tar nog en snart!! MEN FAAN... du är bäst!!!
tojaMedlem sedan mars 2001218 inlägg Nu till nästa problem... haha.. jag får aldrig nog!!!
Nu vill jag på något sätt impletera det i det andra scriptet... typ som jag gjort neden... förutom att det jag gjort inte fungerar.. men du kanske förstår min tanke...
<html>
<head>
<title>xxx</title>
<script type="text/javascript">
var g_tmr = null;
var g_opacity = 0;
function show(obj, elmId) {
if(obj.timeout)
clearTimeout(obj.timeout);
document.getElementById(elmId).style.display = "block";
g_tmr = null;
g_opacity = 100;
fade(elmId,10);
}
function hide(obj, elmId) {
g_tmr = null;
g_opacity = 100;
fade(elmId,10);
obj.timeout = setTimeout(function(){ close(elmId) }, 500);
}
function close(elmId) {
document.getElementById(elmId).style.display = "none";
}
function fade( p_id, p_diff )
{
if ( g_tmr )
clearTimeout( g_tmr );
g_opacity += p_diff;
if ( g_opacity > 100 )
g_opacity = 100;
else if ( g_opacity < 0 )
g_opacity = 0;
document.getElementById( p_id ).style.visibility = "visible";
if ( document.getElementById && document.all )
document.getElementById( p_id ).style.filter = "alpha(opacity="+g_opacity+")";
else if ( document.getElementById && !document.all )
document.getElementById( p_id ).style.MozOpacity = g_opacity / 100;
if ( g_opacity > 0 && g_opacity < 100 )
g_tmr = setTimeout( "fade('"+p_id+"',"+p_diff+");", 10 );
else if ( 0 == g_opacity )
document.getElementById( p_id ).style.visibility = "visible";
}
</script>
<style type="text/css">
.ny { position: absolute; left: 350px; width:200; display: none; background: #ccc; }
</style>
</head>
<body>
<table>
<tr>
<td><span onmouseover="show(this, 'e01')" onmouseout="hide(this, 'e01')">Bild</span></td>
<td><div class="ny" id="e01">Extra text</div>
Lite mer text som delvis döljs när extra-texten syns.</td>
</tr>
<tr>
<td><span onmouseover="show(this, 'e02')" onmouseout="hide(this, 'e02')">Bild</span></td>
<td><div class="ny" id="e02">Extra text</div>
Lite mer text som delvis döljs när extra-texten syns.</td>
</tr>
<tr>
<td><span onmouseover="show(this, 'e03')" onmouseout="hide(this, 'e03')">Bild</span></td>
<td><div class="ny" id="e03">Extra text</div>
Lite mer text som delvis döljs när extra-texten syns.</td>
</tr>
</table>
</body>
</html>
tojaMedlem sedan mars 2001218 inlägg Ähh... knäckte en bärs nu jag me..!!
tojaMedlem sedan mars 2001218 inlägg jawbreaker... jag vet att du kan detta också... kom igen nu...!!! Hehe.. sympatidricker tillochmed bärs för din skull...
tojaMedlem sedan mars 2001218 inlägg Vänta föresten med vad jag skrev innan.. kom på att det kanske går att lösa på annat sätt.. men återkommer till det...
Detta däremot är en svaghet med ditt script jawbreaker!
<html>
<head>
<title>xxx</title>
</head>
<body>
<a href="javascript:fade('fadea', 10);">Visa lager 1</a> <a href="javascript:fade('fadea', -10);">dölj lager 1</a><br>
<a href="javascript:fade('fadeb', 10);">Visa lager 1</a> <a href="javascript:fade('fadeb', -10);">dölj lager 1</a>
<br>
<br>
<div id="fadea" style="position:absolute;top:100px;left:100px;visibility:hidden;"><img src="http://www.webforum.nu/images/wfstandard/logo_webforum.gif"></div>
<div id="fadeb" style="position:absolute;top:100px;left:350px;visibility:hidden;"><img src="http://www.webforum.nu/images/wfstandard/logo_webforum.gif"></div>
<script type="text/javascript">
var g_tmr = null;
var g_opacity = 0;
function fade( layid, diff )
{
if ( g_tmr )
clearTimeout( g_tmr );
g_opacity += diff;
if ( 100 < g_opacity )
g_opacity = 100;
else if ( 0 > g_opacity )
g_opacity = 0;
if ( g_opacity > 0 && g_opacity < 100 )
{
if ( document.getElementById && document.all )
{
document.getElementById(layid).style.filter = "alpha(opacity="+g_opacity+")";
}
else if ( document.getElementById && !document.all )
{
document.getElementById(layid).style.MozOpacity = g_opacity/100;
}
document.getElementById(layid).style.visibility = "visible";
g_tmr = setTimeout( "fade('"+layid+"',"+diff+");", 10 );
}
}
</script>
</body>
</html>
Tror detta spökar...
var g_tmr = null;
var g_opacity = 0;
Funderar på om man kanske kan göra funktionen som en class istället.. eller liknande.. och anropa funktionen med olika "namn" för varje lager som ska visas/döljas ...
Aldrig blir du nöjd ;)
Nu har jag mixtrat lite med koden, och voila:
<html>
<head>
<title>Fader</title>
<script language="javascript" type="text/javascript">
<!--
var g_fdrs = new Array();
function Fade( p_id )
{
this.id = p_id;
this.obj = document.getElementById( p_id );
this.tmr = null;
this.opacity = 0;
this.diff = 10;
this.fadeIn = FDR_fadeIn;
this.fadeOut = FDR_fadeOut;
this.fade = FDR_fade;
}
function FDR_fadeIn()
{
this.diff = 10;
this.obj.style.display = "block";
this.fade();
}
function FDR_fadeOut()
{
this.diff = -10;
this.fade();
}
function FDR_fade()
{
if ( this.tmr )
clearTimeout( this.tmr );
this.opacity += this.diff;
if ( this.opacity > 100 )
this.opacity = 100;
else if ( this.opacity < 0 )
this.opacity = 0;
if ( document.getElementById && document.all )
this.obj.style.filter = "alpha(opacity="+this.opacity+")";
else if ( document.getElementById && !document.all )
this.obj.style.MozOpacity = this.opacity / 100;
if ( this.opacity > 0 && this.opacity < 100 )
this.tmr = setTimeout( "g_fdrs['" + this.id + "'].fade();", 10 );
else if ( 0 == this.opacity )
this.obj.style.display = "none";
}
function doOnLoad()
{
var d = document.getElementsByTagName( "span" );
for ( var i = 0; i < d.length; i++ )
{
if ( 0 == d.item(i).id.indexOf( "fade" ) )
{
var id = d.item(i).id + "_obj";
g_fdrs[id] = new Fade( id );
d.item(i).onmouseover = new Function( "g_fdrs['" + id + "'].fadeIn();" );
d.item(i).onmouseout = new Function( "g_fdrs['" + id + "'].fadeOut();" );
}
}
}
//-->
</script>
<style type="text/css">
.ny { position: absolute; left: 350px; width:200; display: none; background: #ccc; }
</style>
</head>
<body onload="doOnLoad();">
<table>
<tr>
<td><span id="fade1">Bild</span></td>
<td><div class="ny" id="fade1_obj">Extra text</div>
Lite mer text som delvis döljs när extra-texten syns.</td>
</tr>
<tr>
<td><span id="fade2">Bild</span></td>
<td><div class="ny" id="fade2_obj">Extra text</div>
Lite mer text som delvis döljs när extra-texten syns.</td>
</tr>
<tr>
<td><span id="fade3">Bild</span></td>
<td><div class="ny" id="fade3_obj">Extra text</div>
Lite mer text som delvis döljs när extra-texten syns.</td>
</tr>
</table>
</body>
</html>
Nu är grejen den att dina span-taggar med onmouseover och onmouseout måste ha ett id som börjar med "fade". Tillhörande div-tagg som ska visas/försvinna måste ha samma id, fast med "_obj" på slutet. Du ser ju i koden hur det ser ut.
Och om det här inte fungerar så får du ingen mer hjälp förrän imorgon - kvällens öl har tagit ut sin rätt, så nu är det sovdags...
