|
|
 | Popup med farvevalg
Fra :  RHJN | Vist : 731 gange
100 point
Dato : 17-07-07 23:06 |
|
Hej alle!
Jeg er ved at lave en hjemmeside for mit kommende barn - vi ved endnu ikke hvilket køn barnet har, så jeg kunne godt tænke mig at når folk kommer ind på siden, så skal de vælge om baggrundsfarven på siderne skal være lyseblå eller lyserød (altså når de har valgt een gang bruges denne baggrundsfarve på alle sider)
Kan det lade sig gøre? Skal man bruge CSS? Hvordan?
Hvad skal jeg gøre?
På forhånd tak fra den kommende far 
| |
 | Kommentar
Fra : severino  |
Dato : 17-07-07 23:27 |
|
Det kan det godt, men det vil ikke være 100%, da du skal bruge cookies. Bliver der renset op i dem, skal du vælge farve igen.
Måske er der også andre muligheder.
Men hvorfor ikke bare vente lidt til du har et sikkert resultat, og så vælge den rigtige farve. Det behøver jo blot være en enkelt parameter der skal have ændret værdi i f.eks. en CSS.
| |
| Kommentar
Fra : disken |
Dato : 18-07-07 01:08 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Free JavaScripts provided</title>
<meta name="generator" content="Namo WebEditor v3.0">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function newbg(thecolor)
{
document.bgColor=thecolor;
}
// End -->
</script></head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<form method="get">
<p align="center"><input type="button" value="White" onclick="newbg('white');">
<input type="button" value="Blue" onclick="newbg('blue');"> <input type="button"
value="Beige" onclick="newbg('Beige');"> <input type="button" value="Yellow"
onclick="newbg('yellow');"> <input type="button" value="red" onclick="newbg('red');">
<input type="button" value="cyan" onclick="newbg('cyan');"> <input type="button"
value="indigo" onclick="newbg('indigo');"> <input type="button" value="darkpink"
onclick="newbg('darkpink');"> <input type="button" value="green" onclick="newbg('green');">
<input type="button" value="pink" onclick="newbg('pink');"></p></form>
</body>
</html>
| |
| Kommentar
Fra : disken |
Dato : 18-07-07 01:14 |
|
Denne BURDE ligge på en linie.
Ellers kan der hurtigt laves en POUP/boks der laver samme.
--------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Untitled</title>
<meta name="generator" content="Namo WebEditor v3.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p><iframe src=" http://www.kandu.dk/questionhist.aspx?qid=107141" width="500" height="600" frameborder="0">
</iframe> </p>
<p> </p>
</body>
</html>
| |
| Kommentar
Fra : disken |
Dato : 18-07-07 01:15 |
|
Denne BURDE ligge på en linie.
Ellers kan der hurtigt laves en POUP/boks der laver samme.
--------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Untitled</title>
<meta name="generator" content="Namo WebEditor v3.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p><iframe src=" http://www.kandu.dk" width="500" height="600" frameborder="0">
</iframe> </p>
<p> </p>
</body>
</html>
| |
| Kommentar
Fra : disken |
Dato : 18-07-07 01:17 |
|
++ o.s.v
For megen 
og for lidt 
men det virker HERHJEMME, måske, at jeg IKKE er på min side,
men sidder med en USB stik________
| |
| Kommentar
Fra : RHJN |
Dato : 18-07-07 09:02 |
|
Severino: Ja, det ville nok være lettere til vi ser hvilket køn barnet bli'r, men det er jo ikke så sjovt ... Jeg kan godt se at det er lidt et problem når der renses op i cookies .. alligevel kunne jeg godt tænke mig at se hvad du mener - hvis det er muligt? Tak
Disken: Dit første indlæg: Det script du ligger her, fandt jeg osse under lidt Gooooooogle-søgning; men den vil jo ikke huske farvevalget når man går ind på en ny underside på site't? Vil det?
disken, din indlæg no 2: Det kode du har lavet ... Når jeg lægger det på siden, så sker der ... Ingenting?! Altså bortset fra at linket åbner i en mindre frame? ;)
| |
 | Kommentar
Fra : molokyle |
Dato : 18-07-07 14:19 |
|
Du bør bruge en 'styleshifter'.
Denne kan implementrers på flere måder. Selv har jeg valgt at skrive 'dedikeret' kode og tilhørende stylesheets. Se evt. min hjemmeside: http://www.cssboxing.com/
Nederst på siden til venstre finder du omtalte 'styleshiftermenu' = [Hvid på sort] og [Sort på hvid]
Der findes dog også en Javascript og CSS løsning med brug af cookies 
http://alistapart.com/articles/bodyswitchers
Jeg skrev engang en løsning som så således ud:
Filen: layout.js
Kode
<!--
if(!document.getElementById)
alert("Du bruger en ældre browser, der ikke tillader brugervalgte stylesheets.")
else if(document.cookie.indexOf('style=1')>=0){
document.write('<link rel="stylesheet" type="text/css" href="./css/style_1.css" media="screen">\n');
}
else if (document.cookie.indexOf('style=2')>=0) {
document.write('<link rel="stylesheet" type="text/css" href="./css/style_2.css" media="screen">\n');
}
else if (document.cookie.indexOf('style=3')>=0) {
document.write('<link rel="stylesheet" type="text/css" href="./css/style_3.css" media="screen">\n');
}
else if (document.cookie.indexOf('style=4')>=0) {
document.write('<link rel="stylesheet" type="text/css" href="./css/layout.css" media="screen">\n');
}
else {
document.write('<link rel="stylesheet" type="text/css" href="./css/layout.css" media="screen">\n');
}
function chooseStyle (newstyle){
if (!document.getElementById){
alert("Du bruger en ældre browser, der ikke tillader brugervalgte stylesheets.");
return false;
}
var expdate = new Date();
expdate.setTime(expdate.getTime() + (1000*3600*24*365));
document.cookie = 'style=' + newstyle + 'expires=' + expdate.toGMTString() + 'path=/';
self.location.reload();
}
//--> |
./css/style_1.css, ./css/style_.css og ./css/style_3.css er tre stylesheets (*.css filer) med forskellig baggrundsfarve. ./css/layout.css er filen med det 'oprindelige' = default stylesheet.
[*.css filerne ligger så i et underbibliotek til roden / som navngives css)
Scriptet inkluderes på alle sider med:
Kode
<script type="text/javascript" src="./js/layout.js"></script> |
(default.js ligger så i et underbibliotek til roden / som navngives js)
Koden på (X-)HTML siden hvor 'baggrundsfarve valget' af brugeren kan vælges ser sålede ud:
Kode
<div style="text-align:center;">
Her kan du vælge på hvilken baggrund billederne ønskes vist :
</div>
<p style="text-align:center;">
<button onclick="chooseStyle(1)">Rød baggrund</button>
<button onclick="chooseStyle(2)">Grøn baggrund</button>
<button onclick="chooseStyle(3)">Blå baggrund</button>
<button onclick="chooseStyle(4)">Neutral baggrund</button>
</span>
</div> |
..og cookie'n gør at valget huskes fra side til side, når der navigeres på eget domæne.
Læs evt mere om 'shifting styles' her: http://www.webdesign101.dk/design/styleswitch.php
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 18-07-07 14:23 |
|
RETTELSE:
(default.js ligger så i et underbibliotek til roden / som navngives js)
..burde have været:
(layout.js ligger så i et underbibliotek til roden / som navngives js)
..men det er nu en 'detalje' 
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 18-07-07 14:26 |
|
Ps. De ultimative demo'er af sytleshifts af samme (X-)HTML indhold, men med forskellige layouts styret alene af CSS, finder du eksempler på her:
http://www.csszengarden.com/
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 18-07-07 14:40 |
|
Pps. Disken's metode: http://www.kandu.dk/spg107141.aspx#1198209
..er dog nok den nemmeste at inkludere på alle sider for en 'newbee'
..men der kræves at Javascripting tillades af de besøgende på siden.
En mere 'omstændig' metode er den i ren CSS og XHTML 1.0 jeg selv bruger på min hjemmeside:
Hér er tilladelse af Javascripting og cookies ikke et krav !
Det er dog et større 'arbejde' at implementere dette og stiller således større krav til viden og indsigt i (X-)HTML og CSS hos webprogammøren, som skal vedligeholde siden.
</MOLOKYLE>
| |
| Kommentar
Fra : RHJN |
Dato : 18-07-07 23:18 |
|
hej igen Molo ... Det der er på din side .. Det er lige præcis SÅDAN noget jeg ku tænke mig ... kan dog ikke få det til at virke ud fra det du har sat på nettet her?!? Er det fordi det SKAL uploades og ikke bare køre lokalt?
| |
| Kommentar
Fra : molokyle |
Dato : 19-07-07 00:46 |
|
Det jeg har lavet på min side er ikke implementeret med det script jeg har lagt her på kandu, men scriptet kan nu sagtens køres lokalt. (..du har vel husket selv at skrive dine stylesheet filer og placere dem i relevante bibiloteker?)
Det jeg har lavet på min side er uden javascript, men kodet på den 'hårde' måde. Dvs. at hver eneste side er lavet i 2 versioner, hvor en 'sort' side linker til 'sorte' undersider og en 'hvid' side linker til 'hvide' undersider. 'Sorte' og 'hvide' sider har hver deres fælles stylesheet. ('sorte' sider: black_layout.css ..og 'hvide' sider; white_layout.css)
Man kan dog altid komme fra en 'sort' til en 'hvid' side, da der på en 'sort' side er lavet et link til en 'hvid' side med samme indhold. På samme måde kan man komme fra 'hvid' til 'sort'. (Det er hér de 2 menupunker: [Hvid på sort] og [Sort på hvid] kommer ind i billedet).
Du skal være velkommen til at 'lure' min kode af, men direkte kopiering af layoutet tillader jeg ikke. Jeg forbeholder mig ophavsret til designet/layoutet ...men ikke til koden. (Man kan nemlig ikke 'tage patent' på (X-)HTML kode, men kan godt have ophavsret til layoutet = CSS reglerne).
</MOLOKYLE>
| |
| Kommentar
Fra : RHJN |
Dato : 19-07-07 00:53 |
|
Puha molo ... Det er teknisk det du siger ... (ellers er det bare min hjerne der er brændt af ..)
Tror jeg gør noget helt andet .. laver siden i i-frames, og ud fra hvilken farve folk ønsker på forsiden, kan den omgivende farve have den ønskede ...
| |
| Kommentar
Fra : molokyle |
Dato : 19-07-07 01:02 |
|
Hvis du ønsker det kan jeg godt uploade javascript eksemplet til mit domæne, så du kan se at det fungerer, men det er 'gammel' kode, som er specifikt skrevet til IE6 og ser derfor lidt besynderligt ud i IE7, samt Firefox, Opera, Netscape, Konqueror, Iceweasel og Safari.
Derudover er det 'noget' jeg bixede sammen til en kunstnerinde, som nu er flyttet til udlandet og derfor har nedlagt sit oprindelige domæne. Derfor er det hende som har ophavsretten til indholdet, medens jeg som programmøren har ophavsretten til designet af siderne
Respekter venligst hvis jeg skal uploade sitet, at du ikke må hente billederne på siderne.
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 19-07-07 01:06 |
|
Her er styleshifteren i javascript, som den ser ud på Birgitte Schultz 'gamle' hjemmeside:
http://www.cssboxing.com/temp/Birgitteschultz/billeder.html
..men som sagt, så 'vælter' layoutet i nyere browsere 
..men Styleshifteren fungerer fint alligevel
Ps. Jeg fjerner filerne igen inden for 24 timer !!! 
</MOLOKYLE>
| |
| Kommentar
Fra : RHJN |
Dato : 19-07-07 01:54 |
|
Det ser fint ud det du har lavet, men med det i baghovedet du selv siger med at det ikke virker i alle browsere, tror jeg at jeg bare bruger min egen løsning - alligevel syns jeg du skal ha' pointene for et godt forsøg!
Og hvem ved - måske jeg får brug for din hjælp en anden dag
| |
| Accepteret svar
Fra : molokyle | 
Modtaget 100 point
Dato : 19-07-07 03:26 |
|
Joeh... det virker skam i alle browsere ...sålænge at brugeren tillader scripting ..og det gør de fleste nu. Dét som er mindre heldigt er, at CSS reglerne ikke tolkes ens i alle browsere, så hvis man ikke tager højde for dette? ..så 'vælter' designet i nogen browsere. Dvs. at tingene ikke vises på siden præcis som man havde tænkt sig. Læs evt. : http://www.positioniseverything.net/
Da jeg skrev omtalte side skulle det blot virke i IE6. Det var et spørgsmål om økonomi.
Min egen hjemmeside virker og præsenteres ens i alle browsere, men det har også været et større 'projekt', som slet ikke er færdigt endnu. Jeg arbejder i 'kulissen' med nogen importerede stylesheets for at slippe af med en del redundant kode.
Du er altid velkommen til at trække på mig og andre, hvis du skulle løbe ind i problemer
</MOLOKYLE>
| |
| Godkendelse af svar
Fra : RHJN |
Dato : 19-07-07 09:37 |
|
Go' hjælp Molokyle ... selv når jeg kom med yderligere / uddybende spørgsmål var du der med svar .. Tak for det!!
| |
 | Du har følgende muligheder | |
|
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.
Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
| |
|
|