quote:Op zaterdag 16 augustus 2014 18:42 schreef amvrosios het volgende:
[..]
[ code verwijderd ]
Al zou ik de styling persoonlijk niet inline doen ;-)
je kan het beter in een losse stylesheet kieperen om je code maintable te houden
Ik ben geen pro als jullie, het is maar voor een persoonlijke pagina.quote:Op zaterdag 16 augustus 2014 18:42 schreef donroyco het volgende:
[..]
[ afbeelding ]
Wat is dit voor prut
[ code verwijderd ]
http://codepen.io/cbracco/pen/qzukgquote:Op zaterdag 16 augustus 2014 19:30 schreef BroodjeKebab het volgende:
[..]
[..]
Ik ben geen pro als jullie, het is maar voor een persoonlijke pagina.
Ehm.. weten jullie ook hoe ik een tekst kan weergeven als ik 'hover' over een hyperlink?
Dus als ik 'hover' over een foto van een broodje kebab dat er een tekstvak verschijnt met de tekst 'dit is een broodje kebab'
quote:Op zaterdag 16 augustus 2014 19:36 schreef donroyco het volgende:
[..]
http://codepen.io/cbracco/pen/qzukg
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | /* Add this attribute to the element that needs a tooltip */ [data-tooltip] { position: relative; z-index: 2; cursor: pointer; } /* Hide the tooltip content by default */ [data-tooltip]:before, [data-tooltip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } /* Position tooltip above the element */ [data-tooltip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); text-align: center; font-size: 14px; line-height: 1.2; } /* Triangle hack to make tooltip look like a speech bubble */ [data-tooltip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } /* Show tooltip content on hover */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } |
Wat heb je zelf al geprobeerd?quote:Op zaterdag 16 augustus 2014 19:54 schreef BroodjeKebab het volgende:
[..]
[ code verwijderd ]
[ afbeelding ]
Hoe krijg ik de tooltip boven het element (telegraaf icoon?)
Niet veel, omdat ik het niet begrijp, waarom.. Heb wel de voorgaande fouten kunnen ontdekken, vandaar ook dat ik 3 voorgaande posts heb met een x of een leeg bericht.quote:
Ik heb :quote:
| 1 2 | margin-bottom: 5px; margin-left: -80px; |
Je moet je <a href> wel afsluitenquote:Op zaterdag 16 augustus 2014 20:26 schreef BroodjeKebab het volgende:
Daarnaast zit er op de tekst 'routeplanner/verkeer/weer' een hyperlink verborgen... Dat terwijl ik geen hyperlink gezet heb.
[ afbeelding ]
[ afbeelding ]
[ afbeelding ]
TOPPIE!!.. Klein dingetje vergeten.. de / ,maar het maakt een wezenlijk verschil. En die tooltip ?quote:Op zaterdag 16 augustus 2014 20:31 schreef donroyco het volgende:
[..]
Je moet je <a href> wel afsluiten
TOPPIE!!.. Klein dingetje vergeten.. de / ,maar het maakt een wezenlijk verschil. En die tooltip ?quote:Op zaterdag 16 augustus 2014 20:31 schreef donroyco het volgende:
[..]
Je moet je <a href> wel afsluiten
quote:Op zaterdag 16 augustus 2014 20:38 schreef BroodjeKebab het volgende:
[..]
Afsluiten heeft niet geholpen..
[ afbeelding ]
| 1 | <a href="#"><img src="" /></a> |
Ik ben je hondje niet. Probeer zelf eens iets, luie flikkerquote:
Zo hoort ie toch?quote:
Dat het niet publiekelijk is, is geen excuus om slechte CSS te schrijven. Als je goede CSS wilt leren moet je juist je best doen om jezelf geen slechte gewoontes uit gemak aan te leren.quote:Op zaterdag 16 augustus 2014 19:30 schreef BroodjeKebab het volgende:
Ik ben geen pro als jullie, het is maar voor een persoonlijke pagina.
Maar ik zie hem geen URL of iets opgeven waar die de query vars vandaan moet halen. Hoe geef ik die op?quote:Now, if you include the above code in your javascript file, you can get URL parameter values in the following way:
// Get object of URL parameters
var allVars = $.getUrlVars();
// Getting URL var by its nam
var byName = $.getUrlVar('name');
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | function getYoutubeInfo(id) { var url = "http://gdata.youtube.com/feeds/api/videos/" + id + "?v=2&alt=json"; $.getJSON( url ).done( function(data) { var returnObj = { title: data.entry.title.$t, uploader: data.entry.author[0].name.$t } console.log(returnObj); return returnObj; }); }; |
Die undefined is waarschijnlijk het resultaat van de functie getYoutubeInfo omdat er geen return in staat.quote:Op maandag 18 augustus 2014 04:37 schreef d4v1d het volgende:
Ik heb het volgende:
[ code verwijderd ]
Dit lijkt redelijk te werken. de console.log geeft hetgene wat ik verwacht.
Maar zodra ik de functie aanroep krijg ik een undifined te zien![]()
Ennnn in de developer console van Chrome zie ik eerst de undefined en dan zie ik pas XHR finished loading: GET bla bla bla. Alsof die eerst de undefined stuurt en dan pas de json api aanroept.![]()
Waar komt die undefined vandaan en waarom werkt mijn return niet maar console.log wel?
De code waarmee ik hem aanroep:quote:Op maandag 18 augustus 2014 07:21 schreef Aether het volgende:
[..]
Die undefined is waarschijnlijk het resultaat van de functie getYoutubeInfo omdat er geen return in staat.
Hoe roep je die functie aan, want de aanroeper kan nu niet het promiseobject gebruiken.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function buildList() { var tempElm; $.each(videoList, function(i, id) { tempElm = null; tempElm = $(".videoList .videoItem.hidden").clone().removeClass("hidden"); console.log(getYoutubeInfo(id)); tempElm.find("h4.vid-title").text(getYoutubeInfo(id).title); tempElm.find("span.vid-uploader").text(getYoutubeInfo(id).uploader); tempElm.find("p.vid-id").text("video id: " + id); tempElm.appendTo("ul.videoList"); }); }; |
De functie getYoutubeInfo zal niet direct de gegevens van Youtube terugkrijgen dus die zijn niet direct te gebruiken in buildList. Je kunt het Promise-object als functiewaarde teruggeven zodat het doorvoeren pas plaatsvindt wanneer de gegevens beschikbaar zijn.quote:Op maandag 18 augustus 2014 14:36 schreef d4v1d het volgende:
[..]
De code waarmee ik hem aanroep:
[ code verwijderd ]
videoList is een array met video ID's.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | function getYoutubeInfo(id) { var url = "http://gdata.youtube.com/feeds/api/videos/" + id + "?v=2&alt=json"; // Verander "done" door "then" zodat er nog meer // acties aan het Promise-object gekoppeld kunnen worden. // Geef het Promise-object terug zodat het binnen buildList // gebruikt kan worden. return $.getJSON( url ).then( function(data) { var returnObj = { title: data.entry.title.$t, uploader: data.entry.author[0].name.$t } console.log(returnObj); return returnObj; }); }; function buildList() { var tempElm; $.each(videoList, function(i, id) { tempElm = null; tempElm = $(".videoList .videoItem.hidden").clone().removeClass("hidden"); getYoutubeInfo( id ).then(function(info) { // info bevat de gegevens van returnObj uit getYoutubeInfo console.log( info.id ); tempElm.find("h4.vid-title").text( info.title ); tempElm.find("span.vid-uploader").text( info.uploader ); tempElm.find("p.vid-id").text("video id: " + info.id); }); // tempElm wordt toegevoegd voordat de Youtube-info is verwerkt! tempElm.appendTo("ul.videoList"); }); }; |
het werktquote:Op maandag 18 augustus 2014 14:49 schreef Aether het volgende:
[..]
De functie getYoutubeInfo zal niet direct de gegevens van Youtube terugkrijgen dus die zijn niet direct te gebruiken in buildList. Je kunt het Promise-object als functiewaarde teruggeven zodat het doorvoeren pas plaatsvindt wanneer de gegevens beschikbaar zijn.
[ code verwijderd ]
Nee, de functie getYoutubeInfo geeft een Promise-object terug. Dit is de waarde die $.getJSON teruggeeftquote:Op maandag 18 augustus 2014 14:54 schreef d4v1d het volgende:
[..]
Je returned nu twee keer in getYoutubeInfo() ?
| 1 2 3 4 5 6 7 8 9 10 11 12 | var result = $.getJSON( url ); result.then(function(data) { var returnObj = { title: data.entry.title.$t, uploader: data.entry.author[0].name.$t } console.log(returnObj); return returnObj; }); return result; |
Komt welquote:Op maandag 18 augustus 2014 15:08 schreef Catch22- het volgende:
Wel even een errorHandler toevoegen natuurlijk
dat zou ik even de boel zo bouwen dat je een array van id's kan doorsturen en je daar de info van krijgt, ipv voor alles een losse request te makenquote:Op maandag 18 augustus 2014 15:40 schreef d4v1d het volgende:
[..]
Komt wel
Maar ik denk dat ik het in php ga herschrijven omdat het uiteindelijk meer gedoe wordt met javascript enzo
(in de .each doet die dus http requests, en die each gaat weer vrolijk door voor de http request klaar is..
Geen zin om daar allemaal omheen te gaan bouwen
Dat je met javascript een array van video id's maakt en deze doorstuurt naar een php dingetje die de info ophaalt?quote:Op maandag 18 augustus 2014 15:42 schreef Catch22- het volgende:
[..]
dat zou ik even de boel zo bouwen dat je een array van id's kan doorsturen en je daar de info van krijgt, ipv voor alles een losse request te maken
neejoj n00b dit is TeaScriptquote:
quote:
Dafuq ?! wat is hier het nut van?:')quote:
dit werd vroeger volgens nog best vaak gebruikt, door crappy cms'en en developersquote:Op zondag 24 augustus 2014 00:15 schreef amvrosios het volgende:
[..]
Dafuq ?! wat is hier het nut van?:')
Heel benieuwd hoe je op dit idee bent gekomen...
toen was het ook al fout :-Pquote:Op zondag 24 augustus 2014 00:16 schreef Catch22- het volgende:
[..]
dit werd vroeger volgens nog best vaak gebruikt.
komt van reddit.quote:Op zondag 24 augustus 2014 00:15 schreef amvrosios het volgende:
[..]
Dafuq ?! wat is hier het nut van?:')
Heel benieuwd hoe je op dit idee bent gekomen...
| Forum Opties | |
|---|---|
| Forumhop: | |
| Hop naar: | |