Forum Replies Created

Viewing 15 posts - 1 through 15 (of 40 total)
  • Author
    Posts

  • 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

    • This reply was modified 2 years, 5 months ago by  pepe.

    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.


    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=”campoIdentificadorTiposVias”>
    <input id=’txtIdentificadorTiposVias’ type=”text” tabindex=”7″>
    </div>

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

    <div id=”campoDescripcionTiposVias”>
    <input id=’txtDescripcionTiposVias’ type=”text” tabindex=”8″>
    </div>

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

    <div id=”campoAbreviaturaTiposVias”>
    <input id=’txtAbreviaturaTiposVias’ type=”text” tabindex=”9″>
    </div>
    </div>

    </div>

    <div>
    <input type=”button” value=”ACEPTAR” id=’btnAceptarTiposVias’ class=”botonRipple” tabindex=”10″/>
    </div>
    <div>
    <input type=”button” value=”SALIR” id=’btnCancelarTiposVias’ class=”botonRipple” tabindex=”11″/>
    </div>

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


pepe
Participant

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


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.


pepe
Participant

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

Cheers


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


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

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.

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).

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>

<script type=’text/javascript’>
$(document).ready(function () {
$(‘#jqxNotification’).jqxNotification({
width: 300,
height: 100,
position: ‘top-left’,
opacity: 0.9,
autoOpen: true,
autoClose: false,
template: ‘info’,
closeOnClick: false,
});

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

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

});
</script>

<style>
#jqxButton{background-color: transparent;}
</style>

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

in reply to: button within notification button within notification #104674

pepe
Participant

Thank you very much for the answers Martin. I have tried the button code and the notification separately and they work perfectly as I want, but when I put the button inside the div of the notification its appearance is 3d. Keep looking.

A greeting.

in reply to: jqxWindow and jqxLoader jqxWindow and jqxLoader #104605

pepe
Participant

Thank you very much for the answer. A greeting.

in reply to: change password box icon change password box icon #99598

pepe
Participant

Thank you very much for the reply.
a greeting


pepe
Participant

thank you very much, perfect the example

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