Melding automatisch zichtbaar
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<style>
div.melding
{
font-family: open sans, sans-serif;
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 400px;
border-radius:5px;
box-shadow: 3px 3px 3px #888888;
color: red;
}
a:link {color:red; text-decoration:none;} /* unvisited link */
a:visited {color:red; text-decoration:none;} /* visited link */
a:hover {color:red; text-decoration:underline;} /* mouse over link */
a:active {color:red; text-decoration: underline;} /* selected link */
</style>
</head>
<body>
<div class="melding"><center><b>Let op!</b> Het contact formulier werkt nog niet.<br>U kunt wel een email sturen naar: <a href="mailto:[email protected]">[email protected]</a></center></div>
</body>
</html>
<html>
<head>
<style>
div.melding
{
font-family: open sans, sans-serif;
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 400px;
border-radius:5px;
box-shadow: 3px 3px 3px #888888;
color: red;
}
a:link {color:red; text-decoration:none;} /* unvisited link */
a:visited {color:red; text-decoration:none;} /* visited link */
a:hover {color:red; text-decoration:underline;} /* mouse over link */
a:active {color:red; text-decoration: underline;} /* selected link */
</style>
</head>
<body>
<div class="melding"><center><b>Let op!</b> Het contact formulier werkt nog niet.<br>U kunt wel een email sturen naar: <a href="mailto:[email protected]">[email protected]</a></center></div>
</body>
</html>
Gewijzigd op 16/12/2013 19:55:25 door Chris -
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('.melding').fadeIn('fast');
} else {
$('.melding').fadeOut('fast');
}
});
});
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('.melding').fadeIn('fast');
} else {
$('.melding').fadeOut('fast');
}
});
});
Edit:
Lijkt erop dat de div wel perse position fixed moet hebben
Gewijzigd op 16/12/2013 15:31:27 door Michael -
Bart Matsko op 16/12/2013 15:31:55:
Welk stukje bepaald vanaf welke hoogte het tevoorschijn komt?
Het getal 200. Als de ruimte vanaf de top meer dan 200 is komt de div tevoorschijn.
Voorbeeld
Code nu:
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<script>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() > 3200) {
$('.melding').fadeIn('fast');
} else {
$('.melding').fadeOut('slow');
}
});
$('.melding').click(function() {
$('body,html').animate({scrollTop:0},4000);
});
});
</script>
<style>
div.melding
{
position:fixed;
top:70px;
right:10px;
float: right;
font-family: open sans, sans-serif;
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 400px;
border-radius:5px;
box-shadow: 3px 3px 3px #888888;
color: red;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.melding a:link {color:red; text-decoration:none;} /* unvisited link */
div.melding a:visited {color:red; text-decoration:none;} /* visited link */
div.melding a:active {color:red; text-decoration: underline;} /* selected link */
div.melding a:hover {color:red; text-decoration:underline;} /* mouse over link */
div.melding:hover /* mouse over link */
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<div class="melding"><center><b>Let op!</b> Het contact formulier werkt nog niet.<br>U kunt wel een email sturen naar: <a href="mailto:[email protected]">[email protected]</a></center></div>
</body>
</html>
<html>
<head>
<script>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() > 3200) {
$('.melding').fadeIn('fast');
} else {
$('.melding').fadeOut('slow');
}
});
$('.melding').click(function() {
$('body,html').animate({scrollTop:0},4000);
});
});
</script>
<style>
div.melding
{
position:fixed;
top:70px;
right:10px;
float: right;
font-family: open sans, sans-serif;
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 400px;
border-radius:5px;
box-shadow: 3px 3px 3px #888888;
color: red;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.melding a:link {color:red; text-decoration:none;} /* unvisited link */
div.melding a:visited {color:red; text-decoration:none;} /* visited link */
div.melding a:active {color:red; text-decoration: underline;} /* selected link */
div.melding a:hover {color:red; text-decoration:underline;} /* mouse over link */
div.melding:hover /* mouse over link */
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<div class="melding"><center><b>Let op!</b> Het contact formulier werkt nog niet.<br>U kunt wel een email sturen naar: <a href="mailto:[email protected]">[email protected]</a></center></div>
</body>
</html>
Gewijzigd op 16/12/2013 15:40:50 door Bart Matsko
Code (php)
1
div.melding{display:none;}
edit: regel 14,15,16 kunnen weg :) Hiermee scroll je weer naar boven wanneer je erop klikt.
Gewijzigd op 16/12/2013 15:45:21 door Michael -
Ik dacht alleen dat het onderste getal in mijn geval dus 4000 voor de afstand dat hij weer verdwijnt stond, maar dat blijkt niet het geval te zijn. Waarvoor staat dit dan?
Bart Matsko op 16/12/2013 15:44:10:
Yes, super bedankt!
Ik dacht alleen dat het onderste getal in mijn geval dus 4000 voor de afstand dat hij weer verdwijnt stond, maar dat blijkt niet het geval te zijn. Waarvoor staat dit dan?
Ik dacht alleen dat het onderste getal in mijn geval dus 4000 voor de afstand dat hij weer verdwijnt stond, maar dat blijkt niet het geval te zijn. Waarvoor staat dit dan?
Zie mijn edit
regel 14,15,16 kunnen weg :) Hiermee scroll je weer naar boven wanneer je erop klikt.
Michael - op 16/12/2013 15:46:10:
Zie mijn edit
regel 14,15,16 kunnen weg :) Hiermee scroll je weer naar boven wanneer je erop klikt.
Bart Matsko op 16/12/2013 15:44:10:
Yes, super bedankt!
Ik dacht alleen dat het onderste getal in mijn geval dus 4000 voor de afstand dat hij weer verdwijnt stond, maar dat blijkt niet het geval te zijn. Waarvoor staat dit dan?
Ik dacht alleen dat het onderste getal in mijn geval dus 4000 voor de afstand dat hij weer verdwijnt stond, maar dat blijkt niet het geval te zijn. Waarvoor staat dit dan?
Zie mijn edit
regel 14,15,16 kunnen weg :) Hiermee scroll je weer naar boven wanneer je erop klikt.
Ah oke!
Zijn er nog meer mogelijkheden voor de snelheid naast 'slow' en 'fast'? Is er ook een middenweg, aangezien ik de slow te langzaam vind en fast te snel.
http://api.jquery.com/fadeOut/
Ja, je kan ook een getal invoeren in milliseconden.