I am working with multiple DIVs, each containing text, a java applet (unfortunately...) and buttons. I am currently creating a search function to dynamically show and hide these DIVs. However, whenever I use display:none on a DIV, the applet inside it seems to be destroyed immediately, as if it was taken out of the HTML code, and then recreated when the DIV is shown again. Is there a way to prevent this from happening?
Is there any way to avoid this situation?
Avoid using display: none on the div element. Instead, consider using visibility:hidden;, or apply a style that moves the applet off the visible page. Here's an example1:
<html>
<head>
<title>Hiding elements from view</title>
<style type='text/css'>
.plain {
}
.hidden {
position: absolute;
left: -1200px;
top: -1200px;
}
</style>
<script type='text/javascript'>
function show() {
document.getElementById('target').className='plain';
}
function hide() {
document.getElementById('target').className='hidden';
}
var count=0;
function increment() {
count++;
document.getElementById('output').value=count;
}
window.setInterval(function(){increment()}, 1000);
</script>
</head>
<body>
<h1>Move the element off page</h1>
<input type='button' value='Hide' onclick='hide();'>
<div id='target' style='background-color:#F00;'>
<input id='output' type='text' size='4'>
</div>
<input type='button' value='Show' onclick='show();'>
</body>
</html>
Unfortunately, the behavior you mentioned is exactly what we see in browsers nowadays.
You can hide the applet, but simply hiding its parent div won't do the trick.
To achieve this, separate the web UI elements from the applet's div. You can hide the web UI elements using "display: none" as you described. To hide the Java applet, set the style to "width: 0px; height: 0px" on the applet element.
Remember to set the width and height of the applet's style, not the attributes.
An example of a hidden applet element:
<applet id="myHidableApplet"
width="600px" height="400px"
style="width: 0px; height: 0px;">
A visible group example:
<div id="group1">
<applet id="group1applet"
width="600px" height="400px"
style="width: 600px; height: 400px;">
<param> etc... </param>
</applet>
<div id="group1ui" style="display: block">
<input name="Name" type="text" />
</div>
</div>
When hiding the group, transform it like this:
<div id="group1">
<applet id="group1applet"
width="600px" height="400px"
style="width: 0px; height: 0px;">
<param> etc... </param>
</applet>
<div id="group1ui" style="display: none">
<input name="Name" type="text" />
</div>
</div>
This distinction between element attributes and style attributes was discovered while trying to deploy a hidden applet for JavaScript interactions without a UI. This approach is sometimes known as JAHA (JavaScript And Hidden Applet).
Key points to remember:
One way to position an iframe on top of the applet is by using some simple css and adjusting the color to match your background. Check out this example here: http://jsfiddle.net/tQL93/3/
<iframe id="iframe_shim" class="iframe_shim" frameBorder="0">
</iframe>
<div class='applet'>
</div>
<button id='hideBtn' type="button" title="Hide Applet" style="width:100px;"
onclick="hideApplet();">Hide</button>
function hideApplet(){
var el = document.getElementById('hideBtn');
if (el.innerHTML == 'Hide'){
el.innerHTML = 'Show'
document.getElementById('iframe_shim').style.display = 'block'
} else {
el.innerHTML = 'Hide'
document.getElementById('iframe_shim').style.display = 'none'
}
}
When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover. card: { maxWidth: 350, height: 300, '&:hover': { backgroundColor: '#373737 !impor ...
Currently, I am engaged in building an Angular front-end application, aiming to keep things simple without relying on tools like breeze or restangular while still maintaining code integrity. However, I have noticed that my code tends to become overly compl ...
Hey there! I'm currently experimenting with creating a wave effect using CSS, specifically utilizing 'before' and 'after'. However, I've encountered an issue where I can't seem to position my waves correctly at the top a ...
I'm working on a project where I need to always set the caret position at the end of the text. By default, this works fine but when dynamically adding text, the caret position changes to the starting point in Chrome and Firefox (Internet Explorer is s ...
My challenge is to extract the header from this website, by adding an additional class when the user scrolls at a position greater than 0. I thought it would be easy, but Java always presents problems for me. Here’s the code I came up with: <!DOCTY ...
My goal is to create responsive images with a fixed height. Below is the HTML code I am using: <div class="col-md-6"> <div class="img"> <img src="http://image.noelshack.com/fichiers/2016/16/1461065658-b-v-s.jpg"> </div&g ...
I'm attempting to incorporate content loading between fadeOut and fadeIn. When I execute the code below, the content loads before the fadeOut is complete: $("#contentArea").fadeOut(1000); $("#contentArea").promise().done(); $("#contentArea").load(c ...
In my application, I am working with a user object that looks like this: let user = {name: "John", dob:"1995-10-15", metadata: {}} The metadata property of the user object is initially empty. I want to add a new property to the metadata object based on u ...
Hey there, I'm currently trying to determine how to set the background-color on a paragraph or h1 so that it only appears behind the words and not across the entire page with blank space. I'm still a beginner when it comes to coding. I'm wor ...
I want to create a rect on a canvas with a slightly transparent background, but I don't want the drawn rect to have any background. Here is an example of what I'm looking for: https://i.stack.imgur.com/axtcE.png The code I am using is as follo ...
I'm running into issues trying to set up OrbitControls in my Angular2 project. I managed to display a scene with a box, but I'm struggling to move the camera. Upon investigation, I found that my OrbitComponent, responsible for defining orbit con ...
As a newcomer to HTML, CSS, and JS, I am currently embarking on the task of creating a personal website for a course project. One of the pages on my website showcases a timeline featuring dates and information. While I have referred to a tutorial on W3scho ...
Running selenium tests created on a Windows machine, but switching to the linux version of the driver and adding it to the PATH resulted in an org.selenium.NoSUchSessionException error every time. Using the latest browser with the latest driver installed. ...
I am currently working on creating a custom HTML directive using AngularJS that will allow me to display Markdown content in the browser. My goal is to have a <markdown> element with a src attribute that will dynamically load and render the specified ...
My dilemma is this: I have a simple static page that does not require JavaScript. Using vue-cli 3, I am attempting to pass the HTML file through webpack for minification purposes. Unfortunately, it seems that accomplishing this task is not as straightforwa ...
My experience with nodemon has been smooth for the past few months. However, today I encountered an error that I couldn't resolve. Despite uninstalling and reinstalling nodemon, as well as force installing it, I still received the same error message w ...
I'm looking to create a unique hover effect for my images. I have both a desaturated version and a full color version of the same image. My idea is to have mousing over the desaturated image reveal a circle spotlighting the color version underneath, a ...
I have taken over a project that was built using an older version of react, and I am currently in the process of updating it. However, I encountered console errors right off the bat. Error : bundle.js:6263 Warning: The "menuItems" property of the "Left ...
I am working on an HTML code snippet that includes a form input for audio link. However, when I try to enter a URL in the input field and submit the form, I encounter the following errors: <div class="inner-content-linkaudio"> <label for="linka ...
I am struggling with a div that contains a PDF object and draggable text: <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drop(ev) { alert("DROP"); } </script> </head> <body> <di ...