[HTML, CSS, JS] Frontend #43: 0 === -0

donderdag 24 september 2015 @ 22:11:55 #276

TwenteFC

Ik ben op dit moment bezig met een verticaal menu, welke een content vak naar rechts opent.
Alleen wil ik dat dit menu open blijft wanneer je met de muis per ongeluk over een ander item gaat wanneer je naar de content wil.

Ik ben alle nog niet helemaal zeker hoe ik dit het beste kan aanpakken, ik kan een delay instellen op het dichtklappen in en in de periode andere elementen op slot zetten zodat deze niet open mogen klappen.

Hebben jullie een beter idee?

Mocht het niet helemaal duidelijk zijn, een paint maakt alles duidelijker.

Lichtblauw is het menu, en donkerblauw de content. En ik wil graag dat het donkerblauwe vlak open blijft wanneer je via de gele vlakken er naar toe gaat. Wat dus andere menu items zijn.

donderdag 24 september 2015 @ 22:29:15 #277

TwenteFC

En zoals altijd wanneer je het vraagt kom je een paar minuten later het antwoord tegen, dit is waarschijnlijk hoe ik het ga doen.

Voor de mensen wie geïnteresseerd zijn.
https://css-tricks.com/dr(...)ouse-movement-paths/

vrijdag 25 september 2015 @ 12:59:58 #278

BrainOverfloW

Fok! around the Clock!

Ik zit even met een onhandig probleempje.
Ik draai op mijn OSX een Parallels versie van IE9 om sites waar ik aan werk te testen.
Op een of andere manier is er nu ingesteld dat als ik een .js bestand wil openen dat gebeurt in het kladblok van de Windows image in Parallels. Die start dus ook steeds op als ik er niet aan denk expliciet aan te geven mijn .js bestanden in Sublime Text te openen.
Ik heb al geprobeerd om via alt + rechter muis knop "open altijd met" te gebruiken maar dan opent het bestand de volgende keer wederom in Parallels.

Iemand een betere oplossing om de bestandskoppeling aan te passen zonder dat ik programma's moet gaan herinstalleren e.d.

Ik gebruik overigens voor mijn bestandsnavigatie Path Finder 7, maar Finder zelf heeft het probleem ook. Parallels is versie 10.

Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson

zaterdag 26 september 2015 @ 11:23:25 #279

n8n

Pragmatisch

quote:
Op vrijdag 25 september 2015 12:59 schreef BrainOverfloW het volgende:
Ik zit even met een onhandig probleempje.
Ik draai op mijn OSX een Parallels versie van IE9 om sites waar ik aan werk te testen.
Op een of andere manier is er nu ingesteld dat als ik een .js bestand wil openen dat gebeurt in het kladblok van de Windows image in Parallels. Die start dus ook steeds op als ik er niet aan denk expliciet aan te geven mijn .js bestanden in Sublime Text te openen.
Ik heb al geprobeerd om via alt + rechter muis knop "open altijd met" te gebruiken maar dan opent het bestand de volgende keer wederom in Parallels.

Iemand een betere oplossing om de bestandskoppeling aan te passen zonder dat ik programma's moet gaan herinstalleren e.d.

Ik gebruik overigens voor mijn bestandsnavigatie Path Finder 7, maar Finder zelf heeft het probleem ook. Parallels is versie 10.

Op een bestand in de Finder, cmd + i. In het venster onder ‘open with’ de app kiezen en daarna op ‘change all’ klikken. Dit per type bestand, dus 1 keer voor alle .js bestanden.

“Specialization is for insects”.—Robert Heinlein

zaterdag 26 september 2015 @ 11:30:32 #280

BrainOverfloW

Fok! around the Clock!

quote:
Op zaterdag 26 september 2015 11:23 schreef n8n het volgende:

[..]

Op een bestand in de Finder, cmd + i. In het venster onder ‘open with’ de app kiezen en daarna op ‘change all’ klikken. Dit per type bestand, dus 1 keer voor alle .js bestanden.

Dat werkt

Dank je

Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson

zaterdag 26 september 2015 @ 20:52:16 #281

Robuustheid

Ik kwam onderstaand stukje Javascript tegen:

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

Deze laat de JSON-waarden van een vriend met de naam "Steve" zien.

Waar ik mee zit, is dat ik weinig informatie kan vinden wat "friends[prop]" eigenlijk inhoudt.

Een object is zo: friends.foobar.

Een array is eerder array[1,2,3].

Maar friends is een object. Dus ik vraag mij af waarom het gezien wordt als een array met de "friends[prop]".

zaterdag 26 september 2015 @ 20:56:57 #282

n8n

Pragmatisch

for(var prop in friends)

prop is een key in een loop, friends.steve en -.bill dus.

“Specialization is for insects”.—Robert Heinlein

zaterdag 26 september 2015 @ 20:57:27 #283

PimD

Nee.

Er wordt door iedere property van het friends-object gelopen. Voor iedere property wordt een variabele 'prop' gemaakt. In jouw geval is het dus zo dat bij de eerste iteratie van de loop prop = friends.bill en bij de tweede iteratie is prop = friends.steve. Ik denk dat je dit beter gewoon met een array kunt oplossen met daarin objecten.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var friends = [];

friends.push({
  firstName: "Bill",
  lastName: "Gates",
  number: "(206) 555-5555",
  address: ['One Microsoft Way','Redmond','WA','98052']
});

friends.push({
  firstName: "Steve",
  lastName: "Jobs",
  number: "(408) 555-5555",
  address: ['1 Infinite Loop','Cupertino','CA','95014']
});

Nee.

zaterdag 26 september 2015 @ 23:36:32 #284

Ser_Ciappelletto

Semi-professionele SJW

quote:
Op zaterdag 26 september 2015 20:52 schreef Robuustheid het volgende:
Ik kwam onderstaand stukje Javascript tegen:
[ code verwijderd ]

Deze laat de JSON-waarden van een vriend met de naam "Steve" zien.

Waar ik mee zit, is dat ik weinig informatie kan vinden wat "friends[prop]" eigenlijk inhoudt.

Een object is zo: friends.foobar.

Een array is eerder array[1,2,3].

Maar friends is een object. Dus ik vraag mij af waarom het gezien wordt als een array met de "friends[prop]".

Dat is van Codecadamy, een oefening. De kans is groot dat er een stuk code ontbreekt.

zondag 27 september 2015 @ 00:20:36 #285

Catch22-

Ben je Blind?!

Een object is eigenlijk een array. person.name is ook aan te roepen met person["name"]

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

zondag 27 september 2015 @ 16:17:31 #286

Crutch

Filantroop || Taalzwengel

quote:
Op zondag 27 september 2015 00:20 schreef Catch22- het volgende:
Een object is eigenlijk een array. person.name is ook aan te roepen met person["name"]

Uhm, nee. Gewoon niet.
Dat je een property als index kan aanroepen maakt het nog geen array.

Je moeder is een hamster

zondag 27 september 2015 @ 20:00:12 #287

Catch22-

Ben je Blind?!

quote:
Op zondag 27 september 2015 16:17 schreef Crutch het volgende:

[..]

Uhm, nee. Gewoon niet.
Dat je een property als index kan aanroepen maakt het nog geen array.

even simpel houden voor iemand die net begint he

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

maandag 28 september 2015 @ 07:26:59 #288

Light

quote:
Op zaterdag 26 september 2015 20:52 schreef Robuustheid het volgende:
Ik kwam onderstaand stukje Javascript tegen:
[ code verwijderd ]

Deze laat de JSON-waarden van een vriend met de naam "Steve" zien.

Waar ik mee zit, is dat ik weinig informatie kan vinden wat "friends[prop]" eigenlijk inhoudt.

Een object is zo: friends.foobar.

Een array is eerder array[1,2,3].

Maar friends is een object. Dus ik vraag mij af waarom het gezien wordt als een array met de "friends[prop]".

Voor een object mag je zowel friends.foo als friends["foo"] gebruiken. De eerste is makkelijker om te schrijven en te lezen maar is niet te gebruiken als je een variabele wilt hebben.

Hier is prop een variabele en zit je dus vast aan de tweede notatie. Als je friends.prop gebruikt, krijg je altijd de property met naam prop, en da's niet wat je zoekt.

Zie bijvoorbeeld ook http://stackoverflow.com/(...)notation-vs-brackets

fokstok.nl

maandag 28 september 2015 @ 14:04:44 #289

Aether

When the student is ready, the teacher will appear.
When the student is truly ready, the teacher will disappear.

woensdag 7 oktober 2015 @ 15:12:21 #290

richolio

#MacMasterrace

Hallo, ik kom ergens niet uit!

Ik wil graag een full image background op een one page, precies als dit voorbeeld eigenlijk:

http://ironsummitmedia.github.io/startbootstrap-creative/

Als je naar de pagina eronder gaat, dan schuift de website er meteen heen en snijdt de foto ook af op dat punt.

Ik heb gewoon dit

1
2
3
4
5

background:url(../pics/strand.jpeg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

in de div gezet, maar het werkt nog niet echt goed

'Richolio _O_' - tong80
LAST.FM

woensdag 7 oktober 2015 @ 15:13:01 #291

richolio

#MacMasterrace

Het maakt ook niet uit hoe groot je de browser maakt, de foto blijft altijd wel volledig in beeld, lijkt me heel prettig om te hebben.

'Richolio _O_' - tong80
LAST.FM

woensdag 7 oktober 2015 @ 15:17:28 #292

donroyco

dus niet Donroyco

quote:
Op woensdag 7 oktober 2015 15:12 schreef richolio het volgende:
Hallo, ik kom ergens niet uit!

Ik wil graag een full image background op een one page, precies als dit voorbeeld eigenlijk:

http://ironsummitmedia.github.io/startbootstrap-creative/

Als je naar de pagina eronder gaat, dan schuift de website er meteen heen en snijdt de foto ook af op dat punt.

Ik heb gewoon dit
[ code verwijderd ]

in de div gezet, maar het werkt nog niet echt goed

quote:
Op woensdag 7 oktober 2015 15:13 schreef richolio het volgende:
Het maakt ook niet uit hoe groot je de browser maakt, de foto blijft altijd wel volledig in beeld, lijkt me heel prettig om te hebben.

Wat wil je nu precies?

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

woensdag 7 oktober 2015 @ 15:26:27 #293

richolio

#MacMasterrace

Iets wat die website ook heeft, namelijk een one-page website met bovenaan een full image background...

De foto blijft full page, ongeacht hoe groot je de browser maakt.. De one-page zelf lukt me wel, maar die foto is het probleem.

'Richolio _O_' - tong80
LAST.FM

woensdag 7 oktober 2015 @ 18:58:52 #294

Tijn

Powered by MS Paint

quote:
Op woensdag 7 oktober 2015 15:12 schreef richolio het volgende:

in de div gezet, maar het werkt nog niet echt goed

Is dat divje wel zo groot als de hele pagina?

Verberg de nieuwsticker

woensdag 7 oktober 2015 @ 22:56:04 #295

PimD

Nee.

Inderdaad, die div moet een 'height: 100vh' hebben.

Nee.

woensdag 7 oktober 2015 @ 23:31:44 #296

TwenteFC

Als hier nog VueJS gebruikers zijn ICM bootstrap:
https://github.com/yuche/vue-strap

Geen jquery en bootstrap.js meer nodig en lekker semantisch, nog wel in alpha.

donderdag 8 oktober 2015 @ 13:22:45 #297

BrainOverfloW

Fok! around the Clock!

quote:
Op woensdag 7 oktober 2015 23:31 schreef TwenteFC het volgende:
Als hier nog VueJS gebruikers zijn ICM bootstrap:
https://github.com/yuche/vue-strap

Geen jquery en bootstrap.js meer nodig en lekker semantisch, nog wel in alpha.

Ben ook wat aan het oefenen met Vue, vind het tot nu toe wel fijn in elkaar zitten.

Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson

zondag 25 oktober 2015 @ 20:01:56 #298

ikbenrond

Hallo allen.

Ik had een slider gevonden, met maar vier foto's en dus vier bolletjes om op te klikken.

Ik heb de bolletjes uit kunnen breiden tot 10, maar ze sliden nergens heen.

HTML van Slider

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

CSS ervan

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

#slider-wrapper{
            width: 940px;
            height: 470px;
            margin: 120px auto;
            position: relative;
            margin-bottom: 0px;
            background: rgba(0,0,0,0.5);
            overflow: hidden;
        }

                #s1{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: -36px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }

                #s2{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: -12px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }

                #s3{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: 12px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }

                #s4{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: 36px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }

                #s5{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: 60px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }

                #s6{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: 84px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }

                #s7{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: -60px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }

                #s8{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: -84px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }

                #s9{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: -108px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }

                #s10{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: 108px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }


                #s1:hover, #s2:hover, #s3:hover, #s4:hover,#s5:hover, #s6:hover, #s7:hover, #s8:hover, #s9:hover, #s10:hover{ opacity: 1;}

            .inner-wrapper{
                width: 940px;
                height: 470px;
                position: absolute;
                top: 0;
                left: 0;
                margin-bottom: 0px;
                overflow: hidden;
            }
                .control{ display: none;}

                #Slide1:checked ~ .overflow-wrapper{ margin-left: 0%; }
                #Slide2:checked ~ .overflow-wrapper{ margin-left: -100%; }
                #Slide3:checked ~ .overflow-wrapper{ margin-left: -200%; }
                #Slide4:checked ~ .overflow-wrapper{ margin-left: -300%; }
                #Slide5:checked ~ .overflow-wrapper{ margin-left: -400%; }
                #Slide6:checked ~ .overflow-wrapper{ margin-left: -500%; }
                #Slide7:checked ~ .overflow-wrapper{ margin-left: -600%; }
                #Slide8:checked ~ .overflow-wrapper{ margin-left: -600%; }
                #Slide10:checked ~ .overflow-wrapper{ margin-left: -600%; }

                #Slide1:checked + #s1 { opacity: 1; }
                #Slide2:checked + #s2 { opacity: 1; }
                #Slide3:checked + #s3 { opacity: 1; }
                #Slide4:checked + #s4 { opacity: 1; }
                #Slide5:checked + #s5 { opacity: 1; }
                #Slide6:checked + #s6 { opacity: 1; }
                #Slide7:checked + #s7 { opacity: 1; }
                #Slide8:checked + #s8 { opacity: 1; }
                #Slide9:checked + #s9 { opacity: 1; }
                #Slide10:checked + #s10 { opacity: 1; }

            .overflow-wrapper{
                width: 400%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                overflow-y: hidden;
                z-index: 1;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

                .slide img{
                    width: 25%;
                    float: left;
                }

Heel misschien weet iemand het probleem of heeft dit eerder gehad oid?

zondag 25 oktober 2015 @ 20:11:59 #299

BrainOverfloW

Fok! around the Clock!

quote:
Op zondag 25 oktober 2015 20:01 schreef ikbenrond het volgende:
Hallo allen.

Ik had een slider gevonden, met maar vier foto's en dus vier bolletjes om op te klikken.

Ik heb de bolletjes uit kunnen breiden tot 10, maar ze sliden nergens heen.

HTML van Slider
[ code verwijderd ]

CSS ervan
[ code verwijderd ]

Heel misschien weet iemand het probleem of heeft dit eerder gehad oid?

[ afbeelding ]

Heb je er wel javascript bij om de slider ook daadwerkelijk te laten werken? Met alleen HTML en CSS blijft het een statisch geheel.

Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson

zondag 25 oktober 2015 @ 20:13:54 #300

ikbenrond

quote:
Op zondag 25 oktober 2015 20:11 schreef BrainOverfloW het volgende:

[..]

Heb je er wel javascript bij om de slider ook daadwerkelijk te laten werken? Met alleen HTML en CSS blijft het een statisch geheel.

Ik heb 'm in een codepen gezet ;

http://codepen.io/anon/pen/OyvmBR

Het is wel wat ik wil. Ik zie nu dat hij wel ergens heen slide, maar naar een leeg beeld, geen foto dus.

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

» digital corner

» digital corner