Nieuws:

We zijn er weer.

Na lange tijd van afwezigheid zijn we er weer  :laugh:
We hebben alle wachtwoorden gereset, je oude wachtwoord werkt niet meer.Je moet via het "wachtwoord vergeten"-linkje je wachtwoord resetten. Je krijgt hiervoor een mailtje op het adres dat je bij ons geregistreerd hebt.

De komende tijd zijn we nog druk bezig om de rest van de site op te bouwen, dus het kan zijn dat sommige onderdelen (tijdelijk) niet werken.

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: [opgelost] html/css/javascript ? "floating" ads ...  (gelezen 1641 keer)

Offline Quebo

  • Lid
  • Steunpunt: Nee
[opgelost] html/css/javascript ? "floating" ads ...
« Gepost op: 2011/02/21, 11:30:24 »
Hallo,
Ik wil graag iets maken zoals te zien is op http://www.novinky.cz/ekonomika/216413-nezavisly-test-cerpacich-stanic-v-cesku.html
Let niet op de taal ;-) Maar scroll wat naar beneden en daar zal je zien dat er een advertentie (in deze een flash) over een bepaalde plaats meescrolt ... iemand een idee hoe dit eenvoudig aan te pakken, of een tutorial ? ik kan wel copy pasten en dan wat aanpassen maar wellicht bestaat er ergens een goeie tutorial hierover die het allemaal wat eenvoudiger zou maken.

Alvast bedankt!
« Laatst bewerkt op: 2011/02/22, 00:44:49 door Quebo »

Offline Brumm3l

  • Lid
  • Steunpunt: Nee
Re: html/css/javascript ? "floating" ads ...
« Reactie #1 Gepost op: 2011/02/21, 12:18:39 »
Ik krijg de ad niet te zien, maar ik denk dat ik wel begrijp wat je bedoelt.

Je zou eens kunnen kijken naar jQuery: http://jQuery.com . jQuery is een javascript bibliotheek waarmee je erg veel grafische effecten op een gemakkelijke manier kunt toevoegen aan je website.

Offline Quebo

  • Lid
  • Steunpunt: Nee
Re: html/css/javascript ? "floating" ads ...
« Reactie #2 Gepost op: 2011/02/21, 13:56:19 »
Misschien zie je deze wel: http://www.ajax-zoom.com/index.php?cid=examples (de rechterkolom die 'meescrollt') ?
Gr.

Offline Ronnie

  • Artworkteam
    • ronnie.vd.c
  • Steunpunt: Nee
Re: html/css/javascript ? "floating" ads ...
« Reactie #3 Gepost op: 2011/02/21, 14:35:46 »
Een compleet te gebruiken voorbeeld:
<!DOCTYPE html>

<html>
    <head>
<title>Titel van de Website</title>   

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Some meta data to be better findable by search engines -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="style/style.css" />

<!-- Inline CSS -->
<style type="text/css">
    #meta-container {
        position: relative;
        margin: 80px 0 160px;
        padding: 15px 5px;
        width: 200px;
        height: 400px;
        background-color: #f7f7f7;
    }
    #meta-float {
        //width: 200px;
        background-color: #DD4814;
        color: #ffffff;
        position: relative;
        top: 5px;
    }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Between the script tags //<![CDATA[....]]> is needed so the browsers do not parse this code as HTML -->
<script type="text/javascript">
//<![CDATA[
$(function () {
                var floater = $('#meta-float'); // Bounds
                var container = $('#meta-container'); // Bounds
                $(window).scroll(function (event) {
                    var stop = $(window).scrollTop(),
                        ctop = container.offset().top,
                        cheight = container.height(),
                        fheight = floater.height();
                   
                    if (!floater.attr('width')) {
                        floater[0].style.width = floater.width() + 'px';
                    }
                    if (ctop < stop && ctop + cheight - fheight > stop) {
                        if (floater[0].style.position === 'relative') {
                            floater[0].style.position = 'fixed';
                        }
                    } else {
                        if (floater[0].style.position === 'fixed') {
                            floater[0].style.position = 'relative';
                        }
                    }
                });
            });
//]]>
</script>
</head>
<body>
    <div id="meta-container">
        <div id="meta-float">
            <p>Some text of the floating add</p>
            <br /><br /><br />
            <p>An other line of text</p>
        </div>
    </div>
</body>
</html>
« Laatst bewerkt op: 2011/02/21, 16:48:04 door Ronnie »
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline Brumm3l

  • Lid
  • Steunpunt: Nee
Re: html/css/javascript ? "floating" ads ...
« Reactie #4 Gepost op: 2011/02/21, 15:03:19 »
Kan inderdaad met de optie die Ronnie post.

Heb zelf zoiets gemaakt met jQuery, voor het menu op m'n 'kladblok / speeltuin' : http://www.b3l.nl/

jQuery includen in je pagina (dus even op je domein zetten, of linken naar google):
<script type='text/javascript' src='jquery-1.4.4.js'></script>
En dan volgende scriptje:

$(function() {
$(window).scroll(function() {
$('#header') //.css('top', $(document).scrollTop());
.stop()
.animate({top: $(document).scrollTop()},'slow','easeOutQuint');
});
});

Offline MKe

  • Lid
  • Steunpunt: Nee
Re: html/css/javascript ? "floating" ads ...
« Reactie #5 Gepost op: 2011/02/21, 15:47:09 »
Je kunt toch ook gewoon "position:fixed;" in de css zetten voor de betreffende div? Dan blijft hij gewoon in het scherm staan als je naar beneden scrolled. Dan heb je niets te maken met allerlei browser-onvriendelijke javascript.

Offline Ronnie

  • Artworkteam
    • ronnie.vd.c
  • Steunpunt: Nee
Re: html/css/javascript ? "floating" ads ...
« Reactie #6 Gepost op: 2011/02/21, 16:46:25 »
@Brumm3l, ik heb altijd een hekel aan die traag scrollende menu's. Vreselijk irritant

Je kunt toch ook gewoon "position:fixed;" in de css zetten voor de betreffende div? Dan blijft hij gewoon in het scherm staan als je naar beneden scrolled. Dan heb je niets te maken met allerlei browser-onvriendelijke javascript.

Position Fixed is inderdaad een goede oplossing. Mijn script gebruikt standaard position: relative, totdat de bovenkant van het element de bovenkant van de pagina bereikt, dan springt deze naar 'fixed'. Dat betekend dat dit element de header niet verstoord. Ook als je te ver naar beneden scrollt (de parent niet meer in beeld), dan verdwijnt deze weer.

Het voorbeeld heb ik gejat van: http://code.google.com/p/modwsgi/issues/detail?id=197
Dit vind ik de meest elegante oplossing.
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline Quebo

  • Lid
  • Steunpunt: Nee
Re: [opgelost] html/css/javascript ? "floating" ads ...
« Reactie #7 Gepost op: 2011/02/22, 00:46:04 »
bedankt - ondertussen wat aan het spelen geweest met jquery en dat bevalt bijzonder goed! Bedankt voor alle reacties!

Offline Brumm3l

  • Lid
  • Steunpunt: Nee
Re: html/css/javascript ? "floating" ads ...
« Reactie #8 Gepost op: 2011/02/22, 09:35:16 »
@Brumm3l, ik heb altijd een hekel aan die traag scrollende menu's. Vreselijk irritant

Kwestie van smaak denk ik. Ik weet ook niet of het menu dat ik daar gebruik ook in een professionele webapplicatie zou gebruiken. Het is daar mee bedoeld als showcase van wat er kan en als testcase voor mezelf om te zien of ik het kan.

Dan heb je niets te maken met allerlei browser-onvriendelijke javascript.

Het grote voordeel van jQuery is dat het cross-browser verschillen voor je oplost. Op het moment dat je een functie werkend hebt, werkt deze ook in alle browsers op eenzelfde manier met eenzelfde resultaat.