script werkt niet inFF

Status
Niet open voor verdere reacties.

franky2nl

Gebruiker
Lid geworden
26 sep 2009
Berichten
5
Beste mensen,

Ik ben op de website www.leejoo.nl een leuk script tegengekomen (tooltip). Helaas werkt het script niet in FireFox. Heeft iemand een oplossing om dit probleeem te verhelpen?

Hieronder het totale script:

HTML:
<style TYPE="text/css">
body    {
overflow : scroll;
overflow-x : hidden;}
.popper {
position : absolute;
visibility : hidden;}
</style>

<script language='javascript'>
var frame_width        = 200;
var frame_headerbcolor = "#D8D8D8";
var frame_headerfcolor = "#000000";
var frame_headertext   = "Klik hier voor meer info over";


document.write("<div id='framelayer' class='popper'> </div>");

var ns = (document.layers);
var ie = (document.all);

if (ns) {
  popup = document.framelayer;
  document.captureEvents(Event.MOUSEMOVE);}
else {
  popup = framelayer.style;}

document.onmousemove = get_mouse;

function displaylayer(html) {
  if (ns) { 
    popup.document.write(html);
    popup.document.close();
    popup.visibility = "visible";}
  else if (ie) {
    document.all("framelayer").innerHTML = html;
    popup.visibility = "visible";}}

function pop(message,bcolor,fcolor) {
  var htmlcode = "<table width=" + frame_width + " border=0 " +
                 "cellpadding=1 cellspacing=0 bgcolor=" +
                 frame_headerbcolor + "><tr><td><table " +
                 "width=100% border=0 cellpadding=0 " +
                 "cellspacing=0><tr><td align='center'>" +
                 "<font color=" + frame_headerfcolor + 
                 " size=2 face='arial'><b>" + frame_headertext +
                 "</b></font></td></tr></table>" +
                 "<table width=100% border=0 cellpadding=2 " +
                 "cellspacing=0 bgcolor=" + bcolor + ">" +
                 "<tr><td align='center'><font color=" + fcolor +
                 " size=2 face='arial'>" + message + "</font>" +
                 "</td></tr></table></td></tr></table>"

  displaylayer(htmlcode);}

function get_mouse(e) {
  var x = (ns) ? e.pageX : event.x + document.body.scrollLeft; 
  var y = (ns) ? e.pageY : event.y + document.body.scrollTop;

  popup.left = x - 2;
  popup.top  = y + 18;}

function kill() 
{
  popup.visibility = "hidden";}
</script>

<a href="http://www.jouwstarter.nl/?campaignID=491&materialID=5190&affiliateID=351" ONMOUSEOVER="pop('<b>Startpaginas</b><br>'+'Snel en eenvoudig je eigen startpagina online, ' +
                  'en het mooie is, het is nog Gratis ook !.', '#FFCCFF', '#000000')" ONMOUSEOUT="kill()" target="_blank"><font size="2" face="Verdana">Je
eigen gratis startpagina</font> <br>
</a><br>


<a href="http://www.partnershop.nl/shop/8114"
 ONMOUSEOVER="pop('<b>Webhosting</b><br>'+'Je eigen website zo online, nu met een gigantische aanbieding ' +
                  '1000 MB, gratis domein slechts 2,99 euro per maand !.', '#CCFFCC', '#000000')"
 ONMOUSEOUT="kill()" target="_blank"><font size="2" face="Verdana">Lycos Webcenter</font><br>
</a><br>

<a href="http://leejoo.bamikanarie.nl "
 ONMOUSEOVER="pop('<b>Ringtones</b><br>'+'De allernieuwste ringtones, wallpapers, true tones voor je mobieltje vind je hier. ', '#FFCC33', '#000000')"
 ONMOUSEOUT="kill()" target="_blank"><font size="2" face="Verdana">Bamikanari</font><br>
</a><br>

<a href="http://www.graphics-design.nl"
 ONMOUSEOVER="pop('<b>Grafisch Design</b><br>'+'De mooiste webdesigns voor het midden en kleinbedrijf, origineel en betaalbaar !'+'Ook voor banners, headers, fotobewerking etc.', '#664488', '#FFFFFF')"
 ONMOUSEOUT="kill()" target="_blank"><font size="2" face="Verdana">Graphics - Design</font><br>
</a><br>

Ik ben zeer benieuwd of er een oplossing voor is.

Met vriendelijke groet,

Franky
 
Heb je het ergens online staan? Dan kunnen we zien wat dit script doet in IE, want ik heb het idee dat er wel een makkelijkere manier is om dit te bereiken.
 
Ik zou het zo doen, het veranderd een heel klein beetje aan de functionaliteit, maar je houdt alles valid, het werkt in elke browser, je hoeft geen groot script in je pagina te zetten, je code blijft overzichtelijk en je sluit veel minder mensen uit van weergave:

Code:
<style type="text/css">

a {
  position: relative; // is nodig voor de absolute positionering van de span
}

a span {

  position: absolute;
  top: 1em; /* moet je misschien nog even een beetje aanpassen, mag ook in px. */
  left: 0px;
  display: none;
  /* Alle verdere styling van de tooltip komt hier */

}

a:hover span {
  
  display: block;

}

</style>

Dan kun je in het a span { blok de styling aanpassen.

In je HTML wordt het dan zo:

HTML:
<a href="link.html">Dit is de tekst van je link<span>En dit komt in de tooltip</span></a>

En ik zou zeggen, de scripts van Leejoo, blijf daar gewoon weg. Die scripts waren ooit heel even leuk toen Internet Explorer de webbrowser markt nog domineerde, maar vrijwel geen van de scripts is cross-browser, en nu, nu op die markt ook andere partijen opereren (Mozilla, Apple, Netscape, Opera, Google), is het marktaandeel van IE dusdanig geslonken dat je me de script van Leejoo een groot deel van je bezoekers tekort doet.
 
Laatst bewerkt:
Beste ErikBooy,

Bedankt voor je reactie en je nieuwe oplossing. Het is inderdaad waar dat er op Leejoo.nl veel scripts staan die niet meer relevant aan de eisen van nu. Hopelijk zullen deze scripts in de tooekomst ook nog een keer aangepast worden.

Nu even terug naar dit script:

1.Ik mis nu wel de tabelopbouw; de header en content. Ik wil graag een tabel of - als het anders kan - een koptekst met een andere kleur letters en achtergrond en daaronder een 'contentvak' ook weer met een andere kleursamenstelling. En het geheel met 1 px rand eromheen.

2. De tooltip moet niet 'link gebonden' zijn. Het is puur bedoelt voor extra info en niet om door te linken.

Daarom sprak mij dit script ook wel aan.

Hoe valt dit op te lossen?

greetz,

Franky
 
Alles kan!

Hoi franky,
De tooltip moet niet 'link gebonden' zijn. Het is puur bedoelt voor extra info en niet om door te linken.
Dat is geen probleem; in de html kan het gewoon een "pseudo-link" zijn (een <a></a> die nergens naar toe gaat), maar die wel reageert op hoveren met de muis. En visueel zal je toch iets link-achtigs moeten aangeven, bv. stippeltjes-onderstreping met help-muisaanwijzer: zodat de bezoekers zien dat ze ernaartoe moeten om wat extra's te kunnen zien, terwijl het toch geen echte doorklik-link is.
  • Voorbeeld op francky's developerscorner (!): css pop-up.
Maar om binnen een span een tabel-achtig ding op te gaan nemen, lijkt me een lastig karwei: moeilijk te stylen, en geeft natuurlijk een vreselijke drabbelkoek in de html. Niet bepaald een toonbeeld van semantisch code-gebruik! :D
Maar er is wel een javascript-methode voor uitgebreide "tooltips" (css pop-ups) die ook in Firefox en andere goede browsers werkt.
In dit voorbeeld is de trigger een <area>gebied (een image-map), maar het kan op dezelfde manier ook met een gewone "pseudo-link" als trigger. Het voorbeeld is toevallig besproken in dit topic van een paar dagen geleden.

Heb je daar wat aan?
Met vriendelijke groet,
CSShunter

PS:
Wat overblijft, is de (on)toegankelijkheid voor mensen die niet visueel een webpagina bezoeken, en/of geen javascript (kunnen) gebruiken: zoals met pure textbrowsers of textvoorleesapaaraten. Maar met een beetje slimmigheid zou daar wel aan mouw aan te passen moeten zijn. Je zou er bv. een op scherm onzichtbare extra link bij kunnen zetten, met bladwijzer naar het <div>-deel van de pagina waar de aanvullende info staat. In die geest, ofzo. - Als ze na de extra info maar weer makkelijk terug kunnen! ;)

[Edit]Met de <span> methode (zonder javascript) zou het zó kunnen: de <span> geef je de border van 1px, een achtergrondkleur en een tekstkleur/groottte. Binnen die span zet je weer een span, maar dan met de style van je "header", enz. Zo wordt het een hele spannende zaak! ;)
HTML:
<span><span>Kopregel</span><span class="infotext">De tekst van de info: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem <strong>nonummy</strong> nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </span><span class="infofooter">De slotregel</span></span>
En dat dan allemaal binnen die <a></a>, die ook opgenomen zal zijn in een gewone lap tekst! Je moet er ook niet aan denken, dat je een lijstje met 3 bullet items in je info zou willen opnemen... Dus het kan wel, maar, zoals gezegd, niet erg overzichtelijk.[/edit]
 
Laatst bewerkt:
Beste CSShunter,

Bedankt voor deze geweldige uitleg. Ik ben al een beetje aan het rommelen geweest. Alleen hou ik toch nog wat probleempjes. Misschien is het wat gemakkelijker om het SPAN verder te werken. Ik had hier al een kleine opzet voor gevonden. Zie hieronder:

HTML:
<html>
<head>
<style type="text/css">


span.link {
    	position: relative;
}

span.link a span {
    	display: none;
}

span.link a:hover {
    	font-size: 99%;
    	font-color: #990000;
}

span.link a:hover span { 
        display: block; 
    	position: absolute; 
    	margin-top: 15px; 
    	margin-left: -1px; 
	    width: 175px; padding: 5px; 
    	z-index: 100; 
    	color: #990000; 
    	border: 1px solid #990000;
		background: #EFEFEF; 
    	font: 12px "Verdana", sans-serif;
    	text-align: left; 
    	text-decoration: none;
}
</style>
</head>
<body>

<span class="link"><a href="javascript: void(0)">tekst<span><center><font color="#cdab7b"><b>KOPTEKST met andere achtergrondkleur</b></font color></center><br><b>Subtekst:</b><br><br>- blabla<br>- blabla<br>- etc.</span></a></span>

</body>
<html>

Je hebt het over SPAN met daarin nog een SPAN voor je header. Ik heb geen flauw idee hoe ik dat moet uitwerken. Het enige wat in het bovenstaand voorbeeld moet gebeuren, is idd een header toevoegen.

De kleuren zijn al juist zoals ook het lettertype. De kleur van de header-achtergrond zou #990000 moeten zijn.

Hoe krijg ik dat voor elkaar:(?

Greetz,

FRANKY
 
Hoi franky2,
Je bent al een aardig eindje op weg! Ik heb er even een echte webpagina van gemaakt, dan kon ik in het echt zien wat er gebeurt.
We zien hieraan dat aan je opzet nog een aantal bezwaren kleven:
  • er zitten ongeldige html-codes tussen,
  • een css-foutje,
  • en Internet Explorer, Firefox en Opera interpreteren de uitkomst alle drie op een andere manier: overzichtje screenshots.
Dat is altijd het lastige, denk je iets te hebben, is het niet cross-browser! :confused:

Het spannen binnen de span om de header er in te krijgen, blijkt nu ook weer niet zó eenvoudig, kwam ik achter.:rolleyes:
Maar ik heb iets gefabriekt dat redelijk in de buurt komt, geloof ik:
Hiermee kan je naar hartelust experimenteren! :)

[off-topic:]
Het moet volgens de officiële spelling eigenlijk zijn: "naar hartenlust", maar dat krijg ik niet uit het toetsenbord. Net zoals ik moeite heb met pannenkoekenkoekenpan: een koek uit zo'n pan komt toch niet uit 2 pannen? Het hoort gewoon te zijn: pannekoekenkoekenpan, want in een koekenpan kan wèl meer dan 1 koek gebakken worden!
[/off-topic]

Terug naar mijn proefpagina. Die is nog niet ideaal (en het is de vraag of dat te bereiken valt) - als het woord waarbij de tooltip hoort, helemaal op het eind van een regel staat, kan dat problemen opleveren: dan loopt de tooltip uit beeld. En bij een teskt van meer dan 1 woord dat de tooltip moet triggeren, kan het ook fout gaan als die méér woorden gedeeltelijk op het eind van een regel staan, en gedeeltelijk op het begin van de volgende regel.
  • Test: schuif het window van de proefpagina in stapjes kleiner, en see what happens in de verschillende browsers ...
Dit zal vooral lastig zijn als het een liquid layout is, waarbij je van tevoren niet kunt weten of iets op het eind van een regel zal komen te staan. Of ook: bij smalle tekstkolommen, waar de tooltip deel van moet gaan uitmaken.
Hetzelfde type probleem doet zich voor bij home-made onderstrepingen van gedeeltes van teksten, en bij kleine icoontjes
iconout.gif
bij een externe link. Zie:
Maar als je de tooltips allemaal op dezelfde vaste plaats zet (zoiets als de Help-kolom helemaal rechts bij een aantal MS Office programma's), dan heb je daar geen last van.
Vanuit de proefpagina-opzet is dat eenvoudig te doen.

Zo nodig geef je maar een brul!
Met vriendelijke groet,
CSShunter

PS:
Over tooltips gesproken: deze echte tooltips moet je ook even bekijken. Er kan soms met html meer dan je denkt! :D
 
Beste CSShunter,

Ten eerste excuses voor de late reactie, vakantie gehad en weinig achter het schermpje gezeten.

Ik beb inmiddels tot een oplossing gekomen dankzij alle info die je mij gegeven hebt, toppie!

Hieronder het script wat ik nu gebruik:

HTML:
<!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" xml:lang="nl" lang="nl">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
 
<title>HotSpot in html (3)</title>
 
 
<style type="text/css"> 

#topDiv {
	position: absolute; 
   	width: 210px; 
	margin-left:0px;
	}
 
.boxStyle {
	border: 1px solid #990000;
	background: #EFEFEF;
	text-align: left;
    font-size: 12px;
	font-family: verdana, arial, sans-serif;
	color: #cdab7b;
	}

.boxStyle h1 {
	margin: 0px;
	padding: 3px;
	font-size: 12px;
	background: #990000;
	fontcolor: cdab7b;
	text-align: center;
	}

.boxStyle .subtekst {
	text-align: left;
	font-size: 12px;
	text-decoration: underline;
	margin: 5x;
	font-family: verdana, arial, sans-serif;
	color: #990000;
	font-weight: bold;
	}

.boxStyle p {
	text-align: left;
	font-size: 12px;
	padding: 2px 5px 0 0;
	margin: 5px;
	font-family: verdana, arial, sans-serif;
	color: #990000;
	}
</style>
 
<script type="text/javascript"> 
function toggleTooltip(id){
	var tip=document.getElementById(id).style;
	if (tip.display=="none"){
		tip.display="inline-block";
	}
	else {
		tip.display="none";
	}
}
 
</script>
</head>
 
<body>

<span>TekstOpWebsiteMetInfobutton <img src="http://www.jedomein.nl/mapwaarjeplaatjestaat/bijvoorbeeld.button.jpg" onmouseover="toggleTooltip('topDiv')" onmouseout="toggleTooltip('topDiv')" />
<span id="topDiv" class="boxStyle" style="display: none">
	<h1>KOPTEKST TOOLTIP</h1>
	<p class="subtekst">SUBKOPTEKST TOOLTIP</p>
	<p>CONTENT TOOLTIP</span></span>
</body>
 
</html>

Ik heb er veel plezier van!

Als men meerdere tooltips wil gebruiken dan gewoon een kopie maken van de #topDiv en plaatsen in de CSS style en een andere benaming geven bijv. Div1 en deze benaming ook aanpassen in de HEAD van je site. Alles wat nu topDiv is, verander je in Div1.

That's it!

Ik ben er tevreden mee, en CSShunter;

Hartelijk dank voor al je hulp!!

Ik zal de topic afsluiten.

greetz,

Franky
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan