Jump to content

Javascript to show/hide hyperlinks with font awesome


Recommended Posts

In an html block on a Details datapage, I'm trying to show buttons with hyperlinks to social media pages using font awesome icons. The issue, though, is I need to show/hide these font awesome icons based on whether the datafield used for the url is null/blank or not. 

Basically, if the user has not entered a url link in the 'Facebook' field then I need to hide the Facebook font-awesome/hyperlink (because there is no url for Facebook for that record). I just want to show the social media links that have actual urls and hide those that don't. 

Here's the code to a couple of those hyperlinks (Facebook and LinkedIn- there are actually 6 in total but I didn't want to clutter this question). 

<div style="font-size:20px"><a href="[@field:myFacebookfieldname]" target="_blank"><i aria-hidden="true" class="fa fa-facebook-official"></i></a>&nbsp;&nbsp;<a href="[@field:myLinkedInfieldname]" target="_blank"><i aria-hidden="true" class="fa fa-linkedin-square"></i></a></div>

For example, if [@field:myFacebookfieldname]=null then I need to hide (display:none) that hyperlink so it- the font awesome icon- doesn't show. 

I'm not a js expert so I hope someone here could help get this to work. Many thanks in advance. 

I was trying something like the below, to put the 'section1' attribute into the hyperlink above but that's not correct... 

<script>
   var v_fbook = parseFloat(document.getElementById("EditRecordmyFacebookfieldname").value);

if(!isNaN(v_fbook))

{
  document.getElementById('section1').style.display = "block";
}
else
{
  document.getElementById('section1').style.display = "none";
}
</script>

 

Link to comment
Share on other sites

Ok I got this to work finally. Here's the solution, if anyone needs it: 

First, in an html block you'll want the code for the font awesome links. I have 2 versions: one for the 'live' link (has a value in the Facebook field and therefore a valid url to hyperlink to) and one for a 'dead' link (meaning the Facebook field is blank/null and I want to display the font awesome icon but not hyperlink or have an on-hover to). 

In the html block with the font awesome icons put a style so you can change the look of the icon, depending on whether there is a hyperlink or not. This can be any kind of styling but I kept it simple:

<style>
.icon-a {
    color: #888;
    font-size: 22px;
} 

.icon-b {
    font-size: 22px;
} 

</style>

Now you want the font awesome icon code, in the same html block. I put them in a table because their are a number of other elements I'm organizing- but basically this is the part that's relevant:

<table style="width:100%;">
<tbody>
<tr>
<td class="cb_tdb" style="text-align:left;height:40px;width:100%">
<a href="[@field:myFacebookfieldname]" target="_blank"
<input id="section1" type="reset" value=<i aria-hidden="true" class="fa fa-facebook-square icon-b"></i></a><span id="section2" <i aria-hidden="true" class="fa fa-facebook-square icon-a"></i></span></td>
</tr>
</tbody>
</table>

Now in the datapage's footer you'll want some javascript to read the field value for blank/null and do the if/else:

<script>
   var v_fb = document.getElementById("EditRecordmyFacebookfieldname").value;

if(!(v_fb) =="")
{
  document.getElementById('section1').style.display = "inline";
  document.getElementById('section2').style.display = "none";
}
else
{
  document.getElementById('section1').style.display = "none";
  document.getElementById('section2').style.display = "inline";
}
</script>

Lastly, the field you're checking for blank/null (the 'myFacebookfieldname' in this example) needs to be present in the datapages field display but set to 'Hidden' or it won't work. 

This way of doing it should work for any kind of hyperlink button situation (font awesome or not) that needs a different thing to happen if a field is null or not null. 

Link to comment
Share on other sites

  • 6 years later...

Hi! Just sharing this tip. You can also use Font icons such as Font Awesome for labels.

To apply in the DataPage, follow these steps:
1. Insert Header and Footer. In the Header, insert the installation CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js"></script>

2. Search your icon here: https://fontawesome.com/v5/search?o=r&m=free&s=solid
3. Copy code snippets such as <i class="fas fa-users"></i>
4. Paste the code in Labels or any HTML code where you like to add an icon.

Sample Result:

Icon.jpg?ver=1

References:
- https://fontawesome.com/
- https://cdnjs.com/libraries/font-awesome

Link to comment
Share on other sites

  • 4 months later...

Hi! In addition to having Font icons such as Font Awesome for labels, you can also apply this in the Header in the Results Page of Report DataPage.

To apply in the DataPage, follow these steps:
1. Insert Header and Footer. In the Header, insert the installation CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js"></script>

2. Search your icon here: https://fontawesome.com/v5/search?o=r&m=free&s=solid
3. Copy code snippets such as <i class="fas fa-users"></i>
4. Paste the code in Labels in the Header where you like to add an icon.

image.png

Result:

image.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...