Legge inn link i knapp, hvordan?

[Dag Frogner]

Jeg har denne koden:

<button id="buy-now-button" type="submit">
Teksten går her
</button>

Dette genererer en knapp, men jeg vil gjerne legge inn en link her. Har fått til å legge inn link på selve teksten, men vil ha på hele knappen.

Noen som vet?

 

[picxx]

Legg url i bildet, som du legger som bakgunn, som jeg spurde om for ikke så lenge siden her på forumet..... finner dog ikke tråden..

 

[Dag Frogner]

Mulig det er meg som er (over)trøtt, men jeg er ikke helt med på den der.

 

[picxx]

Mulig det er meg som er (over)trøtt, men jeg er ikke helt med på den der.

Du bruker vel, mest sannsynlig, et bilde som knapp?
Denne legger du som bakgrunn og tildeler denne en klikk url (som vist i tråden jeg ikke finner).
Ser ikke ut som noen j/s knapp, som har begrensede muligheter.

 

[Dag Frogner]

Vel, det var dette som ble løsningen:

I toppen av index.html:

<script language="javascript">
function GoTo()
{
window.document.location.href = "URL HER";
}
</script>

Knappen:

<button id="buy-now-button" input type="Button" OnClick="javascript:GoTo()">
KNAPPETEKST
</button>

 

[adeneo]

Bare for morro skyld, her er noen andre muligheter:

Bruk form elementet, validerer, ingen inline js, og virker i alle nettlesere også uten js

<form method="get" action="URL_HER">
     <input type="submit" value="knappetekst" id="buy-now-button" />
</form>

Siden knappen allerede har en ID trenger du ikke inline js, og det er heller ikke noe behov for å fortelle en button at den er button ved å bruke type="button", det er kun nyttig på input elementer som kan være flere ting, og uten at jeg gidder å sjekke så ser den koden for knappen din veldig feil ut, enten så er det <button> eller så er det <input type="button">, det er ingen grunn til å helgardere den der.

<button id="buy-now-button">KNAPPETEKST</button>

<script type="text/javascript"> 
   document.getElementById("buy-now-button").onclick = function(){
           window.location.href = 'URL_HER';
   }
</script>

Dersom det ikke brukes window.onload eller jQuery's ready handler så må javascript komme etter elementet ettersom getElementById ikke kan hente et element som ikke eksisterer, og dette er en bedre løsning enn å ha en onclick handler rett på elementet, noe som er dårlig praksis.

Dersom du bruker jQuery på siden, kunne du flyttet hele funksjonen ut i et eksternt script som hadde vært enda bedre og gjort:

$("#buy-now-button").on('click', function() {
    window.location.href = 'URL_HER';
});

Det er heller ingen grunn til å bruke window.document.location.href = "URL HER";
document.location virker helt fint, men er egentlig deprecated, og window.location.href er mer riktig selv om window.location holder ettersom en string satt på location objektet automatisk anses som href attributt.

 

[Dag Frogner]

Prøvde den første, men da ble både knappen og teksten inni "styggere". Knappen ble litt taggete og det ble brukt en annen font på teksten inni.

Versjon nummer to fungerer ikke i det hele tatt. Knappen kommer opp og alt ser bra ut, og det kommer opp et håndsymbol når jeg fører musepekeren over, men det skjer ikke noe når jeg trykker.

Om jeg prøver på den tredje versjonen, så må jeg vel linke opp navnet på denne filen mot html`en? Det vil vel ikke fungere å kun lagre koden din i en egen fil og slenge opp på webhotellet?

 

[adeneo]

En kjapp test i et dokument uten stiler så blir en input type="button" i et form helt lik som en <button>, men ofte er det satt stiler på form eller input elementet, og det er nok det som gjør at de blir forskjellige, og noen nettlesere kan nok sikkert vise de litt forskjellig også selv om de i prinsippet skal være like.

Nummer to virker fint her, men som nevnt må scriptet komme etter selve knappen i dokumentet for at det skal virke hvis ikke man bruker en onload handler for vente til elementet faktisk eksisterer, noe sånt.

<script type="text/javascript">
window.onload = function(){
   document.getElementById("buy-now-button").onclick = function(){
           window.location.href = 'http://www.google.no';
   }
}
</script>

Jeg tok med en jQuery versjon ettersom de fleste sider bruker jQuery til ett eller annet, men alle javascript funksjoner kan legges både inline og i ekstern fil, jQuery inline ville vært noe slikt:

<script type="text/javascript">
$(document).ready(function() {
    $("#buy-now-button").on('click', function() {
        window.location.href = 'http://www.google.com';
    });
});
</script>

Men dersom siden allerede har en javascript fil med en document.ready så kan man bare lime inn funksjonen i den allerede eksisterende js filen inne i den allerede eksisterende document.ready handleren, og det vil være den beste løsningen ettersom det skiller form og funksjon fra hverandre og ikke bruker inline onclick handlere, men det er opp til deg hvordan du vil gjøre det, og det er ingenting direkte galt med en onclick rett på elementet utover at det er regnet som litt dårlig praksis å gjøre det på den måten.

 

[Dag Frogner]

Du kan jo ta en titt her og se hvilken løsning som vil være best: Bli Plan Fadder i dag for kun 8 kroner om dagen

 

[adeneo]

okay!

Det er mange måter å gjøre dette på, jeg ville lagt all JS i en fil og minifisert den filen, men det er unødvendig komplisert å begynne å rote med inkludering av plugin's og jQuery i samme fil, og krever normalt litt kunnskap om JS for å få riktig.
Det er uansett landingpro.js som er JS filen som brukes av cms'et ditt for kjøre plugin's og andre funksjoner.
I landingpro.js er det øverst en document.ready sak som kjører funksjoner når siden er lastet inn og DOM'en er klar, og det er stedet å legge inn ytterligere JS.

Den ser slik ut i dag:

$(document).ready(function() {
	runCufon();		
	// Initialize placeholder for the sign-up form
	$(":input[placeholder]").placeholder();

	activateFancyBox();	
    activateTabs();
    activateCarousel();	  
});

Bare å legge til click handleren for knappen din der, noe sånt:

$(document).ready(function() {
	runCufon();		
	// Initialize placeholder for the sign-up form
	$(":input[placeholder]").placeholder();

	activateFancyBox();	
	activateTabs();
	activateCarousel();	  
	$("#buy-now-button").on('click', function() {
		window.location.href = 'http://www.google.com';
	});
});

 

[kek91]

Dersom du rett og slett ønsker en enkel knapp kan du gjøre følgende:

CSS:

.minknapp a {
    background:#dddddd;
    width:100px;
    padding:5px;
    border:1px solid #999999;
    float:left;
    color:#333333;
    text-decoration:none;
    margin:5px;
}
.minknapp a:hover {
    background:#eeeeee;
    border:1px solid #333333;
    color:#666666;
    text-decoration:none;
}

HTML:

<div class="minknapp">
	<a href="#">Eksempeltekst</a>
	<a href="#">Eksempeltekst</a>
	<a href="#">Eksempeltekst</a>
</div>

Lastet opp et vedlegg som illustrerer hvordan knappen ser ut. Knappen til høyre illustrerer hover effekten (musa over knappen).

Hvis du ønsker å bruke et bilde som bakgrunn kan du bare endre til background:url(bildeknapp.gif); i CSS og evt det andre som bredde etc.

Håper det var til hjelp