AddThis Inline share buttons <javascript> not shown in webpage - javascript

I searched for other answers but mine seems the simplest!
My web builder lets me insert Javascript, HTML or CSS snippets into the <head> and <body> source code. It seems these snippets affect all website pages.
I inserted AddThis 'inline share buttons' within the <body>:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5ebdd74910cfe8a0"></script>
For activating the buttons, I added the next code in a single web page (drag-and-drop html code tool):
<div class="addthis_inline_share_toolbox_xa65"></div>
But the share buttons are not shown on that page: http://builder.ferozo.com/reparando-todo/#!/-testing/
I've tried adding both code snippets together into the same web page but no results. It doesn't seem to be a problem related to browsers blocking an unsafe widget due to a lack of a SSL Certificate.
Any idea of what could be the problem?

Related

<iframe> automatically change height to content of <iframe>

At the moment, I am working on a website that works with Wordpress and Elementor (latest versions). I'm trying to implement an iframe using an html widget in the Elementor editor. The iframe works via an external website link (of a client) and I would like the iframe to automatically adjust in height to the content of the iframe. However, I am currently not getting this to work with the code below. In the Elementor editor itself it looks good, but on the website itself it is barely visible (due to the limited height) and it does not work. I have tried the following codes as well: height="auto", height="100%", but they didn't work either.
Does anyone know how I can fix this, please? I did try some solutions on other topics, but these didn't work either (and I'm not that good at coding). That's why I created a new topic.
The code used:
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script><script
type="text/javascript">iFrameResize({ inPageLinks: true },
'#externallinkname')</script><iframe id="externallinkname"
src="https:// externallink.com/"
width="100%" scrolling="no"></iframe>
- Note: The names of the following codes are changed, due clients privacy: #externallinkname, id="externallinkname", src="https:// externallink.com/"

Eliminating Flash of Unstyled Content (FOUC) in ASP.NET Core 5 MVC

I have an ASP.NET Core 5 MVC web application that is suffering from "Flash of Unstyled Content" (FOUC). Essentially, my styles show for a short period while the page is loading. I saw this Stack Overflow question about dealing with FOUC, and the suggestions are mainly to hide the page via CSS or JavaScript with a CSS class, then to remove that class to show the HTML after the page is done loading. This seems likes more a "trick" than an actual solution. I've also seen some suggestions to minify your CSS and compress your images. I've already done that, but I still have FOUC.
How can I avoid FOUC, specifically in an ASP.NET Core application?
For my specific case, I have all my links and my stylesheet in my primary shared layout _Layout.cshtml. I have my JavaScript at the bottom of the page after all my HTML. I do have some Razor code at the top of my page, but from my understanding, this code is ran on the server side and should not affect page load times.
You could try hiding your <html> tag with CSS, and then showing it with a JavaScript window.onload function?
<!DOCTYPE html>
<html style='display: none;'>
<head>
<script>
window.onload = function() {
document.querySelector('html').style.display = '';
}
</script>
</head>
<body>
<h1>My Content</h1>
</body>
</html>

Javascript null error when using external script in a Rails app

I am using a banner ad from an ad service provider, similar to google adsense.
Instruction from their site state clearly and simply that all we need to do is to copy the below code to the body of our webpage
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript"><!--
hsoub_adplace = [my account id];
hsoub_adplace_size = '728x90';
//--></script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
I have copied and pasted into my rails app, inside a body of a view file but the banner is not getting displayed and I can see javascript error (with browser inspect source)
TypeError: document.getElementById(...) is null
ps: On old browsers the banner is getting displayed but never on recent versions of browsers.
ps2: The support of hsoub confirmed multiple times, there is no problem from their side (their code is fine and working on thousands of websites, and my account is active with no issues). And it must be a problem from my code.. I am thinking the way Rails handles javascript...
Can you please help me solve this error and get the banner displayed.
ps3: I am using rails 6.0.1 and turbolinks 5.2.0
you can check the error/source code online at https://tafqit.com/
The problem is caused by Rocket Loader feature of CloudFlare cdn service
Rocket Loader improves paint times for pages that include Javascript.
Visitors will have a better experience by seeing content load faster
and speed is also a factor in some search rankings.
Rocket Loader improves paint times by asynchronously loading your
Javascripts, including third party scripts, so that they do not block
rendering the content of your pages.
I disabled it and banner is appearing now.
I am going to guess that this is a script positioning issue. It looks like the script is possibly looking for elements that are not rendered yet, i.e. the document and document body is not ready. Move the scripts to the end of the page i.e. after the body tags and see if that helps. Otherwise please add the exact error and perhaps show a condensed view of your page and the scripts relative to the other elements.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Hello world</h1>
</body>
<script type="text/javascript">
hsoub_adplace = 12345;
hsoub_adplace_size = '728x90';
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
</html>
I managed to get the iframe to load by moving the scripts
Scripts are (still) inside the body tags.

jquery automatic button click issue

I have an iframe on my webpage that contains a linked qwebirc webchat that automatically logs visitors into irc with a temporary nick so all page visitors can instantly chat with each other.
I need to switch from qwebirc to kiwi irc, but it doesn't support autoconnecting.
** It will be connecting to our own irc server and I understand the risk of automatically joining visitors.
Since we cannot install a custom kiwi irc installation to our web server and customize it to autojoin, I know that I'll need to use a jquery function to automatically click the start button on the linked widget in the iframe.
Here is an example of what I'm working with:
<html>
<head>
<title></title>
</head>
<body bgcolor="#000000" link="#FFFFFF" vlink="#FF0000" alink="#FFA500">
<center>
<font face="tahoma" color="#FFFFFF">The "Start..." button below needs to be automatically clicked on page visit.</font>
<br><br>
<iframe src="https://kiwiirc.com/client/irc.MYCHATSERVER.net:6660/?nick=TESTNAME-?&theme=mini#TESTCHANNEL" height="400" width="400"></iframe>
</center>
</body>
</html>
(our server and channel have been renamed for this post, so it shouldn't actually connect)
I know that the function we need to use is:
$(document).ready(function(){
$('#some-id').trigger('click');
});
but I can't seem to find the id of the button.. the only thing I can find is the following line:
<button type="submit">Start...</button>
..that I found here: http://i.imgur.com/05IFHSZ.jpg
I'm not very good with javascript, but am a very willing learner and have a bit of a problem to solve. Any advice on how to incorporate the jquery code is greatly appreciated.
Thanks!!!
You will not be able to interact with elements inside the iframe using scripts from the parent document, or vice versa. This is a security measure and not something you can circumvent.
The same-origin policy restricts how a document or script loaded from
one origin can interact with a resource from another origin.
See Same-origin policy
I took a look at the IRC page and noticed that the button that needs to be clicked—<button type="submit">Start...</button>—is always the first button on the page. Therefore, you can use the following code to click it:
$("button").first().click()
note:
Concerning what pwdst said, you cannot script cross-domain (by default). However, this jQuery library may very well be worth looking into.

Google Tracking Script causing Website Layout issues

I have installed the Google code for Remarketing Tag on my website. I have placed it in the footer of my site. The tracking is working fine, however, I have discovered a piece of the code is causing extra whitespace at the footer of my site. The snippet of code causing this is:
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
I have tried applying different CSS properties to it, but nothing seems to work. How would I keep the script on the page but it not effect my design?
I have figured it out:
<div style="display:none">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
</div>
Thanks to this posting: Google AdWords: remove iframe added by tracking conversion code

Categories