How to Hide Bot window/iframe - javascript

My team is currently working in a Microsoft Bot Framework project. We are displaying the bot with:
<iframe src="https://webchat.botframework.com/embed/YOUR_BOT_ID?s=YOUR_SECRET_HERE"></iframe>
Our customer is asking about show/hide the bot iframe, is it possible to do using an iframe? I was trying example codes like $('#iFrameId').hidden = !$('#iFrameId').hidden on the click event of the iframe, but It's not working.
Thank you

Yes, you can hide iframe.
For example:
function hideShow() {
let frame = document.getElementById("f");
frame.style.visibility = frame.style.visibility == "visible" ? "hidden" : "visible";
}
<iframe id="f" src="https://wikipedia.org" style="visibility: visible;"></iframe>
<button onclick="hideShow();">Hide/Show</button>
UPDATE: (solution 2 from my comment) Click on iframe's border to hide iframe.
let frame = document.getElementById("f");
function hideShow() {
frame.height = frame.height == "0px" ? "150px" : "0px";
}
frame.addEventListener("click", hideShow);
#f {
border-top: #0c0 20px solid;
}
<iframe id="f" src="https://wikipedia.org" height="150px"></iframe>

Simple solution is like this:
use CSS visibility: property:-
document.getElementById("frame").style.visibility = "hidden";
document.getElementById("frame").style.visibility = "visible";
use CSS display: property:-
function toggle() {
var e = document.getElementById('frame');
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
<button onclick="toggle();">Toggle </button>
<iframe id="frame" src="https://www.w3schools.com" style="visibility: visible;"></iframe>

Related

How Do I Get A Div to Completely Clear When I Toggle?

I'm attempting to have a div that runs split screen. The left panel will have multiple links, so the simple toggle I am using is ineffective. I need to be able to clear out the right div and replace it with the next selected link. (Something similar to this
https://www.itriagehealth.com/conditions) Right now, it just stacks the selected links.
I realized I can't do this with CSS alone and am still playing with javascript, but this is the concept I have so far:
https://jsfiddle.net/od9bnez4/1/
function toggle_visibility(id)
{
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
That fiddle should work, there's just an error in your function declaration, missing the closing brace }, and then change the JavaScript execution (with the gear next to 'JavaScript') to run as a tag in the <head> or <body>, not sure why onLoad isn't working there.
Something like this will do the trick, https://jsfiddle.net/od9bnez4/3/
The heart of it is this,
var left = document.getElementById("left");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
left.addEventListener('click', function() {
if (div1.style.display == "none") {
div1.style = "display: block;";
div2.style = "display: none;";
} else {
div1.style = "display: none;";
div2.style = "display: block;";
}
});
Obviously this only works for two elements and is very procedural. Typically someone would use something like jQuery for this, or even a framework like Angular or React to build a modularized component.
This is pretty easy. JQuery makes it more flexible.
<!DOCTYPE html>
<html>
<head>
<script>
function toggle()
{
var e = document.getElementById('diva');
var f = document.getElementById('divb');
if (f.style.display == 'none')
{
e.style.display = 'none';
f.style.display = 'block';
}
else
{
f.style.display = 'none';
e.style.display = 'block';
}
}
function togglejquery()
{
if ($('#divb').css('display') == 'none')
{
$('#diva').hide(); // or slideUp('fast');
$('#divb').show(); // or slideDown('fast');
}
else
{
$('#divb').hide();
$('#diva').show();
}
}
</script>
</head>
<body onload="positionScreenBottom();">
<div style="float:left; width:40%;">
<a href='#' onclick='toggle();'>Show A</a><br/>
<a href='#' onclick='toggle();'>Show B</a><br/>
</div>
<div style="float:left; width:60%;">
<div id='diva' style='float:left;'>Here is A</div>
<div id='divb' style='float:left; display:none;'>Here is B</div>
</div>
</body>
</html>

How to toggle div?

I searched around stack overflow and I tried just about every topic - none of them worked. I'm trying to toggle the "inventory" div to block instead of none after you click the button "btnTwo". How would you do this? This is my current code:
<script>
function one()
{
var newButton1 = '<button id="btnTwo" onclick="two()" >Pick up stick</button>';
var newButton2 = '<button id="btnThree" onclick="three()">Leave it there</button>';
document.getElementById("a").innerHTML = "You feel something on the ground, and you think it's a stick."+newButton1+newButton2;
var myButton = document.getElementById('btnOne');
myButton.onclick = four;
}
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
}
function three()
{
document.getElementById("c").innerHTML="You leave the stick on the ground and continue on.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
}
function four()
{
document.getElementById("d").innerHTML="You feel a stick stuck to the wall with something like honey. Next to it is a few rocks.";
}
</script>
<div style="margin-left:15px; width:200px; margin-top:100px;">
<button id="btnOne" onclick="one()">Feel around the cave</button>
</div>
<div id="inventory" style="margin-left:255px; width:200px; height:600px; margin-top:-15px; display:none;">
Sticks:
<div id="stickNumber">1</div>
</div>
<div id="entire" style="margin-left:490px; margin-top:-22px; width:400px; height:600px;">
<div id="d"></div>
<div id="c"></div>
<div id="b"></div>
<div id="a"></div>
</div>
Change
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
}
to
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
document.getElementById("inventory").style.display = "block";
}
Updated example
Well. If you want to toggle something you just need to first check the state of the object, and apply the oposite of what is set.
var el = document.getElementById('el'); //some div
var bt = document.getElementById('bt'); // some button
el.style.display = "block";
bt.onclick = function(){
if(el.style.display == "block"){
el.style.display = "none";
}else{
el.style.display = "block";
}
}
Working fiddle
You could also use some library like for instance jquery where this would be as easy like:
$("#bt").click(function(){
$("#el").toggle();
})
Working fiddle
For your case, you just need to add below script into the bottom of function two():
document.getElementById("inventory").style.display = 'block';
I have test the code on safari and chrome.

Spot div on same position

I am trying to show hide image using javascript. Code works fine but image displays on different location. Now i want to show and hide the images on same spot.
<script type="text/javascript">
function showImage()
{
if(document.getElementById('check').checked==true)
{
document.getElementById("image").style.visibility = 'visible';
document.getElementById("images").style.visibility = 'hidden';
}
else if(document.getElementById('check').checked==false)
{
document.getElementById("image").style.visibility = 'hidden';
document.getElementById("images").style.visibility = 'visible';
}
}
</script>
<body onload="showImage()">
<font align="left">
<input type="checkbox" id="check" onclick="showImage()" />
Show Image
<div class="checkboxes" id = "image" >
<img class = "jive-image" height="125" src ="Tulips.jpg ">
</div>
<div id="images">
<img class = "jive-image" height="125" src="Desert.jpg">
</div>
</body>
How it possible?
If you use the display style you can remove the image from the page and not just hide it like visibility. This will mean the bottom image is pushed up as the first isn't taking up space any more. Set element.style.display to 'block' to show the element and 'none' to hide it.
jsFiddle
function showImage() {
if (document.getElementById('check').checked == true) {
document.getElementById("image").style.display = 'block';
document.getElementById("images").style.display = 'none';
} else if (document.getElementById('check').checked == false) {
document.getElementById("image").style.display = 'none';
document.getElementById("images").style.display = 'block';
}
}
It's because you're using visibility. CSS's visibility style doesn't affect the page flow. It's as if you were setting the opacity to 0. Instead, you may want to use display.
function showImage() {
if(document.getElementById('check').checked) {
document.getElementById("image").style.display = 'block';
document.getElementById("images").style.display = 'none';
} else {
document.getElementById("image").style.display = 'none';
document.getElementById("images").style.display = 'block';
}
};
Instead setting visibility, set display to either none or block.

Image slideshow

I am using javascript to slideshow images.Images are loaded only when the user clicks the next button i.e there is no preloading before the slideshow begins. With every image there is a supporting description which is loaded by the same javascript from an array which is stored in the javascript file. The effect of this is such that the description on next image is shown even before the image is displayed. Please suggest me some method so that i can delay displaying the desprition until the image is loaded. Also a loading symbol could be of great help. Please let me know how to do that. Thanks.
You will have to show some code and be more specific if you want more specific answers but in the meanwhile, I think this tutorial could help you out:
JavaScript Timers with setTimeout and setInterval
You need to add an event listener for the image onload event and display your text in that event handler. Unfortunately, as with everything else, not every browser works the same way in this respect. If you google image onload you will find some good suggestions.
Show that image in a dynamically added iframe and add an onload listener to that iframe to show the description only when it loads.
Here's an example:
<script>
var i;
var ifm;
var spinner;
function popupIframeWithImageInit(id, parent, initImageNumber) {
ifm = document.getElementById(id);
i = initImageNumber;
if(ifm === null) {
ifm = document.createElement('iframe');
}
if(!spinner) {
spinner = document.getElementById('spinner');
}
ifm.setAttribute('src', google_logos[i]);
ifm.setAttribute('id', id);
ifm.setAttribute('name', id);
ifm.setAttribute('height', document.body.clientHeight - 50);
ifm.setAttribute('width', '840');//width is fixed because the image is assumed to be fixed size 800
ifm.setAttribute('scrolling', 'yes');
ifm.setAttribute('frameborder', '0');
ifm.style.display= 'none';
ifm.onload = function() {
document.getElementById("description").innerHTML = pic_description[i];
ifm.style.display= '';
spinner.style.display = 'none';
};
document.getElementById(parent).appendChild(ifm);
spinner.style.display = '';
}
function next() {
ifm.src = google_logos[++i];
spinner.style.display = '';
ifm.style.display= 'none';
}
function prev() {
ifm.src = google_logos[--i];
spinner.style.display = '';
ifm.style.display= 'none';
}
function dismissPopupIframeWithImage(parentId, ifmId) {
document.getElementById(parentId).removeChild(document.getElementById(ifmId));
spinner.style.display = 'none';
ifm.style.display= 'none';
return false;
}
//use large images to see the spinner
google_logos = ['http://sharevm.files.wordpress.com/2010/03/googlevsmicrosoft300dpi.jpg',
'http://hermalditaness.files.wordpress.com/2010/01/2.jpg',
'http://tuescape.files.wordpress.com/2008/10/tous20les20logos20google20par20aysoon.jpg',
'http://isopixel.net/wp-content/uploads/2007/02/logos-superbowl.gif'];
pic_description = ['http://sharevm.files.wordpress.com/2010/03/googlevsmicrosoft300dpi.jpg',
'http://hermalditaness.files.wordpress.com/2010/01/2.jpg',
'http://tuescape.files.wordpress.com/2008/10/tous20les20logos20google20par20aysoon.jpg',
'http://isopixel.net/wp-content/uploads/2007/02/logos-superbowl.gif'];
</script>
<img id="spinner" src="http://publish.gawker.com/assets/ged/img/spinner_16.gif" style="position:absolute; left:100px; top:150px; display:none;"/>
<div style="" id="panel"></div>
<div style="" id="description"></div>
<div >
<button onclick="popupIframeWithImageInit('imagePopup', 'panel', 1);">Open</button>
<button onclick="prev();"><-- Prev</button>
<button onclick="next();">Next --></button>
<button onclick="dismissPopupIframeWithImage('panel', 'imagePopup');">Close</button>
</div

Hidden div flashing on page load

In my Rails app, I'm trying to hide a div (box) on page load in the Javascript function below. This function loops through a series of checkboxes with the same name (cb). If any of the checkboxes are checked, it should show the div.
function BoxCheck(cb,box){
var cbs=document.getElementsByName(cb);
var d=document.getElementById(box);
d.style.display = 'none';
var flag_check=0
for (var zxc0=0;zxc0<cbs.length;zxc0++){
if (cbs[zxc0].checked){
flag_check=flag_check+1
} else
{ }
}
if (flag_check > 0){
d.style.display = 'block';
document.getElementById('multi_control_spacer').style.display = 'block';
} else {
d.style.display = 'none';
document.getElementById('multi_control_spacer').style.display = 'none';
}
}
The function fires on load with:
<body onload="javascript:BoxCheck('doc_ids[]','multi_control');">
The problem is that when no checkboxes are selected, the div flashes on momentarily, and then disappears.
Here's the CSS:
#multi_control {
padding: 10px;
background: #333;
}
I tried setting the css to display:none, but then I can't seem to make it switch to back to display:block with Javascript.
Why not? Have you tried:
element.style.display = 'block';
How about putting style="display:none" into the div tag so it's hidden to begin with?

Categories