Related
I am making a chess game with HTML, CSS and JS but i cannot figure out how to get the index of a piece in the grid before and after being dragged(i also use jquery and jquery-ui)
This is an image of the "game":
https://i.stack.imgur.com/w3qmG.png
CODE HTML
<div class="chessboard ">
<div class="cell white">
<img class="piece" id="rook" draggable="true" src="assets/pieces/black/rook.png" alt="">
</div>
<div class="cell black">
<img class="piece" id="knight" draggable="true" src="assets/pieces/black/knight.png" alt="">
</div>
..............................................
<div class="cell black">
<img class="piece" id="knight" draggable="true" src="assets/pieces/white/knight.png" alt="">
</div>
<div class="cell white">
<img class="piece" id="rook" draggable="true" src="assets/pieces/white/rook.png" alt="">
</div>
</div>
CODE JS
const pieces = document.querySelectorAll(".piece");
const grid = document.querySelector(".chessboard");
var grid_layout = []
// i tried to find at least the starting position by clicking on the pieces
pieces.forEach((piece) => {
piece.addEventListener("click", () => {
console.log($(piece.id).index())
})
})
This is one of my failed attempts
function GetElementIndex() {
if ($('.piece').hasClass("ui-draggable-dragging")) {
console.log(GetGridElementsPosition($('.piece').index()));
}
}
This function returns the position of an element, given the index(which i am looking for), fortunately this one works quite well
function GetGridElementsPosition(index) {
const colCount = $(".chessboard")
.css("grid-template-columns")
.split(" ").length;
const rowPosition = Math.floor(index / colCount) + 1;
const colPosition = (index % colCount) + 1;
return { row: rowPosition, column: colPosition };
}
Below is the function that enables the pieces to be dragged
$(function () {
$(".piece").draggable({
start: function () {
console.log("Starting Index:");
GetElementIndex();
},
stop: function () {
console.log("Ending Index:");
GetElementIndex();
},
grid: [100, 100],
activeClass: "dragging",
});
});
EDIT
So due to some help from the comments i managed to get what i needed. I gave every cell of the grid an x and y value (like {1, 1} or {5, 8}) and i rendered the pieces through js and not html. I then found their current position by doing this:
var col = Math.ceil($(this).position().left / 100);
var row = Math.ceil($(this).position().top / 100);
This is just the piece being dragged(inside function in draggable())
The easiest way maybe to add at the html generation a position to the cells with data-x and data-yas custom html attributes? https://www.w3schools.com/tags/att_global_data.asp
It's very dependent on how did you implemented chessboard.
Btw you made me try to maky one myself :)
It' just board and moving pieces .. they cant attack or move properly (by the rules).
Chessboard on codepen.io
const game = document.getElementById("game");
const squares = [];
const createSquare = (color, index) => {
const el = document.createElement("div");
el.classList.add(color, "square");
el.dataset.index = index;
el.dataset.color = color;
game.appendChild(el);
squares.push(el);
document.addEventListener("click", movePiece);
};
let c = 0;
const createChessboard = () => {
for (let i = 0; i < 8; i++) {
for (let j = 0; j < 8; j++) {
let color;
if (i % 2) {
color = j % 2 ? "white" : "black";
} else {
color = j % 2 ? "black" : "white";
}
createSquare(color, c);
c++;
}
}
};
createChessboard();
const playerWhite = {
side: "white",
pieces: {
rook1: { name: "Rook", side: "white", index: 0 },
knight1: { name: "Knight", side: "white", index: 1 },
bishop1: { name: "Bishop", side: "black", index: 2 },
king: { name: "King", side: "white", index: 3 },
queen: { name: "Queen", side: "white", index: 4 },
bishop2: { name: "Bishop", side: "black", index: 5 },
knight2: { name: "Knight", side: "white", index: 6 },
rook2: { name: "Rook", side: "white", index: 7 },
pawn1: { name: "Pawn", side: "white", index: 8 },
pawn2: { name: "Pawn", side: "white", index: 9 },
pawn3: { name: "Pawn", side: "white", index: 10 },
pawn4: { name: "Pawn", side: "white", index: 11 },
pawn5: { name: "Pawn", side: "white", index: 12 },
pawn6: { name: "Pawn", side: "white", index: 13 },
pawn7: { name: "Pawn", side: "white", index: 14 },
pawn8: { name: "Pawn", side: "white", index: 15 }
}
};
const playerBlack = {
side: "black",
pieces: {
rook1: { name: "Rook", side: "black", index: 56 },
knight1: { name: "Knight", side: "black", index: 57 },
bishop1: { name: "Bishop", side: "black", index: 58 },
king: { name: "King", side: "black", index: 60 },
queen: { name: "Queen", side: "black", index: 59 },
bishop2: { name: "Bishop", side: "black", index: 61 },
knight2: { name: "Knight", side: "white", index: 62 },
rook2: { name: "Rook", side: "black", index: 63 },
pawn1: { name: "Pawn", side: "black", index: 48 },
pawn2: { name: "Pawn", side: "black", index: 49 },
pawn3: { name: "Pawn", side: "black", index: 50 },
pawn4: { name: "Pawn", side: "black", index: 51 },
pawn5: { name: "Pawn", side: "black", index: 52 },
pawn6: { name: "Pawn", side: "black", index: 53 },
pawn7: { name: "Pawn", side: "black", index: 54 },
pawn8: { name: "Pawn", side: "black", index: 55 }
}
};
const setPlayerFigures = (player) => {
for (let piece in player.pieces) {
const thePiece = player.pieces[piece];
const el = document.createElement("div");
el.classList.add(player.side, "piece");
el.dataset.id = `${player.side}~${piece}`;
const text = document.createElement("span");
text.textContent = thePiece.name;
el.appendChild(text);
squares[thePiece.index].appendChild(el);
thePiece.square = squares[thePiece.index];
}
};
setPlayerFigures(playerWhite);
setPlayerFigures(playerBlack);
let selectedSquare = null;
function movePiece(e) {
const selectedPiece = selectedSquare && selectedSquare.childNodes[0];
const clickedPiece = e.target.childNodes[0];
const clickedSquare = e.target;
// console.log(selectedPiece)
// console.log(clickedPiece);
if (selectedPiece === clickedPiece) {
clickedPiece.classList.remove("active");
selectedSquare = null;
return;
}
if (selectedPiece && clickedPiece) {
// trying to move to another piece
// there will be code for 'take' the piece
//FOR NOW just select another piece
selectedPiece.classList.remove("active");
clickedPiece.classList.add("active");
selectedSquare = clickedSquare;
// TODO --> delete this
return;
}
if (selectedSquare && !clickedPiece && selectedPiece) {
selectedPiece.classList.remove("active");
clickedSquare.appendChild(selectedPiece);
selectedSquare = null;
return;
}
selectedSquare = clickedSquare;
clickedPiece && clickedPiece.classList.add("active");
}
#game {
border: 2px double gray;
display: flex;
flex-wrap: wrap;
width: 400px;
}
.square {
width: 46px;
height: 46px;
display: flex;
justify-content: center;
align-items: center;
transition: border 0.1s;
cursor: pointer;
}
.square.white {
background: #ccc;
border: 2px solid #ccc;
}
.square.white:hover {
border: 2px solid #888;
}
.square.black {
background: #444;
border: 2px solid #444;
}
.square.black:hover {
border: 2px solid #888;
}
.piece {
pointer-events: none;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.7rem;
}
.piece.white {
background: #fff;
border: 2px solid black;
color: black;
}
.piece.black {
background: #000;
border: 2px solid white;
color: white;
}
.piece.active {
border-color: #20e320;
}
<div id="game"></div>
i have a question - how to draw canvas layer (for example just simple square) with event on click on button in Vue.js? I have stage and on that stage with position x:0, y:0 i want after click on button to generate that square and with drag and drop to position it on that stage? I'm using Konvajs for creating Canvas
Can somebody help me?
<template>
<div id="main">
<h1></h1>
<div id="obszarroboczy" style="width: 500px; height: 600px;">
<v-stage ref="stage"
:config="configKonva"
#dragstart="handleDragstart"
#dragend="handleDragend">
<v-layer ref="layer">
<v-star
v-for="item in list"
:key="item.id"
:config="item"></v-star>
</v-layer>
<v-layer ref="dragLayer"></v-layer>
</v-stage>
</div>
<div class="col-md-6">
<button v-on:click="handleClick" id="more_canvas">More</button>
</div>
</div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import draggable from "vuedraggable";
import swal from "sweetalert2";
import VueKonva from "vue-konva";
export default {
name: "EnumCurrencyIndex",
$mount: "#main",
components: {
draggable
},
data() {
return {
model: [],
editable: true,
isDragging: false,
delayedDragging: false,
type: "currency",
editedElement: null,
newElement: "",
list: [],
configKonva: {
width: 400,
height: 400
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
},
vm: {}
};
},
beforeMount() {
this.fetchData();
},
computed: {
dragOptions() {
return {
animation: 0,
group: "description",
disabled: !this.editable,
ghostClass: "ghost"
};
},
listString() {
return this.model;
},
dragCanvas() {
return this.model;
}
},
watch: {
$route: "fetchData",
isDragging(newValue) {
if (newValue) {
this.delayedDragging = true;
return;
}
this.$nextTick(() => {
this.delayedDragging = false;
});
}
},
methods: {
handleDragstart(starComponent) {
var vm = this;
const shape = starComponent.getStage();
const dragLayer = vm.$refs.dragLayer.getStage();
const stage = vm.$refs.stage.getStage();
// moving to another layer will improve dragging performance
shape.moveTo(dragLayer);
stage.draw();
starComponent.config.shadowOffsetX = 15;
starComponent.config.shadowOffsetY = 15;
starComponent.config.scaleX = starComponent.config.startScale * 1.2;
starComponent.config.scaleY = starComponent.config.startScale * 1.2;
},
handleDragend(starComponent) {
var vm = this;
const shape = starComponent.getStage();
const layer = vm.$refs.layer.getStage();
const stage = vm.$refs.stage.getStage();
shape.moveTo(layer);
stage.draw();
shape.to({
duration: 0.5,
easing: Konva.Easings.ElasticEaseOut,
scaleX: starComponent.config.startScale,
scaleY: starComponent.config.startScale,
shadowOffsetX: 5,
shadowOffsetY: 5
});
},
handleClick(configCircle) {
var vm = this;
const shape = vm.$refs.layer.getStage();
const layer = vm.$refs.layer.getStage();
const stage = vm.$refs.stage.getStage();
console.log(1);
layer.add(configCircle);
stage.add(layer);
},
haveIntersection(r1, r2) {
return !(
r2.x > r1.x + r1.width ||
r2.x + r2.width < r1.x ||
r2.y > r1.y + r1.height ||
r2.y + r2.height < r1.y
);
},
orderList() {
this.model = this.model.sort((one, two) => {
return one.position - two.position;
});
},
onMove({ relatedContext, draggedContext }) {
const relatedElement = relatedContext.element;
const draggedElement = draggedContext.element;
return (
(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
);
},
fetchData() {
var vm = this;
axios
.get(`/api/${this.resource}?type=${this.type}`)
.then(function(response) {
Vue.set(vm.$data, "model", response.data.model);
})
.catch(function(error) {
console.log(error);
});
}
},
mounted() {
var box = document.getElementById("obszarroboczy");
this.configKonva.width = box.offsetWidth;
this.configKonva.height = box.offsetHeight;
var vm = this;
for (let n = 0; n < 30; n++) {
const scale = Math.random();
const stage = vm.$refs.stage.getStage();
vm.list.push({
x: Math.random() * stage.getWidth(),
y: Math.random() * stage.getHeight(),
rotation: Math.random() * 180,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: "#89b717",
opacity: 0.8,
draggable: true,
scaleX: scale,
scaleY: scale,
shadowColor: "black",
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5,
shadowOpacity: 0.6,
startScale: scale
});
};
},
directives: {
"element-focus": function(el, binding) {
if (binding.value) {
el.focus();
}
}
}
};
</script>
<style>
#obszarroboczy {
width: 100px;
height: 300px;
}
.normal {
background-color: grey;
}
.table td {
width: 100px;
height: 100px;
background: white;
border: 2px dotted black;
max-width: 100px;
padding: 5px;
}
.drag {
display: flex;
flex-direction: row;
}
.list {
flex-grow: 1;
max-width: 47%;
margin-right: 40px;
}
.name {
width: 50%;
display: inline-block;
height: 50px;
background: pink;
border: 5px green solid;
box-sizing: border-box;
padding: 5px;
}
.name.large {
width: 100%;
}
.dragArea {
min-height: 100px;
}
.dragArea img {
margin: 3px;
cursor: pointer;
}
</style>
var mainCanvas = new Vue({
el: '#main', // the element where the method wil lrender the canvas to
data: {
name: 'Vue.js'
},
methods: {
handleClick: function (event) { // handleClick is the method name for the button
var stage = new Konva.Stage({ // this line till the stage.add() line renders the draggable square
container: 'obszarroboczy',
width: 500,
height: 500
});
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 0,
y: 0,
width: 100,
height: 100,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(rect);
stage.add(layer);
}
}
});
I added comments to explain what certain important lines does but you can check out the official KonvaJS Docs in GitHub for a more detailed explanation on what each line above does.
I've been trying to format the tooltips of my charts into percentages with no success. Here are the following features of my project reduced to bare minimum:
UI consists of 2 groups of radio buttons and 1 checkmark.
User can switch to view data sources displayed by different chart types.
Source is queried from 7 Google Sheets that the user can view.
The user can view these data sources with 4 chart types.
The initial data source is displayed by a chartWrapper() (chart called by drawChart())
The next 6 data sources share one chartWrapper() (main called by alterChart())
I've have commented within the M.C.V.E. details of the 3 failed attempts, they are as follows:
First attempt: Adding encoded query string to data source url.
Second attempt: Using setQuery()
Third attempt: Using formatter object.
Any help to resolve this by using any of the 3 ways previously mentioned is welcome. I'm open to anything I didn't cover, but I may need more details since I'm still learning this API. Thank you for your valuable time, I appreciate it.
[PLUNKER]
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>MCVE - GVis Formatting Tooltips</title>
<link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
*,
*:before,
*:after {
font-style: normal !important;
}
body {
position: relative;
}
form {
background-color: #333;
}
#ii {
margin-top: 80px
}
.panel {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#chart {
height: 70vh;
width: 96vw;
}
.group.group:after,
.chart.chart:after,
.root.root:after {
color: #333;
}
div.google-visualization-tooltip {
background-color: rgba(0, 0, 0, .6);
border-radius: 6px;
min-width: 325px;
max-height: 75px;
}
div.google-visualization-tooltip > ul > li {
display: table-cell;
margin: 0 5px;
}
div.google-visualization-tooltip > ul > li > span {
color: gold;
}
#groupOpt {
display: none;
}
#groupOpt.on {
display: block;
}
</style>
</head>
<body class='sl'>
<header class='panel'>
<!--THIS PART REMOVED-->
</form>
</header>
<section id="ii">
<h1>Sources</h1>
<figure id='chart'></figure>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
var options = {
backgroundColor: {
fill: 'transparent'
},
tooltip: {
textStyle: {
color: 'gold',
fontSize: 16,
fontName: 'Verdana'
},
trigger: 'focus',
isHtml: true
},
animation: {
startup: true,
duration: 1000,
easing: 'out'
},
title: 'Percentage of Americans in Favor of Same-sex Marriage (2001-16)',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
hAxis: {
textStyle: {
color: 'cyan'
},
title: 'Year',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
format: '####'
},
vAxis: {
maxValue: .85,
format: '#%',
textStyle: {
fontName: 'Open Sans',
color: 'cyan'
},
title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
titleTextStyle: {
color: 'gold',
fontName: 'Arial',
fontSize: 16
}
},
legend: {
textStyle: {
color: 'white',
fontName: 'Verdana'
},
position: 'bottom'
},
crosshair: {
trigger: 'both',
orientation: 'both',
focused: {
color: 'gold',
opacity: .7
},
selected: {
color: 'cyan',
opacity: .7
}
},
pointSize: 12,
theme: 'materials',
chartArea: {
left: 100,
top: 75,
width: '90%',
height: '60%'
}
}
var dataTable;
var chart;
var data;
var main;
var cArray = ['LineChart', 'AreaChart', 'ColumnChart', 'ScatterChart'];
var qArray = [THIS DATA REMOVED]
];
/* Attempt #1 - Using encoded query string with data query source url
// No Errors - QUERY_STRING = select * (# * 100)% -- Syntax is wrong, but I couldn't find any solid examples.
var qArray = [ 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1104711743&select%20*%20(%23%20*%20100)%25','https://docs.google.com/spreadsheets/d/1EH9C-_OviFTLwC5Z30HTATZqtFnOx_JcOIDHYzF7-FY/gviz/tq?gid=1552974580&select%20*%20(%23%20*%20100)%25 ',
'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=2111420909&select%20*%20(%23%20*%20100)%25', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1379142381&select%20*%20(%23%20*%20100)%25', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1749299608&select%20*%20(%23%20*%20100)%25', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=268750266&select%20*%20(%23%20*%20100)%25', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=148086622&select%20*%20(%23%20*%20100)%25', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1474413858&select%20*%20(%23%20*%20100)%25'
];
*/ //
function drawChart() {
chart = new google.visualization.ChartWrapper();
chart.setDataSourceUrl(qArray[1]);
/* Attempt #2 - Using setQuery
// Error -- Syntax is wrong but as stated previously, I could not find a solid example.
INVALID_QUERY
Invalid query: PARSE_ERROR: Encountered "format" at line 1, column 8. Was expecting one of: "true" ... "false" ... "date" ... "timeofday" ... "datetime" ... "timestamp" ... "min" ... "max" ... "avg" ... "count" ... "sum" ... "no_values" ... "no_format" ... "is" ... "null" ... "year" ... "month" ... "day" ... "hour" ... "minute" ... "second" ... "millisecond" ... "with" ... "contains" ... "starts" ... "ends" ... "matches" ... "like" ... "now" ... "dateDiff" ... "quarter" ... "lower" ... "upper" ... "dayOfWeek" ... "toDate" ... <ID> ... <INTEGER_LITERAL> ... <DECIMAL_LITERAL> ... <STRING_LITERAL> ... <QUOTED_ID> ... "(" ... "*" ... "-" ...
*/
//chart.setQuery('select format #%');
dataTable = new google.visualization.DataTable();
/* Attempt #3 Using formatter object
// Uncaught Error: Table has no columns -- I believe the syntax is correct, just not it's location and/or specific requirements such as properly handling the data from the ResponseQuery?
formatter = new google.visualization.NumberFormat({pattern:'#%'});
formatter.format(dataTable, 1);
formatter.format(dataTable, 2);
formatter.format(dataTable, 3);
formatter.format(dataTable, 4);
formatter.format(dataTable, 5);
formatter.format(dataTable, 6);
formatter.format(dataTable, 7);
formatter.format(dataTable, 8);
formatter.format(dataTable, 9);
formatter.format(dataTable, 10);
formatter.format(dataTable, 11);
formatter.format(dataTable, 12);
formatter.format(dataTable, 13);
formatter.format(dataTable, 14);
formatter.format(dataTable, 15);
*/
chart.setChartType('LineChart');
chart.setContainerId('chart');
chart.setOptions(options);
chart.draw();
}
function alterChart(C, Q) {
C = Number(C);
Q = Number(Q);
var URL = qArray[Q];
var VIS = cArray[C];
main = new google.visualization.ChartWrapper();
main.setDataSourceUrl(URL);
// Attempt #2
// main.setQuery('select format #%');
data = new google.visualization.DataTable();
/* Attempt #3
// Uncaught Error: Table has no columns
pattern = new google.visualization.NumberFormat({pattern:'#%'});
pattern.format(data, 1);
pattern.format(data, 2);
pattern.format(data, 3);
pattern.format(data, 4);
pattern.format(data, 5);
pattern.format(data, 6);
pattern.format(data, 7);
pattern.format(data, 8);
pattern.format(data, 9);
pattern.format(data, 10);
pattern.format(data, 11);
pattern.format(data, 12);
pattern.format(data, 13);
pattern.format(data, 14);
pattern.format(data, 15);
*/ //
main.setChartType(VIS);
main.setContainerId('chart');
main.setOptions(options);
main.draw();
}
$('#chartOpt, #groupOpt, #rootOpt').on('change', function(e) {
var chartSel = $("input[name='chart']:checked").val();
var groupSel = $("input[name='group']:checked").val();
if (e.target !== e.currentTarget) {
var target = e.target.id;
var status = $(target).hasClass('on') ? true : false;
}
if (target === 'root0') {
$('#' + target).toggleClass('on');
if (status === true) {
$('#groupOpt').slideUp().removeClass('on');
return alterChart(chartSel, '1');
} else if (status === false) {
$('#groupOpt').slideDown().addClass('on');
return alterChart(chartSel, groupSel);
} else return false;
} else if (target === 'chart0' || target === 'chart1' || target === 'chart2' || target === 'chart3') {
if (status === true) {
return alterChart(chartSel, '1');
} else {
return alterChart(chartSel, groupSel);
}
} else {
if (status === true) {
return false;
} else {
return alterChart(chartSel, groupSel);
}
}
});
var group = document.getElementsByName('group');
var len = group.length;
var rad;
var i;
for (i = 0; i < len; i++) {
group[i].onclick = function() {
if (rad == this) {
this.checked = false;
rad = null;
} else {
rad = this;
}
}
}
</script>
<!--<script src='gvis-api.js'></script>-->
</body>
</html>
You were setting the chart's data source URL and it was rendering itself before you had a chance to format the data. The solution is to query the data yourself, format it, and then pass it into the chart.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>MCVE - GVis Formatting Tooltips</title>
<link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
*, *:before, *:after { font-style: normal !important; }
body { position: relative; }
form { background-color: #333; }
#ii { margin-top: 80px }
.panel { display: flex; flex-wrap:wrap; justify-content: center; align-items: center; }
#chart { height: 70vh; width: 96vw; }
.group.group:after, .chart.chart:after, .root.root:after { color: #333; }
div.google-visualization-tooltip { background-color: rgba(0,0,0,.6); border-radius: 6px; min-width: 325px; max-height: 75px;}
div.google-visualization-tooltip > ul > li { display: table-cell; margin:0 5px; }
div.google-visualization-tooltip > ul > li > span { color: gold; }
#groupOpt { display:none; }
#groupOpt.on { display:block;}
</style>
</head>
<body class='sl'>
<header class='panel'>
<form id="rootOpt" class="sgc" style="width: 20%; color: #fffff">
<input type="checkbox" name="group" id="root0" value='1' checked>
<label for="root0" class="root" id="switch0" data-value="Results">Groups</label>
</form>
<form id="chartOpt" class="sgc" style="width: 80%; color: #ffcc00">
<input type="radio" name="chart" id="chart0" value='0' checked>
<input type="radio" name="chart" id="chart1" value='1'>
<input type="radio" name="chart" id="chart2" value='2'>
<input type="radio" name="chart" id="chart3" value='3'>
<label for="chart0" class="chart" data-value="Line Chart">Line Chart</label>
<label for="chart1" class="chart" data-value="Area Chart">Area Chart</label>
<label for="chart2" class="chart" data-value="Column Chart">Column Chart</label>
<label for="chart3" class="chart" data-value="Scatter Chart">Scatter Chart</label>
</form>
<form id="groupOpt" class='sgc' style="width:100%; color: #00ffff; display:none">
<input type="radio" name="group" id="group0" data-format='4' value='2' checked>
<input type="radio" name="group" id="group1" data-format='5' value='3'>
<input type="radio" name="group" id="group2" data-format='3' value='4'>
<input type="radio" name="group" id="group3" data-format='3' value='5'>
<input type="radio" name="group" id="group4" data-format='2' value='6'>
<input type="radio" name="group" id="group5" data-format='2' value='7'>
<label for="group0" class="group" data-value="Generation">Generation</label>
<label for="group1" class="group" data-value="Religion">Religion</label>
<label for="group2" class="group" data-value="Party Affiliation">Party Affiliation</label>
<label for="group3" class="group" data-value="Political Ideology">Political Ideology</label>
<label for="group4" class="group" data-value="Race">Race</label>
<label for="group5" class="group" data-value="Gender">Gender</label>
</form>
</header>
<section id="ii">
<h1>Sources</h1>
<figure id='chart'></figure>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.setOnLoadCallback(runQuery);
google.load('visualization', '1', {
packages: ['corechart', 'table', 'geomap']
});
var options = {
backgroundColor: {
fill: 'transparent'
},
tooltip: {
textStyle: {
color: 'gold',
fontSize: 16,
fontName: 'Verdana'
},
trigger: 'focus',
isHtml: true
},
animation: {
startup: true,
duration: 1000,
easing: 'out'
},
title: 'Percentage of Americans in Favor of Same-sex Marriage (2001-16)',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
hAxis: {
textStyle: {
color: 'cyan'
},
title: 'Year',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
format: '####'
},
vAxis: {
maxValue: .85,
format: '#%',
textStyle: {
fontName: 'Open Sans',
color: 'cyan'
},
title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
titleTextStyle: {
color: 'gold',
fontName: 'Arial',
fontSize: 16
}
},
legend: {
textStyle: {
color: 'white',
fontName: 'Verdana'
},
position: 'bottom'
},
crosshair: {
trigger: 'both',
orientation: 'both',
focused: {
color: 'gold',
opacity: .7
},
selected: {
color: 'cyan',
opacity: .7
}
},
pointSize: 12,
theme: 'materials',
chartArea: {
left: 100,
top: 75,
width: '90%',
height: '60%'
}
}
var dataTable;
var chart;
var data;
var main;
var cArray = ['LineChart', 'AreaChart', 'ColumnChart', 'ScatterChart'];
var qArray = ['https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1104711743', 'https://docs.google.com/spreadsheets/d/1EH9C-_OviFTLwC5Z30HTATZqtFnOx_JcOIDHYzF7-FY/gviz/tq?gid=1552974580',
'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=2111420909', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1379142381', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1749299608', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=268750266', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=148086622', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1474413858'
];
function runQuery() {
var opts = {
sendMethod: 'auto'
};
if (!google.visualization) return;
var query = new google.visualization.Query(qArray[1], opts);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (!response) return;
if (!response.getDataTable()) return;
drawChart(response.getDataTable());
}
function drawChart(dataTable) {
console.debug(dataTable)
chart = new google.visualization.LineChart(document.getElementById('chart'));
if (dataTable && dataTable.getNumberOfColumns() > 0) {
var formatter = new google.visualization.NumberFormat({
pattern: '#%',
fractionDigits: 0
});
formatter.format(dataTable, 1);
formatter.format(dataTable, 2);
}
chart.draw(dataTable, options);
}
function alterChart(C, Q) {
C = Number(C);
Q = Number(Q);
var URL = qArray[Q];
var VIS = cArray[C];
main = new google.visualization.ChartWrapper();
main.setDataSourceUrl(URL);
if (dataTable.getNumberOfColumns() > 0) {
//formatter = new google.visualization.NumberFormat({pattern:'#\'%\''});
var formatter = new google.visualization.NumberFormat({
pattern: '#%',
fractionDigits: 0
});
formatter.format(dataTable, 1);
formatter.format(dataTable, 2);
}
main.setChartType(VIS);
main.setContainerId('chart');
main.setOptions(options);
main.draw();
}
runQuery();
$('#chartOpt, #groupOpt, #rootOpt').on('change', function(e) {
var chartSel = $("input[name='chart']:checked").val();
var groupSel = $("input[name='group']:checked").val();
if (e.target !== e.currentTarget) {
var target = e.target.id;
var status = $(target).hasClass('on') ? true : false;
}
if (target === 'root0') {
$('#' + target).toggleClass('on');
if (status === true) {
$('#groupOpt').slideUp().removeClass('on');
return alterChart(chartSel, '1');
} else if (status === false) {
$('#groupOpt').slideDown().addClass('on');
return alterChart(chartSel, groupSel);
} else return false;
} else if (target === 'chart0' || target === 'chart1' || target === 'chart2' || target === 'chart3') {
if (status === true) {
return alterChart(chartSel, '1');
} else {
return alterChart(chartSel, groupSel);
}
} else {
if (status === true) {
return false;
} else {
return alterChart(chartSel, groupSel);
}
}
});
var group = document.getElementsByName('group');
var len = group.length;
var rad;
var i;
for (i = 0; i < len; i++) {
group[i].onclick = function() {
if (rad == this) {
this.checked = false;
rad = null;
} else {
rad = this;
}
}
}
</script>
</body>
</html>
I just resolved my issue, I formatted the actual source in Google Sheets and now the tooltips are percentages. So simple it never occurred to me. The following array is the only thing changed. Each new url points to a preformatted table in Google Sheets:
var qArray = ['https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1104711743&range=A:T', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1552974580&range=A:C', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=2111420909&range=A:E', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1379142381&range=A:F', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1749299608&range=A:D', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=268750266&range=A:D', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=148086622&range=A:C', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1474413858&range=A:C'];
I am developing a JointJs Application,I need to set font-size for a text inside a rectangle.
$('#FText,#FTextHeight,#FTextWidth,#FTextSize').on('keyup change', function () {
var FtHeight = $('#FTextHeight').val();
var FtWidth = $('#FTextWidth').val();
var FtSize = parseInt($('#FTextSize').val());
var txt = $('#FText').val();
graph2.clear();
if (txt.length > 0) {
$('#FTexterror').empty();
var myFtext = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: FtWidth, height: FtHeight },
attrs: {
rect: {
fill: 'white', stroke: outerColor, 'class': 'customtext',
},
text: {
text: txt, 'letter-spacing': 1, 'font-size': FtSize,
fill: outerColor, 'font-size': 11, 'y-alignment': 'middle',
}
}
});
graph2.addCells([myFtext]);
}
else {
$('#FTexterror').empty().append('*Enter valid text');
}
});
the above code is not working while setting font-size for the text.
Kindly help me on this
try this
$('.input-text')
.val(rect.attr('text/font-size')) //set initial value
.on('keyup', function () {
var val = $(this).val();
rect.attr('text/font-size', val);
});
complete demo: https://jsfiddle.net/vtalas/sav49mj4/
I have this form.
<form action="../massmail.php" method="post">
<label>Periode:</label>
<div class="form-inline"><input class="form-inline input-small" name="maand" type="text" placeholder="bijv.: juni" />
<input class="input-mini" name="jaar" type="text" value="2015" />
</div>
<br /> <label>Inleidende tekst:</label>
<div>
<textarea name="inleiding" rows="5"></textarea>
</div>
<br /> <label>url van de nieuwsbrief:</label>
<div>
<input class="input-xxlarge" name="link" type="url" value="" />
</div>
<div class="form-actions">
<button class="btn btn-primary" type="submit">Verzenden</button>
<button class="btn" formaction="../voorbeeld.php" formmethod="get" type="submit">Voorbeeld</button>
<button class="btn" type="button">Annuleren</button> </div>
</form>
In the last <div> are the form controlls. The second button is what I want to change. It submits the form, overriding the default form action and gives a preview of what would be sent if the actual submit button (Verzenden) is pressed.
This all works, but I want to give this preview in a modal window (pop up). For some reason the modal class only works for <a> elements. I have previously solved this by setting the <a> element class to btn modal, but in this case I need the formaction so I need an actual button.
Things I have tried and results.
<button class="btn modal" formaction="../voorbeeld.php" formmethod="get" type="submit" rel="{handler: 'iframe', size: {x: 920, y: 530}}">Voorbeeld</button>
Result: Form get's handled the way I expect, but no popup, results just get displayed as if a link is opened to the php page.
<a class="modal" href="voorbeeld.php" rel="{handler: 'iframe', size: {x: 920, y: 530}}"> <button class="btn" type="button" formaction="../voorbeeld.php" formmethod="get" type="submit">Voorbeeld MOD</button> </a>
Result: This opens the popup with the php page, but the results from the form don't get through to the php page.
Included as snippet is the modal.css, which doesn't seem to have anything <a> or <button> specific. modal.js is the javascript, but I'm not really familiar with that.
I'm doing all of this in a custom html module in Joomla! 3.4.3.
Any help would be appreciated
/*
MIT-style license
#author Harald Kirschner <mail [at] digitarald.de>
#author Rouven Weßling <me [at] rouvenwessling.de>
#copyright Author
*/
var SqueezeBox = {
presets: {
onOpen: function() {},
onClose: function() {},
onUpdate: function() {},
onResize: function() {},
onMove: function() {},
onShow: function() {},
onHide: function() {},
size: {
x: 600,
y: 450
},
sizeLoading: {
x: 200,
y: 150
},
marginInner: {
x: 20,
y: 20
},
marginImage: {
x: 50,
y: 75
},
handler: false,
target: null,
closable: true,
closeBtn: true,
zIndex: 65555,
overlayOpacity: .7,
classWindow: "",
classOverlay: "",
overlayFx: {},
resizeFx: {},
contentFx: {},
parse: false,
parseSecure: false,
shadow: true,
overlay: true,
document: null,
ajaxOptions: {}
},
initialize: function(e) {
if (this.options) return this;
this.presets = Object.merge(this.presets, e);
this.doc = this.presets.document || document;
this.options = {};
this.setOptions(this.presets).build();
this.bound = {
window: this.reposition.bind(this, [null]),
scroll: this.checkTarget.bind(this),
close: this.close.bind(this),
key: this.onKey.bind(this)
};
this.isOpen = this.isLoading = false;
return this
},
build: function() {
this.overlay = new Element("div", {
id: "sbox-overlay",
"aria-hidden": "true",
styles: {
zIndex: this.options.zIndex
},
tabindex: -1
});
this.win = new Element("div", {
id: "sbox-window",
role: "dialog",
"aria-hidden": "true",
styles: {
zIndex: this.options.zIndex + 2
}
});
if (this.options.shadow) {
if (Browser.chrome || Browser.safari && Browser.version >= 3 || Browser.opera && Browser.version >= 10.5 || Browser.firefox && Browser.version >= 3.5 || Browser.ie && Browser.version >= 9) {
this.win.addClass("shadow")
} else if (!Browser.ie6) {
var e = (new Element("div", {
"class": "sbox-bg-wrap"
})).inject(this.win);
var t = function(e) {
this.overlay.fireEvent("click", [e])
}.bind(this);
["n", "ne", "e", "se", "s", "sw", "w", "nw"].each(function(n) {
(new Element("div", {
"class": "sbox-bg sbox-bg-" + n
})).inject(e).addEvent("click", t)
})
}
}
this.content = (new Element("div", {
id: "sbox-content"
})).inject(this.win);
this.closeBtn = (new Element("a", {
id: "sbox-btn-close",
href: "#",
role: "button"
})).inject(this.win);
this.closeBtn.setProperty("aria-controls", "sbox-window");
this.fx = {
overlay: (new Fx.Tween(this.overlay, Object.merge({
property: "opacity",
onStart: Events.prototype.clearChain,
duration: 250,
link: "cancel"
}, this.options.overlayFx))).set(0),
win: new Fx.Morph(this.win, Object.merge({
onStart: Events.prototype.clearChain,
unit: "px",
duration: 750,
transition: Fx.Transitions.Quint.easeOut,
link: "cancel",
unit: "px"
}, this.options.resizeFx)),
content: (new Fx.Tween(this.content, Object.merge({
property: "opacity",
duration: 250,
link: "cancel"
}, this.options.contentFx))).set(0)
};
document.id(this.doc.body).adopt(this.overlay, this.win)
},
assign: function(e, t) {
return (document.id(e) || $$(e)).addEvent("click", function() {
return !SqueezeBox.fromElement(this, t)
})
},
open: function(e, t) {
this.initialize();
if (this.element != null) this.trash();
this.element = document.id(e) || false;
this.setOptions(Object.merge(this.presets, t || {}));
if (this.element && this.options.parse) {
var n = this.element.getProperty(this.options.parse);
if (n && (n = JSON.decode(n, this.options.parseSecure))) this.setOptions(n)
}
this.url = (this.element ? this.element.get("href") : e) || this.options.url || "";
this.assignOptions();
var r = r || this.options.handler;
if (r) return this.setContent(r, this.parsers[r].call(this, true));
var i = false;
return this.parsers.some(function(e, t) {
var n = e.call(this);
if (n) {
i = this.setContent(t, n);
return true
}
return false
}, this)
},
fromElement: function(e, t) {
return this.open(e, t)
},
assignOptions: function() {
this.overlay.addClass(this.options.classOverlay);
this.win.addClass(this.options.classWindow)
},
close: function(e) {
var t = typeOf(e) == "domevent";
if (t) e.stop();
if (!this.isOpen || t && !Function.from(this.options.closable).call(this, e)) return this;
this.fx.overlay.start(0).chain(this.toggleOverlay.bind(this));
this.win.setProperty("aria-hidden", "true");
this.fireEvent("onClose", [this.content]);
this.trash();
this.toggleListeners();
this.isOpen = false;
return this
},
trash: function() {
this.element = this.asset = null;
this.content.empty();
this.options = {};
this.removeEvents().setOptions(this.presets).callChain()
},
onError: function() {
this.asset = null;
this.setContent("string", this.options.errorMsg || "An error occurred")
},
setContent: function(e, t) {
if (!this.handlers[e]) return false;
this.content.className = "sbox-content-" + e;
this.applyTimer = this.applyContent.delay(this.fx.overlay.options.duration, this, this.handlers[e].call(this, t));
if (this.overlay.retrieve("opacity")) return this;
this.toggleOverlay(true);
this.fx.overlay.start(this.options.overlayOpacity);
return this.reposition()
},
applyContent: function(e, t) {
if (!this.isOpen && !this.applyTimer) return;
this.applyTimer = clearTimeout(this.applyTimer);
this.hideContent();
if (!e) {
this.toggleLoading(true)
} else {
if (this.isLoading) this.toggleLoading(false);
this.fireEvent("onUpdate", [this.content], 20)
} if (e) {
if (["string", "array"].contains(typeOf(e))) {
this.content.set("html", e)
} else {
this.content.adopt(e)
}
}
this.callChain();
if (!this.isOpen) {
this.toggleListeners(true);
this.resize(t, true);
this.isOpen = true;
this.win.setProperty("aria-hidden", "false");
this.fireEvent("onOpen", [this.content])
} else {
this.resize(t)
}
},
resize: function(e, t) {
this.showTimer = clearTimeout(this.showTimer || null);
var n = this.doc.getSize(),
r = this.doc.getScroll();
this.size = Object.merge(this.isLoading ? this.options.sizeLoading : this.options.size, e);
var i = self.getSize();
if (this.size.x == i.x) {
this.size.y = this.size.y - 50;
this.size.x = this.size.x - 20
}
if (n.x > 979) {
var s = {
width: this.size.x,
height: this.size.y,
left: (r.x + (n.x - this.size.x - this.options.marginInner.x) / 2).toInt(),
top: (r.y + (n.y - this.size.y - this.options.marginInner.y) / 2).toInt()
}
} else {
var s = {
width: n.x - 40,
height: n.y,
left: (r.x + 10).toInt(),
top: (r.y + 20).toInt()
}
}
this.hideContent();
if (!t) {
this.fx.win.start(s).chain(this.showContent.bind(this))
} else {
this.win.setStyles(s);
this.showTimer = this.showContent.delay(50, this)
}
return this.reposition()
},
toggleListeners: function(e) {
var t = e ? "addEvent" : "removeEvent";
this.closeBtn[t]("click", this.bound.close);
this.overlay[t]("click", this.bound.close);
this.doc[t]("keydown", this.bound.key)[t]("mousewheel", this.bound.scroll);
this.doc.getWindow()[t]("resize", this.bound.window)[t]("scroll", this.bound.window)
},
toggleLoading: function(e) {
this.isLoading = e;
this.win[e ? "addClass" : "removeClass"]("sbox-loading");
if (e) {
this.win.setProperty("aria-busy", e);
this.fireEvent("onLoading", [this.win])
}
},
toggleOverlay: function(e) {
if (this.options.overlay) {
var t = this.doc.getSize().x;
this.overlay.set("aria-hidden", e ? "false" : "true");
this.doc.body[e ? "addClass" : "removeClass"]("body-overlayed");
if (e) {
this.scrollOffset = this.doc.getWindow().getSize().x - t
} else {
this.doc.body.setStyle("margin-right", "")
}
}
},
showContent: function() {
if (this.content.get("opacity")) this.fireEvent("onShow", [this.win]);
this.fx.content.start(1)
},
hideContent: function() {
if (!this.content.get("opacity")) this.fireEvent("onHide", [this.win]);
this.fx.content.cancel().set(0)
},
onKey: function(e) {
switch (e.key) {
case "esc":
this.close(e);
case "up":
case "down":
return false
}
},
checkTarget: function(e) {
return e.target !== this.content && this.content.contains(e.target)
},
reposition: function() {
var e = this.doc.getSize(),
t = this.doc.getScroll(),
n = this.doc.getScrollSize();
var r = this.overlay.getStyles("height");
var i = parseInt(r.height);
if (n.y > i && e.y >= i) {
this.overlay.setStyles({
width: n.x + "px",
height: n.y + "px"
});
this.win.setStyles({
left: (t.x + (e.x - this.win.offsetWidth) / 2 - this.scrollOffset).toInt() + "px",
top: (t.y + (e.y - this.win.offsetHeight) / 2).toInt() + "px"
})
}
return this.fireEvent("onMove", [this.overlay, this.win])
},
removeEvents: function(e) {
if (!this.$events) return this;
if (!e) this.$events = null;
else if (this.$events[e]) this.$events[e] = null;
return this
},
extend: function(e) {
return Object.append(this, e)
},
handlers: new Hash,
parsers: new Hash
};
SqueezeBox.extend(new Events(function() {})).extend(new Options(function() {})).extend(new Chain(function() {}));
SqueezeBox.parsers.extend({
image: function(e) {
return e || /\.(?:jpg|png|gif)$/i.test(this.url) ? this.url : false
},
clone: function(e) {
if (document.id(this.options.target)) return document.id(this.options.target);
if (this.element && !this.element.parentNode) return this.element;
var t = this.url.match(/#([\w-]+)$/);
return t ? document.id(t[1]) : e ? this.element : false
},
ajax: function(e) {
return e || this.url && !/^(?:javascript|#)/i.test(this.url) ? this.url : false
},
iframe: function(e) {
return e || this.url ? this.url : false
},
string: function(e) {
return true
}
});
SqueezeBox.handlers.extend({
image: function(e) {
var t, n = new Image;
this.asset = null;
n.onload = n.onabort = n.onerror = function() {
n.onload = n.onabort = n.onerror = null;
if (!n.width) {
this.onError.delay(10, this);
return
}
var e = this.doc.getSize();
e.x -= this.options.marginImage.x;
e.y -= this.options.marginImage.y;
t = {
x: n.width,
y: n.height
};
for (var r = 2; r--;) {
if (t.x > e.x) {
t.y *= e.x / t.x;
t.x = e.x
} else if (t.y > e.y) {
t.x *= e.y / t.y;
t.y = e.y
}
}
t.x = t.x.toInt();
t.y = t.y.toInt();
this.asset = document.id(n);
n = null;
this.asset.width = t.x;
this.asset.height = t.y;
this.applyContent(this.asset, t)
}.bind(this);
n.src = e;
if (n && n.onload && n.complete) n.onload();
return this.asset ? [this.asset, t] : null
},
clone: function(e) {
if (e) return e.clone();
return this.onError()
},
adopt: function(e) {
if (e) return e;
return this.onError()
},
ajax: function(e) {
var t = this.options.ajaxOptions || {};
this.asset = (new Request.HTML(Object.merge({
method: "get",
evalScripts: false
}, this.options.ajaxOptions))).addEvents({
onSuccess: function(e) {
this.applyContent(e);
if (t.evalScripts !== null && !t.evalScripts) Browser.exec(this.asset.response.javascript);
this.fireEvent("onAjax", [e, this.asset]);
this.asset = null
}.bind(this),
onFailure: this.onError.bind(this)
});
this.asset.send.delay(10, this.asset, [{
url: e
}])
},
iframe: function(e) {
var t = this.doc.getSize();
if (t.x > 979) {
var n = this.options.size.x;
var r = this.options.size.y
} else {
var n = t.x;
var r = t.y - 50
}
this.asset = new Element("iframe", Object.merge({
src: e,
frameBorder: 0,
width: n,
height: r
}, this.options.iframeOptions));
if (this.options.iframePreload) {
this.asset.addEvent("load", function() {
this.applyContent(this.asset.setStyle("display", ""))
}.bind(this));
this.asset.setStyle("display", "none").inject(this.content);
return false
}
return this.asset
},
string: function(e) {
return e
}
});
SqueezeBox.handlers.url = SqueezeBox.handlers.ajax;
SqueezeBox.parsers.url = SqueezeBox.parsers.ajax;
SqueezeBox.parsers.adopt = SqueezeBox.parsers.clone;
/**
* SqueezeBox - Expandable Lightbox
*
* Allows to open various content as modal,
* centered and animated box.
*
* #version 1.3
*
* #license MIT-style license
* #author Harald Kirschner <mail [at] digitarald.de>
* #author Rouven Weßling <me [at] rouvenwessling.de>
* #copyright Author
*/
#sbox-overlay {
position: absolute;
background-color: #000;
left: 0px;
top: 0px;
}
#sbox-window {
position: absolute;
background-color: #fff;
text-align: left;
overflow: visible;
padding: 10px;
/* invalid values, but looks smoother! */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#sbox-window[aria-hidden=true],
#sbox-overlay[aria-hidden=true] {
display: none;
}
#sbox-btn-close {
position: absolute;
width: 30px;
height: 30px;
right: -15px;
top: -15px;
background: url(../images/modal/closebox.png) no-repeat center;
border: none;
}
.sbox-loading #sbox-content {
background-image: url(../images/modal/spinner.gif);
background-repeat: no-repeat;
background-position: center;
}
#sbox-content {
clear: both;
overflow: auto;
background-color: #fff;
height: 100%;
width: 100%;
}
.sbox-content-image#sbox-content {
overflow: visible;
}
#sbox-image {
display: block;
}
.sbox-content-image img {
display: block;
width: 100%;
height: 100%;
}
.sbox-content-iframe#sbox-content {
overflow: visible;
}
/* Hides scrollbars */
.body-overlayed {
overflow: hidden;
}
/* Hides flash (Firefox problem) and selects (IE) */
.body-overlayed embed,
.body-overlayed object,
.body-overlayed select {
visibility: hidden;
}
#sbox-window embed,
#sbox-window object,
#sbox-window select {
visibility: visible;
}
/* Shadows */
#sbox-window.shadow {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.sbox-bg {
position: absolute;
width: 33px;
height: 40px;
}
.sbox-bg-n {
left: 0;
top: -40px;
width: 100%;
background: url(../images/modal/bg_n.png) repeat-x;
}
.sbox-bg-ne {
right: -33px;
top: -40px;
background: url(../images/modal/bg_ne.png) no-repeat;
}
.sbox-bg-e {
right: -33px;
top: 0;
height: 100%;
background: url(../images/modal/bg_e.png) repeat-y;
}
.sbox-bg-se {
right: -33px;
bottom: -40px;
background: url(../images/modal/bg_se.png) no-repeat;
}
.sbox-bg-s {
left: 0;
bottom: -40px;
width: 100%;
background: url(../images/modal/bg_s.png) repeat-x;
}
.sbox-bg-sw {
left: -33px;
bottom: -40px;
background: url(../images/modal/bg_sw.png) no-repeat;
}
.sbox-bg-w {
left: -33px;
top: 0;
height: 100%;
background: url(../images/modal/bg_w.png) repeat-y;
}
.sbox-bg-nw {
left: -33px;
top: -40px;
background: url(../images/modal/bg_nw.png) no-repeat;
}
#-moz-document url-prefix() {
.body-overlayed {
overflow: visible;
}
}
#media (max-width: 979px) {
#sbox-window {
overflow: none;
}
#sbox-btn-close {
right: -10px;
top: -10px;
}
}
#media (max-device-width: 979px) {
#sbox-content {
-webkit-overflow-scrolling: touch;
}
#sbox-content.sbox-content-iframe {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
}
<form action="../massmail.php" method="post">
<label>Periode:</label>
<div class="form-inline">
<input class="form-inline input-small" name="maand" type="text" placeholder="bijv.: juni" />
<input class="input-mini" name="jaar" type="text" value="2015" />
</div>
<br />
<label>Inleidende tekst:</label>
<div>
<textarea name="inleiding" rows="5"></textarea>
</div>
<br />
<label>url van de nieuwsbrief:</label>
<div>
<input class="input-xxlarge" name="link" type="url" value="" />
</div>
<div class="form-actions">
<button class="btn btn-primary" type="submit">Verzenden</button>
<button class="btn" formaction="../voorbeeld.php" formmethod="get" type="submit">Voorbeeld</button>
<a href="index.php">
<button class="btn" type="button">Annuleren</button>
</a>
</div>
</form>
Problem is now solved.
I have used the second line (working popup).
<a class="btn modal" href="voorbeeld.php" rel="{handler: 'iframe', size: {x: 920, y: 530}}">Voorbeeld</a>
As mentioned this does open the popup, but it doesn't seem to process the form, so I deleted the button inside the <a> which was supposed to process the form but didn't send it to the popup.
I have then fetched the form data with Javascript by using:
var id = window.parent.document.getElementById('id').value;
For this to work, all the form elements you want to use in the popup have to have an id.
Hope this helps anyone stumbling upon this.