How to hide elements of an external widget on my website - javascript

I am trying to instal a chat widget in my website and I would like to hide certain elements of the chat widget.
The chat is provided by Tidio but I guess this apply to any widget.
I am specifically trying to hide a button that minimise the chat button as highlighted in the image below.
I have inspected the button and found out that button has a class exit-chat, so I run this script where I try to get the button with document.getElementsByClassName("exit-chat") however the document is somehow null. I have also tried to add a delay before getting the button but it does not work.
Here is the code I have written and here is the link to a codepen
<script src="//code.tidio.co/fouwfr0cnygz4sj8kttyv0cz1rpaayva.js" async="async"></script>
<!-- Swap your javascript code above -->
<script>
(function() {
function onTidioChatApiReady() {
(function() {
//code run after the widget is loaded
window.tidioChatApi.open();
const loading = document.getElementsByClassName("loading");
loading[0].style.display = "none";
const tidioo = document.getElementById("tidio-chat");
tidioo.style.display = "display";
var timeoutInSeconds = 2;
setTimeout(function() {
console.log("timeout");
const minimizee = document.getElementsByClassName("exit-chat");
console.log(minimizee==null);
minimizee[0].style.display = "none";
minimizee[1].style.display = "none";
}, timeoutInSeconds * 1000)
})();
}
if (window.tidioChatApi) {
window.tidioChatApi.on("ready", onTidioChatApiReady);
} else {
document.addEventListener("tidioChat-ready", onTidioChatApiReady);
}
})();
</script>
<div class="loading">
<p>Loading...</p>
</div>
Can you please help to understand where I get this wrong and explain how to hide that button?
Thanks!!

If you embedded an iframe that is hosted in another website, you will not be able to edit the style of the elements inside the iframe by adding CSS to your website.

Related

Function to hide form fields from external script

I'm using a web page which contains a form loaded with an external script using the command 'script src'.
I created a function to populate some fields from url parameters and also hide some of them.
Here is the code.
<script type="text/javascript">
<!-- Hide Form Field -->
function hideFormField(name) {
var list = document.getElementsByName(name);
for (i = 0; i < list.length; i++) {
list[i].style.display = 'none';
list[i].style.visible = 'false';
list[i].type = 'hidden';
}
}
<!-- Customize form -->
function CustomizeForm()
{
// Set Field Value
hideFormField('custom_11');
hideFormField('custom_12');
hideFormField('custom_13');
hideFormField('custom_14');
hideFormField('custom_15');
}
// call it
CustomizeForm();
</script>
The fields are populated but not hidden.
When I debug, the form fields appear to disappear briefly but then they reappear.
It looks like the form is being refreshed afterwards.
To hide fields, which specific command is best and should I use out of those three? I'm tried them separately but it didn't seem to solve my problem.
field.style.display = 'none';
field.style.visible = 'false';
field.type = 'hidden';
Where should I put the call to the function to hide fields?
Assuming I don't control where the code is being added exactly in my designer (only in which section: header, body or footer), is there another alternative that would work every time? For example, can I attach to an event (which one) that might get called after all the loading and refresh is done.
Can I somehow debug or trace what is happening and why the fields do reappear?
Thank you in advance!
it's visibility not visible, try:
list[i].style.visibility = "hidden";

Hide a javascript created div until all content is rendered

So I have a mobile webpage that needs to get some content from the web to be displayed in a modal. The modal itself is created via Javascript which is a div container which is set to display:none when closed.
<body>
Display this content:
<button onclick="displayModal()">display</button>
<script type="text/javascript">
var htmlContents = "<div>some pretty heavy content</div>";
var modal = //some code to create the modal div element.
modal.style.display = 'none';
function displayModal() {
modal.innerHTML = htmlContents;
modal.style.display = 'block';
}
</script>
</body>
Then the user clicks a button, then we populate the innerHTML of the div with some HTML and then switch the modal to display: block
The problem here is that the contents we're adding to innerHTML may be pretty heavy. Lots of images and css which may take some time to render (1 or 2 seconds on old devices). However, they start poping up into the view one by one. So the user may see images and divs out of place while things render.
Is there any way to switch the modal to visible ONLY after all the contents have been rendered offscreen.
P.S: This is written on pure javascript (no jquery or any other library since performance is a concern).
I think there are a couple of ways you could do this. I think if you move the modal.innerHTML = htmlContents out of the displayModal() function you could get the images and modal contents to load before the user clicks on it. So it would look like this:
<body>
Display this content:
<button onclick="displayModal()">display</button>
<script type="text/javascript">
var htmlContents = "<div>some pretty heavy content</div>";
var modal = //some code to create the modal div element.
modal.style.display = 'none';
modal.innerHTML = htmlContents;
function displayModal() {
modal.style.display = 'block';
}
</script>
</body>
I also found this jQuery library that may help, it seems like a lot of people are using it:
https://github.com/desandro/imagesloaded

Add Youtube Subscribe Button using Javascript

I am attempting to add a youtube subscribe button dynamically to my site like so:
<script src="https://apis.google.com/js/platform.js"></script>
<div id="youtubeContainer"></div>
...
window.onload = function() {
document.getElementById("youtubeContainer").innerHTML = ('<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>');
}
But the button is not visible. I am wondering if there is a way to load a youtube subscribe button dynamically so I can enter a new channel name/id?
It is already working. I think problem in other code of your page.
<script src="https://apis.google.com/js/platform.js"></script>
<div id="youtubeContainer"></div>
<script>
document.getElementById("youtubeContainer").innerHTML = ('<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>');
</script>
JSBIN
[EDIT]
With window onload :
function renderYtSubscribeButton(channel) {
var container = document.getElementById('youtubeContainer');
var options = {
'channel': channel,
'layout': 'default'
};
gapi.ytsubscribe.render(container, options);
}
window.onload = function() {
renderYtSubscribeButton("GoogleDevelopers");
}
</script>
JSBIN
Many Youtubers having their personal websites want to add channel subscription button on their website, Below is the step by step guide on adding a youtube subscribe button on your website.
Step 1) Go to https://developers.google.com/youtube/youtube_subscribe_button.
Step 2) Enter your Channel Id in the text box.
Step 3) Select the Layout of Button
Step 4) Select the Theme.
Step 5) Subscriber Count(shown or hidden)
Step 6) Get the code & paste into your Website.
Read More..How to add Youtube Subscribe button in Javascript

JavaScript Scroll Script - Fires in test, not on dev site

My script to replace the logo upon scroll works here in the test 'http://jsfiddle.net/timsalabim/opek5mtz/`
<!-- Logo Scroll -->
var img = document.querySelector('.logo_h__img img'); // get the element
img.dataset.orig = img.src; // dataset
document.addEventListener('scroll', function (e) { // add the event listener
if (document.body.scrollTop > 0) { // check the scroll position
img.src = img.dataset.scroll; // set the scroll image
} else {
img.src = img.dataset.orig; // set the original image back
}
});
It does not work when implemented exactly the same way in to the website, I think I have tested it correctly and it is firing too....
I put the script in to my site in the <head> </head> tags located in the header.php file (Wordpress website) inside these tags:
<script type="text/javascript"> </script>
I also didn't forget to add this section the image tag:
data-scroll="http://"
Is it possible that the navigation is set up in a way that the logo which is nested next to it doesn't recognise a scroll?
**** UPDATE ****
Here is my dev site: http://dev.greenlabit.com.au/Test/
I tried some other JS and got it to work!
It stopped functioning when the fixed navigation bar was in use.
Thank you for all of your help.

iPhone Web App Div Tag Loading in Safari

I have a web app for iOS devices. I have a pesky link that calls a javascript function to show and hide the div layer. however, instead of performing this javascript show/hide in the webapp view, it closes and loads the page and javascript in safari.
I want it to execute the javascript in the webapp view. I know it is possible because i have other javascript running on the page successfully, however it is not called by a link.
Here is my Javascript:
<script language="javascript" type="text/javascript">
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("optionpanel").style.visibility;
if(divstyle.toLowerCase()=="visible" || divstyle == "")
{
document.getElementById("optionpanel").style.visibility = "hidden";
}
else
{
document.getElementById("optionpanel").style.visibility = "visible";
}
}
</script>
Here is the link that calls my Javascript:
Menu
And finally, here is my div layer:
<div id="optionpanel" style="visibility:hidden">
content here
</div>
Did you tried o add 'return false' on the end of the function showHideDiv() and fix call:
Menu
I also encourage you to try jqtouch or jquery mobile or any other framework for iOS which gives you support for things like tapping screen events.

Categories

Resources