I want to have a fullscreen popup over the whole page, but I've only found that you need to place it at the body root
<body>
<div id="popup" >
...
</div>
<div id="page">
<div id="content" >...</div>
</div>
</body>
But that's not what I need. I need to have a fullscreen popup adding it inside the page.
<body>
<div id="page">
<div id="popup" >
...
</div>
<div id="content" >
...
</div>
</div>
</body>
The problem is that if I do this, the popup is not fullscreen, but it appears only over the "page" div, while I want it to be fullscreen
I added a live example https://www.w3schools.com/code/tryit.asp?filename=GS0R8SGBW8CS as you can see the popup is not entirely full screen
Remove style="margin:2rem" from popup div
https://www.w3schools.com/code/tryit.asp?filename=GS0RIDZF6HMF
<style>
.Docdiv
{
position:relative;
z-index: 2;
width:1000px; overflow: hidden;
position: fixed;
top: 3%;bottom: 3%;
right:183px;
color: black;
}
</style>
<div class="Docdiv" style="min-height: 100%;">
</div>
The answer was that I had a parent div with the clip style attribute. I removed it and now the popup is fullscreen. Thanks everyone.
Related
For example, I want to remove the "Navigation Bar" from the iframe. How can I do it?
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>I want to remove the navigation bar:</p>
<iframe id="" class=" " scrolling="no" style="width:1000px; height: 1500px; overflow: hidden;" src="https://www.w3schools.com/" title="Iframe"></iframe>
</body>
</html>
You can't manipulate what is inside an iframe but, if the content You want to hide is an horizontal navigation section at top of the page, you could always wrapped the iframe inside a div with overflow:hidden and then, move the content up with top propertie.
Like this:
div {
overflow:hidden;
}
iframe {
position:relative;
top:-120px;
border:0;
width:100%;
}
<h2>HTML Iframes</h2>
<p>I want to remove the navigation bar:</p>
<div>
<iframe id="" class=" " scrolling="no" style=" height: 1500px; overflow: hidden;" src="https://www.wikipedia.org/" title="Iframe"></iframe>
</div>
I have a page where I am displaying a iframe from another page. I want that iframe to be display:none at load and become visible onClick. The issue is, I can get it to work if the div is visible at load. If it is hidden at load, the onclick doesnt work properly.
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div style="margin-top:30px;">
<h2>Menu</h2>
<p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at here</p>
<p><a onClick="myFunction()">Springfield, Ohio Menu</a></p>
<div>
<div id="myDIV" style="display: none">
<div id="leafly-menu">
</div>
<div style="text-align:center;">
</div>
<script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script>
<script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script>
</div>
<div style="overflow: hidden; margin: 15px auto; max-width: 975px;display: none;">
<iframe scrolling="no" src="https://www.leafly.com/dispensary-info/pure-ohio-wellness---springfield" style="border: 0px none; margin-left: -36px; height: 1012px; margin-top: -486px; width: 1050px;">
</iframe>
</div>
</div>
</div>
I think the functionality you're looking for here can be solved with the visibility:hidden tag, as I've had similar experienced with the "display:none" css property.
Definitely worth another google for differences between the two, but the w3schools snippet here seems to summarize things pretty well.
Hope this helps!
You can easily display the elements inside the Div using the click() function of jQuery. You need to include the jQuery CDN or jQuery file to run the jQuery scripts.
$(document).ready(function() {
$("#showMe").click(function () {
$("#myDIV").show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div style="margin-top:30px;">
<h2>Menu</h2>
<p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at here</p>
<p><a id = "showMe" href="#">Springfield, Ohio Menu</a></p>
<div id="myDIV" style="display: none">
<div >
<div id="leafly-menu">
</div>
<div style="text-align:center;">
</div>
<script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script>
<script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script>
</div>
<div style="overflow: hidden; margin: 15px auto; max-width: 975px;">
<iframe scrolling="no" src="https://www.leafly.com/dispensary-info/pure-ohio-wellness---springfield" style="border: 0px none; margin-left: -36px; height: 1012px; margin-top: -486px; width: 1050px;">
</iframe>
</div>
</div>
</div>
I have updated the Fiddle with the two menus.
https://jsfiddle.net/9b15gw0f/
On ollynural.github.io, in the portfolio page i'm trying to simulate a pop-up div giving more information on the project you clicked on. To go back off the pop-up, I've added an ng-click so when you click on the main portfolio-pop-up container, the pop-up is removed.
Is it possible to only have the parts of the portfolio-pop-up div that are exposed (not on the photo nor the description white box) removing the main div once clicked? So you can click freely on the picture and the white box
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row">
<div class="col-xs-12">
<img class="portfolio-image portfolio-image-popup" src="{{portfolioImageClass}}">
</div>
<div class="col-xs-12 pop-up-container">
<div class="pop-up-row">
<div class="col-xs-9" style="background: red">
<h1>
{{portfolioTitle}}
</h1>
<p>
{{portfolioDescription}}
</p>
</div>
<div class="col-xs-3" style="background: cyan">
Click me
<div ng-repeat="tech in portfolioTech">
{{tech}}
</div>
</div>
</div>
</div>
</div>
</div>
JS
$scope.losePortfolioFocus= function() {
angular.element('.portfolio-pop-up').css("display", "none");
}
CSS
.portfolio-pop-up {
display: none;
position: absolute;
width: 100%;
height: 100%;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.70);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Any help would be appreciated, can post more css or code if needed
You can stop the propagation of the click event on the element that wraps the pop-up's content like this:
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row" ng-click="$event.stopPropagation()">
...
</div>
</div>
This way the clicks inside the popup will not trigger the losePortfolioFocus() handler.
I suggest you crawl up the event chain from you event' target and check whether your pop-up-container is in there. This way, you'll have a way to distinguish click in the pop-up or out of it.
Im trying to create a social website which has a chat sidebar, which is just like Facebook. It has a timeline with posts in one section and a chat sidebar.
I have made the chat <div> to be fixed just like Facebook chat.
Now when the total height of elements within the chat sidebar becomes more than the page height, scrollbar appears. When i scroll through it and reach the end of it, if i scroll more, now it scrolls the posts on the timeline.
So what i want to achieve is, to make chat sidebar scroll irrelative to the timeline. to make this crystal clear, i want them to scroll separately, so if i scroll chats and it reaches the bottom, if my pointer is still on the chat sidebar and i scroll nothing should happen.
I prefer to find a way without the use of jQuery. but if its not achievable with css, i would appreciate any help on javascript as well.
Great Example: Facebook
Sample from my html
<div class="outer-container">
<div class="timeline">
<div class="contents">
<div class="header"><p>Timeline</p></div>
<div class="post-items">
<div class="post">
<div class="avatar">
<div class="frame"><img src="blabla.img" /></div>
</div>
<div class="post-block">
<div class="post-header"><p>Some Header</p></div>
<div class="post-contents"><p>Some contents</p></div>
<div class="post-footer"><p>Some footer</p></div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar right-sidebar">
<div class="chat-list">
<ul class="friends">
<div class="header"><p>Friends</p></div>
<li>
<a class="chat-item">
<div class="avatar">
<div class="frame"><img src="blabla.img" /></div>
</div>
<span class="name">James Hetfield</span>
<span class="ic ic-message"></span></a>
</li>
</ul>
</div>
</div>
</div>
Put your timeline in the timeline div and chatbar inside chatbar div. Note in the javascript I have overridden the natural behaviour of scrolling. So, when your mouse is over chatbar normal scrolling wouldn't occur.
Update: Whenever the mouse is scrolled while the cursor is over the div manually update the scrolltop property.
JSFiddle : Link
<html>
<head>
<style type="text/css">
#body{
width: 95%;
margin: auto;
}
#timeline{
width: 75%;
display: inline-block;
overflow-y: scroll;
margin: auto;
}
#chatbar{
position: fixed;
width: 15%;
display: inline-block;
max-height: 100%;
margin: auto;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="body">
<div id="timeline">
</div>
<div id="chatbar" class="scrollable">
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
</script>
</body>
</html>
In my container, there is multiple childrens, one of the 'div' getting appended by content in that.
when the total height of the container(parent) overflows, i would like to add the scroll bar to the div
is it possible to do by css?
here is the html :
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Js :
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
jsfiddle
UPDATE
I don't want to put the over-flow to container, if so my footer will hide. i require my user need to see the add button always. I can't put my button out side of the container again there would be multiple content in to the container
UPDATE
I find a solution by js is it possible to made without using `js'?
jsSolution
Yes, it is possible to do in CSS. Simply add this CSS rule to #container:
overflow-y:scroll;
Alternatively add this to show the scroll bar only when necessary:
overflow-y:auto;
http://jsfiddle.net/doesfmnm/2/
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
.content{
border:1px solid red;
height:300px;
width:200px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Adding a little more explanation to what #Guy3000 said. You're appending (adding after) into an element with the class 'content'. Let's consider what that means for the parent .container class. By adding content into a div inside of the parent, your parent will need to either grow to compensate for the added content, or it will need to have a y-axis scroll that permits content longer than the height of the container.
This means you can approach the dilemma you're facing by adding height to the container element, or you can keep a fixed height on the container and have a frame with a y-axis scroll bar contain the added content.
Here is the solution i find :
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">
<div class="content"></div>
</div>
<div class="misc"><button>Add</button></div>
</div>
css :
#container { width: 300px; height: 300px; border:1px solid red;display:table;}
#up { background: green;display:table-row;height:0; }
#down { background:pink;display:table-row; overflow-y:auto}
.misc {
display:table-row;
background:gray;
height:30px;
}
.content {
overflow:auto;
height:100%;
}
Live
js solution :
http://jsfiddle.net/doesfmnm/4/