pepe's Replies

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 44 total)

1 2 3 →

Author

Posts
May 2, 2024 at 9:32 pm in reply to: change search engine position change search engine position #134689

pepe
Participant

Good evening, how could I add a button to the left of the search engine.

Thank you

April 11, 2024 at 6:54 pm in reply to: change search engine position change search engine position #134598

pepe
Participant

Good afternoon Ivan, the example does exactly what I wanted.

Thank you so much

April 10, 2024 at 6:31 pm in reply to: change search engine position change search engine position #134583

pepe
Participant

Good afternoon Peter, I attach the example code.
All the best.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In this sample is demonstrated how to filter through all records in the Grid.</title>
<meta name=”description” content=”JavaScript Grid which has multiple built-in aggregates” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript”>
window.onload = function() {
// prepare the data
var data = generatedata( 200 );
var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ }
],
updaterow: function ( rowid, rowdata ) {
// synchronize with the server – send update command
}
};
var dataAdapter = new jqx.dataAdapter( source );
// initialize jqxGrid
var grid = new jqxGrid( “#grid”,
{
width: ‘100%’,
source: dataAdapter,
filterable: true,
sortable: true,
showfilterbar: true,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 170 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 170 },
{
text: ‘Product’, datafield: ‘productname’, width: 170,
},
{
text: ‘In Stock’, datafield: ‘available’, columntype: ‘checkbox’, width: 125,
},
{
text: ‘Quantity’, datafield: ‘quantity’, width: 85, cellsalign: ‘right’, cellsformat: ‘n2’,
},
{
text: ‘Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2’
} ]
} );
var grid2 = new jqxGrid( “#grid2″,
{
width: ‘100%’,
source: dataAdapter,
filterable: true,
sortable: true,
filterbarmode: ‘simple’,
showfilterbar: true,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 170 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 170 },
{
text: ‘Product’, datafield: ‘productname’, width: 170,
},
{
text: ‘In Stock’, datafield: ‘available’, columntype: ‘checkbox’, width: 125,
},
{
text: ‘Quantity’, datafield: ‘quantity’, width: 85, cellsalign: ‘right’, cellsformat: ‘n2’,
},
{
text: ‘Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2’
} ]
} );
};
</script>
<script async src=”https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT”></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(‘js’, new Date());gtag(‘config’, ‘G-2FX5PV9DNT’);</script></head>
<body class=’default’>
<h3>Grid with Search Input and Filter By List</h3>
<div id=”grid”></div>
<br />
<h3>Grid with Search Input</h3>
<div id=”grid2″></div>
</body>
</html>

December 4, 2023 at 10:16 pm in reply to: form – styles and event control form – styles and event control #134027

pepe
Participant

Thank you very much Peter, I’m going to try it and see if I can get it. thank you

June 11, 2020 at 7:17 pm in reply to: Deactivate and activate event click on toggledbutton Deactivate and activate event click on toggledbutton #112186

pepe
Participant

Good afternoon Hristo, I think I know why my example doesn’t work for me. When you ran the first example you sent me, which worked perfectly now, neither
it works for me and the browser gives me the following warning:

This page uses the non-standard “zoom” property. Consider using calc() on the relevant property values, or use “transform” in conjunction with “transform-origin: 0 0”.

I’ve been looking on the internet and they say the following.

Zoom: 1 is a popular CSS property, so it possibly comes from a third-party package.

The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property,
if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

I tried to replace zoom with transform:scale() in the jxq.base.css file which is where only I get it but the problem is not solved.

A greeting

June 2, 2020 at 4:09 pm in reply to: Deactivate and activate event click on toggledbutton Deactivate and activate event click on toggledbutton #112128

pepe
Participant

Good afternoon Hristo, sorry for abusing your good predisposition will not happen again. I will implement what you recommend and once again thanks for the reply.
A greeting.

May 30, 2020 at 10:38 pm in reply to: Deactivate and activate event click on toggledbutton Deactivate and activate event click on toggledbutton #112111

pepe
Participant

Good evening Hristo, I have followed the example you have set for me, but I still have a problem. I attach my code and I tell you:

Pressing the A button will disable the click event of the A button and focus on the description text field. Pressing ESC in the description field will re-enable the click event, but the button’s toggle method does not work for me.

thanks greetings.

<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Documento sin título</title>

<link rel=”stylesheet” href=”styles/jqx.base.css” type=”text/css”/>
<link rel=”stylesheet” href=”styles/jqx.office.css” type=”text/css”/>

<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmaskedinput.js”></script>

<style>

#wndTiposVias{
visibility: hidden;
}

#tituloVentanaTiposVias{
float:left;
margin-left: 10px;
font-weight: bold;
}

#contenedorBotonAnadirTiposVias{
float:left;
}

#contenedorBotonEditarTiposVias,
#contenedorBotonAnteriorTiposVias,
#contenedorBotonBuscarTiposVias,
#contenedorBotonSiguienteTiposVias,
#contenedorBotonEliminarTiposVias{
float:left;
margin-left: 5px;
}

#etiquetaIdentificadorTiposVias{
float:left;
margin-top: 1.3%;
margin-left: 0.85%;
width: 12%;
height:30px;
line-height: 30px;
}

#etiquetaDescripcionTiposVias{
clear: left;
float:left;
margin-left: 0.85%;
width: 12%;
height: 30px;
line-height: 30px;
}

#etiquetaAbreviaturaTiposVias{
clear: left;
float:left;
margin-left: 0.85%;
width: 12%;
height: 30px;
line-height: 30px;
}

#campoIdentificadorTiposVias{
margin-top: 1.3%;
float:left;
width: 30%;
height: 30px;
display: flex;
align-items: center;
margin-left: 15px;
}

#campoDescripcionTiposVias{
float:left;
width: 570px;
height: 30px;
display: flex;
align-items: center;
margin-left: 15px;
}

#campoAbreviaturaTiposVias{
float:left;
width: 30%;
height: 30px;
display: flex;
align-items: center;
margin-left: 15px;
}

#btnAceptarTiposVias{
margin-top: 8px;
float: right;
}

#btnCancelarTiposVias{
margin-top: 8px;
margin-right: 5px;
float: right;
}

.jqx-window-content {
padding: 8px;
}

</style>

<script type=”text/javascript”>
$(document).ready(function () {
$(“#wndTiposVias”).jqxWindow({
height: 265,
width: 700,
theme: ‘office’,
showCollapseButton:true
});

$(“#botonA”).jqxToggleButton({
theme: ‘office’,
width: 27,
height: 27,
});

$(“#botonB”).jqxToggleButton({
theme: ‘office’,
width: 27,
height: 27,
disabled: true,
});

$(“#botonC”).jqxButton({
theme: ‘office’,
width: 27,
height: 27,
disabled: true,
});

$(“#botonD”).jqxToggleButton({
theme: ‘office’,
width: 27,
height: 27,
disabled: true,
});

$(“#botonE”).jqxButton({
theme: ‘office’,
width: 27,
height: 27,
disabled: true,
});

$(“#botonF”).jqxToggleButton({
theme: ‘office’,
width: 27,
height: 27,
disabled: true,
});

$(‘#tabTiposVias’).jqxTabs({
width: ‘auto’,
height: 145,
theme: ‘office’
});

$(“#txtIdentificadorTiposVias”).jqxMaskedInput({
height: ’22px’,
width: “40px”,
disabled: true,
theme: ‘office’
});

$(“#txtDescripcionTiposVias”).jqxMaskedInput({
height: ’22px’,
width: “400px”,
disabled: true,
theme: ‘office’
});

$(“#txtAbreviaturaTiposVias”).jqxMaskedInput({
height: ’22px’,
width: “45px”,
disabled: true,
readOnly: true,
theme: ‘office’
});

$(‘#btnAceptarTiposVias’).jqxButton({
width: ’80’,
height: ’27’,
disabled: true,
theme: ‘office’,
})

$(‘#btnCancelarTiposVias’).jqxButton({
width: ’80’,
height: ’27’,
theme: ‘office’,
})

//———–( MOSTRAMOS EL DIV QUE CONTIENE EL FORMULARIO UNA VEZ CARGADO )

$(‘#wndTiposVias’).css({“visibility”:”visible”});

//———- ( ACCION BOTON AÑADIR )

$(“#botonA”).on(“click”, eventoClick);

function eventoClick(){
console.log(“CLICK – A”);
console.log(“TOGGLE – ” + $(“#botonA”).jqxToggleButton(‘toggled’));
$(this).off(“click”);

habilitarCamposNoIdentificador(‘#txtIdentificadorTiposVias’);
$(“#txtDescripcionTiposVias”).jqxMaskedInput(‘focus’);
$(‘#btnCancelarTiposVias’).val(“Cancelar”);
}

//———-( ACCION CAMPO DESCRIPCION )

$(“#txtDescripcionTiposVias”).on(‘keydown’, function(e) {

if (e.which == 27) {
limpiarCampos();
desabilitarCampos();
$(‘#botonA’).jqxToggleButton({toggled: false});
$(‘#btnCancelarTiposVias’).val(“Salir”);

console.log(“CLICK – ESC”);
console.log(“TOGGLE – ” + $(“#botonA”).jqxToggleButton(‘toggled’));
$(“#botonA”).on(“click”, eventoClick);
}

})

//———-( HABILITAR TODOS LOS INPUT TEXT MENOS EL INPUT IDENTIFICADOR )

function habilitarCamposNoIdentificador(nombreCampoIdentificador){

$(“input[type=text]:not(“+nombreCampoIdentificador+”)”).each(function() {
$(this).jqxMaskedInput({disabled: false});
});
}

//———-( DESABILITAR TODOS LOS INPUT TEXT )

function desabilitarCampos(){
$(“input[type=text]”).each(function(){
$(this).jqxMaskedInput({ disabled: true});
});
}

//———-( LIMPIAR TODOS LOS INPUT TEXT )

function limpiarCampos(){
$(“input[type=text]”).each(function(){
$(this).jqxMaskedInput(‘clear’);
});
}

});
</script>

</head>

<body>
<div id=’wndTiposVias’>
<div>
<div id=”tituloVentanaTiposVias”>TIPOS DE VIAS.</div>
</div>

<div>
<div id=”menuBotonesAccion”>
<div id=”contenedorBotonAnadirTiposVias”>
<input type=”button” id=’botonA’ class=”botonesAccion” tabindex=”1″ value=”A”/>
</div>
<div id=”contenedorBotonEditarTiposVias”>
<input type=”button” id=’botonB’ class=”botonesAccion” tabindex=”2″ value=”B”/>
</div>
<div id=”contenedorBotonAnteriorTiposVias” >
<input type=”button” id=’botonC’ class=”botonesAccion” tabindex=”3″ value=”C”/>
</div>
<div id=”contenedorBotonBuscarTiposVias”>
<input type=”button” id=’botonD’ class=”botonesAccion” tabindex=”4″ value=”D”/>
</div>
<div id=”contenedorBotonSiguienteTiposVias” >
<input type=”button” id=’botonE’ class=”botonesAccion” tabindex=”5″ value=”E”/>
</div>
<div id=”contenedorBotonEliminarTiposVias”>
<input type=”button” id=’botonF’ class=”botonesAccion” tabindex=”6″ value=”F”/>
</div>
</div>

<div id=’tabTiposVias’ style=”clear:left; margin-top: 35px;”>
<ul style=’margin-left: 20px;’>

<div>
<div id=”etiquetaIdentificadorTiposVias”>
<label id=”lblIdentificadorTiposVias” disabled=”disabled”>IDENTIFICADOR</label>
</div>

<div id=”etiquetaDescripcionTiposVias”>
<label id=”lblDescripcionTiposVias”>DESCRIPCION</label>
</div>

<div id=”etiquetaAbreviaturaTiposVias”>
<label id=”lblAbreviaturaTiposVias”>ABREVIATURA</label>
</div>

</div>

</div>
</div>
</body>
</html>

May 23, 2020 at 5:38 pm in reply to: Deactivate and activate event click on toggledbutton Deactivate and activate event click on toggledbutton #112052

pepe

Participant

Thank you very much Hristo, there is another way to lock and unlock a togglebutton without using on off.
Thank you

May 19, 2020 at 2:50 pm in reply to: Deactivate and activate event click on toggledbutton Deactivate and activate event click on toggledbutton #112019

pepe

Participant

Thank you very much Hristo, perfect the answer. This line is the one I don’t understand $(“#btnSend”).On(“click”, hadndleSend);
Is it too much to ask if there is a possibility of not having to use a function? I’ve been trying but it stops working.

May 10, 2020 at 2:18 pm in reply to: Change color close popover button Change color close popover button #111949

pepe

Participant

Thank you very much Hristo, that’s what I meant.

Cheers

May 7, 2020 at 5:05 pm in reply to: Change color close popover button Change color close popover button #111931

pepe

Participant

Hi Hristo Hristov thanks for the reply, but not what I was asking.

I want to change the color of the close button X on the popover.

Thank you

September 12, 2019 at 10:29 am in reply to: toggle button change background color when receiving and losing focus toggle button change background color when receiving and losing focus #106741

pepe

Participant

Good morning Hristo, thanks for the answer but it’s not what I’m looking for.
What I intend is that when I use the tab key to move from one button to another and the button receives the focus I change the background color whenever this toggle is off.
Thank you

June 25, 2019 at 2:50 pm in reply to: popover position popover position #105862

pepe

Participant

Good afternoon, thanks for the reply. The answer is a solution to what I ask, I even think I would improve it using offset to position the popoper.
But I have a problem if I change the resolution of the monitor the coordinates x and y will not be the same and the popoper will not be where I want, that’s why I wanted the popoper to be inside the div capa.
A greeting.

June 24, 2019 at 9:51 am in reply to: popover position popover position #105817

pepe

Participant

Good morning, sorry for my English, but I have to use the translator.
What I want to do is that when I press the button, the popover will appear inside the div (capa).

June 20, 2019 at 9:18 pm in reply to: button within notification button within notification #105776

pepe

Participant

Good night, I try to capture the click event of the button but I can not get it.
A greeting.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Notification Sample</title>
<link type=”text/css” rel=”Stylesheet” href=”../../jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>

$(‘#jqxButton’).jqxButton({
height: ’30px’,
});

$(“#jqxButton”).on(‘click’, function () {
alert(‘ok’);
});

});
</script>

</head>
<body>
<div id=’jqxNotification’>Welcome to our website!
<div><input type=’button’ value=’Click me’ id=’jqxButton’ /></div>
</div>
</body>
</html>

Viewing 15 posts - 1 through 15 (of 44 total)

1 2 3 →