https://beatenberg.ch/interaktive_karte/Demo.js

1
2$(document).ready(function() {
3
4
5/* Tooltip */
6
7new jBox('Tooltip', {
8  attach: '#Tooltip-1',
9  content: 'This is a basic jBox tooltip'
10});
11
12
13new jBox('Tooltip', {
14  attach: '#Tooltip-2',
15  theme: 'TooltipBorderThick',
16  width: 200,
17  position: {
18    x: 'left',
19    y: 'center'
20  },
21  outside: 'x',
22  pointer: 'top:15',
23  content: 'You have many options to position and animate your jBoxes',
24  animation: 'move'
25});
26
27
28new jBox('Tooltip', {
29  attach: '#Tooltip-3',
30  theme: 'TooltipDark',
31  animation: 'zoomOut',
32  content: 'Use themes to change appearance',
33});
34
35
36new jBox('Tooltip', {
37  attach: '#Tooltip-4',
38  width: 300,
39  pointer: 'right:80',
40  animation: 'move',
41  delayOpen: 1000,
42  delayClose: 2000,
43  content: 'This tooltip waits 1 second to open and closes after 2 seconds',
44  onOpen: function() {
45    this.source.removeClass('active').html('Hover me');
46  },
47  onClose: function() {
48    this.source.removeClass('active').html('Hover me');
49  }
50});
51
52
53new jBox('Mouse', {
54  attach: '#Tooltip-5',
55  position: {x: 'right', y: 'bottom'},
56  content: 'I will follow you!'
57});
58
59
60new jBox('Tooltip', {
61  attach: '#Tooltip-6',
62  width: 280,
63  closeOnMouseleave: true,
64  animation: 'zoomIn',
65  content: 'I won\'t close when you move your mouse over me'
66});
67
68
69new jBox('Tooltip', {
70  attach: '#Tooltip-7',
71  target: '#Tooltip-1',
72  theme: 'TooltipBorder',
73  trigger: 'click',
74  adjustTracker: true,
75  closeOnClick: 'body',
76  closeButton: 'box',
77  animation: 'move',
78  position: {
79    x: 'left',
80    y: 'top'
81  },
82  outside: 'y',
83  pointer: 'left:20',
84  offset: {
85    x: 25
86  },
87  content: 'You can position your tooltips at any element.<br>Scroll up and down to see this tooltip flip position!',
88  onOpen: function() {
89    this.source.addClass('active').html('Now scroll');
90  },
91  onClose: function() {
92    this.source.removeClass('active').html('Click me');
93  }
94});
95
96
97new jBox('Tooltip', {
98  attach: '#Tooltip-8',
99  theme: 'TooltipBorder',
100  trigger: 'click',
101  width: 200,
102  height: ($(window).height() - 160),
103  adjustTracker: true,
104  closeOnClick: 'body',
105  closeOnEsc: true,
106  animation: 'move',
107  position: {
108    x: 'right',
109    y: 'center'
110  },
111  outside: 'x',
112  content: 'Scroll up and down or resize your browser, I will adjust my position!<br><br>Press [ESC] or click anywhere to close.',
113  onOpen: function() {
114    this.source.addClass('active').html('Now scroll');
115  },
116  onClose: function() {
117    this.source.removeClass('active').html('Click me');
118  }
119});
120
121
122/* Modal */
123
124
125new jBox('Modal', {
126  attach: '#Modal-1',
127  height: 200,
128  title: 'I\'m a basic jBox modal window',
129  content: '<div style="line-height: 30px;">Try to scroll ...it\'s blocked.<br>Press [ESC] or click anywhere to close.</div>'
130});
131
132
133new jBox('Modal', {
134  attach: '#Modal-2',
135  width: 350,
136  height: 200,
137  blockScroll: false,
138  animation: 'zoomIn',
139  draggable: 'title',
140  closeButton: true,
141  content: 'You can move this modal window',
142  title: 'Click here to drag me around',
143  overlay: false,
144  reposition: false,
145  repositionOnOpen: false
146});
147
148
149new jBox('Modal', {
150  attach: '#Modal-3',
151  width: 450,
152  height: 250,
153  closeButton: 'title',
154  animation: false,
155  title: 'AJAX request',
156  ajax: {
157    url: 'https://ajaxresponse.com/2',
158    data: {
159      id: '1982',
160      name: 'Stephan Wagner'
161    },
162    reload: 'strict',
163    setContent: false,
164    beforeSend: function() {
165      this.setContent('');
166      this.setTitle('<div class="ajax-sending">Sending AJAX request...</div>');
167    },
168    complete: function(response) {
169      this.setTitle('<div class="ajax-complete">AJAX request complete</div>');
170    },
171    success: function(response) {
172      this.setContent('<div class="ajax-success">Response:<tt>' + response + '</tt></div>');
173    },
174    error: function() {
175      this.setContent('<div class="ajax-error">Oops, something went wrong</div>');
176    }
177  }
178});
179
180
181/* Confirm */
182
183
184new jBox('Confirm', {
185	content: 'Do you really want to do this?',
186	cancelButton: 'Nope',
187	confirmButton: 'Sure do!'
188});
189
190
191/* Notice */
192
193
194$('#Notice-1').click(function() {
195  
196  new jBox('Notice', {
197    content: 'Hello, I\'m a notice',
198    color: 'black'
199  });
200  
201});
202
203

204$('#Notice-2').click(function() {
205  
206  new jBox('Notice', {
207    animation: 'flip',
208    color: getColor(),
209    content: 'Oooh! They also come in colors'
210  });
211  
212});
213
214
215$('#Notice-3').click(function() {
216
217  new jBox('Notice', {
218    theme: 'NoticeFancy',
219    attributes: {
220      x: 'left',
221      y: 'bottom'
222    },
223    color: getColor(),
224    content: 'Hello, I\'m down here',
225    audio: '../Source/audio/bling2',
226    volume: 80,
227    animation: {open: 'slide:bottom', close: 'slide:left'}
228  });
229  
230});
231
232
233$('#Notice-4').click(function() {
234  
235  new jBox('Notice', {
236    attributes: {
237      x: 'right',
238      y: 'bottom'
239    },
240    stack: false,
241    animation: {
242      open: 'tada',
243      close: 'zoomIn'
244    },
245    color: getColor(),
246    title: 'Tadaaa! I\'m single',
247    content: 'Open another notice, I won\'t stack'
248  });
249  
250});
251
252$('#Notice-5').click(function() {
253  
254  new jBox('Notice', {
255    content: 'Hover me, I\'ll stick around',
256    color: 'black',
257    autoClose: Math.random() * 8000 + 2000,
258    delayOnHover: true
259  });
260  
261});
262
263
264$('#Notice-6').click(function() {
265  
266  new jBox('Notice', {
267    animation: 'flip',
268    color: getColor(),
269    autoClose: Math.random() * 8000 + 2000,
270    content: 'Oooh! They also come in colors',
271    delayOnHover: true,
272    showCountdown: true,
273    closeButton: true
274  });
275  
276});
277
278
279$('#Notice-7').click(function() {
280
281  new jBox('Notice', {
282    theme: 'NoticeFancy',
283    attributes: {
284      x: 'left',
285      y: 'bottom'
286    },
287    color: getColor(),
288    content: getString(),
289    title: getTitle(),
290    maxWidth: 600,
291    audio: '../Source/audio/bling2',
292    volume: 80,
293    autoClose: Math.random() * 8000 + 2000,
294    animation: {open: 'slide:bottom', close: 'slide:left'},
295    delayOnHover: true,
296    showCountdown: true,
297    closeButton: true
298  });
299  
300});
301
302
303$('#Notice-8').click(function() {
304  
305  new jBox('Notice', {
306    attributes: {
307      x: 'right',
308      y: 'bottom'
309    },
310    stack: false,
311    animation: {
312      open: 'tada',
313      close: 'zoomIn'
314    },
315    autoClose: Math.random() * 8000 + 2000,
316    color: getColor(),
317    title: 'Tadaaa! I\'m single',
318    content: 'Open another notice, I won\'t stack',
319    delayOnHover: true,
320    showCountdown: true,
321    closeButton: true
322  });
323  
324});
325
326
327/* Image */
328
329
330new jBox('Image', {
331  imageCounter: true,
332  imageCounterSeparator: ' of '
333});
334
335
336/* Additional JS for demo purposes  */
337
338
339$('#Tooltip-4').mouseenter(function() {
340  $('#Tooltip-4').addClass('active').html('Wait...');
341}).mouseleave(function() {
342  $('#Tooltip-4').addClass('active').html('Wait...');
343});
344
345$('.target-notice').click(function() {
346  $(this).addClass('active').html('Click me again');
347}).mouseleave(function() {
348  $(this).removeClass('active').html('Click me');
349});
350
351var colors = ['red', 'green', 'blue', 'yellow'], index = 0;
352var getColor = function () {
353  (index >= colors.length) && (index = 0);
354  return colors[index++];
355};
356
357var strings = ['Short', 'You just switched the internet off', 'Please do not click too hard - next time we\'ll notify google.', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'];
358var getString = function () {
359  return strings[Math.floor(Math.random()*strings.length)];
360};
361
362var titles = ['Congrats', 'Success', 'Thank you', false, false, false];
363var getTitle = function () {
364  return titles[Math.floor(Math.random()*strings.length)];
365};
366
367
368});
369