ausklappares Kontaktformular
Wenn ich wüsste wie ich hier die Funktion von JS einbinde, wäre es ja gut. Das ist nämlich rausgekommen wenn ich Google nutze, was jetzt schon seit 2 Std der Fall ist. Problem ist nur, dass halt ich nicht weiß wo der JS Code hinkommt, und halt das Kontaktteil beim runterscrollen von der Seite verdeckt wird und zu weit unten ist. Hier mal der Link >>>>>>soderle
Danke TiJo,
soweit alles super geklappt, aber das Teil klappt nicht auf 
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<style>
/* <![CDATA[ */
.jtpl-content {
max-width: 1600px;
}
/*]]>*/
</style>
<style>
/* <![CDATA[ */
#contactform {
width: 400px;
left: -405px;
height: 500px;
margin: 25px 0;
position: fixed;
box-shadow: 0 0 12px 0 #333;
}
#contact-button {
width: 5%;
padding: 7% 3%;
cursor: pointer;
margin-left: 400px;
margin-top: -600px;
font-size: 23px;
color: white;
position: absolute;
}
#contactform, #contact-button {
background-color: #1D1F20;
border-radius: 0 15px 15px 0;
border: 5px solid #666666;
border-left: none;
}
.rotated-text {
display: inline-block;
white-space: nowrap;
/* this is for shity "non IE" browsers
that dosn't support writing-mode */
-webkit-transform: translate(1.1em,0) rotate(90deg);
-moz-transform: translate(1.1em,0) rotate(90deg);
-o-transform: translate(1.1em,0) rotate(90deg);
transform: translate(1.1em,0) rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;*/
/* IE9+ */
-ms-transform: none;
-ms-transform-origin: none;
/* IE8+ */
-ms-writing-mode: tb-rl;
/* IE7 and below */
*writing-mode: tb-rl;
}
.rotated-text:before {
content: "";
float: left;
margin-top: 100%;
}
form {
width: 100%;
padding: 20px;
}
form input {
display: block;
border: none;
width: 300px;
height: 35px;
margin: 15px 30px;
}
form textarea {
width: 300px;
margin: 40px 30px;
height: 170px;
}
form textarea, form input {
border: 3px solid #666666;
border-radius: 5px;
background: #f2f2f2;
}
/*]]>*/
</style>
<script src="https://github.com/gdsmith/jquery.easing/blob/master/jquery.easing.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var easeOutBounce = function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
function Animate(elem, propName, duration, start, end) {
var start_time = new Date().getTime();
var interval = setInterval(function() {
var current_time = new Date().getTime(),
remaining = Math.max(0, start_time + duration - current_time),
temp = remaining / duration || 0,
percent = 1 - temp;
if (start_time + duration < current_time) clearInterval(interval);
var pos = easeOutBounce(null, duration * percent, 0, 1, duration),
current = (end - start) * pos + start;
elem.style[propName] = current + 'px';
}, 1);
}
var elem = document.getElementById('contactform');
var opened = false;
document.getElementById('contact-button').onclick = function() {
if (opened) {
Animate(elem, 'left', 800, 0, -405);
opened = false;
} else {
Animate(elem, 'left', 800, -405, 0);
opened = true;
}
}
//]]>
</script>
Schau auch mal hier: https://designtest-verona.jimdo.com/ - da hab ich etwas ähnliches erstellt. Aber ohne Standard-Element. Mist, dieAnleitung dazu hatte ich schon geschrieben, ich kannsie aber icht mehr finden. Genannt habe ich es "offContentBox".
Freue mich schon auf einen interessanten Austausch!
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= 
) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
