Ajax Loader
×
HTML
<div class="MainContainer">
1
<div class="MainContainer">
2
    
3
  <div id="wrapper" class="OneColumn BorderNormal">
4
  
5
    <div class="MainContent_ctl00_class">
6
      <div class="HeaderMain">
7
        <h1>Headline</h1>
8
        <h2>hier ist Platz für die Subline</h2>
9
        <div class="HeaderLogo"><a href="#"><img src="http://placehold.it/69.png/e40613/ffffff/&text=Logo"></a>
10
        </div>
11
        
12
      </div>
13
      <div class="HeaderLogoSmall"><a href="#" class="exitlink"><img src="http://placehold.it/30.png/e40613/ffffff/&text=<"> back </a>
14
        </div>
15
      
16
    </div>
17
 
18
    <hr /><div id="desktop">1</div>
19
    <a href="#tablet" class="zentriert"><img src="http://placehold.it/30.png/0c85fd/ffffff/&text=>"></a>
20
    <h3>Für den Computer</h3>
21
    
22
    <div class="ThirtyThirtyThirty">
23
      <div class="Left33"><img src="http://placehold.it/200x150/BEBEBE/ffffff/&text=Apple"></div>
24
      <div class="Middle33"><img src="http://placehold.it/300x250/ACACAC/ffffff&text=WinXP"></div>
25
      <div class="Right33"><img src="http://placehold.it/200x150/CFCFCF/ffffff/&text=Win7"></div>
26
      <div class="clear"></div>
27
    </div>
28
 
29
    
30
    <div class="FortySixty">
31
      <div class="Left40"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><div class="btn gruen">Button</div></div>
32
      <div class="Right60"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
33
      <div class="btn gelb">Button</div></div>
34
    
35
      <div class="clear"></div>
36
    </div>
37
    
38
    
39
<hr /><div id="tablet">2</div>
40
    
41
    <a href="#smartphone" class="zentriert"><img src="http://placehold.it/30.png/0c85fd/ffffff/&text=>"></a>
42
    <h3>Für das Tablet</h3>
43
 
44
    <div class="FiftyFifty">
45
      <div class="Left50"><img src="http://placehold.it/200x150/CFCFCF/ffffff/&text=iPad"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
46
      <div class="Right50"><img src="http://placehold.it/200x150/CFCFCF/ffffff/&text=Win8"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
47
    
48
      <div class="clear"></div>
49
    </div>
50
 
51
 
52
<hr /><div id="smartphone">3</div>
53
 
54
    <a href="#desktop" class="zentriert"><img src="http://placehold.it/30.png/0c85fd/ffffff/&text=>"></a>
55
    <h3>Für das Smartphone</h3>
56
 
57
    <div class="ThirtyThirtyThirty">
58
      <div class="Left33"><img src="http://placehold.it/200x350/CFCFCF/ffffff/&text=iPhone"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
59
      <div class="Middle33"><img src="http://placehold.it/200x350/CFCFCF/ffffff/&text=WinPhone"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
60
      <div class="Right33"><img src="http://placehold.it/200x350/CFCFCF/ffffff/&text=Android"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
61
    
62
      <div class="clear"></div>
63
    </div>
64
 
65
 
66
<hr />
67
 
68
    
69
    </div>
70
  </div>
71
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
72
 
73
    
74
    
75
 
 
CSS
html, body {color: #444444; font-family: Verdana,sans-serif;font-size: 13px;
1
html, body {color: #444444; font-family: Verdana,sans-serif;font-size: 13px;
2
  background-color:#AAA;
3
}
4
* { margin: 0; padding: 0; }
5
.clear, .Clear {clear: both; font-size: 0;}
6
.Left40 {float: left; overflow: hidden; width: 40%; }
7
.Right60 {float: left;overflow: hidden; width: 60%; }
8
.Left50 {float: left; overflow: hidden; width: 50%; }
9
.Right50 {float: left;overflow: hidden; width: 50%; }
10
.Left33, .Middle33, .Right33 {float: left; overflow: hidden; width: 33%;}
11
 
12
/*.Left33, .Middle33, .Right33, .Left40, .Right60, .Left50, .Right50 { border:1px solid red; }*/
13
 
14
.MainContainer { margin: 0 auto 30px; position: relative; width: 950px; 
15
}
16
 
17
#wrapper { position: relative; z-index: 50;
18
  background-color:#EEE;
19
  height:2500px;
20
  padding-top:100px;
21
 
22
}
23
 
24
/* Fixed Header Header == MainContent_ctl00_class */
25
.MainContent_ctl00_class {
26
    position: fixed;
27
    top: 0;
28
    left: 0;
29
    width: 100%;
30
    background: #FFF;
31
    color:#fff;
32
    z-index: 10;
33
    height: 100px;
34
    overflow: hidden;
35
    -webkit-transition: height 0.03s;
36
    -moz-transition: height 0.03s;
37
    transition: height 0.03s;
38
    text-align:center;
39
 
40
}
41
.MainContent_ctl00_class.shrink {
42
    height: 50px;
43
  opacity: 0.8;
44
}
45
.MainContent_ctl00_class .HeaderMain {
46
    -webkit-transition: all 0.3s;
47
    -moz-transition: all 0.3s;
48
    transition: all 0.3s;
49
}
50
 
51
.MainContent_ctl00_class.shrink .HeaderMain{
52
    opacity: 0;  display:none;
53
 
54
}
55
.MainContent_ctl00_class .HeaderLogoSmall{
56
    opacity: 0; display:none;
57
}
58
 
59
.MainContent_ctl00_class.shrink .HeaderLogoSmall{
60
    opacity: 1;  display:block;
61
}
62
 
63
/* END Fixed Header */
64
 
65
.HeaderLogoSmall {
66
    position: relative;
67
    height: 30px;
68
    width: 950px;
69
  margin:10px auto;
70
display: table;
71
  z-index:12;
72
  text-align:left;
73
} 
74
.HeaderLogoSmall a {
75
  margin: 0px; 
76
  padding-left:10px;
77
  display: table-cell; 
78
  vertical-align:middle;
79
}
80
 
81
.HeaderLogo {
82
    position: absolute;
83
    height: auto;
84
    width: auto;
85
    left: 0px;
86
    top: 0px;
87
  z-index:11;
88
}
89
.HeaderMain {
90
    margin: 0 auto;
91
    position: relative;
92
    top: 20px;
93
    width: 900px;
94
    z-index: 10;
95
}
96
 
97
.FortySixty, .FiftyFifty, .ThirtyThirtyThirty {
98
    margin: 0;
99
    padding: 10px;
100
}
101
 
102
 
103
h1 {
104
    color: #E60A1E;
105
    font-weight: bold;
106
}
107
 
108
h1, h3 {
109
    font-family: "Trebuchet MS",Arial,sans-serif;
110
    font-size: 28px;
111
    line-height: 30px;
112
    margin-bottom: 12px;
113
    text-align: center;
114
}
115
 
116
h2 {
117
    color: #444444;
118
    font-size: 18px;
119
    font-weight: normal;
120
    text-align: center;
121
}
122
h3 {
123
    color: #FFF;
124
    font-weight: bold;
125
  text-shadow: 1px 2px rgba(0, 0, 0, 0.3);
126
}
127
 
128
h4 {
129
    color: #444444;
130
    font-size: 18px;
131
    font-weight: normal;
132
}
133
 
134
 
135
.zentriert {margin:10px 440px; display:block; text-align:center;}
136
 
137
hr {color:white; height:1px; margin:30px;}
138
 
139
/* Button styles */
140
.btn {
141
  margin: 10px;
142
  padding: 14px 26px;
143
  font-size: 14px;
144
  line-height: 100%;
145
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
146
  color: #fff;
147
  width: 50px;
148
  height: 10px;
149
  vertical-align: middle;
150
  text-align: center;
151
  cursor: pointer;
152
  font-weight: bold;
153
  transition: background 0.1s ease-in-out;
154
  -webkit-transition: background 0.1s ease-in-out;
155
  -moz-transition: background 0.1s ease-in-out;
156
  -ms-transition: background 0.1s ease-in-out;
157
  -o-transition: background 0.1s ease-in-out;
158
  text-shadow: 0 2px rgba(0, 0, 0, 0.3);
159
  color: #fff;
160
  -webkit-border-radius: 40px;
161
  -moz-border-radius: 40px;
162
  border-radius: 40px;
163
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
164
}
165
.btn:active {
166
  padding-top: 15px;
167
}
168
.btn, .btn:hover, .btn:active {
169
  outline: 0 none;
170
  text-decoration: none;
171
        color: #fff;
172
}
173
 
174
.gelb {
175
  background-color: #fdc058;
176
  box-shadow: 0px 3px 0px 0px #e29003;
177
}
178
.gelb:hover {
179
  background-color: #fdb53a;
180
}
181
.gelb:active {
182
  box-shadow: 0px 1px 0px 0px #e29003;
183
}
184
 
185
.purpur {
186
  background-color: #aa65c7;
187
  box-shadow: 0px 3px 0px 0px #883da7;
188
}
189
.purpur:hover {
190
  background-color: #9e4fbf;
191
}
192
.purpur:active {
193
  box-shadow: 0px 1px 0px 0px #883da7;
194
}
195
 
196
 
197
.gruen {
198
  background-color: #2ecc71;
199
  box-shadow: 0px 3px 0px 0px #239a55;
200
}
201
.gruen:hover {
202
  background-color: #28b363;
203
}
204
.gruen:active {
205
  box-shadow: 0px 1px 0px 0px #239a55;
206
}
207
 
 
JavaScript
$(function(){
1
$(function(){
2
//FixedHeader mit CSS-Shrink
3
 var shrinkHeader = 49;
4
  $(window).scroll(function() {
5
    var scroll = getCurrentScroll();
6
      if ( scroll >= shrinkHeader ) {
7
           $('.MainContent_ctl00_class').addClass('shrink');
8
        }
9
        else {
10
            $('.MainContent_ctl00_class').removeClass('shrink');
11
        }
12
  });
13
function getCurrentScroll() {
14
    return window.pageYOffset || document.documentElement.scrollTop;
15
    }
16
 
17
 
18
//SmoothScroll
19
  $('a[href*=#]').bind("click", function(event) {
20
    event.preventDefault();
21
    var ziel = $(this).attr("href");
22
                
23
                if ($.browser.opera) {
24
                    var target = 'html';
25
                }else{
26
                    var target = 'html,body';
27
                }
28
 
29
    $(target).animate({
30
      scrollTop: $(ziel).offset().top - 50
31
    }, 800 );
32
    // }, 800 , function (){location.hash = ziel;}); 
33
});
34
return false;
35
});
 

Untitled

CSSDeck G+