We Keep Coding

Toggle Visibility of an Uncontrollable Element in React

I have Hubspot chat script embedded in the index.html file of my React App using the <script/> tag for user communication.
Now, when a button is clicked I want the hubspot container to be hidden and then when another button is clicked I want it to be displayed again.
I do not have control over the behaviour of the chat icon because it was added to the page via a <script/> tag.
But after some digging I was able to get the id of the element so here is how I've tried toggling the visibility of the chat but it's not working for me.
const toggleHubspotContainer = (turnOn) => {
let hubSpotContainer = document.getElementById("hubspot-messages-iframe-container");
if (turnOn) {
hubSpotContainer.style.display = 'block';
return;
}
hubSpotContainer.style.display = 'none'; //The chat icon is not hiding even after this
}
Please note that the hubspot script was added in the index.html file like this
<script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/adadadad.js"></script>
Is there a way to do this properly?
Thank you.

Try this, consider your script is in header
function hideHb() {
var head = document.getElementsByTagName('head').item(0);
var js = document.getElementById("hs-script-loader");
head.parentNode.removeChild(js);
}

How to set location of iframe created by external javascript?

I am using external javascript to populate a popup when a page is loaded in my website. Like the below.
<script type='text/javascript' src='https://www.website.com/some_website_javasciprt_filt'></script>
The javascript above not only create a popup but also create a hidden iframe.
pgmr_ifrm = document.createElement('iframe');
pgmr_ifrm.id = 'pg_merchrev_track';
pgmr_ifrm.style.position = 'absolute';
pgmr_ifrm.style.left = '1px';
pgmr_ifrm.style.visibility = 'hidden';
pgmr_ifrm.src='https://d2iz0h6pqiasve.cloudfront.net/images/spacer.gif';
body.insertBefore(pgmr_ifrm,bodyfirstchild);
The problem is that the iframe stays on webpage even though I close the popup and blocks my menu buttons.
Is it possible to set the position of the iframe after the page load so that it does not block my buttons?
Thank you.

Try
$(document).ready(function() {
pgmr_ifrm = document.createElement('iframe');
pgmr_ifrm.id = 'pg_merchrev_track';
pgmr_ifrm.style.position = 'absolute';
pgmr_ifrm.style.left = '1px';
pgmr_ifrm.style.visibility = 'hidden';
pgmr_ifrm.src='https://d2iz0h6pqiasve.cloudfront.net/images/spacer.gif';
body.insertBefore(pgmr_ifrm,bodyfirstchild);
});
This will do all the code after the page has loaded.

Actually, I found much easier way of doing it.
Instead of dealing with javascript, I simply set the z-index in CSS.
Problem solved.

Multiple, unique, popup windows with JPopUp script?

I know this has probably been answered multiple times before, but this is the second time I've worked with JQuery, and I'm not entirely sure what I need to do, since I'm not familiar with this format of coding. I've looked at other, similar, questions, but none of the answers are making sense to me, and I really need this to click in my head so I can keep working.
I'm using Jpopup for this, so the script info is all there, but my question is this:
I have two areas in an image that I need to be clickable, both showing different content, but I can only call one page at a time to pop up, and multiple anchor tags just give me the same content twice. What do I need to add to that script to allow the page to show two different popups?
This is the script in my HTML page
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var source = "demo.html";
var width = 920;
var align = "center";
var top = 100;
var padding = 10;
var backgroundColor = "#FFFFFF";
var source = 'popups/demo.html';
var borderColor = "#000000";
var borderWeight = 4;
var borderRadius = 5;
var fadeOutTime = 300;
var disableColor = "#666666";
var disableOpacity = 40;
var loadingImage = "popups/loading.gif";
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup( align,
top,
width,
padding,
disableColor,
disableOpacity,
backgroundColor,
borderColor,
borderWeight,
borderRadius,
fadeOutTime,
source,
loadingImage );
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
</script>
The HTML
<div style="margin-top:200px;margin-left:395px;">
<a class="modal" href="javascript:void(0);"><img src="images/clickmelarge.png" border="0">
</a></div>

I studied the source code of the "plugin" and studied also the invoked source code of the HTML page at runtime. In my eyes this popup plugin doesn't support multiple popups at same time. Why?
Well, I used Firebug to exermine the source code at runtime and I saw only the same divs, added to the DOM tree by this. As far as I did understand when the DOM was complete loaded the author added the main divs to the DOM tree and set they all to 'hide'. If you call your function these divs will set to 'visible'.
Another reason is -in my eyes a very tricky way- the div with the Id 'blockModalPopupDiv' covers the full browser window. If you click on this element, the function of hiding all divs will be executed. You won't be have chance to click outside the div element.
So what can you do?
I think you have only three options :
Ask the author for an opportuniti to add your requirement.
Download the source code and modifiy it your self. Its created in standard Javascript.
Try to use another plugin or change your concept.

How can I dynamically create a tweet button?

I'm currently trying to create a tweet button with the horizontal count feature dynamically:
JavaScript
var twitter = document.createElement('a');
twitter.setAttribute('href', 'http://twitter.com/share');
twitter.setAttribute('class', 'twitter-share-button twitter-tweet');
twitter.setAttribute('data-url','http://mindcloud.co.uk/idea/?idea=' + this.id);
twitter.setAttribute('data-count', 'horizontal');
twitter.setAttribute('data-via', 'jtbrowncouk');
twitter.style.top = '20px';
twitter.style.left = '300px';
twitter.innerHTML = "Tweet";
The problem i'm having is that the button is being displayed as a text link, not as a button with the horizontal count box.
I've created a facebook button in the same way, which works correctly, however to make it work I use the following:
JavaScript
var facebook = document.createElement('fb:like');
facebook.setAttribute('id', 'like'+this.id);
facebook.setAttribute('href', 'http://mindcloud.co.uk/idea/?idea=' + this.id);
facebook.setAttribute('layout', 'button_count');
facebook.setAttribute('send', 'false');
facebook.setAttribute('width' , '300');
facebook.setAttribute('font', '');
facebook.setAttribute('show_faces', 'true');
facebook.style.top = '0px';
facebook.style.left = '300px';
using the following:
FB.XFBML.parse();
to parse and draw the button. FB.XFBML.parse() comes from
http://connect.facebook.net/en_US/all.js
When I create the Tweet button statically inside a .html file it works correctly. I'm including the following script within my index page where the tweet button should be created dynamically:
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
If you can see what i'm doing incorrectly please inform me!
The following screenshot gives a visual explanation to what is going wrong with the tweet button!
Solution:
I've now managed to solve the problem. The problem i'd imagine is that the twitter script is running on load, and not being re-run upon creating the element.
using the following jQuery works correctly!
$.getScript("http://platform.twitter.com/widgets.js");

It's worth noting that as of recently you can use the following twitter widget function:
twttr.widgets.load();
Assuming you've loaded the widgets.js file:
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
This will dynamically re-create the tweet button for you.

I've now managed to solve the problem. The problem i'd imagine is that the twitter script is running on load, and not being re-run upon creating the element.
using the following jQuery works correctly!
$.getScript("http://platform.twitter.com/widgets.js");

You're just using the wrong code. To specify the URL, you use url, not data-url. This works:
var twitter = document.createElement('a');
twitter.setAttribute('href', 'http://twitter.com/share');
twitter.setAttribute('class', 'twitter-share-button twitter-tweet');
twitter.setAttribute('url','http://mindcloud.co.uk/idea/?idea=' + this.id);
twitter.setAttribute('data-count', 'horizontal');
twitter.setAttribute('data-via', 'jtbrowncouk');
twitter.style.top = '20px';
twitter.style.left = '300px';
twitter.innerHTML = "Tweet";
For more details, check out Twitter's documentation at https://dev.twitter.com/docs/tweet-button#properties

Add HTML on an injected iframe

I'm currently developing a Toolbar from Google Chrome. Basically it's a toolbar that i'm injecting in every web pages by using a Content-Script. Technically the toolbar is materializd by a iframe that include all the components like button, dropMenu,... Here is the script you make this :
// Take down the webPage
document.getElementsByTagName('body')[0].style.marginTop = '39px';
var body = $('body'),
toolbarURL = chrome.extension.getURL("yourtoolbar.html"),
iframe = $('<iframe id="YourToolbarFrame" scrolling="no" src="'+toolbarURL+'">');
// Insertion
body.append(iframe);
// Effect
$("#YourToolbarFrame").hide().fadeIn(800);
But right now i'm trying to add some component on this iframe for example a button but it didn't work...
var yt = $("#YourToolbarFrame");
var newButton = $('<input type="image" src="images/pop.ico" name="InstantMessage" width="23" height="23">');
yt.append(newButton);
The body of the iframe look like this :
<body>
<div class="default">
// COMPONENTS
</div>
</body>
Hope someone can provide me some help ! :)

You have to wait until the iframe loaded. E.g.:
iframe.load(function() {
var newButton = ...;
$(this).contents().find('body').append(newButton);
}).appendTo('body');
Not sure how Chrome handles the same-origin policy for content scripts though.

Since you're using jQuery, you could try using
$('#YourToolbarFrame').contents().find('body').append(newButton);
Or if you don't want to append to the body directly, use any other element in the find() statement.