adeneo
Medlem
Jada, alt ligger i html filen, bare klikk "vis kildekode" eller noe sånt, så ser du at alt er stylet med css.
Koden kan se litt avskrekkende ut med en gang ettersom jeg tok litt av med CSS3 effekter på den kjøpeknappen, som også er kun css, ikkenoe javascript som styrer fading osv. på den knappen, kun en helt vanlig html <button> som er stylet med css.
Koden ble akkurat litt lang til at jeg fikk lov til å legge den ut her i går, men jeg prøver på nytt i dag ved å legge ut koden uten fargeeeffektene og effekter på kjøpeknappen.
jQuery brukes kun til å oppdatere prisen og velge hvilket innhold som skal være synlig.
Jeg droppet php biten, så her foregår utregningen også i javascript, og det er mulig det må endres slik at det blir mer som nextri sitt eksempel dersom priser skal hentes ut av en database e.l.
Koden kan se litt avskrekkende ut med en gang ettersom jeg tok litt av med CSS3 effekter på den kjøpeknappen, som også er kun css, ikkenoe javascript som styrer fading osv. på den knappen, kun en helt vanlig html <button> som er stylet med css.
Koden ble akkurat litt lang til at jeg fikk lov til å legge den ut her i går, men jeg prøver på nytt i dag ved å legge ut koden uten fargeeeffektene og effekter på kjøpeknappen.
HTML:
<!DOCTYPE html>
<head>
<title>adeneo's nettbutikk</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">
#container {position: relative; margin:0 auto; padding: 0; top:40px; height:200px; width:900px;}
#topp {background: #f9f9f9; border: 5px ridge #ececec;
width: 100%; height: 20%; position: relative; top:0; padding: 10px;
}
#bunn {background: #ffffff; border: 5px ridge #ececec;
width: 100%; height: 70%; position: relative; bottom:0; padding: 10px; margin-top: 10px;
}
#montering {position: relative; top: 60px; right:0; display: inline;}
#pris {position: relative; right 30px; top:10px; height: 20px; width: 50px; color: #1b31e9; font-family: arial;}
#venstre {position: absolute; right:0; top:0; width: 150px; height: 100%;}
form {margin: 0px 0px 0px 0px;}
select {display:inline; padding-left:10px; margin:0:}
h1 {position: relative; margin: 0; padding:0; text-align: center;}
h5 {display:inline; padding-left:10px; margin:0: font-size: 1em;}
h6 {position:absolute; top:97px; right:40px;}
.antall {margin: 0;}
.montering {bottom:10px; position:absolute;}
p, h3 {display:inline; font-size:2.5em; font-weight:bolder;}
.medpigg, .medalt, .last, .traktor, .medmont {display: none;}
#kjopeknappen {
position: relative; top: 50px; width: 100px; height: 30px;
margin: 4px; padding: 0; display: inline-block; text-align: center; background: #ccc;
}
</style>
</head>
<body>
<div id="container">
<h1>Adeneo's nettbutikk ☺</h1>
<div id="topp">
<form>
<h5>Velg løsning:</h5>
<select id="losning" class="velg">
<option value="1995">Pakkepris uten hengelås og uten pigger (1995,-)</option>
<option value="2295">Pakkepris uten hengelås med pigger (2295,-)</option>
<option value="2995">Pakkepris med hengelås og pigger (2995,-)</option>
</select>
<h5>Velg type:</h5>
<select id="type" class="velg">
<option value="1">Personbil</option>
<option value="1.2">Lastebil +20%</option>
<option value="1.4">Traktor +40%</option>
</select>
<h5>Antall:</h5>
<input id="antall" type=text class="ganger" name=amount value=1 maxlength="2" size="2">
<input type=button class="ganger" value="▲" onClick="javascript:this.form.amount.value++;">
<input type=button class="ganger" value="▼" onClick="javascript:this.form.amount.value--;">
</form>
</div>
<div id="bunn">
<div id="beskrivelse">
<h4 class="utenpigg">Super Duper pakketilbud uten en eneste hengelås og vaffal ikke med pigger</h4>
<h4 class="medpigg">Super Duper pakketilbud uten en eneste hengelås og med bøttevis med pigger</h4>
<h4 class="medalt">Super Duper pakketilbud med enorm hengelås og bøttevis med pigger</h4>
<h4 class="person">Til alle typer personbiler</h4>
<h4 class="last">Til kjempestore lastebiler</h4>
<h4 class="traktor">Pakken for alle bondetamper</h4>
<h4 class="medmont">Vi monterer greiene for deg</h4>
<h4 class="utenmont">Montere driten gjør du sjøl</h4>
</div>
<div id="venstre">
<div id="pris">
<p>1995</p><h3>,- </h3>
</div>
<input type=button id="kjopeknappen" value="KJØP NÅ" onclick="driverIkkeButikk()"/>
<form>
<input type="checkbox" id="montering" value="0"/>
<h6>Montering 499,-</h6>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
function driverIkkeButikk() {alert("Vi driver ikke butikk her asså!");}
$(".velg").bind('change', function() {
var Pris = parseInt($("#losning").val());
var Type = $("#type").val();
var Antall = $("#antall").val();
var Montering = parseInt($("#montering").val());
var TotalPris = Pris * Type;
var TotalPrismm = TotalPris + Montering;
var Total = TotalPrismm * Antall;
$("#pris p").html(Total);
if (Pris == "1995") {$(".utenpigg").css("display","block");
$(".medpigg, .medalt").css("display","none");}
else if (Pris == "2295") {$(".medpigg").css("display","block");
$(".utenpigg, .medalt").css("display","none");}
else
{$(".medalt").css("display","block");
$(".utenpigg, .medpigg").css("display","none");}
if (Type == "1") {$(".person").css("display","block");
$(".last, .traktor").css("display","none");}
else if (Type == "1.2") {$(".last").css("display","block");
$(".person, .traktor").css("display","none");}
else
{$(".traktor").css("display","block");
$(".person, .last").css("display","none");}
});
$(".ganger, #montering").bind('click', function() {
if ($("#montering").is(":checked"))
{$("#montering").val(499);
$(".utenmont").css("display", "none");
$(".medmont").css("display", "block");}
else {$("#montering").val(0);
$(".utenmont").css("display", "block");
$(".medmont").css("display", "none");}
var Pris = $("#losning").val();
var Type = $("#type").val();
var Antall = $("#antall").val();
var Montering = parseInt($("#montering").val());
var TotalPris = Pris * Type;
var TotalPrismm = TotalPris + Montering;
var Total = TotalPrismm * Antall;
if (Antall < 1) {$("#antall").val(1);}
else {$("#pris p").html(Total);}
});
</script>
</div>
</body>
</html>jQuery brukes kun til å oppdatere prisen og velge hvilket innhold som skal være synlig.
Jeg droppet php biten, så her foregår utregningen også i javascript, og det er mulig det må endres slik at det blir mer som nextri sitt eksempel dersom priser skal hentes ut av en database e.l.