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?
Related
I have made a button and when it is clicked the colors of my website will change (which works fine). However, when a link is clicked or the page is refreshed it will not save the new css color values, it will just go back to how the page looks by default.
Please let me know how I can save these values so it will not change on page refresh or when a tab is clicked. I appreciate any help you can give :)
Thank you!!
function toggleDarkLight(event) {
var body = document.getElementById("body");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}
<body id="body" class="light-mode">
<button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode">dark</button></body>
You should use localStorage
document.body.onload=function(){
var mode = localStorage.getItem("mode")=="" ? mode="light-mode" : mode=localStorage.getItem('mode');
var body = document.getElementById("body");
body.className = mode;
}
function toggleDarkLight(event) {
var body = document.getElementById("body");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
localStorage.setItem("mode",body.className)
}
this is my jquery code:
jQuery('.print_btn').hide();
var contents = document.getElementById("print_page").innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = (frame1.contentWindow) ? frame1.contentWindow : (frame1.contentDocument.document) ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head><title></title>');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
frameDoc.focus();
frameDoc.print();
document.body.removeChild(frame1);
}, 500);
jQuery('.print_btn').show();
return false;
I search on google but i did not find any solution so i am posting this question.
I have a pop which is having image and a print button , i want to print the image on click on print button.
This working fine on web browser means on desktop, But it is printing whole page and pop-up image , and on i pad it is printing nothing .
Why this is happening i don't know please help me out.
Unfortunately .print() isn't supported on Android devices. You could however use Googles cloud print API: https://developers.google.com/cloud-print/docs/gadget
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.
I have individual three arrows. on click; I want the div below them (letsChat) to change styles and I want to clone and append relevant information in that div. I also want it to revert back to it's original state when it is clicked again or if orientation is changed to portrait.
document.querySelector('#compositionArrow').onclick = function(){
var letsChat = document.querySelector('.lets-chat');
var letsChatButton = document.querySelector('.lets-chat a');
var compositionArrow = document.querySelector('#compositionArrow')
var compositionText = document.querySelector('.composition-text');
if (letsChatButton.style.display='flex' && window.matchMedia("(orientation: landscape)").matches) {
compositionArrow.style.transform='rotate(180deg)';
//letsChat.appendChild(compositionText).cloneNode(true);
//compositionText.clone().appendTo.letsChat; return false;
document.querySelector('.composition-text').clone().appendTo(document.querySelector('.lets-chat'));
letsChat.style.background='#00BCD4';
letsChatButton.style.display='none';
}
else if (letsChatButton.style.display='none' || window.matchMedia("(orientation: portrait)").matches){
compositionArrow.style.transform='rotate(180deg)';
letsChat.style.background='#ff8f00';
letsChatButton.style.display='flex';
}
}
example can be found below: (you may have to play with window
artpenleystudios.com
Here's something that demonstrates part of what you asked. It doesn't take into account orientation change, but it handles the click part. As far as I know, there's no straightforward way to detect orientation change, but here's an article that talks about a few options. Another idea would be to use jQuery Mobile as it fires orientationchange events.
So after much back and forth and after looking at your site more closely, this is what I managed to cobble together.
jQuery('#compositionArrow').click(function() {
var $letsChat = jQuery('.lets-chat');
var letsChat = $letsChat[0];
var letsChatButton = $letsChat.find('a')[0];
// Remove old composition text if it exists.
$letsChat.find('.composition-text').remove();
if (letsChatButton.style.display !== 'none' && window.matchMedia("(orientation: landscape)").matches) {
this.style.transform = 'rotate(180deg)';
$letsChat.append(jQuery('.composition-text').clone());
letsChat.style.background = '#00BCD4';
letsChatButton.style.display = 'none';
}
else if (letsChatButton.style.display === 'none' || window.matchMedia("(orientation: portrait)").matches) {
this.style.transform = '';
letsChat.style.background = '#ff8f00';
letsChatButton.style.display = 'flex';
}
});
It works for me in FireFox on a downloaded version of your site.
Cheers!
I have a javascript widget which fetches articles from Wikipedia through MediaWiki API (http://en.wikipedia.org/w/index.php?title=Main_Page&action=render). It's an app for Samsung Smart TVs. Now the text part works fine, but it won't display any images because the img src is structured like this:
"//en.wikipedia.org/wiki/File:example.jpg"
and I've come to realize by using a PC emulator that the Samsung firmware converts it to this type of full url:
"file://localhost/en.wikipedia.org/wiki/File:example.jpg"
Is it possible to add "http:" to the src so that the app points to the correct links hence displaying both thumbnails and full-size images?
Here's the relevant part of the js code:
UIContents.showImage = function(srcURLFromWikiPage, showHigherResolution) {
// alert("UIContents.fillDescription()");
var cutURL = srcURLFromWikiPage;
//document.getElementById('UIContentsImgFrameiFrame').href = srcURL;
//window.frames.UIContentsImgFrameiFrame.location.href = srcURL + "#file";
//prepare link for full-size picture:
//cutURL = cutURL.replace('thumb/','');
//cutURL = cutURL.substring(0, cutURL.lastIndexOf('/'));
//show preview thumb version
//if (cutURL.match(/\.svg$/)) cutURL = srcURLFromWikiPage;
alert('img src: ' + cutURL);
//show preview thumb version
var elemImg = document.getElementById('UIContentsImgFrameImage');
document.getElementById('UIContentsImgFrame').style.display = 'block';
//set image source
if (showHigherResolution == true) elemImg.onload = 'UIContents.resizeImage()';
elemImg.alt = 'loading...';
elemImg.src = cutURL;
elemImg.style.visibility = 'hidden';
elemImg.style.visibility = 'visible';
imageViewIsOpened = true;
document.getElementById('UISearchField').style.visibility = 'hidden';
document.getElementById('UISearchTextInput').style.visibility = 'hidden';
Any suggestions? Thanks in advance.
var cutURL = srcURLFromWikiPage.replace("file://localhost/","http://");