text = new Text({
copy: 'Grawer Warszawy',
delay: 10,
});
$('.image').magnificPopup({
delegate: '.example-image-link', // child items selector, by clicking on it popup will open
type: 'image',
gallery: {
enabled: true
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text" class="field-na na-1" placeholder="na1" size="1" value="1">
<input type="text" class="field-na na-2" placeholder="na2" size="1" value="4">
<input type="text" class="field-na na-3" placeholder="na3" size="1" value="6">
<input type="text" class="field-na na-4" placeholder="na4" size="1" value="7">
<button class="field-recalc">Пересчитать</button>
<br>
<br>
<input type="text" placeholder="1" size="1" value="1" class="field-to-change">
<input type="text" placeholder="2" size="1" value="1" class="field-to-change">
<input type="text" placeholder="3" size="1" value="1" class="field-to-change">
<input type="text" placeholder="4" size="1" value="1" class="field-to-change">
<input type="text" placeholder="5" size="1" value="1" class="field-to-change">
<input type="text" placeholder="6" size="1" value="1" class="field-to-change">
<input type="text" placeholder="7" size="1" value="1" class="field-to-change">
<script src="index.js"></script>
</body>
</html>
const calculateFields = () => {
const getFieldValue = (className, idx) => {
const value = document.querySelectorAll(className)[idx].value;
return Number(value)
}
const fields = {
na1: getFieldValue('.field-na', 0),
na2: getFieldValue('.field-na', 1),
na3: getFieldValue('.field-na', 2),
na4: getFieldValue('.field-na', 3),
}
const countRange = (start, end) => {
let range = [];
for(let i = start; i <= end; i++) {
range.push(i - 1)
}
return range
}
const firstRange = countRange(fields.na1, fields.na2);
const secondRange = countRange(fields.na3, fields.na4);
return Array.prototype.forEach.call(document.querySelectorAll('.field-to-change'), (elem, index)=>{
if(firstRange.indexOf(index) > -1 || secondRange.indexOf(index) > -1) {
elem.value = 0
}
})
}
document.querySelectorAll('.field-recalc')[0].addEventListener('click', () => {
calculateFields()
})
// document.addEventListener('DOMContentLoaded', () => {
// calculateFields();
// })
$('#save').on('click', function(){
$('.forses1 .fors input[type="text"].inputse').each(function(index){
var key ='forses1-input-'+ index;
var value = $(this).val();
localStorage.setItem(key , value );
});
});
$('#load').on('click', function(){
$('.forses1 .fors input[type="text"].inputse').each(function(index){
var key ='forses1-input-'+ index;
var values = localStorage.getItem(key);
$(this).val(values);
});
});
var re = /(?:^|\s)(?:xs|sm|md|lg|xlg)-(bottom|top|left|right)(?:$|\s)/;
$('[data-toggle="popover"]').each(function() {
var classList = $(this).attr('class');
var ok = re.exec(classList);
if (ok !== null) {
$(this).popover({
trigger: "hover",
container: "body",
placement: ok[1],
html: !0,
viewport: {
selector: "body",
padding: 2
},
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
}
});
$(function() {
var width = $(window).width(),
size = width < 768 ? 'xs' : width < 992 ? 'sm' : width < 1200 ? 'md' : width > 1600 ? 'xlg' : 'lg',
options = {
html: !0,
trigger: 'hover',
container: 'body',
viewport: {
selector: 'body',
padding: 2
},
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
};
$( '[data-toggle="popover"]' ).each( function() {
var toggle = $(this);
$.each([ 'bottom', 'top', 'left', 'right' ], function( i, value ) {
var cls = size + '-' + value;
if ( toggle.hasClass( cls ) ) options.placement = value;
if ( cls === 'xs-top' && toggle.hasClass( 'error' ) ) {
options.delay = { show: 500, hide: 10 };
delete options.viewport;
}
toggle.popover( options );
});
});
});
$('body').append('<input type="text" name="vir" id="vir" size="7" placeholder="TEXTA" style="border-width: 0px;" >')
$("#vir").css("position", "absolute").css("top", 260).css("left", 270).css({ color: "red" });
$('body').on('keyup', '#vir', function(event) {
event.preventDefault();
$(this).val($(this).val().replace(/\s/ig, '-'));
});
$('#aut, #aut1').change(function () {
/*
Здесь подставляем значения ( $('#aut').val() и $('#aut1').val() ) полей в шаблон
И дальше изменяем значение поля #aut2 на значение получившегося шаблона, например так:
$('#aut2').val('Переменная с шаблоном')
*/
});
var html = '<input type="text" name="mod" id="mod" size="4" placeholder="фотка" accesskey="a" style="border-width: 0px; background: url(images/opacity.png);">';
var str = 'http://postach.com.ua/image/';
$('body').append(html);
$("#mod")
.css({
position: 'absolute',
top: 539,
left: 290,
color: 'red'
})
.on("keyup", function () {
$('[name="image"]').val($('[name="mod"]').val().replace(str, ''));
});