Legg til Margin Hover Text til noen nettsteder enkelt med Marginotes

Inline verktøytips er fantastiske, men noen ganger passer de ikke bra med bestemt innhold. De fleste nettsteder gir plass i marginene langs sidekroppen, og dette er perfekt for å legge til verktøytipsformat uten verktøytips .

Skriv inn Marginotes, en gratis åpen kildekode jQuery-plugin som legger til egendefinerte notater i margene på websiden din. Du kan bytte disse notatene basert på koblinger eller enkelte elementer på siden, for eksempel bilder.

Dette pluginet er overraskende enkelt å sette opp, og det leveres med standard stilark for marginalnotene dine. Disse vises til siden av innholdet ditt, og de justeres rett ved siden av avsnittet elementet på nettsiden din.

Hover-notatene legges manuelt til HTML-elementene dine, ved hjelp av et desc attributt . Jeg har aldri sett dette i HTML5, så jeg kan ikke si om det er fullt kompatibelt. Men det blir hentet av JavaScript som er alt du virkelig trenger.

Du kan også endre dette attributtet når du kjører marginotes() -funksjonen, slik at du kan endre den til noe som data-desc hvis du ønsker å være mer kompatibel.

Her er den ene linjen av jQuery som trengs for å få dette pluginet til å fungere:

 $ ( "Velgeren"). Marginotes () 

Du bør erstatte "selector" med hvilke elementer du målretter mot. Så, hvis de er inne i ".body span" din, kan du bruke ".body span" . Du kan også målrette ankerforbindelser eller av bestemte klasser som er lagt til disse elementene.

Innenfor marginotes() -funksjonen kan du legge til to valgfrie parametere for å endre marginalnotatformatet:

1. width - setter notatbredden (standard til 100px)
2. field - angir HTML-innholdsattributtet (standard til "desc" )

Også, hvis du ikke liker å bruke jQuery, kan du prøve Vanilje Marginotes-plugin . Den kjører på vanilje JS, så du har null avhengigheter for å få alle de samme funksjonene.

Du kan også sjekke ut denne live-demoen hvis du vil se den i aksjon. Dette er definitivt et unikt plugin, og det er en fin måte å legge til litt ekstra innhold på nettstedet ditt.

7 verktøy for byggeporteføljer Rask og enkel

Å velge rett verktøy for å bygge et nettsted eller en portefølje er ikke alltid en enkel oppgave. En del av problemet er overflod av valg; grave gjennom dem alle for å finne ut hva som fungerer best for deg kan være en utfordring. Nettstedet og porteføljebyggingsverktøyene vi har oppført her er like gode som du finner overalt - bedre, faktisk som de er kjent og klarert i webdesign fellesskapet.Hva diss

(Tekniske og design tips)

25 tips og triks for å øke hastigheten på Windows 10

Finner du datamaskinen din sakte eller ikke reagerer til tider ? Windows, med hver ny versjon, gir nye funksjoner og oppdateringer som krever flere systemressurser. Dette kan resultere i økt ressursforbruk, noe som resulterer i langsomhet eller manglende respons på systemet.Heldigvis er det mange tips og triks som kan bidra til å minimere unødvendig ressursbruk, noe som gir en fartforsterkning til PCen din. I

(Tekniske og design tips)