You are viewing limited content. For full access, please sign in.

Question

Question

Stop Watch Icon

Forms Web Customizations
Updated February 27, 2019
asked on June 29, 2016 • Show version history

I'm trying to use a stop watch in a form I'm creating. Currently I cannot see the stop watch icon that I''m using out of this earlier form post:

https://answers.laserfiche.com/questions/88574/Add-a-Stopwatch-to-Forms

But I cannot get the actual icon to show next to my table field. I can click right next to the field and it will start the timer, but I'd like to see the button as well. Inside the red circle is the clickable area.

Thanks!

0 0

Replies

replied on June 29, 2016 • Show version history

that icon is part of fa fa icons.

adding this to your class name will make it to appear.

 class="fa fa-clock-o

you do have stopwatch  class. can you try to add some other icon some where on the page to see if that works?

0 0
replied on June 29, 2016

class="fa fa-clock-o  is already in the code.

	$(document).ready(function() {
	  function addStopwatch() {
	      $(this).find('td.stopwatch input').parent().append('<i class="fa fa-clock-o stopwatchbutton" style="font-size:25px;padding-left:10px;cursor:pointer;"></i>');
	  }
	 
	  addStopwatch.call($('li[attr=Table] table.cf-table tbody tr:last').get());
	 
	  $(document).on('click','i.stopwatchbutton', function() {
	     var stw = $(this).data('stopwatch');
	     if (stw) {
	         $(this).data('stopwatch',null);
	         clearInterval(stw);
	         return;
	     }
	     var inp = $(this).siblings('input'), i = +inp.val()*1000 || 0;
	     stw = setInterval(function() {
	            i=i+10;
	         inp.val((i/1000).toFixed(1));
	     },10);
	     $(this).data('stopwatch',stw);
	  }).on('click','a.cf-table-add-row',function() {
	      //console.log($(this).siblings('.cf-table').find('tbody tr:last').get());
	      addStopwatch.call($(this).siblings('.cf-table').find('tbody tr:last').get());
	  });
	});

 

0 0
replied on June 29, 2016 • Show version history

Is the field in your example actually in a table? That the id field is blank puzzles me. If you remove the "td" in "td.stopwatch input" does it work?

Edit: Well, worth trying but yes it's in a table and the id field should be blank. I made an error.

replied on June 29, 2016 • Show version history

I think the issue is just that FontAwesome isn't installed. I don't know how the original poster installed that and he can weigh in if he sees this, but try adding the following to the custom CSS:

@font-face {
  font-family: 'FontAwesome';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.woff');
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-clock-o:before {
  content: "\f017";
}

This is taken from the actual Font Awesome CSS file, and the link to the font is from CDNJS, an online repository with source files for various libraries including Font Awesome. You would need to make sure this is resolvable through firewalls, etc. in order for the resource to load.

This worked for me in a test form; hope this helps!

EDIT: Removed earlier post which was barking up the wrong tree entirely.

0 0
replied on June 30, 2016

The Font Awesome library used to be included in Forms 9.2.1. It got removed in Forms 10, which means it has to be installed manually.

The easiest way to do this is to add the following line inside your $(document).ready block, at the beginning:

$('head').append('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css" />');
0 0
replied on February 27, 2019

Dears , 

I'm using fontawesome and it works fine , but when I save form to Repository ,  fontawesome icons not displayed! 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...