I am using bootstrap 3 and jQuery. I have a div on my page right now that is 500 x 400 and it is sitting inside of a bootstrap row and col div. for example:
<div class="row">
<div class="col-lg-12">
<div id="myDiv"></div>
</div>
</div>
I want to use jQuery to tell this div to go full screen. When I click on my button to make it go full screen it seems to be locked inside of the bootstrap row and goes to 100% x 100% inside of the parent div. Is there anyway to tell #myDiv to eject from the parent that it is in and go full screen.
My css:
#myDiv{
z-index: 9999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
See this demo fiddle
CSS
#myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#myDiv{background:#cc0000; width:500px; height:400px;}
HTML
<div class="row">
<div class="col-lg-12">
<div id="myDiv">
my div
<button>Full Screen</button>
</div>
</div>
JS:
$('button').click(function(e){
$('#myDiv').toggleClass('fullscreen');
});
The trick is in setting position:fixed, by toggling the .fullscreen class. This takes it outside of the normal dom tree, so to speak, and sizes/positions it relative to the window.
HTH,
-Ted
JQuery
$('#button').click(function(){
$('#myDiv').css({"top":"0","bottom":"0","left":"0","right":"0"});
});
CSS
#myDiv{
z-index: 9999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
There is a little error in your css. Change the . to #.
Related
I'm working on a website where users can click on a link in the header and it toggles a class to make an element appear. This is working, but every time I try it the page goes back to the top. How can I prevent this?
This is my code:
function openModal(e) {
e.parentNode.classList.toggle("modal-open")
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.modal {
width: 100%;
height: 100vh;
background-color: red;
position: fixed;
top: 0;
left: 100%;
z-index: 999;
}
.modal-open .modal {
left: 0;
}
<header>
<p class="open" onclick="openModal(this)">Open</p>
<div class="modal" onclick="openModal(this)">
Content modal
</div>
</header>
Thanks for your answers!
The problem is in your CSS, do not use position: fixed unless it's very necessary. Instead use
position: absolute;
top: 0
Another thing I think it effects your code is the height:100vh
in short saying: there're nothing wrong in your JS, just alter the css:
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 5 years ago.
I want to make a div with a background-color of red to cover my entire page, but I do not want to use CSS position: absolute. Here is my example with CSS position:
<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></div>
CSS position works for the most part, but then I am unable to create more than one of these divs (they overlap or cancel each other out because of top: 0 and left: 0). When you scroll down, I want you to see additional divs.
It would really help if there was a pure CSS solution, but JavaScript and HTML are open to me as well. JUST NO JQUERY.
What about using viewport height and viewport width?
I've created an example in this JSFiddle.
body, html {
margin: 0;
padding: 0;
}
div {
width: 100vw;
height: 100vh;
}
.one {
background-color: blue;
}
.two {
background-color: green;
}
.three {
background-color: yellow;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
If you want to make div to occupy entire space use vw and vh
because making div alone height:100% and width:100% would not do it
without using viewport units
check this snippet
div{
width: 100%;
height:100%;
background:red;
}
html,body{
height:100%;
width:100%;
}
<div ></div>
but making html and body to have height and width is a bad idea
so to skip it use view port units
check this with viewport unist
div {
width: 100vw;
height: 100vh;
background: red;
}
<div></div>
Hope it helps
Older browsers such as IE7 and 8 could be supported without using visual height and width units by using a single absolutely positioned container with inner divs inheriting height and width property values.
CSS
body {
margin: 0px; /* optional */
}
#box {
position:absolute;
height: 100%;
min-width: 100%;
}
.page {
padding: 5px; /* optional */
height: inherit;
}
HTML
<body>
<div id="box">
<div class="page" style="background-color: red">
<div style="width:25em; background-color: gray">25em</div>
</div>
<div class="page" style="background-color: green">2</div>
<div class="page" style="background-color: white">3</div>
</div>
</body>
Update: the width property of the container has been replaced by a min-width property, introduced in IE7, to fix an ugly horizontal scrolling issue. Supplying width for inner div elements was removed as being unnecessary.
Simply change the top: value for each one. The first one would be 0, the second 100%, the third 200%, and so on. Here's a working example:
<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;background:red;"></div>
<div style="width: 100%; height: 100%; position: absolute; top: 100%; left: 0; background:blue;"></div>
<div style="width: 100%; height: 100%; position: absolute; top: 200%; left: 0; background:green;"></div>
I have a <div> element in which I load cytoscape.js which is just a tool to draw graphs.
In the top corner of this <div> element, I want some buttons (<button type="button" class="btn btn-primary">, etc.).
I want something like this example. In the example, the cytoscape elements are on top of the <h1> element because the <div> element has position: absolute; height: 100%; z-index: 999; .... I want it reversed, so the other elements are on top of the cytoscape canvas.
I also want a top navbar.
I guess I should use something like
<div id="navbar" style="position: absolute; left: 0; top: 0; z-index: 999; width: 100%; height: 50px;>
</div>
<div id="main" style="position: absolute; left: 0; top: 0; z-index: 100; width: 100%; height: 100%;>
<button type="button">Some text</button>
</div>
If I use this approach, the page becomes more than 100% in height (the vertical scrollbar becomes visible).. And if I click one of the buttons, it means that I also click in the "main" <div> element, which causes the javascript to create a node.
I made an example. How to make that green div to have fixed position in the container?
<div class="container">
<div class="row">
<div class="col-xs-4">hey hou</div>
<div class="col-xs-8">
<div>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
<div id="fixed">This div should aligned to the left like yellow div and fixed</div>
</div>
</div>
</div>
Please not all elements must stay at same positions as they are now and green div should be fixed!
So it should looks like this:
and when the user scrolls the site:
Please note that this only works on specific dimensions. You will need (a lot) of media queries and/or JavaScript/jQuery to get it working on all window sizes.
You can use translateX to reposition your div.
This is the CSS for the #fixed div:
#fixed {
position: fixed;
top: 100px;
background: green;
width: 100px;
transform: translateX(-265px);
}
Here is the updated JSFiddle
Just change your fixed div to `absolute and position accordingly like this:
#fixed {
position: absolute;
left: -300px;
top: 100px;
background: green;
width: 100px;
}
Here's a jsfiddle with above codes: http://jsfiddle.net/AndrewL32/uLa02c62/2/
I would like to do something with my document which is quite unique (haven't seen it before) and thus maybe not even possible.
What I would like is to have a div which will overlay everything in the document, maybe give it background black so that nothing is visible. Second I would like to have a small squire window in the overlay which doesn't share the black background, in fact it is somewhat transparent and therefore it would be possible to 'peek' trough that window to see document content. But only the content where this window is. It would be kinda like those "zoom" plugins in which only a small portion is being zoomed, but in this case it would show specific content. Any idea how to create such a thing?
An example of what you can do is the following (it may not be the best but it works)
HTML
<div id='peakview'></div> <!-- This div is your view window -->
<div id='out'>
<div class='overlay'></div>
<div class='overlay'></div>
<div class='overlay'></div>
<div class='overlay'></div>
</div>
The <div> inside of #out will re-size accordingly to the position of #peakview creating the illusion of a full overlay. This can be done with simple css and some calculus.
Mainly what you need is the position of the element on screen.
var h = $(this).offset().top;
var l = $(this).offset().left;
var r = ($(window).width() - ($(this).offset().left + $(this).outerWidth()));
//right offset
var b = ($(window).height() - ($(this).offset().top + $(this).outerWidth()));
//bottom offset
In my example I used .draggable() from jQuery UI to move the div around. And while dragging the 4 divs shown above are adjusting their height and width to fill up the space between #peakview and document border.
An example for the first div
$('.overlay:eq(0)').css({
top: 0,
left: 0,
width: '100%',
height: h //the height is always changing depending on the #peakview .offset().top
});
In this fiddle you will see how the filling divs behave
Another ruff start:
http://jsfiddle.net/XDrSA/
This require some extra work, but it may suit your needs.
HTML:
<div id="yourContent" style="width: 300px; margin:100px auto;">
<input type="button" id="zoom" value="Click to zoom"/>
</div>
<div id="zoomer">
<div id="window">This is your "window"</div>
<div id="overlay_top"></div>
<div id="overlay_left"></div>
<div id="overlay_right"></div>
<div id="overlay_bottom"></div>
</div>
CSS:
body {
margin:0;
padding:0;
}
#zoomer {
height: 100%;
width: 100%;
position: absolute;
top: 0;
display: none;
}
#overlay_top {
height: 20%;
width: 100%;
background-color: black;
position: absolute;
top: 0
}
#overlay_right {
height: 100%;
width: 20%;
background-color: black;
position: absolute;
right: 0;
}
#overlay_left {
height: 100%;
width: 20%;
background-color: black;
position: absolute;
left: 0;
}
#overlay_bottom {
height: 20%;
width: 100%;
background-color: black;
position: absolute;
bottom: 0;
}
#window {
margin: 0 auto;
height: 100%;
width: 80%;
position: absolute;
background-color: rgba(0,0,0,.5);
}
And a piece of javascript:
$('#zoom').click(function() {
$('#zoomer').fadeIn();
});
You may need to stumble with the positioning, and the window will be a fixed size one. Not draggable though.