The SSH host key has changed on 8 April, 2022 to this one: SHA256:573uTBSeh74kvOo0HJXi5ijdzRm8me27suzNEDlGyrQ
gergely
/
gergelypolonkai-web-jekyll
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

TMP start transitioning to bootstrap modals

Browse Source
sqla-i18n-post
Gergely Polonkai 7 years ago
parent cf888b7247
commit d2e1bcccec
1 changed files with 144 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 274
      symbolon/index.html

274
symbolon/index.html
Unescape View File

@ -2,160 +2,174 @@
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Symbolon</title>
<style>
div#holder {
overflow: auto;
height: 320px;
}
div.card {
float: left;
margin-right: 1em;
}
p {
text-align: center;
border-bottom: 1px solid black;
}
img {
border: 0 none;
}
</style>
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/fancybox/source/jquery.fancybox.pack.js"></script>
</head>
<body>
<select>
<option value="">Mind / All</option>
<option value="aries">Kos / Aries</option>
<option value="taurus">Bika / Taurus</option>
<option value="gemini">Ikrek / Gemini</option>
<option value="cancer">Rák / Cancer</option>
<option value="leo">Oroszlán / Leo</option>
<option value="virgo">Szűz / Virgo</option>
<option value="libra">Mérleg / Libra</option>
<option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<select>
<option value="">Mind / All</option>
<option value="aries">Kos / Aries</option>
<option value="taurus">Bika / Taurus</option>
<option value="gemini">Ikrek / Gemini</option>
<option value="cancer">Rák / Cancer</option>
<option value="leo">Oroszlán / Leo</option>
<option value="virgo">Szűz / Virgo</option>
<option value="libra">Mérleg / Libra</option>
<option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<button id="draw">Húzz egyet / Draw one</button>
<hr>
<div id="holder">
<head>
<meta charset="utf-8">
<title>Symbolon</title>
<style>
div#holder {
overflow: auto;
height: 320px;
}
div.card {
float: left;
margin-right: 1em;
}
p {
text-align: center;
border-bottom: 1px solid black;
}
img {
border: 0 none;
}
</style>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<select>
<option value="">Mind / All</option>
<option value="aries">Kos / Aries</option>
<option value="taurus">Bika / Taurus</option>
<option value="gemini">Ikrek / Gemini</option>
<option value="cancer">Rák / Cancer</option>
<option value="leo">Oroszlán / Leo</option>
<option value="virgo">Szűz / Virgo</option>
<option value="libra">Mérleg / Libra</option>
<option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<select>
<option value="">Mind / All</option>
<option value="aries">Kos / Aries</option>
<option value="taurus">Bika / Taurus</option>
<option value="gemini">Ikrek / Gemini</option>
<option value="cancer">Rák / Cancer</option>
<option value="leo">Oroszlán / Leo</option>
<option value="virgo">Szűz / Virgo</option>
<option value="libra">Mérleg / Libra</option>
<option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<button type="button" class="btn" data-toggle="modal" data-target="#draw-one-modal" id="draw">Húzz egyet!</button>
<hr>
<div id="holder">
{% assign list = site.data.symbolon | sort:'number'%}
{% for s in list %}
{% assign image = '0' | append: s.number %}
{% comment %}
Using image|slice:-2,2 would be much easier here. However, it seems the
slice filer is not working for some time now…
{% endcomment %}
{% assign len = image | size %}
{% if len == 3 %}
{% assign image = '' | append: s.number %}
{% endif %}
<div class="card{% for sign in s.signs %} {{sign}}{% endfor %}">
<a id="card_{{image}}" class="fancybox" rel="group" href="images/{{image}}.jpg">
<img src="images/{{image}}.jpg" alt="{{s.name}}">
</a>
<p class="cim">{{s.number}}. {{s.name}}</p>
</div>
<div class="card{% for sign in s.signs %} {{sign}}{% endfor %}">
<a id="card_{{image}}" rel="group" href="images/{{image}}.jpg">
<img src="images/{{image}}.jpg" alt="{{s.name}}">
</a>
<p class="cim">{{s.number}}. {{s.name}}</p>
</div>
{% endfor %}
</div>
<script>
$('select').change(function () {
var classes = new Array();
var single_card = false;
</div>
</div>
$('select').each(function (i, e) {
sign = $(e).val();
<div class="modal fade" id="draw-one-modal" tabindex="-1" role="dialog" aria-labelledby="draw-one-title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="draw-one-title">Draw One</h4>
</div>
<div class="modal-body" id="draw-one-body">
Body!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$('select').change(function () {
var classes = new Array();
var single_card = false;
if (sign != '') {
classes.push($(e).val());
}
});
$('select').each(function (i, e) {
sign = $(e).val();
if (classes.length == 2 && (classes[0] == classes[1])) {
single_card = true;
}
if (sign != '') {
classes.push($(e).val());
}
});
classes = classes.filter(function (e, i, arr) {
return arr.lastIndexOf(e) === i;
});
if (classes.length == 2 && (classes[0] == classes[1])) {
single_card = true;
}
selector = '';
classes = classes.filter(function (e, i, arr) {
return arr.lastIndexOf(e) === i;
});
$.map(classes, function (e) {
selector += '.' + e;
});
selector = '';
if (single_card) {
selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]';
}
$.map(classes, function (e) {
selector += '.' + e;
});
console.log(selector);
if (single_card) {
selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]';
}
$('div.card').show();
if (selector != '') {
$('div.card').not(selector).hide();
}
});
$('div.card').show();
function resize_holder() {
var winheight = $(window).height();
var holdertop = $('#holder').position().top;
$('#holder').height(winheight - holdertop - 10);
}
if (selector != '') {
$('div.card').not(selector).hide();
}
});
$(document).ready(function () {
resize_holder();
function resize_holder() {
var winheight = $(window).height();
var holdertop = $('#holder').position().top;
$('.fancybox').fancybox({
beforeShow: function() {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
});
$('#holder').height(winheight - holdertop - 10);
}
$(window).resize(function () {
resize_holder();
});
$(document).ready(function () {
resize_holder();
});
$('#draw').click(function () {
count = $('div.card').length;
$(window).resize(function () {
resize_holder();
});
draw_num = Math.floor(Math.random() * count) + 1;
num_str = (draw_num < 10) ? '0' + draw_num : draw_num;
draw_id = '#card_' + num_str;
$('#draw-one-modal').on('show.bs.modal', function(e) {
count = $('div.card').length;
console.log(draw_id);
draw_num = Math.floor(Math.random() * count) + 1;
num_str = (draw_num < 10) ? '0' + draw_num : draw_num;
$(draw_id).click();
});
</script>
</body>
$('#draw-one-body').html('');
});
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save