jQuery draggable(), resizable() in jsf doesn't work perfectly - jsf-2
I'm having a problem with jQuery: resizable() and draggable. When I move the div on datatable works perfectly and when I resize too, but after resize if drag the div it moves 1px on top and 1px on left. I can do this from the container div on top of the page. The divs on the rich:dataTable had been generated from jsf with h:outputtext/escape=false
I have considered this bug: http://bugs.jqueryui.com/ticket/4696 and this http://bugs.jquery.com/ticket/2793 and I have applied the patches
This is my xhtml code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>TC</title>
<h:outputScript name="jsf.js" library="javax.faces" />
<h:outputScript name="jquery.js" />
<script type="text/javascript"
src="resources/js/jquery-ui-1.10.1.custom.js" />
<h:outputScript library="js" name="jquery.json-2.4.js" />
<style type="text/css">
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
z-index: 99999;
display: block;
}
.ui-resizable-e {
cursor: e-resize;
width: 2px;
right: 0;
top: 0;
height: 100%;
background-color: black;
}
</style>
</h:head>
<h:body>
<a4j:outputPanel rendered="false">
<rich:dataTable/>
</a4j:outputPanel>
<h:form id="formulario">
<script type="text/javascript">
function extenderHoras(div, index){
var contenedor = '#'+div.id;
var left = jQuery(contenedor).css("left");
var contenedorPadre = jQuery(contenedor).parent();
var padreDePadre = jQuery(contenedorPadre).parent();
var cantidadHijos = contenedorPadre[0].childElementCount;
jQuery(document).mousemove(function(e){
window.mouseXPos = e.pageX;
window.mouseYPos = e.pageY;
});
jQuery(contenedor).droppable({
accept: ".ui-draggable-dragging",
tolerance: 'pointer'
}).resizable({
handles: 'e',
minWidth: 41,
grid: [ 41, 0 ],
containment: contenedorPadre,
stop: function(event, ui) {
if(!index){
//Si no tiene index
var divArray = new Array();
var colorDiv = div.style.background;
var idPadreDePadre = padreDePadre[0].id;
var fila = idPadreDePadre.split(':');
index = fila[2];//Obtenemos el index
var cantidadHijosDiv = contenedorPadre[0].childElementCount; //Obtenemos Todos los hijos que se tiene en la fila
cantidadHijosDiv = cantidadHijosDiv - 1; //La lista es empieza desde 0 se le quita un elemento (tamaño -1)
var sumaTotalDiv = 0;
if(cantidadHijosDiv==0){//Si solo tiene un hijo obtenemos el tamaño de ese hijo para ponerlo como margen del div que estamos colocando
sumaTotalDiv = contenedorPadre[0].children[cantidadHijosDiv].style.width;
sumaTotalDiv = sumaTotalDiv.replace('px','');
}else{//Si tiene más de un hijo tenemos que recorrer el arreglo y sumar el tamaño de todos los div
for(var i = 0; i <= cantidadHijosDiv; i++){
var ancho = contenedorPadre[0].children[i].style.width;
sumaTotalDiv = sumaTotalDiv + parseInt(ancho.replace('px',''));
}
}
var leftUbicacion = sumaTotalDiv * -1;
var csstxt = jQuery(div.id).css('cssText') + ';top:0;left:'+leftUbicacion+' px;background-color:'+colorDiv+';height:'+ui.element.height()+'; width:'+ui.element.width()+';float:left;margin-left:'+sumaTotalDiv;
jQuery(div.id).css('cssText', csstxt);
} else {
jQuery(contenedor).css({
'width': ui.element.width(),
'height': ui.element.height(),
'top': ui.element[0].style.top,
'left': ui.element[0].style.left,
'float': 'left',
position: 'absolute'
});
};
var divArray = [{
"id":ui.element[0].id,
"width":ui.element[0].style.width,
"height":ui.element[0].style.height,
"top":ui.element[0].style.top,
"left":ui.element[0].style.left,
"right":ui.element[0].style.right,
"top":ui.element[0].style.top,
"backgroundColor":ui.element[0].style.background
}];
var json = jQuery.toJSON(divArray);
convertirJson(json, index);
}
}).draggable({
containment: contenedorPadre,
grid: [ 41, 0 ],
revert: 'valid',
stop: function(event, ui) {
if(!cantidadHijos){
//Si no tiene hijos que no haga nada, por si lo coloca en otro lado que no sea la tabla
} else {
}
}
}).removeClass("ui-draggable");
}
function arrastrarALado(div){
var contenedor = '#'+div.id;
var colorDiv = div.style.background;
jQuery(contenedor).draggable({
helper: 'clone',
revert: 'valid',
stop: function(event, ui) {
var elem = document.elementFromPoint(event.pageX, event.pageY);
event.stopPropagation();
var tag = elem.tagName;
var cantidadHijosDiv = elem.childElementCount; //Obtenemos Todos los hijos que se tiene en la fila
cantidadHijosDiv = cantidadHijosDiv - 1; //quitamos un elemento men la lista es (tamaño -1)
var sumaTotalDiv = 0;
if(cantidadHijosDiv==0){//Si solo tiene un hijo obtenemos el tamaño de ese hijo para ponerlo como margen del div que estamos colocando
sumaTotalDiv = elem.children[cantidadHijosDiv].style.width;
sumaTotalDiv = sumaTotalDiv.replace('px','');
}
else{//Si tiene más de un hijo tenemos que recorrer el arreglo y sumar el tamaño de todos los div
for(var i = 0; i <= cantidadHijosDiv; i++){
var ancho = elem.children[i].style.width;
sumaTotalDiv = sumaTotalDiv + parseInt(ancho.replace('px',''));
}
}
var divHijo = elem.children[cantidadHijosDiv];//Obtenemos el último hijo de la lista
if(!divHijo){//Si es undefined no tiene hijos o ha puesta fuera de la barra - Propenso a cambios
alert('No puede colocar la barra aquí');
} else if(divHijo.tagName=='TH'){//Si el hijo
alert('No puede colocar la barra aquí');
}
else if(divHijo.tagName=='SPAN'){//Si el hijo es un SPAN es que crea richfaces
var divHijo = elem.children[cantidadHijosDiv+1];//obtenemos el siguiente hijo, solo ocurre en el caso de que sea el span padre
divHijo = divHijo.id;
} else {//Si no usamos el nombre del ultimo div
divHijo = divHijo.id;
}
if(tag == 'TD'){
var leftUbicacion = sumaTotalDiv * -1;
var divNuevo = divHijo+cantidadHijosDiv+div.id;
//Implementando cssText de Jquery ya que no se puede insertar el estilo de forma normal al crear el div, tengo que agregarlo
var csstxt = jQuery('#'+divNuevo).css('cssText') + ';top:0;left:'+leftUbicacion+' !important;background-color:'+colorDiv+';height:25px; width:82px;float:left;margin-left:'+sumaTotalDiv;
jQuery('<div/>', {
id: divNuevo, //obtenemos el ultimo hijo, luego le ponemos la cantidad y el id del div que estoy arrastrando
//onmousedown: 'arrastrarBarra(this);',
onmouseover: 'extenderHoras(this);'
}).appendTo(elem);
jQuery('#'+divNuevo).css('cssText', csstxt);
}
}
});
}
</script>
<a4j:jsFunction name="convertirJson"
action="#{pruebasmb.obtenerDiv()}" >
<a4j:param name="divArray" assignTo="#{pruebasmb.divJSON}" ></a4j:param>
<a4j:param name="index" assignTo="#{pruebasmb.indexPersonaSeleccionada}"></a4j:param>
</a4j:jsFunction>
<div id="contenedores" style="width: 600px; height: 30px; background-color: #f0f0f0; ">
<div id="divBlue" style="width: 82px; height: 25px; background-color: blue; float: left; " onmouseover="arrastrarALado(this);"></div>
<div id="divRojo" style="width: 82px; height: 25px; background-color: red; float: left; " onmouseover="arrastrarALado(this);"></div>
<div id="divVerde" style="width: 82px; height: 25px; background-color: green; float: left; " onmouseover="arrastrarALado(this);"></div>
</div>
<a4j:commandButton action="#{pruebasmb.llenarlista()}"
value="Llenar lista" render="dataTablePersonas"></a4j:commandButton>
<br />
<br />
<a4j:outputPanel ajaxRendered="false">
<rich:dataTable var="persona" value="#{pruebasmb.personas}"
id="dataTablePersonas" rowKeyVar="index">
<f:facet name="header">
<rich:columnGroup>
<rich:column rowspan="2" >
<h:outputText value="Persona" style="padding: 0px;" />
</rich:column>
<rich:column colspan="24" style="padding: 0px;">
<h:outputText value="Horas" />
</rich:column>
<rich:column breakRowBefore="true"
style="width: 40px; padding: 0px;">
<h:outputText value="00h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="00h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="01h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="01h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="02h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="02h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="03h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="03h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="04h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="04h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="05h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="05h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="06h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="06h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="07h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="07h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="08h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="08h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="09h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="09h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="10h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="10h30" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="11h00" />
</rich:column>
<rich:column style="width: 40px; padding: 0px;">
<h:outputText value="11h30" />
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>
<h:outputText value="#{persona.apellido}" />
</rich:column>
<rich:column colspan="24" style="padding: 0px; height:25px; position: relative;" >
<h:outputText value="#{pruebasmb.divDefault.get(index)}" escape="false" />
</rich:column>
</rich:dataTable>
</a4j:outputPanel>
</h:form>
</h:body>
</html>
pruebasmb Bean
import java.awt.Color;
import java.io.Serializable;
import java.lang.reflect.Type;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
#ManagedBean(name = "pruebasmb")
#SessionScoped
public class PruebasMB implements Serializable {
private static final long serialVersionUID = 2290961655122569612L;
private List<Persona> personas = new ArrayList<Persona>();
private String valorDelSlider;
private String celdaClickeada;
private String estiloBarra;
private String indexPersonaSeleccionada;
private EstilosCss estilos = new EstilosCss();
private List<String> divDefault = new ArrayList<String>();
private String divJSON;
public void llenarlista() {
divDefault.clear();
personas.clear();
for (int i = 1; i <= 10; i++) {
Integer horasTrabajadas;
// Para generar un temporal de las horas trabajadas aleatoriamente
horasTrabajadas = (int) Math.round((Math.random() * 16));
if (horasTrabajadas == 0)
horasTrabajadas = 1;
else
horasTrabajadas = horasTrabajadas * 41;
estiloBarra = estilos.generarEstilo(horasTrabajadas.toString(), "25", "yellow", "0", "0", "0", "0", "0", "0", "left", null, null);
Persona p = new Persona("nombre" + i, "apellido" + i, i + 20, "Calle J y la " + i, estiloBarra, horasTrabajadas, (i/2));
generarBarras(p, horasTrabajadas, i);
personas.add(p);
}
}
public void obtenerDiv(){
Gson gson = new Gson();
Type type = new TypeToken<List<Div>>(){}.getType();
List<Div> div = gson.fromJson(divJSON.toString(), type);
Integer index = Integer.valueOf(indexPersonaSeleccionada);
if(index==null){
index=0;
}
valorDelSlider = div.get(0).getWidth().replace("px", "");
System.out.println("Width: "+div.get(0).getWidth());
Integer valor = Integer.valueOf(valorDelSlider);
int valorTemporal = valor;
int horasTrabajadas = personas.get(index).getHorasTrabajadas();
if (horasTrabajadas == 1) {
valor = valor - 1;
valorTemporal = valorTemporal - 1;
valor = valor / 82;
} else
valor = valor / 82;
if ((valorTemporal % 82) > 0) {
System.out.println("El total de horas es " + valor + " y media ");
} else
System.out.println("Ha realizado " + valor + " horas");
System.out.println(valor * 82);
estiloBarra = "left: 0px; background-color: yellow; height: 25px; width: " + (valor * 82) + "px; top: 0px !important; float: left;";
personas.get(index).setEstiloUsuario(estiloBarra);
}
public void generarBarras(Persona p, Integer horasTrabajadas, Integer i) {
Integer horasSegundoDiv=0;
String rgb="";
String estiloBarra2 ="";
String div ="";
for(int j = 0; j<= 2; j ++){
horasSegundoDiv = (int) Math.round((Math.random() * 16));
if (horasSegundoDiv == 0)
horasSegundoDiv = 1;
else
horasSegundoDiv = horasSegundoDiv * 41;
rgb = Color2Hex();
estiloBarra2 = estilos.generarEstilo(horasSegundoDiv.toString(), "25", rgb, "0", "0", "0", "0", "0", "0", "left", null, null);
div = div + "<div id='nombrediv" + i+"_"+j + "' style='" + estiloBarra2 + "' onmouseover='extenderHoras(this," + (i) + ");'> </div>";
}
divDefault.add(div);
}
/**
* Se genera un color al azar en rgb y se convierte a hexadecimal
*
* #return Color en hexadecimal
*/
public String Color2Hex() {
int R = (int) Math.round((Math.random() * 256));
int G = (int) Math.round((Math.random() * 256));
int B = (int) Math.round((Math.random() * 256));
Color c = new Color(R, G, B);
String rgb = Integer.toHexString(c.getRGB() & 0xffffff);
if(rgb.length()<6)
rgb = "0"+rgb;
return "#"+rgb;
}
//getter and setter
}
and Estilos.css where I generate the Style of div
import java.io.Serializable;
public class EstilosCss implements Serializable {
private static final long serialVersionUID = -1279423720796129516L;
private String width;
private String height;
private String backgroundColor;
private String leftMargin;
private String rightMargin;
private String left;
private String right;
private String top;
private String bottom;
private String floatEstilo;
private String gradientColor1;
private String gradientColor2;
public String generarEstilo(String width, String height, String backgroundColor, String leftMargin, String rightMargin, String left, String right,
String top, String bottom, String floatEstilo, String gradientColor1, String gradientColor2) {
String estilo = "";
estilo = "width:" + width + "px; height:" + height + "px; background-color:" + backgroundColor + "; left-margin:" + leftMargin
+ "px; right-margin:" + rightMargin + "px; left:" + left + "px; right:" + right + "px; top:" + top + "px; bottom:" + bottom + "px; float:"+floatEstilo+" !important;";
//Si ingresa los colores del gradient del div
if(gradientColor1!=null&&gradientColor2!=null){
estilo = estilo + "background-image: -ms-linear-gradient(bottom, "+gradientColor1+" 0%, "+gradientColor2 +" 100%);";
estilo = estilo + "background-image: -moz-linear-gradient(bottom, "+gradientColor1+" 0%, "+gradientColor2 +" 100%);";
estilo = estilo + "background-image: -o-linear-gradient(bottom, "+gradientColor1+" 0%, "+gradientColor2 +" 100%);";
estilo = estilo + "background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, "+gradientColor1+"), color-stop(1,"+gradientColor2 +"));";
estilo = estilo + "background-image: -webkit-linear-gradient(bottom, "+gradientColor1+" 0%, "+gradientColor2 +" 100%);";
estilo = estilo + "background-image: linear-gradient(to top, "+gradientColor1+" 0%, "+gradientColor2 +" 100%);";
estilo = estilo + "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='"+gradientColor1+"', endColorstr='"+gradientColor2 +"');";
}
return estilo;
}
//getter and setter
}
Related
Why does my CSS code renders incorrectly on iOS/MacOS?
We developed a web app on Vue 3 and it displays perfectly on every browser except on iOS and Mac OS devices.
This is worse if you're using Safari, however some issues occur even on Chrome for Mac.
This problem causes forms to always be shown blank, without displaying a placeholder or user input. It also makes several other elements to misalign.
We even tried making a new form and removing all stylesheets, but the problem persists.
Here is the code for one of the forms:
<template>
<div>
<form class="contactus" #submit.prevent="saveMessage">
<div class="row">
<h1 class="titleFormAbout">
{{ $t("contactus.componentForm.text1") }}
</h1>
</div>
<p style="margin-bottom: 30px;">{{ $t("contactus.componentForm.text9") }}</p>
<input type="text" class="form-control formContact" :placeholder="$t('contactus.componentForm.text2')" id="name" required />
<input type="email" class="form-control formContact" :placeholder="$t('contactus.componentForm.text3')" id="email" required />
<vue-tel-input
v-model="phone"
id="phone"
class="formControl formContact"
></vue-tel-input>
<br />
<textarea
class="form-control formContact"
name=""
id="message"
rows="10"
:placeholder="$t('contactus.componentForm.text5')"
required
></textarea>
<br />
<vue-recaptcha
style="margin-bottom: 14px"
#validate="validated"
/>
<div class="row">
<div class="col-6">
<input
class="form-control "
type="Submit"
id="submitButton"
:value="$t('contactus.componentForm.text6')"
disabled
/>
</div>
<div class="col-6">
<button class="form-control clear" #click="clearForm" >
{{ $t("contactus.buttonClear") }}
</button>
</div>
</div>
<br />
<div class="alert" id="Response" role="alert"></div>
</form>
</div>
</template>
<script>
import axios from "axios";
import VueRecaptcha from "../forms/vue-recaptcha.vue";
const hostName = location.port =="" ?location.protocol + "//" + location.host:'http://'+location.hostname+':3000';
export default {
components: {
VueRecaptcha,
},
data() {
return {
config: {
headers: {
//'Content-Type': 'application/x-www-form-urlencoded'
"Content-Type": "multipart/form-data",
},
},
};
},
methods: {
validated(){
const htmlElement=document.getElementById('submitButton');
htmlElement.classList.add('submit');
htmlElement.disabled=false;
},
clearForm() {
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementsByName("telephone")[0].value = "";
document.getElementById("message").value= "";
},
saveMessage() {
//alert(document.getElementsByClassName("highlighted")[0].getElementsByTagName('span')[0].innerHTML)
const responseBox = document.getElementById("Response");
const params = new FormData();
const countryPhone = document.getElementsByClassName("highlighted");
var countryPhoneid = "+52";
if (countryPhone.length > 0) {
countryPhoneid =
countryPhone[0].getElementsByTagName("span")[0].innerHTML;
}
params.append("name", document.getElementById("name").value);
params.append("email", document.getElementById("email").value);
params.append("phone",countryPhoneid + " " + document.getElementsByName("telephone")[0].value);
params.append("message", document.getElementById("message").value);
axios
.post(hostName + "/api/contact", params, this.config)
.then((response) => {
responseBox.innerHTML = this.$t("contactus.componentForm.text7");
responseBox.classList.add("alert-success");
setTimeout(() => {
responseBox.classList.remove("alert-success");
}, 5000);
console.log(response);
})
.catch((err) => {
responseBox.innerHTML = this.$t("contactus.componentForm.text8");
responseBox.classList.add("alert-danger");
setTimeout(() => {
responseBox.classList.remove("alert-danger");
}, 5000);
console.log(err);
});
responseBox.hidden = false;
setTimeout(() => {
responseBox.hidden = true;
}, 5000);
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementsByName("telephone")[0].value = "";
document.getElementById("message").value = "";
},
},
mounted() {
document.getElementsByName("telephone")[0].placeholder=this.$t('contactus.componentForm.text10');
const listcountry = document.getElementsByClassName("vti__dropdown-list");
listcountry[0].getElementsByTagName("li")[137].classList.add("highlighted");
document.getElementsByName("telephone")[0].required = true;
document
.getElementsByName("telephone")[0]
.addEventListener("input", (textin) => {
const telephone = document.getElementsByName("telephone")[0];
//console.log(parseInt(textin.data));
//console.log(Number.isInteger(textin.data));<
if (Number.isInteger(parseInt(textin.data))) {
// console.log(telephone.value);
} else {
telephone.value = telephone.value.slice(
0,
telephone.value.length - 1
);
}
});
},
};
</script>
<style>
.contactus .submit {
background: #008b9e;
color: white;
font-weight: bold;
}
.contactus .formContact{
border: 2px solid #BAD1FF;
margin-top: 2vh;
margin-bottom: 2vh;
}
.contactus .clear {
background: rgba(0, 0, 0, 0.25);
font-weight: bold;
}
.contactus .titleFormAbout {
margin-top: 20px;
margin-bottom: 20px;
text-align: left;
color: #00a8c6;
font-weight: bolder;
margin-left: 12px;
text-transform: none;
}
form.contactus {
padding-left: 5vw;
padding-right: 5vw;
}
.contactus form li {
color: black;
}
.contactus .alet {
text-align: center;
}
.contactus .contactus p{
text-align: justify;
}
</style>
Here you can see the type of behaviour we're getting:
On iOS/MacOS:
The same elements on Windows/Android devices:
Can anyone please tell me if this is a common issue and if there's a solution? We have been stuck with this problem for two weeks and we're losing our minds.
Thanks.
Why is my PhoneGap app graphics corrupted only on iOS?
The following is a shortened version of the real code. I use PhoneGap to implement an algorithm that takes my 2 designs - one for portrait and one for landscape - and switch between them as needed, including automatic scaling to the center of the specific screen. It works great on Android, but there appears to be some unexplained corruption of the tab graphics on iPhone, upon switching between modes (portrait / landscape) and clicking the tabs.
The HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/index.js"></script>
</head>
<body>
<div id="main" class="main">
<div id="ext" class="extPortrait">
<div id="tabDiv1" class="tabDiv1Portrait">
<img id="tabImg1" class="tabImg" src="img/tabImgPortrait.png" draggable="false" />
<div id="tabTxt1" class="tabTxt">Tab1</div>
</div>
<div id="tabDiv2" class="tabDiv2Portrait">
<img id="tabImg2" class="tabImg" src="img/tabImgPortrait.png" draggable="false" />
<div id="tabTxt2" class="tabTxt">Tab2</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
The CSS:
body {direction:ltr; margin:0; border:0; padding:0;
background-color:#c9c9c9; font-family:Calibri,Arial;
font-size:14px; color:#0070b8; overflow:auto;}
.main {display:block; position:absolute; top:0; left:0;
width:100%; height:100%; margin:0; border:0; padding:0;
background-color:#c9c9c9; overflow:hidden; z-index:10;}
.extPortrait, .extLandscape {display:block; position:absolute;
margin:0; border:2px solid; border-radius:6px; padding:0;
background-color:#f4f4f4; border-color:#bcbcbc; z-index:20;}
.extPortrait {top:3.409%; left:4.444%; width:90%; height:93.344%;}
.extLandscape {top:6.25%; left:2.5%; width:94.375%; height:87.798%;}
.tabDiv1Portrait, .tabDiv2Portrait, .tabDiv1Landscape, .tabDiv2Landscape
{display:block; position:absolute; margin:0; border:0; padding:0;
overflow:hidden; cursor:pointer; z-index:30;}
.tabDiv1Portrait, .tabDiv2Portrait
{top:-1.913%; width:21.605%; height:7.304%; font-size:2.922%;}
.tabDiv1Landscape, .tabDiv2Landscape
{top:-3.729%; width:23.179%; height:14.237%; font-size:5.357%;}
.tabDiv1Portrait {left:8.642%;}
.tabDiv2Portrait {left:31.481%;}
.tabDiv1Landscape {left:4.636%;}
.tabDiv2Landscape {left:28.477%;}
.tabImg {display:block; position:absolute; top:0; left:0;
width:100%; height:100%; margin:0; border:0; padding:0;
cursor:pointer; z-index:40;}
.tabTxt {display:block; position:absolute; top:0; left:0;
width:100%; height:100%; margin:0; border:0; padding:0;
line-height:233%; color:#ffffff; text-align:center;
cursor:pointer; z-index:50;}
The JavaScript:
var PMYWID = 360, PMYHIG = 616; //sizes of my portrait design
var LMYWID = 640, LMYHIG = 336; //sizes of my landscape design
var scrWid = 0, scrHig = 0;
var portrait = true;
var tabNum = 0;
(function() {
window.onload = function() {
mobilePeriodicCheck();
tab1Clk();
document.getElementById("tabDiv1").addEventListener("click", tab1Clk);
document.getElementById("tabDiv2").addEventListener("click", tab2Clk);
//document.getElementById("main").style.display = "block";
}
}());
function mobilePeriodicCheck() {
var scrWidNew = window.innerWidth, scrHigNew = window.innerHeight;
if ((scrWidNew != scrWid) || (scrHigNew != scrHig)) {
scrWid = scrWidNew;
scrHig = scrHigNew;
portrait = (scrWid <= scrHig);
var wid,hig,lef;
if (portrait) {
if (scrWid/scrHig <= PMYWID/PMYHIG) { wid = scrWid; hig = Math.floor(PMYHIG*scrWid/PMYWID); lef = 0;}
else { wid = Math.floor(PMYWID*scrHig/PMYHIG); hig = scrHig; lef = Math.floor((scrWid-wid)/2);}
}
else {
if (scrWid/scrHig <= LMYWID/LMYHIG) { wid = scrWid; hig = Math.floor(LMYHIG*scrWid/LMYWID); lef = 0;}
else { wid = Math.floor(LMYWID*scrHig/LMYHIG); hig = scrHig; lef = Math.floor((scrWid-wid)/2);}
}
var id = document.getElementById("main");
id.style.width = wid + "px";
id.style.height = hig + "px";
id.style.left = lef + "px";
id.style.fontSize = hig + "px";
document.getElementById("ext").className = portrait ? "extPortrait" : "extLandscape";
document.getElementById("tabDiv1").className = portrait ? "tabDiv1Portrait" : "tabDiv1Landscape";
document.getElementById("tabDiv2").className = portrait ? "tabDiv2Portrait" : "tabDiv2Landscape";
document.getElementById("tabImg1").src = portrait ? "img/tabImgPortrait.png" : "img/tabImgLandscape.png";
document.getElementById("tabImg2").src = portrait ? "img/tabImgPortrait.png" : "img/tabImgLandscape.png";
}
setTimeout(mobilePeriodicCheck, 1000);
}
function tab1Clk() { tabClk(1); }
function tab2Clk() { tabClk(2); }
function tabClk(iTab) {
if (iTab!=tabNum) {
if (tabNum > 0) {
document.getElementById("tabImg"+tabNum).style.WebkitFilter = "brightness(100%)";
document.getElementById("tabImg"+tabNum).style.filter = "brightness(100%)";
}
document.getElementById("tabImg"+iTab).style.WebkitFilter = "brightness(135%)";
document.getElementById("tabImg"+iTab).style.filter = "brightness(135%)";
tabNum = iTab;
}
}
After playing a lot with this, I think I found the problem: At least one of style.WebkitFilter and style.filter causes rendering problems in iOS WebView. I switched to simply changing the src of the image, and that worked perfectly on both platforms.
calculateDistances() function doesn't work taking start/end value from a select
I'd like to calculate the distance between 2 points, taking coordinates for each point from a select. The following is the code so far
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Calcola il tuo itinerario</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
#panel {
position: absolute;
top: 5px;
left: 20%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
width: 300px;
}
/*
Provide the following styles for both ID and class,
where ID represents an actual existing "panel" with
JS bound to its name, and the class is just non-map
content that may already have a different ID with
JS bound to its name.
*/
#panel, .panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#panel select, #panel input, .panel select, .panel input {
font-size: 15px;
}
#panel select, .panel select {
width: 100%;
}
#panel i, .panel i {
font-size: 12px;
}<br>
#outputDiv {
font-size: 11px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chiesamadre = new google.maps.LatLng(37.485558, 13.987883);
var mapOptions = {
zoom:17,
center: chiesamadre
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function calculateDistances() {
var start = new google.maps.Map(document.getElementById('start').value);
var end = new google.maps.Map(document.getElementById('end').value);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origin:start,
destination:end,
travelMode: google.maps.TravelMode.WALKING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '';
deleteOverlays();
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
outputDiv.innerHTML += origins[i] + ' to ' + destinations[j]
+ ': ' + results[j].distance.text + ' in '
+ results[j].duration.text + '<br>';
}
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<b>Partenza: </b>
<select id="start" onChange="calcRoute();">
<option value="37.485558, 13.987883">Chiesa Madre</option>
<option value="37.484813, 13.983602">Calvario</option>
<option value="37.484474, 13.986312">Torre civica con orologi</option>
<option value="37.485703, 13.986480">Chiesa di San Giuseppe</option>
<option value="37.491049, 13.988843">Torre Con Orologi Cristo re</option>
<option value="37.484507, 13.989363">Chiesa Santa Maria del Rosario</option>
<option value="37.472353, 13.945771">Vassallaggi</option>
</select>
<b>Arrivo: </b>
<select id="end" onChange="calcRoute();">
<option value="37.485558, 13.987883">Chiesa Madre</option>
<option value="37.484813, 13.983602">Calvario</option>
<option value="37.484474, 13.986312">Torre civica con orologi</option>
<option value="37.485703, 13.986480">Chiesa di San Giuseppe</option>
<option value="37.491049, 13.988843">Torre Con Orologi Cristo re</option>
<option value="37.484507, 13.989363">Chiesa Santa Maria del Rosario</option>
<option value="37.472353, 13.945771">Vassallaggi</option>
</select>
<b>Distanza: </b>
<p><button type="button" onClick="calculateDistances();">Calculate
distances</button></p>
<p> <div id="outputDiv"></div></p>
</div>
<div id="map-canvas"></div>
</body>
</html>
calcRoute() function works fine but calculateDistances() function doesn't work, in fact if I click on the "Calculate distances" button after selecting start and end, no text is showed in the white space on the button, where is the div with the expected result of calculated distance. Maybe I did something wrong with the start and end variables of calculateDistances() function. I added this JSfiddle: https://jsfiddle.net/Lnq91j0c/
and this is the link of the page online: http://turismosancataldo.it/calcolo-itinerario-piedi-dist.html
How to fix the function? Thank You for any help.
Can some tell me how to make this script check for the password before it starts the upload process instead of after the file is uploaded?
Can some tell me how to make this script check for the password before it starts the upload process instead of after the file is uploaded? Some of the files I need uploaded are big and it sucks to wait till the file is uploaded to before it tells me that the password was wrong.
Thanks for any help you can provide.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>ES Simple Uploader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="handmade" />
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #DDDDDD;
}
.cnt {
text-align: center;
}
.cnt_welcome {
font-size: 16px;
font-weight: bold;
text-align: center;
}
.cnt_powered {
font-size: 14px;
font-weight: bold;
text-align: center;
}
.cnt_small {
font-size: 12px;
text-align: center;
padding-top: 50px;
}
.head_line {
background-color: #BBBBBB;
}
.main_table {
border: solid 1px #9D9992;
font-size: 13px;
}
h4 {
font-size: 12px;
color: #DD0000;
text-align: center;
}
.button {
border: 1px solid #55555;
font-weight: bold;
}
-->
</style>
</head>
<body>
<?
include("config.php");
function path_options()
{
global $upload_dirs;
$option = "";
foreach ($upload_dirs as $path => $pinfo)
{
$option .= '<option value="'.$path.'">'.$pinfo["name"].'</option>';
}
return $option;
}
function check_vals()
{
global $upload_dirs, $err;
if (!ini_get("file_uploads")) { $err .= "HTTP file uploading is blocked in php configuration file (php.ini). Please, contact to server administrator."; return 0; }
$pos = strpos(ini_get("disable_functions"), "move_uploaded_file");
if ($pos !== false) { $err .= "PHP function move_uploaded_file is blocked in php configuration file (php.ini). Please, contact to server administrator."; return 0; }
if (!isset($_POST["path"]) || (strlen($_POST["path"]) == 0)) { $err .= "Please fill out path"; return 0; }
if (!isset($upload_dirs[$_POST["path"]])) { $err .= "Incorrect path"; return 0; }
if (!isset($_POST["pwd"]) || (strlen($_POST["pwd"]) == 0)) { $err .= "Please fill out password"; return 0; }
elseif ($_POST["pwd"] != $upload_dirs[$_POST["path"]]["password"]) { $err .= "The upload password is incorrect"; return 0; }
if (!isset($_FILES["userfile"])) { $err .= "Empty file"; return 0; }
elseif (!is_uploaded_file($_FILES['userfile']['tmp_name'])) { $err .= "Empty file"; return 0; }
return 1;
}
$err = ""; $status = 0;
if (isset($_POST["upload"])) {
if (check_vals()) {
if (filesize($_FILES["userfile"]["tmp_name"]) > $max_file_size) $err .= "Maximum file size limit: $max_file_size bytes";
else {
if (move_uploaded_file($_FILES["userfile"]["tmp_name"], $upload_dirs[$_POST["path"]]["dir"].$_FILES["userfile"]["name"])) {
$status = 1;
}
else $err .= "There are some errors!";
}
}
}
if (!$status) {
if (strlen($err) > 0) echo "<h4>$err</h4>";
}
else {
echo "<h4>"".$_FILES["userfile"]["name"]."" was successfully uploaded.</h4>";
}
?>
<p class="cnt_welcome">Welcome to ES Simple Uploader v 1.1.</p>
<p class="cnt">« Back to Product page «</p>
<p class="cnt">(Select folder, set it's password, then select a file to upload and click "Upload" button).
<br />Note:
Folder: "Images folder", Password: "images";
Folder: "Docs", Password: "docs";
Folder: "Common files", Password: "common";
Maximum file size: <?=$max_file_size/1024?> Kb.</p><br />
<form enctype="multipart/form-data" action="index.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="<?=$max_file_size?>" />
<table class="main_table" align="center">
<tr>
<td colspan="2" class="head_line"> </td>
</tr>
<tr>
<td>Folder:</td>
<td><select name="path"><?=path_options()?></select></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pwd" style="width: 217px;" /></td>
</tr>
<tr>
<td>Choose file:</td>
<td><input type="file" name="userfile" style="width: 222px;" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" name="upload" value="Upload" class="button" /></td>
</tr>
</table>
</form>
</p>
<p class="cnt_powered">Powered by EnergyScripts</p>
<p class="cnt_small">Find more power solution: ES File Upload & Download Manager</p>
</body>
</html>
How to add minimize and maximize button in rich: popup panel window
Like below, how can we add minimize and maximize button at the upper right corner of the page in richface popup panel?
Using the below code, we can add the 'X' at the upper right corner and, on click of this, popup window gets closed.
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('simplePopup2')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
Please, suggest me.
It is possible to extend jQuery with two custom functions that will do the maximize/minimize.
(function($) {
$.fn.maximize = function() {
var $this = $(this);
var viewport = $(window);
var bt = $this.css('border-top-width');
var br = $this.css('border-right-width');
var bb = $this.css('border-bottom-width');
var bl = $this.css('border-top-width');
bt = bt ? parseInt(bt) : 0;
br = br ? parseInt(br) : 0;
bb = bb ? parseInt(bb) : 0;
bl = bl ? parseInt(bl) : 0;
$this.css({
width: (viewport.width() - (bl + br)) + 'px',
height: (viewport.height() - (bt + bb)) + 'px',
top: 0,
left: 0
});
$this.find('div.rf-pp-cnt-scrlr').css({
width: 100 + '%',
height: 100 + '%'
});
}
$.fn.minimize = function() {
var $this = $(this);
var viewport = $(window);
$this.css({
width: '170px',
height: '20px',
top: (viewport.height() - 20),
left: 0
});
$this.find('div.rf-pp-shdw').hide();
$this.find('div.rf-pp-cnt-scrlr').hide();
}
})(jQuery);
Than you can use it with richfaces popupPanel
<rich:popupPanel id="window">
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('window')}.cdiv.minimize(); return false;">
<h:outputText value="Minimize"/>
</h:outputLink>
<h:outputText value=" | "/>
<h:outputLink value="#" onclick="#{rich:component('window')}.cdiv.maximize(); return false;">
<h:outputText value="Maximize"/>
</h:outputLink>
<h:outputText value=" | "/>
<h:outputLink value="#" onclick="#{rich:component('window')}.hide(); return false;">
<h:outputText value="Close"/>
</h:outputLink>
</f:facet>
<h:outputText value="Window"/>
</rich:popupPanel>
Note the .cdiv before calling the maximize/minimize function. This is intended for reference to jQuery object itself so it will be possible to access the new functions.
The functions provided above is just a proof of concept so you will have to extend them in order to be able to restore to original size etc..