Been working on the same problem and am now trying to use a different solution using visibility:hidden; visibility:visible; . The issue I am having is not making something visible or hidden, but rather combining two elements to play off each other. For example here is what I have:
<div id="external"></div>
<div>
<img src="../../images/labortab.png" style="float:left; width:38px; height:125px;" id="labor" onmousedown="document.external.visibility='false';document.external.visibility='true';"/>
<img src="../../images/odctab.png" style="float:left; width:38px; height:125px;" id="odc" onmousedown="document.external.visibility='true';document.external.visibility='false';"/>
</div>
When I click on the first image or button, I want the external div to switch from its current state of visible to off and replace that div with another element already in the div that is hidden, switching this element to true and holding it there.
Then I want the second image or button to do the exact opposite switching the states from off to visible of the first element and then turning the 2nd element off. I am not good at writing JavaScript code and reading some of the solutions online are Greek to me. So if anyone understands what I'm trying to do would be much appreciated.
It looks like you are trying to toggle the visibility of the div based on a click event to one of the images. Try using the event onclick instead, and correctly reference the div's DOM properties:
document.getElementById('external').style.visibility='hidden';
Here is an example.
You're probably better off using style.display='hidden' instead of the the visibility property. That would look something like this:
document.getElementById('id').style.display = 'hidden'
to hide
and
document.getElementById('id').style.display = 'block'
//or inline or inline-block as needed
to show again.
Related
I am looking to change the background of one class of div's called "grid-light" when I hover over a link on the page. I feel my JS is correct but I am not getting the result I am looking for. Here is my code:
grid-light
JS
an element to hover over
class to change "grid-light" to
https://gyazo.com/f36d9970fa6100e2ac9af41a1d2d7a59
This link shows you what i think you're going for, you declare your variables,
on mouse over of your link1, it will change div1 items to red
on mouse out of your link1, it will change div1 back to black
Please let me know if i can clarify more!
It looks like you're trying to use the elements like jquery, and className is a React thing.
div1.className = "div1hovered";
Instead with javascript you can access the classList:
div1.classList.add("div1hovered");
Also recommended to do this with CSS:
div1:hover {
background-color: red;
}
Is adding a display:inline all that is needed for the browser display to treat the <div> as a nonexistent element (do want to consider everything inside the div though) in HTML?
I was thinking of having this div simply as a placeholder to put content into it from javascript and I was wondering whether it would be a good idea to make it display:inline
NOTE By nonexistent I mean that if the user says he wants to display the following on the page
<something here>
<something else here />
....
</something here>
Then the end result on the UI would be exactly what he wanted. Putting a div around it currently is adding a newline between this and other things.
I add this divs around something the user (the user being the programmer that is using the functionality I write) outputs in a function. I want to keep this divs completely invisible to the user. Currently there is a new line injected at times. For example there is a newline in between the two buttons
<div>
<button>Something</button>
<div>
<button>Else</button>
</div>
</div>
As long as you haven't styled the div with any width, height, margin, or padding you can leave it as is. No need to add "display: inline;". It's natural display: block; is just fine and won't take up any space as long as it is empty.
Then, if you inject content with, say, javascript the div will grow to fit the inside content.
Apparently a div has some display properties by default in the browser. Using a tag like <placeholder> seems like a good alternative that does not affect the UI at all.
Situation
I have this glass shatter effect simulation that involves some basic javacsript code and right now it works fine; When you click on the logo, the glass shatters accordingly and then a new unshattered logo re-appears in its place.
Take a look at the jSFiddle here:
https://fiddle.jshell.net/9n9ft9ks/3/
Problem
Right now, there's only one logo on the page. I need there to be more than one logo, probably like five (of the same Floyd's autoglass logos) all on the same page, all with the same onClick glass shatter effect. But when I try to do this myself - put more than one (of the same logo) on the page, the code just breaks.
How I tried to fix it
The logo with the glass shatter effect is a div called "#container". So since I want more than one of these logo's on the page, I tried just duplacting "<div id="container"></div>" a bunch of times in the HTML code. That didn't work:
https://fiddle.jshell.net/9n9ft9ks/5/
So I tried changing the div id into a div class and I edited all the appropriate javascript & CSS lines that needed to be changed like:
document.getElementById('container');
to:
document.getElementsByClassName('container');
and
#container: {} to .container{}
But that didn't seem to work for me either. The logo doesn't even show up on the page anymore after making these changes, take a look here: https://fiddle.jshell.net/9n9ft9ks/4/
Summary
I have a logo with an onClick glass shatter effect. There is only one logo on the page. I need there to be more than one on the page, but can't seem to get it to work myself... If anyone could take a look at the code and try to get it to work so there is more than one logo on the page, i would appreciate it so much! Here is the original jSfiddle one more time: https://fiddle.jshell.net/9n9ft9ks/3/
You cannot use a single ID multiple times on the same page.
Use a class instead:
CSS:
.className {
/* attributes: values; */
}
HTML:
<div class="className"></div>
In your attempt, try changing the getElementByClassName for $('.container') and then replace the appendChild by append.
I made it work, but it was a bit messy, it would need more CSS to make the logos not overlap one over each others.
(You can add a style on the second div to see the multiple logos, ex: <div class="container" style="left: 50px;"></div>)
Here's the jsfiddle: https://fiddle.jshell.net/9n9ft9ks/7/
I am creating a small application where I am displaying some text wrapped in 3 divs so I am actually displaying 1 div at a time also there are prev and next buttons for users to toggle between the div's. Now when javascript is turned off i just want to display 1 div without the prev and next buttons. I have and idea that it can be done with javascript by manipulating the CSS like.
document.getelementbyid("id1").style.display="visible";
document.getelementbyid("id1").style.display="none";
Thanks
You could use the <noscript> tag to both define the styles of the scripted elements and display your alternate div instead:
<noscript>
<style type="text/css">
#scripted-div1, #scripted-div2, #scripted-div3 { display:none; }
</style>
<div>
<!-- Alternate content goes here -->
</div>
</noscript>
Arrange your default page view as it would be displayed with javascript turned off, and then, if it is on, you will be able to add desired elements into desired positions.
You can set those div's to display:none; (in CSS) by default, add id for both, and after page load set document.getelementbyid(..).style.display="visible"; (in JavaScript)
PS. u could use jquery or other, will be much more easy ;)
try this:
[style]#prev, #next { display:none; }
[js]
function showButtons()
{
document.getElementById('next').style.display="block";
document.getElementById('prev').style.display="block";
}
[html]
body onload="showButtons()">
div id="next">next..
div id="prev">prev..
This way without JS prev/next wont be displayed, and with JS they will show after page loads.
Maybe you could set the style inside a noscript tag.
Also, perhaps you should accept previous answers and respect the answers other have given you.
This question already has answers here:
HTML/CSS: Make a div "invisible" to clicks?
(5 answers)
Closed 7 years ago.
I'm trying to overlay a element on top of a webpage (to draw arbitrary graphics), and I've come to the point where I can stack it inside of a element on top of everything, but this prevents the user from clicking on any links/buttons/etc.
Is there a way to have its content float on top of everything (it's semi-transparent, so you can still see what is behind) and have the user interact with the layer below it?
I've found a lot of information on the DOM event model, but none of it addresses the problem where the buttons and other "native" controls never seem to get the clicks in the first place.
A silly hack I did was to set the height of the element to zero but overflow:visible; combining this with pointer-events:none; seems to cover all the bases.
.overlay {
height:0px;
overflow:visible;
pointer-events:none;
background:none !important;
}
Add pointer-events: none; to the overlay.
Original answer: My suggestion would be that you could capture the click event with the overlay, hide the overlay, then refire the click event, then display the overlay again. I'm not sure if you'd get a flicker effect though.
[Update] Exactly this problem and exactly my solution just appeared in this post: "Forwarding Mouse Events Through Layers". I know its probably a little late for the OP, but for the sake of somebody having this problem in the future, I though I would include it.
For the record an alternative approach might be to make the clickable layer the overlay: you make it semi-transparent and then place the "overlay" image behind it (somewhat counterintuitively, the "overlay" image could then be opaque). Depending on what you're trying to do, you might well be able to get the exact same visual effect (of an image and a clickable layer semi-transparently superimposed on top of each other), while avoiding clickability problems (because the "overlay" is in fact in the background).
In case anyone else is running in to the same problem, the only solution I could find that satisfied me was to have the canvas cover everything and then to raise the Z-index of all clickable elements. You can't draw on them, but at least they are clickable...
My team ran into this issue and resolved it very nicely.
add a class "passthrough" or something to each element you want clickable and which is under the overlay.
for each ".passthrough" element append a div and position it exactly on top of its parent. add class "element-overlay" to this new div.
The ".element-overlay" css should have a high z-index (above the page's overlay), and the elements should be transparent.
This should resolve your problem as the events on the ".element-overlay" should bubble up to ".passthrough". If you still have problems (we did not see any so far) you can play around with the binding.
This is an enhancement to #jvenema's solution.
The nice thing about this is that
you don't pass through ALL events to ALL elements. Just the ones you want. (resolved #jvenema's argument)
All events will work properly. (hover for example).
If you have any problems please let me know so I can elaborate.
You can use an overlay with opacity set in order to the buttons/anchors in the back stay visible, but once you have that overlay over an element, you can't click it.
Generally, this isn't a great idea. Taking your scenario, if you had evil intentions, you could hide everything underneath your "overlay". Then, when a user clicks on a link they think should take them to bankofamerica.com, instead it triggers the hidden link which takes them to myevilsite.com.
That said, event bubbling works, and if it's within an application, it's not a big deal. The following code is an example. Clicking the blue area pops up an alert, even though the alert is set on the red area. Note that the orange area does NOT work, because the event will propagate through the PARENT elements, so your overlay needs to be inside whatever element you're observing the clicks on. In your scenario, you may be out of luck.
<html>
<head>
</head>
<body>
<div id="outer" style="position:absolute;height:50px;width:60px;z-index:1;background-color:red;top:5px;left:5px;" onclick="alert('outer')">
<div id="nested" style="position:absolute;height:50px;width:60px;z-index:2;background-color:blue;top:15px;left:15px;">
</div>
</div>
<div id="separate" style="position:absolute;height:50px;width:60px;z-index:3;background-color:orange;top:25px;left:25px;">
</div>
</body>
</html>
How about this for IE?:
onmousedown: Hide all elements which could overlay the event. Because display:none visibility:hidden not realy works, push the overlaying div out of the screen for a fixed number of pixels. After a delay push back the overlaying div with the same number of pixels.
onmouseup: Meanwhile this is the event you like to fire.
//script
var allclickthrough=[];
function hidedivover(){
if(allclickthrough.length==0){
allclickthrough=getElementsByClassName(document.body,"clickthrough");// if so .parentNode
}
for(var i=0;i<allclickthrough.length;i++){
allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)+2000+"px";
}
setTimeout(function(){showdivover()},1000);
}
function showdivover(){
for(var i=0;i<allclickthrough.length;i++){
allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)-2000+"px";
}
}
//html
<span onmouseup="Dreck_he_got_me()">Click me if you can.</span>
<div onmousedown="hidedivover()" style="position:absolute" class="clickthrough">You'll don't get through!</div>
I was having this issue when viewing my website on a phone. While I was trying to close the overlay, I was pretty much clicking on anything under the overlay. A solution that I found working for myself is to just add a tag around the entire overlay