Edit Widget source code

  • chrispp10
    Asked on February 4, 2016 at 9:47 PM

    Hey hope everyone is well 

     

    This may be a little difficult to do but I was wondering if it is possible to edit a source of a widget 

    reason being I am ticket purchases widget and it works perfectly !

    The only problem that one of my users encountered was that after you select an item it does not tell you select it until after you move the mouse away from the selected item

    So I know its just mouse event that needs a little tweaking

    Is it possible to go in and edit the code and tell it to show the selected item even when the mouse it still hovering over it 

    I pasted a picture to show what I am taking about 

    Here is also a link to my form

    https://form.jotform.com/60315059470148

    Edit Widget source code Image 1 Screenshot 20

     

     

     

  • Chriistian Jotform Support
    Replied on February 5, 2016 at 2:54 AM

    You can make edits to the code of your form by getting the full source. Here's how: How to get the Full Source Code of your Form

  • chrispp10
    Replied on February 8, 2016 at 11:44 AM

    Do you know the css code to add into the ticket purchase widget to allow this to happen (what i refereed to above )  

  • BJoanna
    Replied on February 8, 2016 at 1:50 PM

    I did some tests and checkbox item is actually image. It is possible to achieve what you are looking for by injecting custom CSS inside of Ticket Purchases widget Custom CSS field. Please add this CSS code:

    .checklist li.hover label .before{

    background: url(https://data-widgets.jotform.io/giftRegistry/img/check.png) center center no-repeat!important;

    display:block;

    }

    .checklist li.hover label .after{

    background: url(https://data-widgets.jotform.io/giftRegistry/img/check.png) center center no-repeat!important;

    display:block;

    }

    Edit Widget source code Image 1 Screenshot 20

    However this code will replace images even when you hover over some checkbox option without selecting it. 

    Here is my demo form: https://form.jotform.com/60384937552968 

    Feel free to clone it. 

    Hope this will help. Let us know if you need further assistance. 

  • chrispp10
    Replied on February 8, 2016 at 2:10 PM

    Thanks that works perfectly 

     

    I

    s there a way when the max is 1 and the min is 1

    is there a way to make it auto deselect when you click on another choice instead of you having to deselect your previous choice and reselect the new one ?

  • BJoanna
    Replied on February 8, 2016 at 3:23 PM

    I am glad to hear that CSS code I provided works.

    I have moved your other question to separate thread and we will provide you an answer there shortly. 

    http://www.jotform.com/answers/767296 

  • Kevin Support Team Lead
    Replied on February 8, 2016 at 8:02 PM

    @chrispp10,

    Seems like your answer did not reach this thread, please post your reply here: http://www.jotform.com/answers/765165.