[HTML, CSS, JS] Frontend #41: De Node is hoger

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_143487043
quote:
7s.gif 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
quote:
7s.gif Op zaterdag 16 augustus 2014 18:42 schreef donroyco het volgende:

[..]

[ afbeelding ]
Wat is dit voor prut :r
[ code verwijderd ]

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'
  zaterdag 16 augustus 2014 @ 19:36:11 #202
134533 donroyco
dus niet Donroyco
pi_143487255
quote:
0s.gif 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'
http://codepen.io/cbracco/pen/qzukg
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_143487425
x

[ Bericht 99% gewijzigd door BroodjeKebab op 16-08-2014 19:47:46 ]
pi_143487778
x

[ Bericht 100% gewijzigd door BroodjeKebab op 16-08-2014 19:54:07 ]
pi_143487798


[ Bericht 100% gewijzigd door BroodjeKebab op 16-08-2014 19:50:16 ]
pi_143488004
quote:
7s.gif 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;
}



Hoe krijg ik de tooltip boven het element (telegraaf icoon?)
  zaterdag 16 augustus 2014 @ 19:59:01 #207
134533 donroyco
dus niet Donroyco
pi_143488140
quote:
0s.gif Op zaterdag 16 augustus 2014 19:54 schreef BroodjeKebab het volgende:

[..]
[ code verwijderd ]

[ afbeelding ]

Hoe krijg ik de tooltip boven het element (telegraaf icoon?)
Wat heb je zelf al geprobeerd?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_143488191
quote:
15s.gif Op zaterdag 16 augustus 2014 19:59 schreef donroyco het volgende:

[..]

Wat heb je zelf al geprobeerd?
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.
pi_143488233
quote:
15s.gif Op zaterdag 16 augustus 2014 19:59 schreef donroyco het volgende:

[..]

Wat heb je zelf al geprobeerd?
Ik heb :

1
2		margin-bottom: 5px;
    margin-left: -80px;

weggehaald, maar dan gaat de tooltip weer een stuk naar rechts, maar het moet boven iets element staan..
pi_143489143
Daarnaast zit er op de tekst 'routeplanner/verkeer/weer' een hyperlink verborgen... Dat terwijl ik geen hyperlink gezet heb.





pi_143489184
Als ik het bestand hier post, zou iemand deze twee dingen kunnen fixen voor me?
  zaterdag 16 augustus 2014 @ 20:31:45 #212
134533 donroyco
dus niet Donroyco
pi_143489325
quote:
0s.gif 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 ]
Je moet je <a href> wel afsluiten :{
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_143489437
quote:
7s.gif 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 ?
pi_143489554
quote:
7s.gif 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 ?
  zaterdag 16 augustus 2014 @ 20:39:19 #215
134533 donroyco
dus niet Donroyco
pi_143489587
quote:
0s.gif Op zaterdag 16 augustus 2014 20:38 schreef BroodjeKebab het volgende:

[..]

Afsluiten heeft niet geholpen..

[ afbeelding ]
1<a href="#"><img src="" /></a>
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_143489761
quote:
7s.gif Op zaterdag 16 augustus 2014 20:39 schreef donroyco het volgende:

[..]
[ code verwijderd ]

gelukt thnx. Die tooltip?
  zaterdag 16 augustus 2014 @ 20:54:28 #217
134533 donroyco
dus niet Donroyco
pi_143490048
quote:
0s.gif Op zaterdag 16 augustus 2014 20:44 schreef BroodjeKebab het volgende:

[..]

gelukt thnx. Die tooltip?
Ik ben je hondje niet. Probeer zelf eens iets, luie flikker :W
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_143490063
quote:
0s.gif Op zaterdag 16 augustus 2014 20:44 schreef BroodjeKebab het volgende:

[..]

gelukt thnx. Die tooltip?
WTF ben je aan het kutten jongen?
pi_143490065
x

[ Bericht 49% gewijzigd door BroodjeKebab op 16-08-2014 21:11:47 ]
  zaterdag 16 augustus 2014 @ 20:57:23 #220
134533 donroyco
dus niet Donroyco
pi_143490142
Wat een gare code. Blijf met je tengels van HTML/CSS af als je er geen hol van snapt :')
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_143490160
x

[ Bericht 100% gewijzigd door BroodjeKebab op 16-08-2014 21:11:41 ]
  zaterdag 16 augustus 2014 @ 20:58:38 #222
134533 donroyco
dus niet Donroyco
pi_143490189
quote:
0s.gif Op zaterdag 16 augustus 2014 20:57 schreef BroodjeKebab het volgende:
[ afbeelding ]
Zo hoort ie toch?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  zaterdag 16 augustus 2014 @ 21:29:55 #223
118011 BrainOverfloW
Fok! around the Clock!
pi_143491428
BroodjeKebab, verdiep je even in het verschil tussen position relative en absolute. Als je daar mee leert werken kun je met maar een fractie van de code die je nu hebt je plaatjes op volgorde zetten.
En geef de bij elkaar horende plaatjes samen een div om ze bij elkaar te houden. Dan heb je één class nodig om je categorie divs op volgorde te zetten en eentje voor hoe de plaatjes zich binnen hun div gedragen. En dan kan die elle lange lijst met los gepositioneerde plaatjes er vervolgens uit.
Bovendien kun je dan later makkelijk nieuwe plaatjes toevoegen en doen ze gelijk goed mee zodra je ze de goede class geeft. Zoals je nu werkt zul je al die plaatjes opnieuw moeten positioneren als je er iets nieuws tussen wilt zetten.

Day 20: Relative and Absolute Positioning (30 Days to Learn HTML & CSS)
Day 20: Relative and Absolute Positioning (30 Days to Learn HTML & CSS)

quote:
0s.gif Op zaterdag 16 augustus 2014 19:30 schreef BroodjeKebab het volgende:
Ik ben geen pro als jullie, het is maar voor een persoonlijke pagina.
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.
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
pi_143540099
Even de noob uithangen. Ik gebruik het volgende om query strings van een URL te pakken met javascript

http://jquery-howto.blogs(...)ues-with-jquery.html

En dan onderaan staat

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');
Maar ik zie hem geen URL of iets opgeven waar die de query vars vandaan moet halen. Hoe geef ik die op? :@

edit: oh wacht. Grapje :') window.location. gedoe niet gezien _O- :@

[ Bericht 4% gewijzigd door #ANONIEM op 18-08-2014 01:45:00 ]
pi_143542212
Ik heb het volgende:

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;
    });
};

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? :?

[ Bericht 0% gewijzigd door #ANONIEM op 18-08-2014 04:44:22 ]
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[HTML, CSS, JS] Frontend #41: De Node is hoger
Index

» digital corner

» development

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