I'm trying to make a page with a background and a content div, one overlapping the other. The div with a class of "content" receives the hover event however the div with a class of "background" receives nothing. I'm not actively disrupting the event in js in any way.
.container {
height: 100%;
width: 100%;
opacity: 1;
}
.background {
height: 100%;
width: 100%;
position: absolute;
}
.content {
height: 100%;
width: 100%;
position: absolute;
}
<div class="container">
<div class="background" onmouseover="test(this)">
</div>
<div class="content">
<!-- PANELS -->
<div class="facePanel" onmouseover="hoveringFacePanel(this)" onmouseleave="hoveringFacePanelOff(this)">
<img class="imageShown" src="https://i.pinimg.com/736x/70/d4/22/70d422d5972596f603a94c0faf24a43d--advertising-design-advertising-campaign.jpg" />
<img src="https://apple.insidercdn.com/gallery/21413-24435-Screenshot_1-l.jpg" class="imageShown" />
</div>
<!-- PANELS -->
</div>
</div>
Fiddle: https://jsfiddle.net/6ardv95r/
UPDATE:
The bubbling nature of events was brought up however this doesnt answer why this behaviour still occurs even when the html is turned into this:
<div class="container">
<div class="background" onmouseover="test(this)">
</div>
<div class="content">
</div>
</div>
In this case the content class doesnt capture any hover event but still no event triggers the background class. Upon removal of the content class the background class works as expected..
Browser events work through a process called "bubbling" - they start at the most specific tag and then work their way up the tree (from child to parent to grand-parent, etc) until they reach the root tag (usually <html>).
In your case, mouseover and mouseout events get triggered inside the "content" div and bubble up, but they aren't contained within the "background" div in terms of the DOM tree, even if they are contained visually (with the content rectangle being drawn as "inside" the background rectangle).
In this case the "content" div appears after the "background" div, so it is rendered "on top" and gets all the events, while "background" gets none. If you want the background to get the events too, put the "content" div inside the "background" div.
More info on event bubbling here: https://javascript.info/bubbling-and-capturing
Related
I'm trying to create an overlay which has an outer div (half see-through) and above an smaller inner content div. Clicking on the outer area makes the overlay dissappear. Clicking on the content area should interact with the overlay content.
Looking at my example code, clicking on the red area first raises an alert "red" and afterwards an alert "black" thus closing the overlay immediatly after the first interaction.
How can I prevent the onclick event of the underlying black div to trigger when the above red div is clicked?
<div onclick = "window.alert('black')" style = "background-color:black; width:100%; height:100%">
<div onclick = "window.alert('red')" style = "background-color:red; position: absolute; top:10%; left:10%; width: 80%; height: 80%;">
some content
</div>
</div>
I couldn't find anything online about that except people setting pointer-events to none which would disable the user to interact with the overlay content.
Also setting different z-indeices didn't work either.
If you want to verify the clickthrough happening: https://onlinegdb.com/rJbOmB0FV
This is more of a javascript behaviour you're experiencing.
Bubbling
The bubbling principle is simple.
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.
Use event.stopPropagation()
Definition and Usage
The stopPropagation() method prevents propagation of the same event from being called.
Propagation means bubbling up to parent elements or capturing down to child elements.
https://www.w3schools.com/jsref/event_stoppropagation.asp
Update
A simple function will be easier to handle.
Something like this:
const alert = (text) => {
event.stopPropagation();
window.alert(text)
}
<div onclick = "alert('black')" style = "background-color:black; width:100%; height:100%">
<div onclick = "alert('red')" style = "background-color:red; position: absolute; top:10%; left:10%; width: 80%; height: 80%;">
some content
</div>
</div>
If I point the mouse within the div tag, the scrolling works, however I can't scroll the content if I point the mouse outside the box of div. Is it possible to target a specific div wherever the mouse pointer goes?
<div style="max-height: 100px;overflow-y: scroll;">
TEST<br><br><br><br><br><br><br><br><br><br>
</div>
You can do something like this.
const target = document.getElementById("target");
document.addEventListener("wheel", function(e){
// prevent the default scrolling event
e.preventDefault();
// scroll the div
target.scrollBy(e.deltaX, e.deltaY);
})
#target{
height: 100px;
overflow-y: scroll;
}
<div id="target">
TEST<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
You can register the event by yourselves. Such that you can scroll the div you want outside the div.
Those this will be tedious for you to handle if your page has multiple scroller.
By the way, to make it a bit more pretty, you need to add animation or it will move 'discretely' as following shown.
document.getElementById("scroll").addEventListener("wheel", e=>e.preventDefault());
document.getElementById("main").addEventListener("wheel", e=>myFunction(e));
function myFunction(e) {
document.getElementById("scroll").scrollTop += 0.2 * e.deltaY;
}
<div id="main" style="height:300px">
<div id="scroll" style="max-height: 100px;overflow-y: scroll;">
TEST<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
Is it possible to target a specific div wherever the mouse pointer goes?
Not really... what you probably want to do instead is to set other parts of the page to position: fixed or position: sticky. This way the main body content will scroll but some parts will remain in the same place. Stack Overflow itself does this with the top header and the left sidebar.
I have div that is like this
<div style: "display:none;">
<div class="displayMe">
</div>
</div>
I need to how to make the div displayMe show while keeping the parent Div hidden
you can use this:
//this class for parent div
.hide {visibility: hidden;}
//this class to the child div
.reshow {visibility: visible;}
It's not totally clear, where exactly you want to show the visible part of the hidden parent. Here's a pure CSS solution, which more or less replaces the parent with a child on screen.
As you can see, there's a drawback in this solution concerning the rest of the content on the page. However, setting display:none removes the hidden element taken space from the textflow, hence this is probably exactly what would happen, if it was possible to show elements inside none-displayed elements.
#wrapper {
position: relative;
height: 0px;
visibility: hidden;
}
#content {
position: absolute;
top: 0px;
visibility: visible;
}
<div id="wrapper">
Text in the wrapper<br/>
more text ...<br/>
... and one more line.
<div id="content">Some visible content</div>
This text is below the visible
</div>
<div>This is outside of invisible</div>
No, this is not possible. You could instead move/clone the child element and insert it somewhere else in the markup (e.g. via JavaScript).
var element = jQuery('.Inner-Div').clone();
and then append to any visible element that be appropriate.
element.appendTo('some element');
Example http://jsfiddle.net/xmo9bpot/
EDIT
Another clever way would be to hide all siblings of the chosen child element and in fact leave the parent visible
DEMO http://jsfiddle.net/xmo9bpot/1/
$(".child").siblings().hide();
No this is not possible, as container should be visible when you want to display its child,
explain your scenario so much relevant solution can be provided, or you can try following
If you have multiple divs inside parent div, and you want to display any one child div at a time using jquery/javscript, then you can arrange your divs as
<div>
<div id="div1" style="display:none;">
</div>
<div id="divq" style="display:none;>
</div>
<div id="div3" style="display:none;>
</div>
</div>
then write your javascript / jquery code as
if (YourCondition == 1)
{
$('#div1').show();
}
else if (YourCondition == 2)
{
$('#div2').show();
}
if (YourCondition == 3)
{
$('#div3').show();
}
Cheers !
.displayMe{display:block !important}
See this JSFiddle
I want to make the .newslink links all the way to the borders of the .content divs.
I have a slideshow of different content that gets messed up either if I set the a tag around the div or if I apply display:block / display:inline-block to the a element.
Right now the links are only around the image and text because of the 15px padding in .content. You can check this by hovering your mouse over the div (near the border) compared to over the image and text area. I want each link to completely fill the surrounding div.
Is it in this case possible to accomplish without setting the a tag around the div or applying display:block / display:inline-block to the a element?
Working Fiddle: http://jsfiddle.net/8tqryvu5/
Firstly, let's get rid of the Table markup as you're not marking up a table.
<div id="tableNews">
<div class="cell2">
<div id="slideshow">
<div class="content">
<a href="#" id="rightLink1" class="newsLink" target="_blank">
<div class="picDiv">
<img id="rightPic1" class="pic2" src="http://static3.businessinsider.com/image/5238c9c5ecad047f12b2751a/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg"/>
</div>
<div class="text">
<h2 id="title1">title 1</h2>
<p id="rightBoxSubText1">asdasd</p>
</div>
</a>
</div>
</div>
</div>
</div>
To achieve the effect you should apply the padding to the anchor link as this wraps both the images and text (essentially forming the border). Here's the part to take note of:
.newsLink {
display: block;
padding: 15px;
}
As it's an inline element you will need to set it to display:block in order to make it wrap the elements inside it. If you correctly apply the style to the surrounding elements then setting it to display:block will not effect the layout.
Hope that helps.
I am not 100% sure that I got right the whole thing but I think you can achieve this by using
.newsLink{position:absolute;top:0;left:0;bottom:0;right:0;background:red}
It will take the wodth of the slideshow, which is the relative element. If you want it to take the size of the .content and not more you will have to add a wrap in display block around you tag
Here is a jsfiddle: http://jsfiddle.net/8c041xy7/5/
You just need to absolute position anchor tag
.newsLink {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
SUPER SHORT VERSION:
Elements on a jQuerymobile-based html5 webapp don't respond directly to vclicks on an iPad. Instead, they silently scroll to the top of the page and trigger a vclick on whatever's under the same region of the screen.
LONG VERSION WITH PICTURES AND CODE:
I'm using JQuerymobile and I'm having a problem with my page responding to some vclick events when I'm using my iPad. I've got a page with a bunch of elements that are bound to respond to vclick events. If everything fits onto my iPad's display without scrolling, everything works perfectly. If I need to scroll to see the element I want to click, I get the following behavior:
I tap my finger where the red circle is here:
The page flickers and the page responds as if I clicked the area in the little blue circle:
(blue circle image redacted for lack of hyperlinks to noobs (It's Q43ri.png on imgur)
I was confused as to what the heck was happening until I superimposed the screens:
So when I click one of my divs, it seems like it's paying attention to the coordinates I click on the display, but then scrolling to the top of the window and actually executing the click from that perspective. How do I fix this?
Here's the html for that section of the page:
<div id="inventoryPageContainer" style="padding-right: 100px;">
<div id="inventoryDisplayHeaders">
<div class="inventoryPageName inventoryPageColumn header">Name</div>
<div class="inventoryPageQuant inventoryPageColumn header">#</div>
<div class="inventoryPageWt inventoryPageColumn header">Wt.</div>
</div>
</div>
<div id="inventoryTemplate" class="inventoryPageRow" style="display: none;">
<div class="inventoryPageName inventoryPageColumn">Template Item Name</div>
<div class="inventoryPageQuant inventoryPageColumn">#</div>
<div class="inventoryPageWt inventoryPageColumn">X lb</div>
</div>
<div style="clear: both; border-bottom: 2px solid black;"></div>
All of the divs are clones of that inventoryTemplate item. If you need the CSS for that (I don't know man, I'm trying to give anyone reading this all the info I've got):
#inventoryPage .inventoryPageName {
width: 100%;
}
#inventoryPage .inventoryPageQuant {
width: 50px;
margin-right: -50px;
vertical-align: middle;
}
#inventoryPage .inventoryPageWt {
width: 50px;
margin-right: -50px;
right: -50px;
vertical-align: middle;
}
Here's the event binding code:
templateCopy.find('.inventoryPageName').text(row.itemName).bind('vclick.inventoryPage', { row: row }, generateItemDescriptionDialog);
templateCopy.find('.inventoryPageQuant').text(row.quantity).bind('vclick.inventoryPage', { row: row }, generateItemQuantityDialog);
generateItemDescriptionDialog and generateItemQuantityDialog both set some values on some dialog pages and then trigger the dialog pages to show with $.changePage("#thepages").
So uh.. why's this happen and how do I make it not happen?
(It's an RPG character sheet webapp if anyone's wondering why I'm cataloging weapons and guns.)
I think my problem was how I wrote my event handlers. I went through and added:
if (event.preventDefault)
event.preventDefault();
to the beginning of each handler and made sure the handlers returned false. Admittedly, I don't know precisely what this did, so I'm cargo-culting a bit here, but it did solve the problem.