[Javascript] voor dummies (deel 7)

dinsdag 1 april 2008 @ 09:49:37 #151

Chandler

Haha, wist niet dat het zo simpel was

En wat betekend dit

end of file reached in invalid state for current encoding

The people who lost my respect will never get a capital letter for their name again.
Like trump...

dinsdag 1 april 2008 @ 09:54:00 #152

mcDavid

Google zoeken naar 'end of file reached in invalid state for current encoding'

dinsdag 1 april 2008 @ 10:18:38 #153

Chandler

Ik heb gezocht maar kon niet echt wijs worden uit de omschrijvingen

The people who lost my respect will never get a capital letter for their name again.
Like trump...

dinsdag 1 april 2008 @ 17:34:04 #154

SuperRembo

Sinds 1998

quote:
Op dinsdag 1 april 2008 09:45 schreef mcDavid het volgende:
<img onload="functie()" <src="#">

Dat is de theorie... volgens mij zitten er nogal wat bugs in verschillende browsers die het wat ingewikkelder maken. Maar dar weet ik het fijne ook niet van.

woensdag 2 april 2008 @ 20:07:32 #155

BaggerUser

ModderFokker!

Hoi,

vraagje

ik was zojuist even bezig een oefentoets te bekijken voor javascript, ik het document even doorlezen, nou geen probleem leek mij dus geloofde het wel

totdat ik het laatste punt las:

quote:
wanneer JavaScript uit zou staan in de browser van de gebruiker het
formulier ook verstuurd moet kunnen worden (gebruik het onsubmit
event).

Als de action netjes is ingevuld in het formulier dan stuurt hij deze toch sowieso als javascript is uitgeschakeld of zie ik dat verkeerd? Volgens mij maken ze het wat spannender dan het is of denk ik nu te makkelijk, of lees ik nu verkeerd?

hele opdracht staat hier: http://essek.nl/fok/oefentoets.pdf

(het gaat mij dus alleen om dat laatste punt, de rest geloof ik wel)

De enige echte BaggerUser!
Riemen
fiets kopen

FOK!-Schrikkelbaas zondag 6 april 2008 @ 22:59:59 #156

Swetsenegger

Egocentrische Narcist

Zijn er hier trouwens bekend met het framework mootools. Ik vind het wel gelikt.

 | FOK! Schrikkelbaasch

maandag 7 april 2008 @ 23:04:45 #157

fokME2

Mootools werkt wel lekker, al werk ik persoonlijk iets liever met prototype. Nu ben ik zelf niet zo van de frameworks, maar zoiets als prototype/mootools is wel erg handig!

woensdag 9 april 2008 @ 13:32:02 #158

Pronk

Koffie?

Ik heb een vraagje:

Ik roep via verschillende functies (bijv. 1 t/m 25) een andere functie functie (bijv. 26) aan.

Deze functie (26) checked of de gebruiker verder mag, als de gebruiker dit niet mag dan wordt de functie (26) gestopt. Maar.... Dan loopt de functie die deze functie heeft aangeroepen (1 t/m 25) wel gewoon door en dat wil ik niet.

Dus mijn vraag is dus eigenlijk, bestaat er in javascript een commando waarmee ik alle lopende functies kan stoppen?

Ja lekker!

woensdag 9 april 2008 @ 15:28:14 #159

mcDavid

Een functie die checked of de gebruiker verder mag?
Al over nagedacht wat er gebeurt als mensen met greasemonkey je functies aan gaan passen?

woensdag 9 april 2008 @ 16:22:37 #160

Pronk

Koffie?

quote:
Op woensdag 9 april 2008 15:28 schreef mcDavid het volgende:
Een functie die checked of de gebruiker verder mag?
Al over nagedacht wat er gebeurt als mensen met greasemonkey je functies aan gaan passen?

Het is niet wat je denkt...

Er wordt alleen maar gechecked of de rest van de pagina ook voor de gebruiker moet worden opgebouwd, of dat de rest van de informatie niet hoeft te worden gebouwd omdat de info niet relevant is voor de gebruiker.

Dus er is geen security risk.

Ja lekker!

woensdag 9 april 2008 @ 20:22:43 #161

SuperRembo

Sinds 1998

quote:
Op woensdag 9 april 2008 13:32 schreef Pronk het volgende:
Dus mijn vraag is dus eigenlijk, bestaat er in javascript een commando waarmee ik alle lopende functies kan stoppen?

Ja die bestaat:

1	throw 'Stop hier';

Dat zorgt er voor dat er een fout ontstaat en het script dus stop :D
Maar als je je code een beetje logisch opbouwt, dan heb je dat natuurlijk niet nodig

1
2
3
4

if (GebruikerHeeftToegangTotOnderdeelX())
{
ToonOnderdeelX();
}

zaterdag 12 april 2008 @ 18:01:46 #162

Flaccid

Ik wil voor mijn website een stukje maken, waarbij je een scrollend ding hebt, met daarin plaatjes. Dat ding moet iets van 600 ~ 800 pixel breed zijn en zon 250 hoog. Daarin scroll screenshots van een site langzaam voorbij. Op de zijkanten van dat ding staan knoppen om de volgende te zien. Op het moment dat je klikt met je muis of een mouseover doet, komt er tekst te staan in een vak eronder. Is dit makkelijk te doen met mootools?

donderdag 24 april 2008 @ 13:34:32 #163

JJasperO

Voor mijn moeder ben ik een vernieuwde website aan het maken ter presentatie van haar schilderijen.

Het onderdeel waar de schilderijen komen te staan is natuurlijk een belangrijk onderdeel wat lekker makkelijk en snel moet functioneren. Gebruik makend van kleine en grote afbeeldingen van hetzelfde schilderij wil ik JavaScript gebruiken om op een kleine image te kunnen klikken waardoor de grotere variant in een aparte browser wordt geopend. Dat is gelukt:

http://members.home.nl/nuntius/

Maar het is nog niet mooi en functioneel genoeg. Kijk bijvoorbeeld hier eens naar:

http://www.josart.nl//index.php?option=com_content&task=view&id=14&Itemid=52

De positie van het nieuwe venster (mooi gecentreerd), het vervagen van de achtergrond en de optie close window maakt e.e.a. een stuk mooier en functioneler. Ik neem aan dat dit ook een JavaScript toepassing is?

In dreamweaver CS3 kun je bij de bij de behavior 'open browser window' echter alleen de grootte van de window bepalen en bepalen of er wel of niet een statusbar/scroll/etc... moet komen te staan.
Waar/hoe moet ik met javascript iets vergelijkbaars bereiken zoals het aangehaalde voorbeeld?

donderdag 24 april 2008 @ 14:09:16 #164

SuperRembo

Sinds 1998

Dat is gemaakt met Lightbox of de nieuwere variant ervan.

donderdag 24 april 2008 @ 14:21:43 #165

JJasperO

Tof man. Dank je.

donderdag 24 april 2008 @ 16:12:35 #166

JJasperO

Ben er nu al een tijd mee bezig maar er gaat ergens wat fout, ik kan alleen niet ontdekken waar. Het volgende heb ik gedaan.

Lightbox v2.04 gedownload. Je krijgt een aantal JS bestanden, plaatjes en wat CSS informatie. De te volgen stappen:

quote:
Part 1 - Setup

Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Optional: Use the title attribute if you want to show a caption.

If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example: <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

Nadat ik deze stappen heb gevolgd ziet mijn HTML en CSS bestand er zo uit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!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=utf-8" />
<title>Untitled Document</title>

<link href="Assets/styles.css" rel="stylesheet" type="text/css" />
<link href="Assets/lightbox.css" rel="stylesheet" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<script language='JavaScript'>
var fileLoadingImage = 'Images/loading.gif';
var fileBottomNavCloseImage = 'Images/closelabel.gif';
</script>

</head>

<body>
<div id="containerDiv">
   <div id="rechterDiv">
    <div id="reclameDiv">
      <h1><img src="Images/Allwheelsimport.gif" width="75" height="38" /></h1>
      <h1><a href="http://www.allwheelsimport.nl/" target="_blank">ALL WHEELS IMPORT</a></h1>
    </div>
  </div>
   <div id="centerDiv">
      <div id="headerDiv"></div>
       <div id="mainDiv">
        <div id="inhoudDiv"><a href="Images/Schilderijen groot/Roodzwarteolifant.jpg"><img src="Images/Schilderijen klein/Roodzwarteolifantklein.jpg" width="144" height="145" rel="lightbox" /></a></div>
      </div>
       <div id="footerDiv"></div>
   </div>
  <div id="navigatieDiv">
        <div id="linksDiv"><a href="index.html">SCHILDERIJEN</a><a href="beaottink.html">BEA OTTINK</a><a href="index.html">KUNSTMARKTEN</a><a href="index.html">CONTACT</a></div>
  </div>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

#loading{
   position: absolute;
   top: 40%;
   left: 0%;
   height: 25%;
   width: 100%;
   text-align: center;
   line-height: 0;
}
#hoverNav{
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 10;
}
#imageContainer>#hoverNav{
   left: 0;
}
#hoverNav a{
   outline: none;
}
#prevLink, #nextLink{
   width: 49%;
   height: 100%;
   background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
   display: block;
}
#prevLink {
   left: 0;
   float: left;
}
#nextLink {
   right: 0;
   float: right;
}
#prevLink:hover, #prevLink:visited:hover {
   background-image: url(../Images/prevlabel.gif);
   background-repeat: no-repeat;
   background-position: left 15%;
}
#nextLink:hover, #nextLink:visited:hover {
   background-image: url(../Images/nextlabel.gif);
   background-repeat: no-repeat;
   background-position: right 15%;
}
#imageDataContainer{
   font: 10px Verdana, Helvetica, sans-serif;
   background-color: #fff;
   margin: 0 auto;
   line-height: 1.4em;
   overflow: auto;
   width: 100%   ;
}
#imageData{
   padding:0 10px;
   color: #666;
}
#imageData #imageDetails{
   width: 70%;
   float: left;
   text-align: left;
}
#imageData #caption{
   font-weight: bold;
}
#imageData #numberDisplay{
   display: block;
   clear: left;
   padding-bottom: 1.0em;
}
#imageData #bottomNavClose{
   width: 66px;
   float: right;
   padding-bottom: 0.7em;
   outline: none;
}
#overlay{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 90;
   width: 100%;
   height: 500px;
   background-color: #000;
}

De javascript bestanden staan in de map: ROOT/JS/. De loading en closelabel GIF bestanden staan in ROOT/Images/. Dus volgens mij staan deze gewoon goed gelinkt.
Ook in de CSS heb ik prevlabel en nextlabel GIF goed doorgelinkt.

De kleine versie van de foto heb ik gelinkt naar de grotere versie van de foto. Deze foto staat gewoon ergens en is dus niet verwerkt in een apart HTML bestand waarnaar is doorgelinkt, dat lijkt me namelijk niet de bedoeling.
De foto opent nu in een nieuw en volledig gemaximaliseerd venster. Dus in de geringste mate niet zoals in dit voorbeeld.

[ Bericht 0% gewijzigd door JJasperO op 24-04-2008 16:46:42 ]

donderdag 24 april 2008 @ 17:37:47 #167

JJasperO

Probleem opgelost. De rel=lightbox stond niet op de A tag waar hij hoort, maar op de IMG tag....

woensdag 30 april 2008 @ 16:41:08 #168

Flaccid

Ik heb een bestelform gemaakt, met daarin een vaste prijs, 79,00 euro. Nu wil een vakje waarin het aantal komt, en dat er dan in een disabled vakje komt te staan wat het totaal is, dus 79,00 * aantal in vakje prijs.

1	onchange="document.price.value='this.value'*10"

Maar dat werkt niet. Hoe krijg ik dit werkende?

woensdag 30 april 2008 @ 20:00:31 #169

Chandler

onchange="document.price.value=this.value*10"

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 30 april 2008 @ 20:19:08 #170

Flaccid

quote:
Op woensdag 30 april 2008 20:00 schreef Chandler het volgende:
onchange="document.price.value=this.value*10"

die 10 moet 79,00.

Textbox, onchange verandert een andere textbox met de waarde van 79 maal de waarde in jouw textbox.Totaalprijs dus

woensdag 30 april 2008 @ 20:58:47 #171

SuperRembo

Sinds 1998

1	document.form[0].elements['price'].value = parseFloat(this.value) * 10

Maar dan ga ik er van uit dat je het bedrag met een decimale punt invoert, niet met een komma.

woensdag 30 april 2008 @ 21:37:18 #172

Flaccid

quote:
Op woensdag 30 april 2008 20:58 schreef SuperRembo het volgende:

[ code verwijderd ]

Maar dan ga ik er van uit dat je het bedrag met een decimale punt invoert, niet met een komma.

Bedrag is een vaste waarde, 79.00

woensdag 30 april 2008 @ 21:58:09 #173

SuperRembo

Sinds 1998

Oja, en het aantal is een geheel getal? Dan wordt 't dit

1	document.form[0].elements['price'].value = parseInt(this.value) * 79

woensdag 30 april 2008 @ 23:27:59 #174

Flaccid

1 2	<td width="132"><input onchange="document.form[0].elements['price'].value = parseInt(this.value) * 79" name="quantity" type="text" class="number" value="1" size="2" width="10" /></td> <td width="115"><input disabled="disabled" class="number" name="price" size="5" /></td>

WErkt niet

woensdag 30 april 2008 @ 23:35:46 #175

SuperRembo

Sinds 1998

S-je vergeten, 't moet document.forms[0] zijn.

Forum Opties
Forumhop:
Hop naar:	(afkorting, bv 'KLB')

» digital corner

» development

» digital corner

» development