Alert venster
Ik wil een alert geven als iemand nog een standaard password gebruikt.
ik wil dit doen door een div over alles heen te plaatsen.
en de achtergrond is een BEETJE doorzichtig zodat je de website ziet.
En in het midden van de pagina zie je dat je je wachtwoord moet veranderen.
maar hoe moet ik dat doen met de divs?
wat ik nu heb:
style
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.passalert{
width: 100%;
height: 100%;
position: absolute;
background-color: #000000;
}
.passalert2{
width: 350px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
width: 100%;
height: 100%;
position: absolute;
background-color: #000000;
}
.passalert2{
width: 350px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
index
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div class="passalert">
<div class="passalert2">
<table>
<tr><td>Oude wachtwoord</td><td><input type="password" name="oudepass" size="35"></td>
<tr><td>Nieuwe wachtwoord</td><td><input type="password" name="nieuwepass" size="35"></td>
<tr><td>Controle wachtwoord</td><td><input type="password" name="controlepass" size="35"></td>
<tr><td></td><td><input type="submit" value="Verander Wachtwoord"></td>
</table>
</div>
</div>
<div class="passalert2">
<table>
<tr><td>Oude wachtwoord</td><td><input type="password" name="oudepass" size="35"></td>
<tr><td>Nieuwe wachtwoord</td><td><input type="password" name="nieuwepass" size="35"></td>
<tr><td>Controle wachtwoord</td><td><input type="password" name="controlepass" size="35"></td>
<tr><td></td><td><input type="submit" value="Verander Wachtwoord"></td>
</table>
</div>
</div>
Edit:
Dit moet voor alle browers kunnen :P
Gewijzigd op 15/11/2010 11:25:14 door Mitchel V
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
56
57
58
59
60
61
62
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
56
57
58
59
60
61
62
<?php
session_start();
include_once "../connect.php"; //verbinding maken
$username = $_POST['username'];
$password2 = md5($_POST['password']);
//nu de query maken dat je het wachtwoord uit de database users haalt. met het net ingevulde password.
$query = "SELECT password FROM users WHERE username='$username'";
//query is aangemaakt
$sql = mysql_query($query) or die ( mysql_error( ) );
if ($_SERVER['REQUEST_METHOD'] == 'POST') { //kijken of het formulier gepost is
while($record = mysql_fetch_object($sql)){
if(empty($_POST['username']) && empty($_POST['password'])){
echo 'je bent wat vergeten in te vullen<br><form action="index.php" method="post" enctype="multipart/form-data">
<table border="2">
<tr><td>username:</td><td><input type="text" name="username" ></td></tr>
<tr><td>password:</td><td><input type="password" name="password" ></td></tr>
<tr><td><input type="submit" value="verzenden" /></td></tr>
</table>
</form>';
}
elseif ($record->password == $password2){
$_SESSION['logged_in'] = true;
$_SESSION['username'] = $username;
if($record->password == 'jestandaardwachtwoord'){
header('location: andere pagina met de div met change passwords fields');
}
else{
header('location: //naar iets waar de gebruiker met een veranderd wachtwoord//);
}
}
else{
//verkeerd wachtwoord hoeft hij eigenlijk niets te laten zien.
echo "verkeerd wachtwoord loloolololollolol";
}
}
}
else{
?>
<form action="index.php" method="post" enctype="multipart/form-data">
<table border="2">
<tr><td>username:</td><td><input type="text" name="username" ></td></tr>
<tr><td>password:</td><td><input type="password" name="password" ></td></tr>
<tr><td><input type="submit" value="verzenden" /></td></tr><tr><td><a href="../register/">nog geen account? klik dan hier</a></td></tr>
</table>
</form>
<?php
}
mysql_close();
?>
session_start();
include_once "../connect.php"; //verbinding maken
$username = $_POST['username'];
$password2 = md5($_POST['password']);
//nu de query maken dat je het wachtwoord uit de database users haalt. met het net ingevulde password.
$query = "SELECT password FROM users WHERE username='$username'";
//query is aangemaakt
$sql = mysql_query($query) or die ( mysql_error( ) );
if ($_SERVER['REQUEST_METHOD'] == 'POST') { //kijken of het formulier gepost is
while($record = mysql_fetch_object($sql)){
if(empty($_POST['username']) && empty($_POST['password'])){
echo 'je bent wat vergeten in te vullen<br><form action="index.php" method="post" enctype="multipart/form-data">
<table border="2">
<tr><td>username:</td><td><input type="text" name="username" ></td></tr>
<tr><td>password:</td><td><input type="password" name="password" ></td></tr>
<tr><td><input type="submit" value="verzenden" /></td></tr>
</table>
</form>';
}
elseif ($record->password == $password2){
$_SESSION['logged_in'] = true;
$_SESSION['username'] = $username;
if($record->password == 'jestandaardwachtwoord'){
header('location: andere pagina met de div met change passwords fields');
}
else{
header('location: //naar iets waar de gebruiker met een veranderd wachtwoord//);
}
}
else{
//verkeerd wachtwoord hoeft hij eigenlijk niets te laten zien.
echo "verkeerd wachtwoord loloolololollolol";
}
}
}
else{
?>
<form action="index.php" method="post" enctype="multipart/form-data">
<table border="2">
<tr><td>username:</td><td><input type="text" name="username" ></td></tr>
<tr><td>password:</td><td><input type="password" name="password" ></td></tr>
<tr><td><input type="submit" value="verzenden" /></td></tr><tr><td><a href="../register/">nog geen account? klik dan hier</a></td></tr>
</table>
</form>
<?php
}
mysql_close();
?>
Het gaat me om de divs (positie toewijzen) :P
Ik wil dat de div in het midden komt en dat de rest van de pagina wat donkerder wordt.
Hoe ik het aanroep dat weet ik, maar ik weet de style niet.
Wat ik heb geprobeerd werkt niet helemaal want als ik naar onder scroll houdt de div op.
Toevoeging op 15/11/2010 11:44:32:
<html>
<body>
<div id="floatdiv" style="position:absolute;left:0px;top:0px;">
plaats hier alles wat moet meescrollen
</div>
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<script type="text/javascript">
var target_x = 0; // is het getal positief dan bepaalt het getal de positie vanaf links, is het getal negatief dan bepaalt het getal de positie vanaf rechts
var target_y = 0; // is het getal positief dan bepaalt het getal de positie vanaf boven, is het getal negatief dan bepaalt het getal de positie vanaf onder
/*-----------------------einde wijzigingen-----------------------*/
var has_inner = typeof(window.innerWidth) == 'number';
var has_element = document.documentElement && document.documentElement.clientWidth;
var fm_id='floatdiv';
var floating_menu =
document.getElementById
? document.getElementById(fm_id)
: document.all
? document.all[fm_id]
: document.layers[fm_id];
var fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;
function move_menu()
{
if (document.layers)
{
floating_menu.left = fm_next_x;
floating_menu.top = fm_next_y;
}
else
{
floating_menu.style.left = fm_next_x + 'px';
floating_menu.style.top = fm_next_y + 'px';
}
}
function compute_shifts()
{
fm_shift_x = has_inner
? pageXOffset
: has_element
? document.documentElement.scrollLeft
: document.body.scrollLeft;
if (target_x < 0)
fm_shift_x += has_inner
? window.innerWidth
: has_element
? document.documentElement.clientWidth
: document.body.clientWidth;
fm_shift_y = has_inner
? pageYOffset
: has_element
? document.documentElement.scrollTop
: document.body.scrollTop;
if (target_y < 0)
fm_shift_y += has_inner
? window.innerHeight
: has_element
? document.documentElement.clientHeight
: document.body.clientHeight;
}
function float_menu()
{
var step_x, step_y;
compute_shifts();
step_x = (fm_shift_x + target_x - fm_next_x) * .07;
if (Math.abs(step_x) < .5)
step_x = fm_shift_x + target_x - fm_next_x;
step_y = (fm_shift_y + target_y - fm_next_y) * .07;
if (Math.abs(step_y) < .5)
step_y = fm_shift_y + target_y - fm_next_y;
if (Math.abs(step_x) > 0 ||
Math.abs(step_y) > 0)
{
fm_next_x += step_x;
fm_next_y += step_y;
move_menu();
}
setTimeout('float_menu()', 10);
};
compute_shifts();
if (document.layers)
{
fm_next_x = 0;
fm_next_y = 0;
}
else
{
fm_next_x = fm_shift_x + target_x;
fm_next_y = fm_shift_y + target_y;
move_menu();
}
float_menu();
</script>
var target_x = 0; // is het getal positief dan bepaalt het getal de positie vanaf links, is het getal negatief dan bepaalt het getal de positie vanaf rechts
var target_y = 0; // is het getal positief dan bepaalt het getal de positie vanaf boven, is het getal negatief dan bepaalt het getal de positie vanaf onder
/*-----------------------einde wijzigingen-----------------------*/
var has_inner = typeof(window.innerWidth) == 'number';
var has_element = document.documentElement && document.documentElement.clientWidth;
var fm_id='floatdiv';
var floating_menu =
document.getElementById
? document.getElementById(fm_id)
: document.all
? document.all[fm_id]
: document.layers[fm_id];
var fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;
function move_menu()
{
if (document.layers)
{
floating_menu.left = fm_next_x;
floating_menu.top = fm_next_y;
}
else
{
floating_menu.style.left = fm_next_x + 'px';
floating_menu.style.top = fm_next_y + 'px';
}
}
function compute_shifts()
{
fm_shift_x = has_inner
? pageXOffset
: has_element
? document.documentElement.scrollLeft
: document.body.scrollLeft;
if (target_x < 0)
fm_shift_x += has_inner
? window.innerWidth
: has_element
? document.documentElement.clientWidth
: document.body.clientWidth;
fm_shift_y = has_inner
? pageYOffset
: has_element
? document.documentElement.scrollTop
: document.body.scrollTop;
if (target_y < 0)
fm_shift_y += has_inner
? window.innerHeight
: has_element
? document.documentElement.clientHeight
: document.body.clientHeight;
}
function float_menu()
{
var step_x, step_y;
compute_shifts();
step_x = (fm_shift_x + target_x - fm_next_x) * .07;
if (Math.abs(step_x) < .5)
step_x = fm_shift_x + target_x - fm_next_x;
step_y = (fm_shift_y + target_y - fm_next_y) * .07;
if (Math.abs(step_y) < .5)
step_y = fm_shift_y + target_y - fm_next_y;
if (Math.abs(step_x) > 0 ||
Math.abs(step_y) > 0)
{
fm_next_x += step_x;
fm_next_y += step_y;
move_menu();
}
setTimeout('float_menu()', 10);
};
compute_shifts();
if (document.layers)
{
fm_next_x = 0;
fm_next_y = 0;
}
else
{
fm_next_x = fm_shift_x + target_x;
fm_next_y = fm_shift_y + target_y;
move_menu();
}
float_menu();
</script>
dit is wel een mooie code kant en klaar van het internet weet niet of je dit bedoelt
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
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
<?php // Kleurtjes
<div id="password-overlay"></div> // Transperante overlay, hier geen content inzetten want dat neemt de transperantie over (of je moet werken met png maar dat word niet ondersteund in IE 6
<div id="password-content">Hier alle content</div> // Hier alle content wat in je popup/alert moet.
<style type="text/css">
#password-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000000;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
}
#password-content {
position: fixed;
width: 370px;
height: 170px;
padding: 15px;
background: #ffffff;
margin: -100px 0 0 -200px;
left: 50%;
top: 100%;
}
</style>
?>
<div id="password-overlay"></div> // Transperante overlay, hier geen content inzetten want dat neemt de transperantie over (of je moet werken met png maar dat word niet ondersteund in IE 6
<div id="password-content">Hier alle content</div> // Hier alle content wat in je popup/alert moet.
<style type="text/css">
#password-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000000;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
}
#password-content {
position: fixed;
width: 370px;
height: 170px;
padding: 15px;
background: #ffffff;
margin: -100px 0 0 -200px;
left: 50%;
top: 100%;
}
</style>
?>
Zoiets zou het moeten zijn, niet getest
Gewijzigd op 15/11/2010 12:09:34 door Joakim Broden
Dan moet je het wel in een echo zetten anders heeft dit ook geen zin!
het is gelukt
Ik gebruik nu de volgende css:
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
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
#password-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000000;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
z-index: 2;
}
#password-content {
position: fixed;
width: 400px;
height: 275px;
padding: 15px;
background-color:#FFFFFF;
color: #000000;
margin: -100px 0 0 -200px;
left: 50%;
top: 250px;
border-style:solid;
border-width:medium;
border-color: #666666;
z-index: 3;
}
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000000;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
z-index: 2;
}
#password-content {
position: fixed;
width: 400px;
height: 275px;
padding: 15px;
background-color:#FFFFFF;
color: #000000;
margin: -100px 0 0 -200px;
left: 50%;
top: 250px;
border-style:solid;
border-width:medium;
border-color: #666666;
z-index: 3;
}
Code (php)
1
2
3
4
2
3
4
<div id="password-overlay"></div>
<div id="password-content">
Hier dan de tekst in de venster
</div>
<div id="password-content">
Hier dan de tekst in de venster
</div>
Maar hij komt niet helemaal in het midden??
Ook werkt dit niet bij internet explore...
misschien bij meerdere niet.. maar wel bij Firefox en Safari.
Kan iemand mij hier mee helpen om dit werkend te krijgen?
maar daar vind ik ook steeds :
margin-left: -250px;
Maar dan zet hij hem niet niet precies in het midden...
En op InternetExplore zit het er helemaal vercrackt uit....
Zet op #password-overlay eens position: absolute ivm IE die altijd zit te kutten!
@vincent voor jou
Gewijzigd op 07/12/2010 16:33:20 door Joakim Broden
Safari:(Goed)
http://img718.imageshack.us/img718/8489/safarioverlay.png
Internet Explore (Slecht)
http://img222.imageshack.us/img222/3672/ieoverlay.png
weer bewijs dat IE stront kut is.