Att skapa ett visitkort i Javascript?|Programmering / Grafisk formgivning|Forum|Nordichardware

sp_LogInOut Log In
sp_Search Search
Advanced Search
Search
Forum Scope


Match



Forum Options



Minimum search word length is 3 characters - maximum search word length is 84 characters
sp_Search Search
Lost password?
The forums are currently locked and only available for read only access
sp_Feed sp_TopicIcon
Att skapa ett visitkort i Javascript?
Kizo
Member
Medlem
Forum Posts: 5235
Member Since:
September 16, 2002
sp_UserOfflineSmall Offline
1
August 3, 2006 - 8:32 am
sp_Permalink sp_Print

Jag har en uppgift på Datateknik A, Internet där jag måste göra en sida där man kan skapa ett visitkort.
Jag vet verkligen inte hur detta skall fungera, så jag vore väldigt glad om någon kunde peka mig i rätt riktning, istället för att bara säga:
"Här kan man läsa om Javascript!"
Image Enlarger

jonaz
Kommer du hit ofta?
Medlem
Forum Posts: 940
Member Since:
May 8, 2001
sp_UserOfflineSmall Offline
1065404
August 3, 2006 - 9:38 am
sp_Permalink sp_Print

Den första html-sidan ska innehålla ett formulär med de fält som ska fyllas i. Egentligen behöver det nog inte vara ett formulär men jag tror det blir enklare så. Knappen för att visa visitkortet ska öppna sidan som visar visikortet. Kolla "window.open".

Sida 2 ska sen skapas dynamiskt med data från formuläret. Datan kan man hämta från det nya fönstrets "parent". Tror att det är typ "parent.

.". För att skriva ut värdena som du hämtar använder du som det står i uppgiften "document.write". Den "kod" som inte är dynamsikt skapad på sida 2 behöver ju inte skapas med javascript.

Med denna info och lite hjälp av Google borde detta vara enkelt! Lycka till!

Desktop: Gigabyte GA-MA770-DS3 | AMD Phenom II 955 BE | 8GB PC6400 | Samsung 1TB + 500GB | Powercolor HD3870
3DMark 2006: 11932 3DMark Vantage: P5137
Laptop: Macbook Pro 2012 | 8GB | Samsung 830 128GB SSD
HTPC: Mac Mini | 3GB | 500GB

Kizo
Member
Medlem
Forum Posts: 5235
Member Since:
September 16, 2002
sp_UserOfflineSmall Offline
1065519
August 3, 2006 - 3:29 pm
sp_Permalink sp_Print

Jag har gjort en "inmatningssida" nu och ska kolla upp Window samt parent.
Kommer jag behöva definera nya variabler från min form? Jag har gjort det i alla fall, i en funktion i head. Fast det kanske är helt onödigt, om child-sidan kommer åt min form direkt?

Kizo
Member
Medlem
Forum Posts: 5235
Member Since:
September 16, 2002
sp_UserOfflineSmall Offline
1065530
August 3, 2006 - 4:05 pm
sp_Permalink sp_Print

Jag har nu två sidor, en inmatningssida och en kortsida.

I min inmatningssida, så har jag ett formulär, name="card", och i det har jag bland annat;

<input type="text" name="company" size="15">

Som bekräftelseknapp har jag:

<input type="button" style="font-size: 14pt" value="Visa" onClick="window.open('laboration3_card.html', 'Card')" name="button">

Och hela min laboration3_card.html är:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title>Kort</title>

	</head>

	

	<body>

	<script type="text/javascript">

	<!--

	test = parent.card.company;

	document.write(test);

	//-->

	</script>

	</body>

	</html>

Men min lab3card-fil visar ingenting. 🙁 Jag tar för givet att det är för att jag har gjort fel och min fråga är; vad?

Edit: Jag provade byta parent till opener men det hjälpte inte.

jonaz
Kommer du hit ofta?
Medlem
Forum Posts: 940
Member Since:
May 8, 2001
sp_UserOfflineSmall Offline
1065537
August 3, 2006 - 4:29 pm
sp_Permalink sp_Print

Jag tror att du måste ha "value" i slutet för att läsaren ska förstå att det är värdet i fältet som ska visas:

test = parent.card.company.value;
document.write(test);

eller

document.write(parent.card.company.value);

Desktop: Gigabyte GA-MA770-DS3 | AMD Phenom II 955 BE | 8GB PC6400 | Samsung 1TB + 500GB | Powercolor HD3870
3DMark 2006: 11932 3DMark Vantage: P5137
Laptop: Macbook Pro 2012 | 8GB | Samsung 830 128GB SSD
HTPC: Mac Mini | 3GB | 500GB

joka_90
Siktar mot toppen
Medlem
Forum Posts: 71
Member Since:
July 30, 2005
sp_UserOfflineSmall Offline
1065541
August 3, 2006 - 4:56 pm
sp_Permalink sp_Print

eller så kan du göra något som dethär



	<script language = "javascript">

	<!--

	

	function generate(){

	codecenter= ''

	

	medlemsnr = ''

	

	style = ''

	

	

	if(document.barspecs.mnr.value != ''){medlemsnr = document.barspecs.mnr.value}

	if(document.barspecs.stylef.value != ''){style = document.barspecs.stylef.value}

	

	

	if(medlemsnr != ''){codecenter+= 'lite kod' + medlemsnr + 'entern'}

	if(style != ''){codecenter+= '[Image Can Not Be Found]'}

	

	codestart = 'kod som är med i början'

	codeend = 'kod som är med i slutet'

	

	document.barspecs.scrollcode.value = codestart + codecenter+ codeend

	

	}

	

	

	//-->

	</script>

	

	

	<form name="barspecs">

	

	

	

	<input type="hidden" name="navlinks" value="">

	

	

	Medlems nummer:<input type="text" name="mnr" value="" size="12">

	

	

	<input type="button" value="Create!" class="buttons" onclick="generate()">

	

	<input type="reset" class="buttons" name="rensa">

	

	<textarea rows="15" name="scrollcode" cols="83"></textarea>

	<select size="1" name="stylef">

	<option value="meny.jpg">1</option>

	<option value="Meny_b.jpg">2</option>

	<option value="Blue_b_m.jpg">3</option>

	<option value="Blue_meny.jpg">4</option>

	

	</select>

	

	

	</form>
jonaz
Kommer du hit ofta?
Medlem
Forum Posts: 940
Member Since:
May 8, 2001
sp_UserOfflineSmall Offline
1065549
August 3, 2006 - 5:16 pm
sp_Permalink sp_Print

joka_90 wrote: eller så kan du göra något som dethär...

Nja, inte om "visitkortet" ska öppnas i ett nytt fönster...

Desktop: Gigabyte GA-MA770-DS3 | AMD Phenom II 955 BE | 8GB PC6400 | Samsung 1TB + 500GB | Powercolor HD3870
3DMark 2006: 11932 3DMark Vantage: P5137
Laptop: Macbook Pro 2012 | 8GB | Samsung 830 128GB SSD
HTPC: Mac Mini | 3GB | 500GB

joka_90
Siktar mot toppen
Medlem
Forum Posts: 71
Member Since:
July 30, 2005
sp_UserOfflineSmall Offline
1065570
August 3, 2006 - 6:06 pm
sp_Permalink sp_Print

parent:



	<form method="post" action="popup.htm" name="form" target="_blank">

	Namn:<input type="text" name="namnF" value="" size="12">

	


	Yrke:<input type="text" name="yrkeF" value="" size="12">

	


	Bor:<input type="text" name="borF" value="" size="12">

	


	Tele:<input type="text" name="teleF" value="" size="12">

	


	Mail:<input type="text" name="mailF" value="" size="12">

	


	<select size="1" name="styleF">

	<option value="style1">1</option>

	<option value="style2">2</option>

	<option value="style3">3</option>

	<option value="style4">4</option>

	</select>

	

	


	<input type="submit" value="Create!">

	


	<input type="reset" class="buttons" name="rensa">

	</form>

popup.htm:



	<script language = "javascript">

	<!--

	

	document.write(top.opener.document.form.namnF.value); 

	document.write(top.opener.document.form.yrkeF.value);

	document.write(top.opener.document.form.borF.value); 

	document.write(top.opener.document.form.teleF.value); 

	document.write(top.opener.document.form.mailF.value); 

	document.write(top.opener.document.form.styleF.value); 

	

	

	//-->

	</script>

edit: nu skriver den bara ut all data på sidan..

joka_90
Siktar mot toppen
Medlem
Forum Posts: 71
Member Since:
July 30, 2005
sp_UserOfflineSmall Offline
1065605
August 3, 2006 - 7:45 pm
sp_Permalink sp_Print

såå, det enda jag inte får till är att den inte vill visa strängarna när de omringas av " istället för '

<form method="post" action="popup.htm" name="form" target="_blank">

	Namn:<input type="text" name="namnF" value="" size="12">

	


	Yrke:<input type="text" name="yrkeF" value="" size="12">

	


	Bor:<input type="text" name="borF" value="" size="12">

	


	Tele:<input type="text" name="teleF" value="" size="12">

	


	Mail:<input type="text" name="mailF" value="" size="12">

	


	BgColor:

	

	


	<select size="1" name="styleCoBgF">

	<option value="#000000">Svart</option>

	<option value="#0000FF">Blå</option>

	<option value="#FF0000">Röd</option>

	<option value="#00FFFF">Grön</option>

	<option value="#FFFF00">Gul</option>

	</select>

	

	


	FontColoR:

	

	


	<select size="1" name="styleCoFoF">

	<option value="#000000">Svart</option>

	<option value="#0000FF">Blå</option>

	<option value="#FF0000">Röd</option>

	<option value="#00FFFF">Grön</option>

	<option value="#FFFF00">Gul</option>

	</select>

	

	


	Font:

	


	<select size="1" name="styleTYFoF">

	<option value="Ariel">Ariel</option>

	<option value="Verdana">Verdana</option>

	<option value="Tahoma">Tahoma</option>

	<option value="Inpact">Inpact</option>

	</select>

	

	


	<input type="submit" value="Create!">

	


	<input type="reset" class="buttons" name="rensa">

	</form>

popup.htm:



	<script language = "javascript">

	<!--

	

	var namn = top.opener.document.form.namnF.value

	var yrke = top.opener.document.form.yrkeF.value

	var bor = top.opener.document.form.borF.value

	var tele = top.opener.document.form.teleF.value

	var mail = top.opener.document.form.mailF.value

	

	var styleCoBg = top.opener.document.form.styleCoBgF.value

	var styleCoFo = top.opener.document.form.styleCoFoF.value

	var styleTyFo = top.opener.document.form.styleTYFoF.value

	

	document.write("<table width='328' border='0' cellspacing='0' cellpadding='0' style='font:" +String(styleTyFo)+ "; color: " +String(styleCoFo)+ "; background-color:" +styleCoBg+ "'><tr><td>" +String(namn)+ "</td></tr><tr><td>" +String(yrke)+ "</td></tr><tr><td>" +String(bor)+ "</td></tr><tr><td>tele: " +String(tele)+ "</td></tr><tr><td>Mail: " +String(mail)+ "</td></tr><tr><td></td></tr></table>')")

	

	//-->

	</script>

Edit: hade satt in samma sida två gånger + att nu har jag fixat så det funkar riktigt

Kizo
Member
Medlem
Forum Posts: 5235
Member Since:
September 16, 2002
sp_UserOfflineSmall Offline
1065726
August 4, 2006 - 10:18 am
sp_Permalink sp_Print

Nice, nu verkar allt förutom en sak fungera. Jag får inte font-val att spela någon roll. 🙁

Inmatningssida:

......

	......

	......

	  <tr>

	    <td>

	

	Typsnitt</p></td>

	    <td>

	

	<select name="text">

					<option value="verdana">Verdana</option>

					<option value="arial">Arial</option>

					<option value="tahoma">Tahoma</option>

					<option value="impact">Impact</option>

			   </select></p></td>

	  <tr>

	  	<td><input type="button" style="font-size: 14pt" value="Visa" onClick="window.open('laboration3_card.html', 'Card')" name="button"></td>

	  <tr>

	  	<td><input type="reset" style="font-size: 10pt" value="Nollställ alla fält"></td>

	  </tr>

	</table>

	

	</form>

Resultatsida (bara scriptet):

<script type="text/javascript">

	<!--

		company = window.opener.document.card.company.value;

		lastName = window.opener.document.card.lastName.value;

		firstName = window.opener.document.card.firstName.value;

		title = window.opener.document.card.title.value;

		phone = window.opener.document.card.phone.value;

		email = window.opener.document.card.email.value;

		bgColor = window.opener.document.card.bgColor.options[window.opener.document.card.bgColor.selectedIndex].value;

		color = window.opener.document.card.textColor.options[window.opener.document.card.textColor.selectedIndex].value;

		font = window.opener.document.card.text.options[window.opener.document.card.text.selectedIndex].value;

	

	document.write("<table border='0' cellspacing='0' cellpadding='0' style='font:" +String(font)+ "; color: " +String(color)+ "; background-color:" +bgColor+ "'><tr><td class='company'>" +String(company)+ "</td></tr><tr><td class='bigger'>" +String(firstName) + " " +String(lastName) + "</td></tr><tr><td class='smaller'>" +String(title)+ "</td></tr><tr><td class='bigger'>Tfn: " +String(phone)+ "</td></tr><tr><td class='smaller'>e-Post: " +String(email)+ "</td></tr></table>")

	

	

	//-->

	</script>

CSS kopplad till resultatsidan:

td.company {

	font-size: 18px;

	font-weight: bold;

	padding: 2px 5px 0px 5px;

	}

	

	td.bigger {

	font-size: 14px;

	padding: 6px 5px 0px 5px;

	}

	td.smaller {

	font-size: 12px;

	padding: 1px 5px 2px 5px;

	}

	img {

		border: 0;

	}
joka_90
Siktar mot toppen
Medlem
Forum Posts: 71
Member Since:
July 30, 2005
sp_UserOfflineSmall Offline
1065779
August 4, 2006 - 1:08 pm
sp_Permalink sp_Print

får det inte heller att funka... inte ens genom att ändra för hand i css koden...

Kizo
Member
Medlem
Forum Posts: 5235
Member Since:
September 16, 2002
sp_UserOfflineSmall Offline
1065899
August 4, 2006 - 5:50 pm
sp_Permalink sp_Print

Löst nu.
Skulle vara font-family, inte font, i kortet.

sp_Feed
Go to top
Forum Timezone: Europe/Stockholm
Most Users Ever Online: 694
Currently Online:
Guest(s) 52
Currently Browsing this Page:
1 Guest(s)
Top Posters:
Andreas Galistel: 16287
Jonas Klar: 15897
ilg@dd: 10810
Nyhet: 10607
Mind: 10550
Ctrl: 10355
Gueno: 9881
Guest: 9344
Snorch: 8881
Callister: 8468
Newest Members:
PetrbonFU PetrbonFU
Karine Bembry
Dolores Mcdaniels
Anibal McLeish
Francisca Alt
Alfie Everhart
Lester Huitt
Orlando Jorgensen
Mikki Lundgren
Dakota Kozlowski
Forum Stats:
Groups: 11
Forums: 59
Topics: 146630
Posts: 1300967

 

Member Stats:
Guest Posters: 2
Members: 79425
Moderators: 0
Admins: 11
Administrators: nordicadmin, Henrik Berntsson, Anton Karmehed, Carl Holmberg, Joel Oscarsson, Mikael Linnér, Mikael Schwartz, Andreas Paulsson, Nickebjrk, Mattias Pettersson, EmxL