Förklarande text i popup-fönster

Trädvy Permalänk
Avstängd
Plats
Mönsterås
Registrerad
Mar 2002

Förklarande text i popup-fönster

Hej,
jag undrar vad som krävs för att skapa små popup-fönster som förklarar vad termer betyder som en användare klickar på. Exempelvis klickar de på ordet bombastisk i en text och så kommer ett litet fönster upp som förklarar ordet.
Går det att programmera så att samma popupfönster används för alla termer som klickas?

Tack för hjälpen

Allting är gratis. Bara höja skatten.
http://imgur.com/gallery/hhD3J
I zenit av Roms storhetstid mutades romarna att rösta på senatorer i utbyte mot mutor
https://www.youtube.com/watch?v=gJ2tPMIh6u0

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007

Vad pratar du om nu, är det något webbaserat eller?
Om det är HTML vi pratar om så skulle någon kombination av typ <dfn>/<dl> och lite unobtrusive JS kunna vara vettigt. Kan se om jag kan hacka ihop något snabbt med jQuery.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2005

Tooltipet som finns i jQuery Tools tycker jag är riktigt elegant.

http://flowplayer.org/tools/tooltip.html

Trädvy Permalänk
Avstängd
Plats
Mönsterås
Registrerad
Mar 2002

Jepp, hemsida. Samma som tidigare. Ska använda fack-termer som kan behöva förklaring. Tänkte då skapa en länk av ordet, som öppnar ett popup-fönster som förklarar vad termen betyder.

Dock aldrig gjort något sådant.

Allting är gratis. Bara höja skatten.
http://imgur.com/gallery/hhD3J
I zenit av Roms storhetstid mutades romarna att rösta på senatorer i utbyte mot mutor
https://www.youtube.com/watch?v=gJ2tPMIh6u0

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av wereaz
Jepp, hemsida. Samma som tidigare. Ska använda fack-termer som kan behöva förklaring. Tänkte då skapa en länk av ordet, som öppnar ett popup-fönster som förklarar vad termen betyder.

Dock aldrig gjort något sådant.

Håller på och kollar lite på det nu; om du skapar en <dl> i början av ditt dokument (för att även icke-JS-användare ska kunna se definitionerna) så kan man med jQuery sedan dölja denna och använda definitionerna som popups istället. Kan posta ett exempel om en stund.

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003

Beror ju på lite hur avancerat det skall vara också, ska orden hittas i en text eller skall du manuellt göra shortcodes?

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Avstängd
Plats
Mönsterås
Registrerad
Mar 2002

Jag tar ett ord i texten, gör den till en länk som ska kopplas till ett popup fönster som förklarar ordet. Istället för att göra en hel sida, så att säga.

Allting är gratis. Bara höja skatten.
http://imgur.com/gallery/hhD3J
I zenit av Roms storhetstid mutades romarna att rösta på senatorer i utbyte mot mutor
https://www.youtube.com/watch?v=gJ2tPMIh6u0

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007

Fixade ett litet exempel. Har inte tid att förklara nu, så du får titta i källkoden och se om du förstår det.
http://sigurdhsson.org/wp-content/uploads/definitions.html

Trädvy Permalänk
Avstängd
Plats
Mönsterås
Registrerad
Mar 2002

Tack för hjälpen. Ska försöka extrahera det jag behöver av koden och anpassa det till sidan. Vad jag förstår finns scriptkällorna separat på ajax och jquery, dvs det behöver inte laddas ner något lokalt på servern?

Sedan ställer jag in storlek på popupfönster med mera själv. Dock. Ska mina inställningar ligga i CSS-filen eller i själva sid-koden?

Allting är gratis. Bara höja skatten.
http://imgur.com/gallery/hhD3J
I zenit av Roms storhetstid mutades romarna att rösta på senatorer i utbyte mot mutor
https://www.youtube.com/watch?v=gJ2tPMIh6u0

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av wereaz
Tack för hjälpen. Ska försöka extrahera det jag behöver av koden och anpassa det till sidan. Vad jag förstår finns scriptkällorna separat på ajax och jquery, dvs det behöver inte laddas ner något lokalt på servern?

Sedan ställer jag in storlek på popupfönster med mera själv. Dock. Ska mina inställningar ligga i CSS-filen eller i själva sid-koden?

Du behöver inte lägga jQuery på din egen server, nej. Lyckligtvis har Google bestämt sig för att hosta jQuery på sitt CDN, vilket är bra på många sätt.

Om du vill ändra stil på själva popupen gör du det med CSS. Tooltipsen får klassen "tooltip", så det är väldigt enkelt att ge den en bra stil.

Trädvy Permalänk
Avstängd
Plats
Mönsterås
Registrerad
Mar 2002

Grejorna fungerar i löpande text, men jag kom på att jag har orden som ska definieras i <ul> <li></li> </ul> -taggar och där verkar det inte koppla in.
Hur gör jag då?

Allting är gratis. Bara höja skatten.
http://imgur.com/gallery/hhD3J
I zenit av Roms storhetstid mutades romarna att rösta på senatorer i utbyte mot mutor
https://www.youtube.com/watch?v=gJ2tPMIh6u0

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av wereaz
Grejorna fungerar i löpande text, men jag kom på att jag har orden som ska definieras i <ul> <li></li> </ul> -taggar och där verkar det inte koppla in.
Hur gör jag då?

Ändra lite i JavaScriptet bara. Raden där det står:

$("p").each(function(j, p){

Ersätt den med detta:

$("p, li").each(function(j, p){

Trädvy Permalänk
Avstängd
Plats
Mönsterås
Registrerad
Mar 2002

Jaaaa, Wunderbar! Ska genast pröva.

Ahhh, spritzen mir Hans. Det fungerade. Många tack från Reperbahn

Allting är gratis. Bara höja skatten.
http://imgur.com/gallery/hhD3J
I zenit av Roms storhetstid mutades romarna att rösta på senatorer i utbyte mot mutor
https://www.youtube.com/watch?v=gJ2tPMIh6u0

Trädvy Permalänk
Avstängd
Plats
Mönsterås
Registrerad
Mar 2002

Hmm, när sidan laddas så syns alla definitionerna överst, för att sedan försvinna när den egentliga sidan laddats in. Vad kan detta bero på?

www.resle.se/kompetenser.html

Allting är gratis. Bara höja skatten.
http://imgur.com/gallery/hhD3J
I zenit av Roms storhetstid mutades romarna att rösta på senatorer i utbyte mot mutor
https://www.youtube.com/watch?v=gJ2tPMIh6u0

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av wereaz
Hmm, när sidan laddas så syns alla definitionerna överst, för att sedan försvinna när den egentliga sidan laddats in. Vad kan detta bero på?

www.resle.se/kompetenser.html

Edit: Lägg din <dl> direkt efter texten efter "Kompetenser" (inte i <head> som du har gjort nu), och lägg skriptet i <head>, inte <body>.

Trädvy Permalänk
Avstängd
Plats
Mönsterås
Registrerad
Mar 2002

Så, förändrade och lade definitionerna längst ner närmast </body>. Tar ett tag att ladda sidan, men ingen text syns. Väl fungerande rudimentär "databas". Tack You, eller ska jag skriva Me? Får en flashback från filmen Fight Club.

Du har fått credits på sidan, om det är OK.

Allting är gratis. Bara höja skatten.
http://imgur.com/gallery/hhD3J
I zenit av Roms storhetstid mutades romarna att rösta på senatorer i utbyte mot mutor
https://www.youtube.com/watch?v=gJ2tPMIh6u0

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av wereaz
Så, förändrade och lade definitionerna längst ner närmast </body>. Tar ett tag att ladda sidan, men ingen text syns. Väl fungerande rudimentär "databas". Tack You, eller ska jag skriva Me? Får en flashback från filmen Fight Club.

Du har fått credits på sidan, om det är OK.

Lägger du <dl>-listan efter din brödtext istället så blir det bättre; om en besökare inte har JavaScript kommer listan nämnligen inte döljas (det är lite av poängen) -- om listan då ligger längst ner på sidan kan det se konstigt ut.

Men bra att det fungerar i alla fall.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2005
Citat:

Ursprungligen inskrivet av You
Fixade ett litet exempel. Har inte tid att förklara nu, så du får titta i källkoden och se om du förstår det.
http://sigurdhsson.org/wp-content/uploads/definitions.html

Jävligt elegant lösning måste jag säga, snyggt användande av unobtrusive JS! Det är för lite sånt på webben enligt min mening. Det här skulle du med lätthet kunna wrappa till en plugin och lägga upp någonstans (har inte läst din kod så vet inte ifall du redan gjort det).

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003
Citat:

Ursprungligen inskrivet av Wishie
Det här skulle du med lätthet kunna wrappa till en plugin och lägga upp någonstans (har inte läst din kod så vet inte ifall du redan gjort det).

Det är ju redan en del av jQuery, ganska standard så att göra något av detta skulle bara vara ett av flera miljoner andra! Men visst, det är nice! Går göra med enbart HTML om man vill med men då blir det bara standard webbläsarpopupstylingen!

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av x-per
Går göra med enbart HTML om man vill

Hur tänkte du då? <abbr title="">? Osemantiskt. <span title="">? Osemantiskt och jobbigt att underhålla.
Tycker det här är en bättre lösning även om man inte har JS alls; <dl> är trots allt till för att skapa en lista av definitioner som används i dokumentet.

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003
Citat:

Ursprungligen inskrivet av You
Hur tänkte du då? <abbr title="">? Osemantiskt. <span title="">? Osemantiskt och jobbigt att underhålla.

Det är inget osemantiskt med att använda abbr, dessutom till vilken nytta slänger du in span i exemplet?
Iallafall, jobbigt att underhålla beror ju på hur man går tillväga, hårdkodar man in skiten i en liten text så är det inga problem och när det blir bra mycket större är det bara att göra en funktion i PHP för att leta upp ord och slänga in skiten i texten, sen är det bara till att göra ett eget litet lexikon vid sidan om med dom viktiga orden man vill få förklarade!

Slänger man på ett ID också kan man lätt skoja till det med att om man trycker på ordet så highlightas allt förekomster av ordet, kräver lite JS men jao, abbr är inte helt värdelöst!

Citat:

Ursprungligen inskrivet av You
Tycker det här är en bättre lösning även om man inte har JS alls; <dl> är trots allt till för att skapa en lista av definitioner som används i dokumentet.

Nu snackade jag mer om funktionen som tooltip, inte hur det sammanflätas.

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av x-per
Det är inget osemantiskt med att använda abbr, dessutom till vilken nytta slänger du in span i exemplet?

Abbr är helt fel i sammanhanget då vi inte har varken förkortning eller akronym. Point taken gällande span dock.

Citat:

Ursprungligen inskrivet av x-per
Iallafall, jobbigt att underhålla beror ju på hur man går tillväga, hårdkodar man in skiten i en liten text så är det inga problem och när det blir bra mycket större är det bara att göra en funktion i PHP för att leta upp ord och slänga in skiten i texten, sen är det bara till att göra ett eget litet lexikon vid sidan om med dom viktiga orden man vill få förklarade!

Sant, men har man en stor text och inget serverspråk fungerar detta fortfarande. Och med ett title-attribut är det inte säkert att alla webbläsare förstår (misstänker att textbaserade och kanske även IE kan ha problem med det).