1. #1
    tonymontana's Avatar
    Registered
    22/05/11
    Location
    gent
    Posts
    219
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    1/1

    Script gezocht voor pop-up na het scrollen op de pagina

    Hallo iedereen,

    Ik ben op zoek naar een script waar een niet storende pop-up verschijnt in de bottomcorner van mijn pagina na het scrollen. Een voorbeeldje zie je op het nieuwsblad:

    Lesley-Ann Poppe doet mee aan Expeditie Robinson - Het Nieuwsblad

    Random article

    Weet iemand waar ik gelijkaardige code zou vinden? Ik heb al wat gegoogled maar zonder succes.
    no votes  

  2. #2
    Dieterg's Avatar
    Registered
    08/01/05
    Location
    Turnhout
    Posts
    1,182
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    9/9
    Ge kunt da zelf designen hé.

    bv

    HTML Code:
    <div class="box">
     <p>blah</p>
    </div>
    Code:
    .box {
       background-color: white;
       border: 1px solid black;
       display: none;
       position: absolute;
       bottom: 0;
       right: 0;
       z-index: 999;
    }
    Code:
    $(window).scroll(function() {
       if($(this).scrollTop > 10) //hier kan je wat spelen met het getal 10, meer bepaald op welke hoogte je uw box wilt laten zien
       {
          $('.box').fadeIn('slow');
       }
       else
       {
          $('.box').fadeOut('slow');
       }
    });
    Zoiets zou moeten werken, kan syntax foutjes bevatten.
    -
    no votes  

  3. #3
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Is wel een position: fixed aangezien het niet mag meescrollen.
    no votes  

  4. #4

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Heb verder gebouwd op Mam (bij mij werkte zijn code niet volledig, dus wat aangepast). Hier een test case (dieje div 'test' dient om te laten zien dat het wel degelijk toont bij '100px'). Code:

    HTML
    HTML Code:
    <div id="wrapper">
        <div id="test"></div>
        <div class="box">
            <p>Gutentag!</p>
        </div>
    </div>
    JS
    Code:
    $(document).ready(function () {
    	var box = $('.box');
    	
        box.hide();
        $(window).scroll(function () {
            if ($(document).scrollTop() > 100) {
                box.fadeIn('slow');
            }
            else {
                box.fadeOut('slow');
            }
        });
    });
    CSS
    Code:
    #wrapper {
        height: 2000px;
    	width: 100%;
    	margin: 0;
    	padding: 0;
    }
    
    #test {
        width: 100%;
        height: 5px;
        background-color: grey;
        top: 100px;
    	position: relative;
    }
    
    .box {
       background-color: white;
       border: 1px solid black;
       z-index: 999;
       width: 100px;
       height: 100px;
       position: fixed;
       padding: 0.5em;
       text-align: center;
       bottom: 20px;
       right: 20px;
       display: block;
    }​
    jQuery is leuk - als het werkt!
    Last edited by -BVR-; 29-02-2012 at 19:59. Reason: Foutjes eruit gehaald
    no votes  

  5. #5
    Dieterg's Avatar
    Registered
    08/01/05
    Location
    Turnhout
    Posts
    1,182
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    9/9
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    Is wel een position: fixed aangezien het niet mag meescrollen.
    Idd, stom foutje!

    @bramvroy thanks voor de fix.. Ik had het hier getypt zonder te testen. Het was in ieder geval genoeg om een idée te geven !
    -
    no votes  

  6. #6

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Quote Originally Posted by Mam View Post
    This quote is hidden because you are ignoring this member. Show
    @bramvroy thanks voor de fix.. Ik had het hier getypt zonder te testen. Het was in ieder geval genoeg om een idée te geven !
    Bedankt voor het idee, anders was ik er nooit op gekomen! Vaak kan ik bij scriptjes wel verderbouwen op dingen en dan iets vormen, maar zelf iets uitvinden lukt (nog) niet.
    no votes  

  7. #7
    tonymontana's Avatar
    Registered
    22/05/11
    Location
    gent
    Posts
    219
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    1/1
    THX Mam en BramVroy! Ik heb het meteen even getest maar de fade wil bij mij niet lukken. Ik heb in JS al ingesteld op 2000 en ook in m'n css heb ik de margin top op 2000px gezet.

    Het oproepen van de javascript heb ik al eens in m'n head gedaan maar ook net boven mijn code. Enig idee wat ik fout doe?
    no votes  

  8. #8
    Dieterg's Avatar
    Registered
    08/01/05
    Location
    Turnhout
    Posts
    1,182
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    9/9
    Hebt ge niks online staan ofzo?

    Die margin 2000px heeft bramvroy ingesteld zodat je een scrollbar krijgt in het voorbeeld van jsfiddle, normaal hebt u dit niet nodig!
    -
    no votes  

  9. #9

    Registered
    29/02/12
    Location
    Leuven
    Posts
    26
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by tonymontana View Post
    This quote is hidden because you are ignoring this member. Show
    Het oproepen van de javascript heb ik al eens in m'n head gedaan maar ook net boven mijn code. Enig idee wat ik fout doe?
    stomme vraag misschien maar waarom twee keer je javascript oproepen?
    no votes  

  10. #10

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Ben je jQuery niet vergeten te includen? Je <head> moet er dus zo uit zien:

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    #wrapper {
        height: 2000px;
    	width: 100%;
    	margin: 0;
    	padding: 0;
    }
    
    #test {
        width: 100%;
        height: 5px;
        background-color: grey;
        top: 100px;
    	position: relative;
    }
    
    .box {
       background-color: white;
       border: 1px solid black;
       z-index: 999;
       width: 100px;
       height: 100px;
       position: fixed;
       padding: 0.5em;
       text-align: center;
       bottom: 20px;
       right: 20px;
       display: block;
    }​
    </style>
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!-- Niet vergeten, zonder dit werkt onderstaande script niet! !-->
    <script type="text/javascript">
    $(document).ready(function () {
    	var box = $('.box');
    	
        box.hide();
        $(window).scroll(function () {
            if ($(document).scrollTop() > 100) {
                box.fadeIn('slow');
            }
            else {
                box.fadeOut('slow');
            }
        });
    });
    </script>
    </head>
    (Je kan ook je scripts in je body zetten, voor de sluitende </body>-tag. Dit zou performanter zijn.)

    Zoals Mam zegt is die div 'test' niet nodig, dat was maar om aan te tonen dat het daadwerkelijk werkt!

    EDIT: ik had eerst inderdaad met margin gewerkt, maar dat gaf problemen op hogere resoluties (wrapper werd naar beneden getrokken) dus dan maar met position relative!

    EDIT2: hier zie je m'n testcase (in't groot) klik. Neem maar eens een kijkje naar de broncode als het nog niet lukt.
    no votes  

  11. #11
    tonymontana's Avatar
    Registered
    22/05/11
    Location
    gent
    Posts
    219
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    1/1
    @ $de_vieux: Ik bedoel dat ik het 1x geprobeerd heb in m'n head en 1x net voor mijn content.

    BramVroy, ik ben inderdaad die jquery vergeten toevoegen:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    Bedankt het werkt nu prima! Ik ben een echte noob op dit gebied Nu eens zien of ik hier dan enkele social media buttons in krijg via jouw tutorial. De demopage werkt wel niet, wist je dit?


    Is er ook een mogelijkheid om dit te integreren met de layout van mijn site? Nu staat de box afhankelijk van uw scherm steeds in de onderste corner rechts. Het lijkt me wel leuk dit mee te laten scrollen in bv. Mijn rechternavigatie.
    Last edited by tonymontana; 01-03-2012 at 00:35.
    no votes  

  12. #12
    W0utR's Avatar
    Registered
    16/04/08
    Location
    Hong Kong
    Posts
    1,989
    iTrader
    6 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/9
    Dit werkt dan gewoon hetzelfde, vanaf je een bepaald punt bereikt verander je de positioning van je menu naar fixed. (Hou er wel rekening mee dat je layout juist in elkaar zit, anders zou hij wel eens kunnen breken).
    no votes  

  13. #13

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Tonymantana: kan je anders een PM sturen met wat je juist wilt bereiken, evt. met een test case bij? Of een nieuw topic? Kwestie van het overzichtelijk te houden

    EDIT: bedankt om te melden, ik bekijk het straks!
    Last edited by -BVR-; 01-03-2012 at 08:49.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in