I currently have a page and a button. Upon clicking a button, I would like to update a state property, and once it has been updated, the component will rerender and show the transparent page over the original page.
Would want transparent page like so:
So far thought up of something like:
render() {
if(this.state.buttonPressed) {
return(
<div style={styles.transparentPage}>
//transparentPage content
</div>
)
} else {
return(
<div style={styles.originalPage}>
//originalPage content
</div>
)
}
But this would completely remove the originalPage and be rerendered with the transparentPage. So what would be the correct/proper approach to implementing a transparent page over an original page?
All you would need to do is have something like
render() {
var overlay = this.state.buttonPressed ? <div className="overlay" /> : null;
return(
<div style={styles.originalPage}>
{overlay}
</div>
)
}
and then in your css do:
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(250,250,250,.5);
z-index: 25;
}
just make sure your z-index of the modal is more then the overlay z-index so it doesn't make it transparent as well
Related
I have a two div which HAVE to be displayed above each others using z-index;
Both however have to react to the same click event as if the event was propergated from a child to a parent.
Is this possible in any way?
here is an example
<body>
<div id="upper" style=" position: absolute; z-index: 1; width: 100px; height: 100px; background-color: #000"></div>
<div id="lower" style="position: absolute; z-index: 0; width: 120px; height: 120px; background-color: #00f"></div>
</body>
Both should be listening to native click events since the lower sibling could hold an iframe.
EDIT For More Clerifications
The Goal is to make the youtube iframe in this example clickable as well as keep all the controls on the canvas element.
https://playground.babylonjs.com/#1DX9UE#51
Just write a Javascript event listener to click the other button when one is clicked.
document.getElementById('upper').addEvenListener('click', () => {
console.log('parent clicked')
})
document.getElementById('lower').addEvenListener('click', () => {
document.getElementById('upper').click()
})
I have a parent div, that contains multiple child divs inside it, On clicking any child element,I am trying to animate that child element from its current position to the top position according to its current parent, then after moving to the top with proper animation, I want that child element to be sticky, so that other child elements can be easily scrolled underneath it and then, if any other child element is clicked then it will animate to top and the recent child element will move back to its old position.
Any help using angular and/or html and css will be really appreciative.
I am also attaching stackblitz angular project link for my initial code.
https://stackblitz.com/edit/angular-ivy-abbnjo
Thanks
I find this question interesting, so I did a quick sample of how you can do this via jQuery. There are certainly libraries there that probably does this already, but with the interest of sharing the logic behind it, here's a quick demo in JSFiddle. It may need some more love though.
I hope this helps!
JSFiddle Link: https://jsfiddle.net/qo6x42za/1/
HTML
<div>
<div class="sticky"></div>
<div class="container">
<div class="box" data-order="1">Box1</div>
<div class="box" data-order="2">Box2</div>
<div class="box" data-order="3">Box3</div>
<div class="box" data-order="4">Box4</div>
<div class="box" data-order="5">Box5</div>
</div>
</div>
CSS
.container {
position: relative;
height: 250px;
overflow-y: scroll;
border: 1px solid #000;
}
.box {
width: 100px;
height: 50px;
padding: 20px;
background-color: #595959;
color: #fff;
border: 1px solid #c90000;
}
Javascript
$('.box').each(function(index) {
$(this).on('click', function() {
const target = $(this);
const sticky = $('.sticky');
const container = $('.container');
const position = $(sticky).position();
// after animation completes
const options = {
complete: () => {
// detach previous item from sticky container and place back to original position
if ($(sticky).children().length > 0) {
const firstChild = $(sticky).children().first();
const order = $(firstChild).data('order');
const previousChild = order - 1;
if (order > 1) {
$(firstChild).detach().insertAfter($(`[data-order=${previousChild}]`));
} else {
$(firstChild).detach();
$(container).prepend($(firstChild));
}
}
// attach item to sticky container
$(sticky).append($(target));
// remove the style attribute as we no longer need it
$(target).removeAttr('style');
}
};
// animate to position
$(target).css({ position: 'absolute'});
$(target).animate({
top: position.top
}, options);
});
})
I would like to add actions to this image
So when the user hovers over red dot, some information appears, or when clicks (modal from bootstrap appears). I am using bootstrap, and spreading divs over the image don't give normal result. I want it to be responsive. Any ideas?
there should be a onhover method for javascript on the html dom.
<div id="point1" onmouseover="doHover('point1', true);" onmouseout="doHover('point1', false);"></div>
So, you have a problem with the divs?
function doHover(id, bool) {
var obj = document.getElementById("hoverPoint"+id);
if(bool) {
obj.style.backgroundColor="green";
}else {
obj.style.backgroundColor="blue";
}
}
.hoverPoint {
position:absolute;
top: 0px;
left: 0px;
width:100px;
height:100px;
display:block;
background-color: blue;
opacity: .6;
}
#hoverPoint1 {
top: 130px;
left: 135px;
}
<img src="http://i.stack.imgur.com/sUTxI.png" style="width:777px; height:292px" />
<div class="hoverPoint" id="hoverPoint1" onmouseover="doHover(1,true);" onmouseout="doHover(1,false);"></div>
I solved the problem by deleting red dots in photoshop and then adding them using pure html (I made buttons with background image of red dots) then I placed this dots randomly on the roadmap
I'm using a JavaScript function call a pop-up window to print out my label, and the function include the CSS link. The problem is it seems that the CSS doesn't affect the printing page when I preview it, I have no idea which portion when wrong. Anyone can please give me advice?
JavaScript code:
function ConfirmButton() {
if (true) {
var prtContent = document.getElementById("<%=printing.ClientID %>");
var WinPrint1 = window.open('', '', 'scrollbars=yes,letf=0,top=0,width=400,height=430');
WinPrint1.document.writeln('<body><link href="CSS/bootstrap.min.css"rel="stylesheet" /><link href="Printing.css"rel="stylesheet" media ="print"/>');
WinPrint1.document.write(prtContent.innerHTML);
WinPrint1.document.writeln('</body></HTML>');
WinPrint1.document.title = "Test Printing";
WinPrint1.document.close();
WinPrint1.focus();
WinPrint1.print();
return true;
}
else {
return false;
}
}
CSS page name "Printing.css":
body {
background-color: red;
}
Background colors aren't rendered when printing ... and that's a good thing. A printed page has its own medium with its own background colors, unlike a screen which is much more dynamic and multi-variate. Being able to paint the canvas on a screen makes much more sense than on a page.
If, for some reason, you really wanted to print a section in red, you could wrap the entirety of your content in a container, and do some CSS wizardry like so:
<section class="page-container">
<div>All my content...</div>
<div>All my content...</div>
<div>All my content...</div>
</section>
.page-container {
position: relative;
z-index: 1;
height: 100vh;
}
.page-container:after {
content: url(data:image/png;base64,...LONG BASE64 STRING...==);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page-container > div {
position: relative;
z-index: 2;
}
Here's a fiddle illustrating the general concept, try printing it.
In Yahoo mail, when you are writing an email and you drag a file onto the page and hover, the message area becomes highlighted. It can be seen here:
The part of this that I don't get is how to have the blue area appear with partial opacity over the things under it that are normally visible.
With:
#blueBox {
background-color: #FFD090;
opacity: 0.0;
}
If the msgContent is a child of blueBox:
<div id='msgBox'>
<div id='blueBox'>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
</div>
and when msgBox is hovered I increase blueBox opacity from 0 to say 0.6, the blueBox will show but the msgContent div is hidden until the hover event. It should be visible always.
If the msgContent div is not a child of blueBox, then the blueBox doesn't cover it.
I've tried rgba (http://jsfiddle.net/mkasson/nJcxQ/19/) like here on SO, but it doesn't cover over the child elements.
Couldn't do my usual watching/inspecting via browser's webdev tools because focus was never on the browser while dragging the file onto it.
Thanks!
Here is how I would go about this,
(What the problem is, you are using the parents background. You can't make the parents background go over it's content, that is not what a background does. It merely sites behind everything it is containing and acts as a background.)
html,
<div class="messageContent">
<span class="overlay"></span>
<p>Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.</p>
This is a link
</div>
css,
.messageContent {
color: #000;
position: relative;
height: 100%;
width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background: lightBlue;
opacity: 0;
height: 100%;
width: 100%;
display: block;
z-index: 100;
}
.messageContent:hover .overlay {
opacity: 0.6;
}
What I am doing is placing an absolute span tag inside of the parent to act as the color overlay. When the parent is hovered the overlay child will become active by increasing it's opacity.
JSFIDDLE
Here's how I would do it.
<div id='msgBox'>
<div id='blueBox'>
</div>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
CSS
#blueBox {
background-color: #FFD090;
opacity: 0.0;
position: absolute;
top: 0;
left: 0;
}
jQuery
$("#msgBox").hover(function(){
$("#blueBox").css({top:$(this).css("top")}).height($(this).outerHeight()).width($(this).outerWidth()).animate({opacity:0.6});
},function(){
$("#blueBox").animate({opacity:0}).height(0).width(0);
});
http://jsfiddle.net/54cx7/2/
The problem is that since content is a child of bluebox, then it inherits the 0 opacity.