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

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
D

Dieterg

Legacy Member
Ge kunt da zelf designen hé.

bv

HTML: 
<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.
Z

Zero Grav

Legacy Member
Is wel een position: fixed aangezien het niet mag meescrollen.
-

-BVR-

Legacy Member
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: 
<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;
}&#8203;

jQuery is leuk - als het werkt!
D

Dieterg

Legacy Member
Zero Grav zei:
Is wel een position: fixed aangezien het niet mag meescrollen.
Klik om te vergroten...

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

-BVR-

Legacy Member
Mam zei:
@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 ;)!
Klik om te vergroten...

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.
t

tonymontana

Legacy Member
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? :)
D

Dieterg

Legacy Member
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!
$

$de_vieux

Legacy Member
tonymontana zei:
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? :)
Klik om te vergroten...

stomme vraag misschien maar waarom twee keer je javascript oproepen?
-

-BVR-

Legacy Member
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;
}&#8203;
</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.
t

tonymontana

Legacy Member
@ $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.
W

W0utR

Legacy Member
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).
-

-BVR-

Legacy Member
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!
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan