Javascript - Insert font style from url not working on Internet Explorer(webplayer)

[sri ram]

Using Spotfire 10.3,trying to set CSS styling on a dropdown menu item. On the (Chrome browser)webplayer,the javascriptand html works fine no errors noticed.

But when the same report is loaded on IE webplayer, javascript is failing to load and no CSS is applied to the dropdown menu. Is there any work around to get it to workon both IE and Chrome or an alternate JS to inset the font style from a website.

 

Below is theJavascript I have

 

var styles = `

@import url(https://weloveiconfonts.com/api/family=fontawesome);

 

[class*=fontawesome-]:before { font-family: 'FontAwesome', sans-serif;

}

 

#selt4{

float: right;

margin: 0 0px 10px 0;

width: 48%;

}

#selt4 * {

line-height: 35px;

`

var styleSheet = document.createElement("style")

styleSheet.type = "text/css"

styleSheet.innerText = styles

document.head.appendChild(styleSheet)

 

HTML --

 

 

If I further modify the currentjavascript and use class='fontasweome-cog within tags, should getme an icon beside the action button. but fails to load on IE webplayer.

Any suggestions areappreciated

[Tyger Guzman 2]

For Font-Awesome I use the follow for spotfire 10.3 :

And it works on both Chrome and IE

JS :

 

//required css and js resources

 

var css1 = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"

 

$("", { "rel": "stylesheet", "type": "text/css", "href": css1 }).appendTo("head")HTML :

 

 

 

 

 

 

 

 

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

 

 

 

Spining Icons

 

Loading...

 

 

Loading...

 

 

Loading...

 

 

Loading...

 

 

Loading...

 

 

 

 

Stacked

 

 

 

 

fa-ban on fa-camera

 

 

 

 

Rotated and Flipped

normal

fa-rotate-90

fa-rotate-180

fa-rotate-270

fa-flip-horizontal

fa-flip-vertical

[Tyger Guzman 2]

your 

 

#selt4 * {

               line-height: 35px;

 

 

 

is missing a closing }

 

I would try the below to get it to work in both browsers

 

$("body").append("<style>
#selt4 {float: right;margin: 0 0px 10px 0;width: 48%;}
#selt4 * { line-height: 35px;}
</style>")

 

 

[Tyger Guzman 2]

I tested the below in both Chrome and IE :

 

 

$("body").append("

#selt4 {float: right;margin: 0 0px 10px 0;width: 48%;}

#selt4 * { line-height: 100px;}

")//required css and js resources

 

var css1 = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"

 

$("", { "rel": "stylesheet", "type": "text/css", "href": css1 }).appendTo("head")

[sri ram]

Hi Tyger,

 

Thank you for the response. This soultion did work for dropdown menu item on both chrome and IE.

 

But for the action button with an icon,  not able to acheive with the similar code.  

 

See the image of the action button I'm trying to achieve and my script. Would really appreciate any suggestions. 

 

JS:

 

/ Set CSS styling
var styles = `
@import url(https://weloveiconfonts.com/api/family=entypo);

[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}
#sel2 {
               width: 100%;
}
#sel2 a {
               display: block;
               float: left;
               height: 100%;
               border-radius: 5px;
               background-color: #0079c1;
               color: #FFF;
               margin: 0 10px 10px 0;
               text-align: center;
               line-height:25px;
               font-size: 12px;
               font-weight: 600;
               text-decoration: inherit;
			overflow: hidden;
			width: auto;
}

#sel2 a:active {
               background-color: #016098;
}

`

var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

 

 

 

<DIV id=sel2>
<a ><span class="entypo-home" style="font-weight: 400"></span> <SpotfireControl id="d01874153d874418ab1f04bb48aaf392" /></a>

 

 

 

 

Thanks.

[Tyger Guzman 2]

Here is an example for aButton :

HTML :

 

 

My Button

 

 

 

 

Fontawesome JS:

//required css and js resources

 

var css1 = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"

 

$("", { "rel": "stylesheet", "type": "text/css", "href": css1 }).appendTo("head")OnClick Action - HTML Click to Spotfire Control :

var input = document.getElementById("myButton1");

 

input.addEventListener("click", function(event) {

$("#" + "buttonA" + " :first-child").click();

 

});

[Tyger Guzman 2]

I posted a second answer for the button/action control. Please remeber up vote answer and approve them!