I am developing a widget for calculation of Freight.I have created two div. When we click on one div,it's display property sets to none and display property of another div is sets to block.I am facing the problem of setting animation or transition on second div like contact us and follow widgets on blogs.
<style>
#div1
{
display : block;
width : 150px;
height : 50px;
background-color : black;
}
#div2
{
widht : 150px;
height : 300px;
display : none;
}
</style>
<body>
<div id = "div1">
</div>
<div id="div2">
</div>
</body>
click handlers
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
document.getElementById("div1").addEventListener("click",function(){
if (div1 !== undefined && div2 !== undefined )
{
div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
}
});
document.getElementById("div2").addEventListener("click",function(){
if (div1 !== undefined && div2 !== undefined)
{
div2.style.display = div1.style.display === '' ? 'none' : div1.style.display === 'none' ? 'none' : 'block';
div1.style.display = div2.style.display === 'block' ? 'none' : 'block';
}
});
and I have set an onclick event on both.So help me in setting animation or transition effect on div using onclick event.
If anybody has full widget code please share with me it will be very helpful to me.
Related
I have a simple code to change the visibility of a video element:
#resetVisibility() {
const video_view = this.#visible && !this.#canvas_enabled;
const canvas_view = this.#visible && this.#canvas_enabled;
this.#video.style.position = video_view ? 'static' : 'absolute';
this.#video.style.visibility = video_view ? 'visible' : 'hidden';
this.#video.style.display = video_view ? 'block' : 'none';
this.#canvas.style.position = canvas_view ? 'static' : 'absolute';
this.#canvas.style.visibility = canvas_view ? 'visible' : 'hidden';
}
Where this.#video and this.#canvas are declared like this:
this.#video = document.createElement('video');
this.#canvas = document.createElement('canvas');
This code is working fine on all browsers I tested except on Safari.
The issue is that VideoElement.style is not changing the element style, and the video element remains visible.
But stangely enough it seems to be working for the canvas element?
// this does not work on Safari
this.#video.style.position = video_view ? 'static' : 'absolute';
// this works on Safari
this.#canvas.style.position = canvas_view ? 'static' : 'absolute';
What is the reason for this, and how can I fix this?
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>
How would you display a div/class that has already been hidden by a button after said button has been hidden due to screen resolution css using #media. This is the code for the button:
<script>
var button = document.getElementById('answer');
function showDiv() {
var div = document.getElementById('displayfilter');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
Here is the css for the screen res;
#media only screen and (max-width: 1026px) {
.displayfilter {
display: none;
}
.answer {
display: block !important;
}
}
The above works fine until the screen is returned to normal size. Thanks!
If I understood correctly the question, if the page is resized wider than 1026 and the div is hidden then show it:
window.onresize = function(event) {
if (window.innerWidth > 1026 && div.style.display == 'none') {
div.style.display = 'block';
}
};
If you want to display the div by default on large screens you need to take the displayfilter class and add display:block; to it but outside of the media query, like so:
.displayfilter {
display: block;
}
At the moment you are saying If [device width] is less than or equal to [specified #], then do {...}. Your specified device width being 1026px. You are not telling the stylesheet to display it by default so it is not being displayed.
I want to use height: auto on an angularJS ui-grid. I'm running into problems with an inline style that sets a specific height on the div that I am adding the ui-grid attribute. Also there is a function called getViewPortStyle() which is dynamically adding a height and width to the .ui-grid-viewport class.
In regards to the inline style that is being applied to the element with the ui-grid attribute, I've tried overriding with height: auto !important; on a class that is on the element. This works perfectly with the exception of the getViewPortStyle() firing when the window width or height is increased or decreased via the user manipulating the browser with mouse movement.
My thoughts are to overide ui-grid so the getViewPortStyle() function doesn't fire. I'd love a way to disable this via the the ui-grid api but I haven't been able to find anything in the docs that would explain how to do that.
Sorry if I'm all over the place on this question. I'll try and drill it down...
"How can I disable the getViewPortStyle() function from firing or override CSS that is controlling the height and width of the grid based upon the browser window?"
ui-grid getViewPortStyle function
GridRenderContainer.prototype.getViewPortStyle = function () {
var self = this;
var styles = {};
if (self.name === 'body') {
styles['overflow-x'] = self.grid.options.enableHorizontalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
if (!self.grid.isRTL()) {
if (self.grid.hasRightContainerColumns()) {
styles['overflow-y'] = 'hidden';
}
else {
styles['overflow-y'] = self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
}
}
else {
if (self.grid.hasLeftContainerColumns()) {
styles['overflow-y'] = 'hidden';
}
else {
styles['overflow-y'] = self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
}
}
}
else if (self.name === 'left') {
styles['overflow-x'] = 'hidden';
styles['overflow-y'] = self.grid.isRTL() ? (self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll') : 'hidden';
}
else {
styles['overflow-x'] = 'hidden';
styles['overflow-y'] = !self.grid.isRTL() ? (self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll') : 'hidden';
}
return styles;
};
Adding height: 100%; to the child element of .ui-grid, which contains height: auto; resolves the issue. Here's the LESS/SASS nested version, for the sake of brevity...
.ui-grid {
height: auto;
.ui-grid-viewport {
height: 100% !important;
}
}
.ui-grid-viewport { height: 100% !important; }
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.