[html, css, js] voor dummies #17

maandag 15 augustus 2011 @ 08:25:55 #241

MrNiles

quote:
Op donderdag 11 augustus 2011 17:43 schreef PimD het volgende:
Zo simpel als MrNiles het schetst is het niet. (Bijna) iedere browser verwacht een ander font: voor IE6 e.d. heb je een EOT-file nodig etc. Ik zou gewoon gebruik maken van www.fontsquirrel.com - dat werkt over het algemeen verdomd goed, hoewel je natuurlijk gauw tegen problemen met licenties aan kunt lopen.

ow, ik dacht dat dit css3 common was, crossbrowser enzo
maar tis maar wat ik lees op andere pagina's
deze geeft wel veel info erover
http://randsco.com/index.php/2009/07/04/p680

maandag 22 augustus 2011 @ 13:48:00 #242

Jumparound

bedankt voor de vis

Een onwijze noob vraag, maar ik moet hem toch stellen ;-)

Ik heb een output van een java script. Is het mogelijk om op basis van de output een style toe te wijzen?

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

{

sitePreset: 'site-dashboard',

shortName: 'test',

title: 'test',

description: 'Dit is een test',

isFavourite: true,

isSiteManager: true

},

Inorbit: zeg dat dan typluie triangeljosti
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy

maandag 22 augustus 2011 @ 15:08:22 #243

DaFan

Zoiets?

1
2
3
4
5

<a href='#' onclick='functietje("test");'>Verander stijl</a><br>

function functietje(e) {
$('link').attr('href',e+'.css');
}

Wellicht moet je nog wel even filteren maar het werkt prima.
Functie kan je natuurlijk overal vandaan aanroepen.

Edit; wel jquery als dat geen probleem is.

maandag 22 augustus 2011 @ 16:48:27 #244

Jumparound

bedankt voor de vis

quote:
Op maandag 22 augustus 2011 15:08 schreef DaFan het volgende:
Zoiets?
[ code verwijderd ]

Wellicht moet je nog wel even filteren maar het werkt prima.
Functie kan je natuurlijk overal vandaan aanroepen.

Edit; wel jquery als dat geen probleem is.

ik denk dat ik iets vollediger moet zijn ;-)

dit is het stuk script:

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

dus de uitvoer in de browser is

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

<div id="page_x002e_component-1-2_x002e_user_x007e_admin_x007e_dashboard">

<script type="text/javascript">//<![CDATA[

new Alfresco.dashlet.MySites("page_x002e_component-1-2_x002e_user_x007e_admin_x007e_dashboard").setOptions(

{

imapEnabled: false,

sites: [

{

sitePreset: 'site-dashboard',

shortName: 'test',

title: 'test',

description: '',

isFavourite: true,

isSiteManager: true

},

{

sitePreset: 'site-dashboard',

shortName: 'test2',

title: 'test2',

description: '',

isFavourite: true,

isSiteManager: true

}

en wil ik op basis van de 'title' een css style definiëren. dus voor title x (test1) een background image (test1.png)
voor test2 -> test2.png enz.

Ik besef me dat ik zodra ik een nieuwe site aanmaak ik ook de css moet updates met een nieuwe class voor de desbetreffende title, maar het aantal opties zijn beperkt, dus dat heb ik er wel voor over ;-)

zou dat mogelijk zijn?

en e.e.a. is gelinkt met my-sites.css

Inorbit: zeg dat dan typluie triangeljosti
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy

maandag 22 augustus 2011 @ 18:21:53 #245

KomtTijd...

tuurlijk kun je gewoon met [title=test1] {background-image:url('test1.png'); werken, maar de vraag is of je dan niet de title-tag aan het misbruiken bent,.. Waarom niet gewoon een classname toevoegen?

zcflevo.nl

dinsdag 23 augustus 2011 @ 10:06:51 #246

Jumparound

bedankt voor de vis

quote:
Op maandag 22 augustus 2011 18:21 schreef KomtTijd... het volgende:
tuurlijk kun je gewoon met [title=test1] {background-image:url('test1.png'); werken, maar de vraag is of je dan niet de title-tag aan het misbruiken bent,.. Waarom niet gewoon een classname toevoegen?

ik zou wel willen, maar weet niet waar ik dat moet doen, in het stukje javescript?

Inorbit: zeg dat dan typluie triangeljosti
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy

dinsdag 23 augustus 2011 @ 11:07:16 #247

KomtTijd...

quote:
Op dinsdag 23 augustus 2011 10:06 schreef Jumparound het volgende:

[..]

ik zou wel willen, maar weet niet waar ik dat moet doen, in het stukje javescript?

...lees de documentatie?

Het is duidelijk een soortement library/plugin waar dit stukje code gebruik van maakt.

zcflevo.nl

woensdag 24 augustus 2011 @ 08:12:27 #248

MrNiles

misschien met php ipv js?

donderdag 25 augustus 2011 @ 12:15:01 #249

TheSeeker_NL

Damn fine coffee

Ugh okay, eerst content dan. Ik wilde gewoon even weten of ik hier de logische namen had gekozen.

Misschien even geduldig wachten op mijn boeken.

[ Bericht 97% gewijzigd door TheSeeker_NL op 25-08-2011 12:23:46 ]

donderdag 25 augustus 2011 @ 12:22:15 #250

KomtTijd...

Wat moet je zeggen over semantiek als er nog geen content is? Helemaal niets eigenlijk. En al helemaal niet over 6 betekenisloze elementen zonder inhoud.

Als je het echt goed wilt doen en tevens in HTML5 wilt gaan verdiepen, doe dan ook de HTML5 semantiek-elementen gebruiken zou ik zeggen.

zcflevo.nl

vrijdag 26 augustus 2011 @ 12:10:42 #251

Gitaarmat

Hallo,

ik heb iemand beloofd op z'n website een paar foto's te zetten, hij heeft me de inloggegevens enzo van de webhosting gegeven, maar ik moet natuurlijk in kunnen loggen via de website. In het verleden waar ik mee gewerkt heb kon dit via http://www.naamwebsite.nl:2222 ik kan nu alleen inloggen via Argeweb.nl (de webhost) maar via die site kan ik nergens een manier vinden om de website aan te passen. Wat mis ik, en hoe kan ik de website aanpassen?

vrijdag 26 augustus 2011 @ 15:07:20 #252

TheSeeker_NL

Damn fine coffee

Ik keek even op deze website:

http://www.noupe.com/desi(...)s-and-tutorials.html

En nu ben ik benieuwd hoe de takken, headers en wortels aan de zijkant van de container zijn gedaan. Het ziet er erg straks uit namelijk en ik wil wel leren hoe zo iets moet eigenlijk.

Is het gewoon een background-image en laten ze het lijken alsof die bladeren achter de container zijn en overlapped worden, of zijn het losse images en wordt het zo gepositioneerd? (z-index ofzo?)

Iemand die een tipje van de sluier kan lichten voor mij?

vrijdag 26 augustus 2011 @ 15:12:13 #253

DaFan

Rechtermuisknop View source?!

vrijdag 26 augustus 2011 @ 18:24:57 #254

KomtTijd...

quote:
Op vrijdag 26 augustus 2011 12:10 schreef Gitaarmat het volgende:
Hallo,

ik heb iemand beloofd op z'n website een paar foto's te zetten, hij heeft me de inloggegevens enzo van de webhosting gegeven, maar ik moet natuurlijk in kunnen loggen via de website. In het verleden waar ik mee gewerkt heb kon dit via http://www.naamwebsite.nl:2222 ik kan nu alleen inloggen via Argeweb.nl (de webhost) maar via die site kan ik nergens een manier vinden om de website aan te passen. Wat mis ik, en hoe kan ik de website aanpassen?

Gewoon, op de manier zoals de agreweb helpdesk je het uitgelegd heeft toen je contact met ze opnam hierover? Wat zouden wij daar aan toe moeten voegen?

SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

zcflevo.nl

zondag 28 augustus 2011 @ 22:57:39 #255

j95

Hoe kan ik dit: <img src="http://i.imgur.com/FoJFc.jpg" alt="" title="Hosted by imgur.com" /> laten linken naar http://jordykruse.nl/wordpress

Alvast dank

zondag 28 augustus 2011 @ 23:00:39 #256

boem-dikkie

Jedi Mind Baby!

quote:
Op zondag 28 augustus 2011 22:57 schreef j95 het volgende:
Hoe kan ik dit: <img data-src="http://i.imgur.com/FoJFc.jpg" style="visibility:hidden;" alt="" title="Hosted by imgur.com" /> laten linken naar http://jordykruse.nl/wordpress

Alvast dank

Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.

zondag 28 augustus 2011 @ 23:01:34 #257

j95

Mijn dank is groot

maandag 29 augustus 2011 @ 20:41:42 #258

Treces

Hier had uw tekst kunnen staan

Ik heb een div met images, en ik probeer deze images te animeren. Ik krijg ze alleen allemaal tegelijk naar beneden, terwijl ik ze individueel wil laten animeren.

1
2
3
4
5
6
7
8
9
10

#ribbons {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
    z-index: -333;
}
#ribbons img {
    margin-top: -80px;
}

1
2
3
4
5
6
7

$(document).ready(function(){
    $('#ribbons img').hover(function() {
        $(this).animate({ marginTop : '50px' });
    }, function() {
        $(this).animate({ marginTop : '-80px' });
    });
});

1
2
3
4
5

Wie helpt mij uit de brand?

maandag 29 augustus 2011 @ 21:13:25 #259

PimD

Nee.

Je bind je events nu volgens mij aan de hele array met images, terwijl je ieder image los wilt animeren. Ik zou iets als

1
2
3

$('#ribbons img').each(
$(this).hover(function(){}, function(){});
)

proberen.

Nee.

maandag 29 augustus 2011 @ 21:21:46 #261

Treces

Hier had uw tekst kunnen staan

Ook de each helpt niet..

1
2
3
4
5
6
7
8

    $('#ribbons img').each(function() {
        $(this).hover(function() {
            console.log(this);
            $(this).animate({ marginTop : '50px' });
        }, function() {
            $(this).animate({ marginTop : '-80px' });
        });
    });

Als ik "this" log in de console, krijg ik maar een enkele image

1	<img class="android" src="images/day/ribbon_android.png" style="margin-top: -80px; ">

dinsdag 30 augustus 2011 @ 06:52:43 #262

GI

Nee ik heet geen JOE

Moet het niet $("#ribbons a img") zijn ?

dinsdag 30 augustus 2011 @ 11:01:41 #263

RenRen-

Is het mogelijk zonder CMS/veel PHPkennis een blog te implementeren op je site? Ik wil namelijk naast mijn portfolio een schetsblog, dus het hoeft helemaal niet uitgebreid te zijn, gewoon wekelijks wat schetsen en updates.

Als ik google op Blog on site of blog on portfolio vind ik eigenlijk niets nuttigs, behalve blogsites of top portfolio/blogsites...

dinsdag 30 augustus 2011 @ 12:11:12 #264

KomtTijd...

Je hebt wel PHP-scriptjes die een blog draaien in een flat file, maar die verschillen nogal in kwaliteit, ik zou niet zo een twee drie een goeie weten...

zcflevo.nl

dinsdag 30 augustus 2011 @ 14:19:25 #265

Mirel

Mirel wil een bongophone.

Ik moet een mail nieuwsbrief maken en omdat ik dan niet css kan gebruiken en ook niet altijd divs heb ik gekozen voor tables (las op veel sites na dat dat ook veel beter is ivm met verschillende mailclients) samen met inline css.

Ik heb nu alles opgemaakt, maar ik heb afstanden tussen de verschillende cellen. Ik heb geprobeerd border="0"; te forceren in iedere cel maar dat werkt niet

Dit is de code:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="100%" height="100%" border="0"
style="
background: #3E3E3E;
background-image: url(images/bg.png);
background-repeat: no-repeat;
">
  <tr>
    <td>
        <table width="664" border="0" align="center">
          <tr>
            <td rowspan="5" width="27px" height="1150px" style="background-image: url(images/links.png);"> </td>
            <td width="570px" height="128px" style="background-image: url(images/header.gif);"> </td>
            <td rowspan="5" width="67px" height="1150px" style="background-image: url(images/rechts.png);"> </td>
          </tr>
          <tr>
            <td width="570px" height="403px" style="background-image: url(images/dushi.png);"> </td>
            </tr>
          <tr>
            <td width="570px" height="213px" style="background-image: url(images/cadeau.png);"> </td>
            </tr>
          <tr>
            <td width="570px" height="390px" style="background-image: url(images/message.png);"> </td>
            </tr>
          <tr>
            <td width="570px" height="16px" style="background-image: url(images/footer.gif);"> </td>
            </tr>
        </table>
      </td>
  </tr>
</table>

</body>
</html>

When all else fails, you always have delusion.

dinsdag 30 augustus 2011 @ 14:35:40 #266

RenRen-

quote:
Op dinsdag 30 augustus 2011 14:19 schreef Mirel het volgende:
Ik moet een mail nieuwsbrief maken en omdat ik dan niet css kan gebruiken en ook niet altijd divs heb ik gekozen voor tables (las op veel sites na dat dat ook veel beter is ivm met verschillende mailclients) samen met inline css.

Ik heb nu alles opgemaakt, maar ik heb afstanden tussen de verschillende cellen. Ik heb geprobeerd border="0"; te forceren in iedere cel maar dat werkt niet

Dit is de code:
[ code verwijderd ]

Volgens mij kun je best een beetje css gebruiken, alleen dingen als achtergrondafbeeldingen pakt hij niet goed. Dus classes en border="0" zou hij moeten pakken, dat was in ieder geval zo bij mijn vorige stage.

dinsdag 30 augustus 2011 @ 15:08:25 #267

KomtTijd...

Volgens mij is het verstandigst om alleen inline css te gebruiken. Maar je kunt het altijd proberen natuurlijk, als je outlook, thunderbird en wat wemail clients (gmail, hotmail, squirrel?) pakt om te testen, heb je het gros wel te pakken.

zcflevo.nl

dinsdag 30 augustus 2011 @ 15:40:41 #268

Mirel

Mirel wil een bongophone.

hoe kan ik het testen eigenlijk? De mailmanager waar ik dit straks in ga zetten doet het momenteel niet.

Grappig dat juist het css wat ik gebruikte voor de achtergrond afbeeldingen is

Ik heb net geprobeerd padding 0 te forceren maar dat doet het niet.

When all else fails, you always have delusion.

dinsdag 30 augustus 2011 @ 15:42:48 #269

KomtTijd...

Ik heb nog nooit CSS-emails gemaakt maar het schijnt dat achtergrondafbeeldingen inderdaad problematisch zijn. En testen kun je door je creatie naar jezelf te mailen en in verschillende clients te openen.

zcflevo.nl

dinsdag 30 augustus 2011 @ 15:44:43 #270

RenRen-

quote:
Op dinsdag 30 augustus 2011 15:40 schreef Mirel het volgende:
hoe kan ik het testen eigenlijk? De mailmanager waar ik dit straks in ga zetten doet het momenteel niet.

Grappig dat juist het css wat ik gebruikte voor de achtergrond afbeeldingen is

Ik heb net geprobeerd padding 0 te forceren maar dat doet het niet.

http://www.ehow.com/how_6515862_test-email-newsletter.html
http://biznik.com/article(...)t-and-test-some-more

Helpt dit? Ik heb het zelf nooit getest behalve in 1 client, was tijdverspilling (niet mijn woorden). Dus wel doen.

En juist achtergrondafbeeldingen doen het niet, alleen normale afbeeldingen geloof ik. Ook moeten ze wel ergens online staan dacht ik, anders werkt het ook niet lekker.

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

» digital corner

» development

» digital corner

» development