Im just building a basic lightbox type plugin to suit the needs of a project im building. It basically just allows the user to click on an image on the page and the image appear in the lightbox, the problem is when i click on the close button on the lightbox,the script causes the window to shoots to the top of the page.
This is unwanted behavior because if i have been scrolling on 1000+ pictures for example i wouldnt want it to just undo all that scroll just by closing a picture.
Here is my fiddle: https://jsfiddle.net/w407wdrv/
Here is my code:
<style>
body, html {
padding: 0;
border: 0;
margin: 0;
}
.flavius-modal-bg {
display: none;
position: fixed;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 1;
}
.flavius-img-section {
background: rgba(255,255,255,0.8);
height: 80%;
width: 80%;
margin: 0 auto;
text-align: center;
z-index: 100;
}
.flavius-options-section {
background: white;
height: 20%;
width: 80%;
margin: 0 auto;
}
.flavius-img-preview {
position: relative;
top: 50%;
transform: translateY(-50%);
min-width: 500px;
width: 500px;
max-height: 100%;
}
</style>
<div class="flavius-modal-bg">
<div class="flavius-img-section">
<img class="flavius-img-preview" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvWoePDuMwoKkA2f6LIIgWg7nlR5wq5pJwM8DJucMvlEF94wEV" alt="">
</div>
<div class="flavius-options-section">
<a class="close-modal-bg" href="#">Close Me</a>
Some button clicked
</div>
</div>
<img src="http://s1.1zoom.me/b5050/644/Ferrari_Formula_1_f1_448686_1334x750.jpg" alt="">
<img src="https://insanelyi.com/uploads/gallery/album_102/gallery_1_102_91150.jpg" alt="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('img').on('click', function(){
var currentImg = $(this).attr('src');
$('img.flavius-img-preview').attr('src', currentImg);
$('.flavius-modal-bg').css('display', 'block');
});
$('.close-modal-bg').on('click', function(){
$scrollTop = $('body').scrollTop();
$('.flavius-modal-bg').css('display', 'none');
setScrollPosition($scrollTop);
});
function setScrollPosition($scrollTop)
{
$('body').scrollTop($scrollTop);
}
</script>
You can use javascript:void(0); to achieve your req.
Please find below working snippet
$('img').on('click', function(){
var currentImg = $(this).attr('src');
$('img.flavius-img-preview').attr('src', currentImg);
$('.flavius-modal-bg').css('display', 'block');
});
$('.close-modal-bg').on('click', function(){
$scrollTop = $('body').scrollTop();
$('.flavius-modal-bg').css('display', 'none');
setScrollPosition($scrollTop);
});
function setScrollPosition($scrollTop)
{
$('body').scrollTop($scrollTop);
}
body, html {
padding: 0;
border: 0;
margin: 0;
}
.flavius-modal-bg {
display: none;
position: fixed;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 1;
}
.flavius-img-section {
background: rgba(255,255,255,0.8);
height: 80%;
width: 80%;
margin: 0 auto;
text-align: center;
z-index: 100;
}
.flavius-options-section {
background: white;
height: 20%;
width: 80%;
margin: 0 auto;
}
.flavius-img-preview {
position: relative;
top: 50%;
transform: translateY(-50%);
min-width: 500px;
width: 500px;
max-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="flavius-modal-bg">
<div class="flavius-img-section">
<img class="flavius-img-preview" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvWoePDuMwoKkA2f6LIIgWg7nlR5wq5pJwM8DJucMvlEF94wEV" alt="">
</div>
<div class="flavius-options-section">
<a class="close-modal-bg" href="javascript:void(0);">Close Me</a>
Some button clicked
</div>
</div>
<img src="http://s1.1zoom.me/b5050/644/Ferrari_Formula_1_f1_448686_1334x750.jpg" alt="">
<img src="https://insanelyi.com/uploads/gallery/album_102/gallery_1_102_91150.jpg" alt="">
I update your jsfiddle here https://jsfiddle.net/w407wdrv/1/
The problem is on <a class="close-modal-bg" href="#">Close Me</a>, by replacing href="#" with href="javascript:void(0);" it will prevent the page to scroll on top.
The problem is just the ash that you use for the href:
<div class="flavius-options-section">
<a class="close-modal-bg" href="#">Close Me</a>
Some button clicked
</div>
1.Remove the ash from the href of the closing anchor
<div class="flavius-options-section">
<a class="close-modal-bg">Close Me</a>
Some button clicked
</div>
2.Add a class to style the link
.close-modal-bg{
cursor:pointer;
text-decoration: underline;
color:blue;
}
$('img').on('click', function(){
var currentImg = $(this).attr('src');
$('img.flavius-img-preview').attr('src', currentImg);
$('.flavius-modal-bg').css('display', 'block');
});
$('.close-modal-bg').on('click', function(){
$scrollTop = $('body').scrollTop();
$('.flavius-modal-bg').css('display', 'none');
setScrollPosition($scrollTop);
});
function setScrollPosition($scrollTop)
{
$('body').scrollTop($scrollTop);
}
body, html {
padding: 0;
border: 0;
margin: 0;
}
.flavius-modal-bg {
display: none;
position: fixed;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 1;
}
.flavius-img-section {
background: rgba(255,255,255,0.8);
height: 80%;
width: 80%;
margin: 0 auto;
text-align: center;
z-index: 100;
}
.flavius-options-section {
background: white;
height: 20%;
width: 80%;
margin: 0 auto;
}
.flavius-img-preview {
position: relative;
top: 50%;
transform: translateY(-50%);
min-width: 500px;
width: 500px;
max-height: 100%;
}
.close-modal-bg{
cursor:pointer;
text-decoration: underline;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flavius-modal-bg">
<div class="flavius-img-section">
<img class="flavius-img-preview" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvWoePDuMwoKkA2f6LIIgWg7nlR5wq5pJwM8DJucMvlEF94wEV" alt="">
</div>
<div class="flavius-options-section">
<a class="close-modal-bg">Close Me</a>
Some button clicked
</div>
</div>
<img src="http://s1.1zoom.me/b5050/644/Ferrari_Formula_1_f1_448686_1334x750.jpg" alt="">
<img src="https://insanelyi.com/uploads/gallery/album_102/gallery_1_102_91150.jpg" alt="">
change your clsoe function to this,
$('.close-modal-bg').on('click', function(e){
e.preventDefault();
$scrollTop = $('body').scrollTop();
$('.flavius-modal-bg').css('display', 'none');
setScrollPosition($scrollTop);
});
As in w3schools.com,
The event.preventDefault() method stops the default action of an element from happening.
For example:
1.Prevent a submit button from submitting a form
2.Prevent a link from following the URL
Hope this helps you.
Related
Im not really sure why the span tag is not closing
Does it have to do with my selection being a div in js?
Please let me know what I can change in order to make this work.
Ive tried to switch out the labels of the classes and tested selectors as well
Here is my code.
document.querySelectorAll('.imageContainer div').forEach(image => {
image.onclick = () => {
document.querySelector('.popup-image').style.display = 'block';
document.querySelector('.popup-image img').div = image.getAttribute('data-img');
}
});
document.querySelector('.popup-image span').onclick = () => {
document.querySelector('.popup-image').style.display = 'none';
};
/* modal */
.container .popup-image {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.641);
height: 100%;
width: 100%;
z-index: 100;
display: none;
}
.container .popup-image span {
position: absolute;
top: 0;
right: 10px;
font-size: bolder;
color: #fff;
cursor: pointer;
z-index: 100;
}
.container .popup-image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid #fff;
width: 750px;
object-fit: cover;
}
#media only screen and (max-width: 600px) {
.container .popup-image img {
width: 99%;
}
}
<div class="imageContainer">
<div class="entry work-entry branding">
<div class="entry-image image imageBG" data-img="./src/assets/img/feature1.jpeg">
</div>
<div class="work-entry-hover">
<div class="work-entry-content">
<div class="work-entry-title">Brand</div>
<div class="work-entry-cat">Los Angeles, CA</div>
</div>
</div>
</div>
<!-- modal -->
<div class="popup-image">
<img src="./src/assets/img/feature1.jpeg" alt="">
<span>×</span>
</div>
</div>
Since the 'x' button is inside the other element, the function to set display: block is being called when you click on the span, which is overriding the display: none; that you're setting. You can stop this by running e.stopPropagation(); in the event handler, which will prevent the click event from triggering on any parent elements.
document.querySelectorAll('.imageContainer div').forEach(image => {
image.onclick = () => {
document.querySelector('.popup-image').style.display = 'block';
document.querySelector('.popup-image img').div = image.getAttribute('data-img');
}
});
document.querySelector('.popup-image span').onclick = (e) => {
e.stopPropagation();
document.querySelector('.popup-image').style.display = 'none';
};
/* modal */
.container .popup-image {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.641);
height: 100%;
width: 100%;
z-index: 100;
display: none;
}
.container .popup-image span {
position: absolute;
top: 0;
right: 10px;
font-size: bolder;
color: #fff;
cursor: pointer;
z-index: 100;
}
.container .popup-image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid #fff;
width: 750px;
object-fit: cover;
}
#media only screen and (max-width: 600px) {
.container .popup-image img {
width: 99%;
}
}
<div class="imageContainer">
<div class="entry work-entry branding">
<div class="entry-image image imageBG" data-img="./src/assets/img/feature1.jpeg">
</div>
<div class="work-entry-hover">
<div class="work-entry-content">
<div class="work-entry-title">Brand</div>
<div class="work-entry-cat">Los Angeles, CA</div>
</div>
</div>
</div>
<!-- modal -->
<div class="popup-image">
<img src="./src/assets/img/feature1.jpeg" alt="">
<span>×</span>
</div>
</div>
I am trying to make an on click image overlay, where you click the left icon and an image fades or slides in, but when you click the right icon a different image fades or slides in. Also, when you click either icon, the associated images fade or slide out.
I've been trying to use
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
to make the display go from none to block when you click the icon, but there is no way to use this function with two separate links. I am not very great with javascript so any help would be greatly appreciated. Thanks.
https://jsfiddle.net/hzfw00L7/
Are you looking for something like this? I have used Jquery to speed up the coding!
$(document).ready(function() {
$(".left").click(function() {
$("#overlay").fadeIn(3000);
});
$(".right").click(function() {
$("#overlay2").fadeIn(3000);
});
$("#overlay").click(function() {
$("#overlay").fadeOut(2000);
});
$("#overlay2").click(function() {
$("#overlay2").fadeOut(2000);
});
});
#overlay {
position: fixed;
z-index: 4;
display: none;
width: 100%;
height: 350px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
#overlay2 {
position: fixed;
z-index: 4;
display: none;
width: 100%;
height: 350px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#content {
padding: 20px;
}
a.left {
display: block;
position: absolute;
top: 320px;
left: 80px;
z-index: 6;
height: 20px;
background-color: purple;
color: white;
font-family: Arial;
padding: 10px;
}
a.right {
display: block;
position: absolute;
top: 320px;
right: 80px;
z-index: 7;
height: 20px;
background-color: magenta;
color: white;
font-family: Arial;
padding: 10px;
}
#buttons {
height: 50px;
width: 300px;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay">
<div id="text">Overlay Text</div>
</div>
<div id="overlay2">
<div id="text">Overlay Text 2</div>
</div>
<div id="content">
<div id="buttons">
<a class="left">Turn on overlay effect</a>
</div>
<div id="content">
<a class="right">Turn on overlay effect 2</a>
</div>
</div>
</body>
</html>
Added Fade in and fade out animations!
For More Reference Go here
I'm having a strange issue over at a new site I just created (http://segarsmedia.com/motor-city-rising/). Problem is when you first visit it, you're greeted with a large play button and a poster image from the video I'm presenting coming from YouTube. Click it and a div goes over that spot, along with an close button. So far, so good.
However, if you click the close button and then try to play the video again, the video appears and starts to play, but it now appears underneath the poster image and play button and it's about 1/5 the original size. It seems to now be playing outside of its' intended container although when in inspector, the code doesn't seem to show that. It also doesn't seem to add any additional inline styles as well.
Obviously, I want the video to appear where it first appears when you click on the play button. So why is this occurring instead?
I have a Pen up at http://codepen.io/anon/pen/NdMqya and here's the code.
HTML
<div class="entry-content">
<div id="video-mask"></div>
<a class="vidjmp" id="show" href="#"><div class="play"><img src="http://segarsmedia.com/wp-content/themes/auth-story/img/play.png" alt="play" title="play"></div>
<img width="1920" height="1080" src="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg" class="attachment-full size-full wp-post-image" alt="Motor City Rising" srcset="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg 1920w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-300x169.jpg 300w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-768x432.jpg 768w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-1024x576.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" /></a>
<div id="video-content" class="video-content">
<a id="video-close" href="#"><div id="close" class="close">X</div></a>
<div class="video-container">
<iframe id="video-iframe" width="" height="" src="http://www.youtube.com/embed/75pCxGDkuNQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div><!-- .entry-content -->
CSS
.entry-content:before,
.entry-content:after {
content: "";
display: table;
table-layout: fixed;
}
.entry-content:after, {
clear: both;
}
.entry-content {
position: relative;
display: block;
margin: 0;
width: 100%;
}
.play {
width: 125px;
height: 125px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -62.5px;
margin-top: -62.5px;
z-index: 205;
}
#video-content {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.video-container {
position: relative;
padding-bottom:56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#close {
background: #000;
color: #FFF;
display: block;
position: absolute;
top: 16px;
left: 24px;
height: 48px;
width: 48px;
border-radius: 24px;
z-index: 2000;
font-size: 24px;
line-height: 1;
font-weight: 700;
padding: 14px 16px;
border-radius: 24px;
z-index: 2000;
}
#media screen and (max-width: 677px) {
.play {
width: 62.5px;
height: 62.5px;
margin-left: -31.25px;
margin-top: -31.25px;
}
#close {
height: 30px;
border-radius: 15px;
font-size: 15px;
padding: 7px 10px;
width: 30px;
border-radius: 15px;
}
}
JS
<script type="text/javascript">
jQuery(document).ready(function() {
var iframeSrc = jQuery('#video-iframe').attr("src");
jQuery('a.vidjmp').click(function(e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc + '?rel=0&autoplay=1&showinfo=0&modestbranding=0');
jQuery('#video-mask').fadeTo(500,0.9, function(){
jQuery('#video-content').fadeIn(500, function(){
jQuery('#video-iframe').show();
});
});
});
// Close Modal/Mask
jQuery('#video-close, #video-mask').click(function (e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc);
jQuery('#video-mask, #video-content').fadeOut(0, function(){
var vidCopy = jQuery('#video-iframe').clone();
jQuery('#video-iframe').detach();
jQuery(vidCopy).appendTo('#video-content');
});
});
});
</script>
Found the problem. It was a simple case of CSS:
#video-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
I'm new to javascript/jquery, and I'm building an image slider. I can't seem to get the images to animate. I'm not sure what's wrong here.
What I've been trying to do is to get the active slide then slide the next sibling and animate it, but all I get in result is that the first image animate then it stops.
Here is the code: https://jsfiddle.net/6qntgg5z/
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=" > ">
<input type="button" name="next" id="prev" value=" < ">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>
CSS
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 2em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
Javascript
$(document).ready(function(){
setInterval(animateSlider(), 5000);
});
//configuration
var currentSlide=activeSlide();
var slides=$("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000,
function () {
$current.removeClass('active');
$current.css({opacity: 1.0});
});
try this fiddle (does what you need but has other flaws i think). in your html you used the '<' and '>' characters as your button text, this breaks the flow of the html so you should instead use character codes:
< becomes < and
> becomes > www.w3schools.com/html/html_entities.asp
also your js was missing a closing } and the jsfiddle was missing aa jquery library call (I wish jsfiddle would make it faster to integrate libraries). hope it helps.
$(document).ready(function(){
setInterval(function(){ animateSlider() }, 5000);
});
//configuration
var currentSlide = activeSlide();
var slides = $("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
//remove active class from previous element and assign it to the current one then animate it using animate() function
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000, function () {
$current.removeClass('active');
$current.css({opacity: 1});
});
}
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 1em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>
I have a editor. I want to make it fullscreen on certain button click.
Actually I want to acheive CKEditor like maximize feature through jauery,
Please see this link:
http://ckeditor.com/demo
This demo maximize button is there. I want to achieve same using jquery.
Besides from appending (and removing) a CSS class on it when a button is clicked with JavaScript, you can also use a few CSS tricks:
#full-screen-toggler:checked ~ #youreditor {
z-index: 9999;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
margin: 0px;
}
#youreditor #fslabel::after {
content: "enter fullscreen";
cursor: pointer; /* optional */
}
#full-screen-toggler:checked ~ #youreditor #fslabel::after {
content: "exit full screen";
}
/* Styles for preview */
#youreditor { background: green; padding: 10px; }
#youreditor #fslabel::after { color: white; padding: 3px 5px;
border-radius: 2px; border: 1px groove white; }
<input id="full-screen-toggler" type="checkbox" style="display: none;" />
<div id="youreditor">
<label id="fslabel" onclick="" for="full-screen-toggler" />
</div>
Assign the user window's dimension to container, by window.innerWidth and window.innerHeight
css:
.container { width:200px; height:100px; background:#ccc; }
html:
<div class='container'>
<button class='maximize'>Maximize</button>
<button class='minimize'>Minimize</button>
</div>
javascript:
$('.maximize').on('click', function(){
$('.container').css({'width': window.innerWidth, 'height': window.innerHeight});
});
$('.minimize').on('click', function(){
$('.container').css({'width':'200px' , 'height': '100px'});
});
working example
link: http://jsbin.com/raduqihibo/edit?html,css,js,output
Working Fiddle
You could acheive that using custom css class :
.full-screen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Hope this helps.
$('#maximize').on('click', function(){
$('#container').toggleClass('full-screen');
})
.full-screen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
div{
width:100px;
height:100px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
<button id='maximize'>[]</button>
</div>