[html, css, js] Waar dummies nóg meer iniatief gaan tonen! ;) #26

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_112061346
[html, css, js] Voor Dummies

Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.

HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies

Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: Topicreeks: Algemeen Wordpress topic

Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (code.png), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.

Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.

IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.

Voor je een vraag stel hier, verplichte kost
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
Don't let your shadow spoil the view of what's around you
pi_112061508
Ik ben weer eens aan de knutsel met mijn weblog en vroeg me het volgende af:
De weblog bestaat uit een post gedeelte en een sidebar. Persoonlijk vind ik het niet mooi als de een langer of korter is dan de ander, maar aangezien posts altijd afwisselende lengte hebben is het niet echt mogelijk om een sidebar te maken die altijd lang genoeg is.
Nu vroeg ik me af of er middels html/css of met een tabel een manier is om te zorgen dat de overgebleven ruimte op wordt gevuld met plaatjes en of andere inhoud, maar op zo'n manier dat deze precies ophoudt waar de posts op houden.

Ik heb al zitten Googlen en zelf zitten denken hoe dit mogelijk zou zijn, maar kom helaas niet tot een antwoord, ookal heb ik het gevoel wellicht iets heel voordehandliggends over het hoofd te zien..
Heeft iemand een idee in wat voor een richting ik moet denken om iets dergelijks te maken?
Don't let your shadow spoil the view of what's around you
  zaterdag 26 mei 2012 @ 20:49:27 #3
87680 Mirel
Mirel wil een bongophone.
pi_112061903
Wellicht de post een min-height geven die net zo hoog is als de height van de sidebar?
When all else fails, you always have delusion.
pi_112062561
Uhm, ja maar er verschijnen 10 posts per pagina, dus ik vermoed dat wat lengte betreft aan het post gedeelte niet veel te doen is!
Don't let your shadow spoil the view of what's around you
  zaterdag 26 mei 2012 @ 21:21:10 #5
87680 Mirel
Mirel wil een bongophone.
pi_112063576
Dat is dan misschien best lelijk he :@
When all else fails, you always have delusion.
  zaterdag 26 mei 2012 @ 21:27:29 #6
299167 stefanhaan
Bloeddorstige wasbeer
pi_112063992
quote:
0s.gif Op zaterdag 26 mei 2012 21:03 schreef Maartel het volgende:
Uhm, ja maar er verschijnen 10 posts per pagina, dus ik vermoed dat wat lengte betreft aan het post gedeelte niet veel te doen is!
eerste hit via google:
http://www.ejeliot.com/blog/61
It was an opportunity to honour our memories and to make room for new ones
pi_112064438
Bedankt! Weer een gevalletje van op totaal verkeerde formuleringen Googlen dus :@

(al krijg ik de indruk dat dit met name om een achtergrondkleur/afbeelding gaat en dat heb ik al wel)
Don't let your shadow spoil the view of what's around you
pi_112117050
ik ben aan het pielen met een tab slide,
op internet een plugin gevonden
http://www.building58.com/examples/tabSlideOut.html

maar dit doet net niet wat ik wil...
maar ik kom er niet uit...
ik wil graag de tab gebruiken EN een andere div om dezelfde tab te openen...
krijg het dus niet voor elkaar
pi_112117220
Wat werkt niet, wat heb je zelf geprobeerd, waar is je code voorbeeld en waar denk je dat het aan kan liggen.
pi_112117442
quote:
14s.gif Op maandag 28 mei 2012 10:22 schreef Scorpie het volgende:
Wat werkt niet, wat heb je zelf geprobeerd, waar is je code voorbeeld en waar denk je dat het aan kan liggen.
sorry
ik gebruik de plugin als in de webpagina...werkt prima
maar nu wil ik ook aan een andere div toewijzen dat de tab open gaat

1
2
3
4
5
6		        $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor
                pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab
                imageHeight: '133px',                         //height of tab image
                imageWidth: '44px',                           //width of tab image   
        });

dit is de code die in de html moet om de plugin te laten werken
heel simpel gedacht dacht ik, als ik de "handle" als class bij een andere div zet dat deze dan de tab zou aansturen...hmm..niet dus..of iig ik doe het fout

waarschijnlijk zal de plugin zo inelkaar zitten dat het niet kan
pi_112117537
De plugin hecht zichzelf aan een element, dus dat werkt idd niet. Zal straks die plugin eens doorspitten.
pi_112117590
quote:
0s.gif Op maandag 28 mei 2012 10:38 schreef Scorpie het volgende:
De plugin hecht zichzelf aan een element, dus dat werkt idd niet. Zal straks die plugin eens doorspitten.
ik was de bloglijst aan het doorspitten..
kwam daar iets tegen van

1
2
3
4
5		$(”.handle”).click();

Actually, since I’m extending this class, I did this:

obj.find(”.handle”).click();

maar hoe ik dat dan zou moeten inpassen :?
pi_112117842
quote:
0s.gif Op maandag 28 mei 2012 10:41 schreef MrNiles het volgende:

[..]

ik was de bloglijst aan het doorspitten..
kwam daar iets tegen van
[ code verwijderd ]

maar hoe ik dat dan zou moeten inpassen :?
Zodra je clicked op de andere div vuur je een event af die de klik op de andere div nabootst.

Dus:

1
2
3		$('divClassOfId').on('click', function() { 
  $('.slide-out-div').click(); 
});


[ Bericht 0% gewijzigd door #ANONIEM op 28-05-2012 10:53:36 ]
pi_112118885
quote:
0s.gif Op maandag 28 mei 2012 10:52 schreef Scorpie het volgende:

[..]

Zodra je clicked op de andere div vuur je een event af die de klik op de andere div nabootst.

Dus:
[ code verwijderd ]

klinkt goed...lees ook iets vergelijkbaars in de blog
maar het zal wel aan de warmte liggen...t werkt nie

divje gemaakt
<div class="slidediv"></div>
is een widht en height gegeven..is dus een zichtbaar vierkantje

onder het instelscript
dit gezet

1
2
3		<script>
$(’.slidediv’).click(function(){$(’.handle’).click();});
</script>

.slide-out-div vervangen door handle

tab doet niets als ik op de div klik
werkt nog wel op de gewone manier

[ Bericht 33% gewijzigd door MrNiles op 28-05-2012 12:01:49 ]
pi_112119975
Is .handle de naam van de div waar de plugin mee is geinitaliseerd?
pi_112123583
Is er met html/css een methode om een soort van verticale marquée te doen, maar dan eentje die niet continu scrollt, maar om de paar seconden eventjes een regel verder schuift? Of moet ik me dan toch echt meer in javascript ed verdiepen?
Don't let your shadow spoil the view of what's around you
pi_112123864
Met CSS transitions moet zoiets wel te doen zijn. Of je dat wilt doen is natuurlijk een tweede. Voor mijn gevoel is zo'n marquee eerder gedrag en zou het w.m.b. opgelost moeten worden in Javascript.
Nee.
pi_112127482
quote:
0s.gif Op zaterdag 26 mei 2012 21:34 schreef Maartel het volgende:
Bedankt! Weer een gevalletje van op totaal verkeerde formuleringen Googlen dus :@

(al krijg ik de indruk dat dit met name om een achtergrondkleur/afbeelding gaat en dat heb ik al wel)
Dat klopt, faux columns werkt door een achtergrond plaatje in de omvattende container te zetten en die verticaal te herhalen zodat de illusie ontstaat dat de kortste van de kolommen net zo lang is.

Je kunt het ook doen door de omvattende container "display: table" mee te geven in de css en de sidebar en post gedeelte "display:table-cell;"
pi_112142639
Mijn eerder genoemde probleem is opgelost mede door de hulp van MrNiles.

Ik moest deze regel toevoegen bij de head.phtml

1Cufon.replace('.stone-help .title', { fontFamily: 'AlternateGothic2 BT' });
If not now, then when.
pi_112145874
quote:
0s.gif Op maandag 28 mei 2012 12:07 schreef Scorpie het volgende:
Is .handle de naam van de div waar de plugin mee is geinitaliseerd?
-fixed-

[ Bericht 85% gewijzigd door MrNiles op 29-05-2012 13:39:34 ]
pi_112265633
ik heb een horizontaal menu opgemaakt als tabbladen, maar meer tabbladen dan horizontale ruimte, waardoor de tabbladen 2 regels innemen. De tabs op de bovenste regel zijn daardoor niet echt tabs meer:


Weten jullie een (makkelijke) manier om dat elegant op te lossen?
zcflevo.nl
pi_112265736
Minder tabbladen maken.
  donderdag 31 mei 2012 @ 15:24:38 #23
87680 Mirel
Mirel wil een bongophone.
pi_112266390
Een rij van tabs boven en een rij van tabs beneden, als je op een rij klikt, schuift die naar voren?
Netzoals windows doet of deed bij optievensters met teveel tabbladen.

Bij options:
When all else fails, you always have delusion.
  donderdag 31 mei 2012 @ 15:28:11 #24
56176 Catch22-
Ben je Blind?!
pi_112266564
quote:
14s.gif Op donderdag 31 mei 2012 15:07 schreef KomtTijd... het volgende:
ik heb een horizontaal menu opgemaakt als tabbladen, maar meer tabbladen dan horizontale ruimte, waardoor de tabbladen 2 regels innemen. De tabs op de bovenste regel zijn daardoor niet echt tabs meer:
[ link | afbeelding ]

Weten jullie een (makkelijke) manier om dat elegant op te lossen?
anders grouperen, als je zoveel tabs hebt dan doe je iets niet goed
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?
pi_112268234
quote:
11s.gif Op donderdag 31 mei 2012 15:28 schreef Catch22- het volgende:

[..]

anders grouperen, als je zoveel tabs hebt dan doe je iets niet goed
Mee eens hoor, maar dat neemt het probleem niet weg. Als het er 5 zouden zijn kunnen ze bij elkaar nog steeds breder zijn dan iemands beeldscherm.
quote:
0s.gif Op donderdag 31 mei 2012 15:24 schreef Mirel het volgende:
Een rij van tabs boven en een rij van tabs beneden, als je op een rij klikt, schuift die naar voren?
Netzoals windows doet of deed bij optievensters met teveel tabbladen.

Bij options:
[ afbeelding ]
...Dat kan, maar dan gaat het nog een halve dag uitzoekwerk worden... hoopte eigenlijk op een easy fix...

Misschien klus ik wel wat firefox-achtigs dat je met pijltjes naar links en rechts kunt schuiven...
zcflevo.nl
  donderdag 31 mei 2012 @ 16:40:08 #26
56176 Catch22-
Ben je Blind?!
pi_112269893
verticale tabs?
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?
  donderdag 31 mei 2012 @ 19:27:08 #27
299167 stefanhaan
Bloeddorstige wasbeer
pi_112276643
quote:
14s.gif Op donderdag 31 mei 2012 16:04 schreef KomtTijd... het volgende:

[..]

Mee eens hoor, maar dat neemt het probleem niet weg. Als het er 5 zouden zijn kunnen ze bij elkaar nog steeds breder zijn dan iemands beeldscherm.

[..]

...Dat kan, maar dan gaat het nog een halve dag uitzoekwerk worden... hoopte eigenlijk op een easy fix...

Misschien klus ik wel wat firefox-achtigs dat je met pijltjes naar links en rechts kunt schuiven...
als je het er mee eens ben waarom deel je het dan niet anders / slimmer in dat je maar 1 rij hebt?

Kan makkelijk.
It was an opportunity to honour our memories and to make room for new ones
  donderdag 31 mei 2012 @ 22:06:19 #28
163768 Happel
Je Suis Roi
pi_112285675
- nevermind -
Elite
Feyenoordsupporters gaan naar de hemel, als er in de hel geen plaats meer is
Tegen TTIP
  vrijdag 1 juni 2012 @ 12:10:53 #29
230788 n8n
Pragmatisch
pi_112302232
quote:
0s.gif Op donderdag 31 mei 2012 15:24 schreef Mirel het volgende:
Een rij van tabs boven en een rij van tabs beneden, als je op een rij klikt, schuift die naar voren?
Netzoals windows doet of deed bij optievensters met teveel tabbladen.

Bij options:
[ afbeelding ]
dit is juist een usability nightmare. Iedereen vind die vensters in Windows kut en dat is juist door die tabs die steeds van plek veranderen en vaag zijn over wat ze inhouden
“Specialization is for insects”.—Robert Heinlein
  vrijdag 1 juni 2012 @ 12:12:42 #30
137776 boem-dikkie
Jedi Mind Baby!
pi_112302303
Zoals KomtTijd.. nu tabs heeft gemaakt is het ook een vrij grote usability nightmare. Waar heb je in godsnaam zo veel tabs voor nodig?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  vrijdag 1 juni 2012 @ 12:22:32 #31
56176 Catch22-
Ben je Blind?!
pi_112302673
Ja dan is het ergens in het interactie ontwerp heel erg mis gegaan.
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?
pi_112306199
Welk interactieontwerp? 8-) :7
  vrijdag 1 juni 2012 @ 14:13:48 #33
87680 Mirel
Mirel wil een bongophone.
pi_112306859
quote:
7s.gif Op vrijdag 1 juni 2012 12:10 schreef n8n het volgende:

[..]

dit is juist een usability nightmare. Iedereen vind die vensters in Windows kut en dat is juist door die tabs die steeds van plek veranderen en vaag zijn over wat ze inhouden
Klopt, ik snapte ze vroeger nooit :') , maar op een website kan je ze kleurtjes geven, schaduweffecten en whatever. Het kan wel mooi worden denk ik
When all else fails, you always have delusion.
  vrijdag 1 juni 2012 @ 14:25:10 #34
12221 Tijn
Powered by MS Paint
pi_112307211
quote:
0s.gif Op vrijdag 1 juni 2012 14:13 schreef Mirel het volgende:

[..]

Klopt, ik snapte ze vroeger nooit :') , maar op een website kan je ze kleurtjes geven, schaduweffecten en whatever. Het kan wel mooi worden denk ik
Dan is het mooi en onbruikbaar. Hoe helpt dat iets?
Verberg de nieuwsticker
  vrijdag 1 juni 2012 @ 14:25:54 #35
56176 Catch22-
Ben je Blind?!
pi_112307245
voor mensen als Mirel is dat genoeg.
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?
  vrijdag 1 juni 2012 @ 14:57:42 #36
87680 Mirel
Mirel wil een bongophone.
pi_112308433
:') Hij vraagt ernaar, ik zie liever ook niet tientallen tabs..
When all else fails, you always have delusion.
pi_112448923
Iemand beetje ervaring met meerdere icons/buttons in de header te zetten? Het bleek niet 'standaard' mogelijk te zijn maar via een omweg wel, alleen loop ik tegen een klein probleempje aan.

Via : http://stackoverflow.com/(...)uttons-in-the-header

Heb ik de volgende code gemaakt
1
2
3
4
5
6
7
8
9
10
11
12		            <div data-role="header">
                <div class="ui-btn-left">
                    <a href="/index-new.html" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true">B1</a>
                </div>
                <h1><?=$title;?></h1>
                <div class="ui-btn-right">
                    <a href="/" data-role="button" data-icon="gear" data-iconpos="notext" data-inline="true">B2</a>
                    <a href="/" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true">B3</a>
                    <a href="/" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">B3</a>
                    <a href="/" data-role="button" data-icon="grid" data-iconpos="notext" data-inline="true">B3</a>
                </div>
            </div>
dit levert een bijna goed plaatje aan, zie voorbeeld hieronder.


maar als je goed kijkt zie je dat de icons er op een of andere manier niet goed uitkomen.... iemand een idee hoe ik dit kan oplossen?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 4 juni 2012 @ 22:23:13 #38
299167 stefanhaan
Bloeddorstige wasbeer
pi_112450200
quote:
5s.gif Op maandag 4 juni 2012 22:09 schreef Chandler het volgende:
Iemand beetje ervaring met meerdere icons/buttons in de header te zetten? Het bleek niet 'standaard' mogelijk te zijn maar via een omweg wel, alleen loop ik tegen een klein probleempje aan.

Via : http://stackoverflow.com/(...)uttons-in-the-header

Heb ik de volgende code gemaakt
[ code verwijderd ]

dit levert een bijna goed plaatje aan, zie voorbeeld hieronder.

[ afbeelding ]
maar als je goed kijkt zie je dat de icons er op een of andere manier niet goed uitkomen.... iemand een idee hoe ik dit kan oplossen?
Gewoon die icons iets omlaag positioneren dan.
It was an opportunity to honour our memories and to make room for new ones
pi_112467971
Nee dat zorgt voor geen verschil zeg maar, het gaat mij om de rand er onder, die is lelijk en hoort er niet te zitten...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_112468040
Dat komt toch echt door verkeerd positioneren hoor. Volgens mij maakt jquery UI gebruik van sprites en moet je het daar in zoeken.
pi_112468302
Ik zal eens verder zoeken, op zich is het niet heel vervelend maar qua ontwerp vond ik het toch niet echt mooi zeg maar! :)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  dinsdag 5 juni 2012 @ 11:36:36 #42
56176 Catch22-
Ben je Blind?!
pi_112468471
heb je geen linkje? Dan kan ik het je zo vertellen denk ik

wanneer gaan we vissen trouwens Chandler?
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?
pi_112468812
Haha Catch22- ik had in de winter al op je zitten te wachten, brrr, koud aan de waterkant..

;) we spreken nog wel een keertje af..

Heb geen linkje, de code die ik paste werkt perfect op de 'template' van jQueryMobile (zonder aanpassingen) behalve het positioneren van de 'icons' ;)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_112515310
ik had een plug-in van internet om wat effecten aan een div te geven

http://buildinternet.com/(...)tions-jquery-plugin/

maar die gebruikt een div in een <a>
1
2
3
4
5
6		<a href="http://buildinternet.com/project/mightyicons/" target="_blank" class="mosaic-overlay">
  <div class="details">
    <h4>Mighty Social Icons</h4>
    <p>By Build Internet</p>
  </div>
 </a>

maar dat vind de validator niet goed...hoe moet het wel?
  woensdag 6 juni 2012 @ 12:47:47 #45
56176 Catch22-
Ben je Blind?!
pi_112515887
als die plugin zo werkt moet je hem zo gebruiken. En anders moet je hem ombouwen/herbouwen
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?
pi_112516417
quote:
11s.gif Op woensdag 6 juni 2012 12:47 schreef Catch22- het volgende:
als die plugin zo werkt moet je hem zo gebruiken. En anders moet je hem ombouwen/herbouwen
joh..dat is de vraag.
de validator zegt dat ik geen div in een <a> mag gebruiken
kun je zoiets verhelpen?
een block van een <a> maken of wat? maar de vraag is dus..hoe los ik zoiets op
  woensdag 6 juni 2012 @ 13:06:40 #47
137776 boem-dikkie
Jedi Mind Baby!
pi_112516720
Nee een div in een A is niet erg netjes. Je kunt een span gebruiken voor de elementen in je A en er een block van maken om grootte mee te geven.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  woensdag 6 juni 2012 @ 13:06:47 #48
56176 Catch22-
Ben je Blind?!
pi_112516724
Ja of schijt hebben aan de validator, of die clickactie op de div hangen. Een DIV binnen een A mag sowieso niet.

Ik heb geen tijd om die plugin te checken, maar je kan ook gewoon schijt hebben aan de validator
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?
  woensdag 6 juni 2012 @ 13:12:10 #49
137776 boem-dikkie
Jedi Mind Baby!
pi_112516946
Je kunt ook gewoon die hele A weghalen, de class meegeven aan je div en die met een 'onClick' klikbaar maken.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  vrijdag 8 juni 2012 @ 14:01:15 #50
56176 Catch22-
Ben je Blind?!
pi_112612144
leeschvoer voor jQuery n00bs

http://coding.smashingmag(...)ring-web-developers/
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?
  vrijdag 8 juni 2012 @ 14:26:42 #51
137776 boem-dikkie
Jedi Mind Baby!
pi_112613311
Mooie basis uitleg inderdaad.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  dinsdag 12 juni 2012 @ 16:23:45 #52
371602 xSouL
kaak dicht
pi_112791708
Oke mensen. :)

Ik moet voor mijn stage bedrijf een beetje uitvogelen en uitzoeken hoe het zit met mobiele websites. Ze hebben momenteel een vrij grote kleding webwinkel als klant waar ze de website voor hebben ontworpen, maar vorige week hebben ze ook gevraagd of we een mobiele formaat kunnen ontwerpen.

Nu heb ik een beetje rond zitten kijken naar bestaande mobiele webshop templates en vond die van Zalando enorm goed werken. Het werkt heel snel en vroeg mij af wat er word gebruikt om bijvoorbeeld die pop-ups zo snel te laten zien? Iets van Ajax? of Jquery of is dat HTML5? Of een bepaalde framework?

Hier een link naar de mobiele versie van Zalando:
http://m.zalando.nl/

Heb wel ervaring met web-development alleen is mobiel nog vrij nieuw mij. Heb al enorm veel richtlijnen bekeken, zoals dat je alleen essentiele informatie moet laten zien en knoppen moet groot en afstand hebben tussen elkaar etc. etc....
pi_112791863
Is jQuery zo te zien, inclusief SizzleJS. En gewoon HTML.

[ Bericht 16% gewijzigd door #ANONIEM op 12-06-2012 16:28:13 ]
  dinsdag 12 juni 2012 @ 16:28:44 #54
12221 Tijn
Powered by MS Paint
pi_112791955
Is er geen webshop op basis van jQuery Mobile?
Verberg de nieuwsticker
  dinsdag 12 juni 2012 @ 16:28:45 #55
371602 xSouL
kaak dicht
pi_112791956
Uhu, heb net ook al in de doctype lopen kijken en het is gewoon nog reguliere (X)HTML en geen HTML 5.

Edit:
Heb wellicht iets interessants gevonden :)
http://www.webdesignermag(...)-jquery-mobile/3259/

De website is al gebouwd in ASP.NET en het enige wat hoeft te gebeuren is alles mobiel te maken. Zal wel even duren, maar de functionaliteit is er al van de bestaande webshop. Ik moet alleen de appearance mobiel maken en natuurlijk moet dat gestroomlijnd gaan, aangezien de klant een dikke pietje precies is. :)
  dinsdag 12 juni 2012 @ 16:31:31 #56
12221 Tijn
Powered by MS Paint
pi_112792082
Zoiets als dit bijvoorbeeld: http://www.attika-shop.ch
Verberg de nieuwsticker
  dinsdag 12 juni 2012 @ 16:34:15 #57
371602 xSouL
kaak dicht
pi_112792222
quote:
14s.gif Op dinsdag 12 juni 2012 16:31 schreef Tijn het volgende:
Zoiets als dit bijvoorbeeld: http://www.attika-shop.ch
Wow, gaaf webshop is dat!
JQuery blijft geniaal, moet het echt vaker gebruiken. :)
  dinsdag 12 juni 2012 @ 16:40:00 #58
56176 Catch22-
Ben je Blind?!
pi_112792470
enige wat moet gebeurd is mobiel maken, hehe

maaruh die shop is grotendeels opgebouwd met mediaqueries gok ik zo
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?
pi_112792527
'Alles mobiel maken, eventjes'.

Lol.
  dinsdag 12 juni 2012 @ 16:58:30 #60
371602 xSouL
kaak dicht
pi_112793427
Hehe, zo eventjes gebeurd dat heus niet en dat weet ik ook wel. lol :P
Maar goed, optimisch denken kan geen kwaad.

Overigens realistisch denken ook niet. :')
pi_112793492
Je manager zei zeker dat het 'wel eventjes naar mobiel kon worden gemaakt'.
  dinsdag 12 juni 2012 @ 17:00:05 #62
56176 Catch22-
Ben je Blind?!
pi_112793497
je doet er verstandig aan om vanaf scratch te beginnen, want je kan niets met je huidige templates waarschijnlijk.

en jQuery mobile is niet zo makkelijk als het lijkt. Helemaal niet als je al niet zoveel van jQuery weet.

quote:
11s.gif Op dinsdag 12 juni 2012 16:59 schreef Scorpie het volgende:
Je manager zei zeker dat het 'wel eventjes naar mobiel kon worden gemaakt'.
hey, hoe moeilijk kan het zijn
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?
pi_112793729
quote:
11s.gif Op dinsdag 12 juni 2012 17:00 schreef Catch22- het volgende:

hey, hoe moeilijk kan het zijn
Dat zegt mijn opdrachtgever ook altijd ;(.
Fear of a name only increases fear of the thing itself
  dinsdag 12 juni 2012 @ 17:09:48 #64
228072 Crimyclown
Sapper de fap!
pi_112793916
Weet iemand nog een andere CSS hack voor IE 8 behalve \9? De website komt in een beheersysteem waarin het niet mogelijk is een extra CSS bestand aan te roepen in de HTML en de \9 hack krijg ik bizar genoeg niet aan de praat.

Waarom updaten mensen hun browser niet gewoon. :(

Alvast dank.
Anonieme tievesclown
  dinsdag 12 juni 2012 @ 17:11:22 #65
56176 Catch22-
Ben je Blind?!
pi_112793986
#div {
height: 300px\0/;
}

?

je kan ook geen javascript toevoegen of <!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]--> gebruiken?
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?
  dinsdag 12 juni 2012 @ 17:12:25 #66
228072 Crimyclown
Sapper de fap!
pi_112794034
quote:
11s.gif Op dinsdag 12 juni 2012 17:11 schreef Catch22- het volgende:
#div {
height: 300px\0/;
}

?

je kan ook geen javascript toevoegen of <!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]--> gebruiken?
Werkt dat alleen voor IE 8? Heb er nu al wel een hack voor IE 7 inzitten. dezelfde regels zouden ook wel bij IE 8 en lager kunnen komen.

Nee de IF tags worden door het CMS eruit gegooid. Het is een CMS van het bedrijf zelf dus kan er niet vanaf wijken.
Anonieme tievesclown
  dinsdag 12 juni 2012 @ 17:13:16 #67
56176 Catch22-
Ben je Blind?!
pi_112794071
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

daar zeggen ze van wel. ik heb het nooit gebruikt omdat ik meestal met jQuery een class aan de html tag toevoeg, of een apart CSS maak
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?
  dinsdag 12 juni 2012 @ 17:16:26 #68
228072 Crimyclown
Sapper de fap!
pi_112794209
Met JavaScript/jQuery zou nog een oplossing kunnen zijn, bedankt vanavond maar weer even puzzelen.
Anonieme tievesclown
  dinsdag 12 juni 2012 @ 17:19:42 #69
56176 Catch22-
Ben je Blind?!
pi_112794349
1
2
3
4
5
6
7
8
9
10		 
 if($.browser.msie && parseInt($.browser.version) == 8) {
    $("body").addClass("ie8");
  }
 if($.browser.msie && parseInt($.browser.version) == 7) {
    $("body").addClass("ie7");
  }
  if($.browser.msie && parseInt($.browser.version) == 6) {
    $("body").addClass("ie6");
  }
of korter
1
2
3
4		 
 if($.browser.msie) {
    $("body").addClass("ie" +  parseInt($.browser.version));
  }
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?
  dinsdag 12 juni 2012 @ 17:21:30 #70
228072 Crimyclown
Sapper de fap!
pi_112794439
quote:
11s.gif Op dinsdag 12 juni 2012 17:19 schreef Catch22- het volgende:

[ code verwijderd ]

Hoop dat die het pakt, een JQuery menu werd vanmiddag al genegeerd door het systeem. Maar ze hebben er een paar duizend euro voor betaald dus het moet per se daarin. Als het niet lukt zorg ik er wel voor dat er een grote download knop voor IE 9 in beeld verschijnt 14.gif. Bedankt in ieder geval voor de moeite.
Anonieme tievesclown
  dinsdag 12 juni 2012 @ 17:22:16 #71
56176 Catch22-
Ben je Blind?!
pi_112794469
een paar duizend euro voor een jquery menu? Sterk werk van de uitvoerende partij.

Ik weet of je net begint ofzo, maar ik veel omgevingen is een browserupdate gewoonweg niet mogelijk. Ik ben ook van mening dat je, met inachtneming van de geldende beperkingen, alles in IE8 en het meeste in IE7 werkend moet kunnen krijgen als je een serieuze frontenddeveloper wil zijn.
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?
  dinsdag 12 juni 2012 @ 17:22:33 #72
228072 Crimyclown
Sapper de fap!
pi_112794480
quote:
11s.gif Op dinsdag 12 juni 2012 17:22 schreef Catch22- het volgende:
een paar duizend euro voor een jquery menu? Sterk werk van de uitvoerende partij
Nee voor het CMS.
Anonieme tievesclown
pi_112824253
quote:
14s.gif Op dinsdag 12 juni 2012 17:22 schreef Crimyclown het volgende:

[..]

Nee voor het CMS.
Sterk werk van de uitvoerende partij.
  woensdag 13 juni 2012 @ 09:18:30 #74
137776 boem-dikkie
Jedi Mind Baby!
pi_112824299
quote:
14s.gif Op woensdag 13 juni 2012 09:15 schreef Scorpie het volgende:

[..]

Sterk werk van de uitvoerende partij.
:D
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  woensdag 13 juni 2012 @ 09:46:20 #75
228072 Crimyclown
Sapper de fap!
pi_112824937
Het is allemaal gelukt, bedankt voor de hulp Catch22-.

quote:
14s.gif Op woensdag 13 juni 2012 09:15 schreef Scorpie het volgende:

[..]

Sterk werk van de uitvoerende partij.
:7
Anonieme tievesclown
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] Waar dummies nóg meer iniatief gaan tonen! ;) #26
Index

» digital corner

» development

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