There's a problem with fancybox modals on a scrollable page with fluid containers.
In example below when you open modal fancybox right side of a background stretched a bit, because new modal have no vertical scrollbar. After modal was closed background size was corrected again.
.container {
margin: 40px;
padding: 20px;
height: 200vh;
background-color: bisque;
transition: 3s all linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet"/>
<div class="container">
<div>
Some content
</div>
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Open fancybox
</a>
</div>
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<p>You are awesome.</p>
</div>
Simply, add body { margin: 0; }
body { margin: 0; }
.container {
margin: 40px;
padding: 20px;
height: 200vh;
background-color: bisque;
xtransition: 3s all linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet"/>
<div class="container">
<div>
Some content
</div>
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Open fancybox
</a>
</div>
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<p>You are awesome.</p>
</div>
Related
Navbar toggle button is coming in center on small screen. how can i move it to right??
i tried few ways but it is not working. However the navbar works fine on medium and large screens.
here is my code:
""
<!-- ========================= Theme Feature Page Menu ======================= -->
<nav class="navbar float-right navbar-expand-lg navbar-expand-md theme-main-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle float-xs-right collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menu</span>
Menu
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li class="dropdown-holder">ABOUT COLLEGE
<ul class="sub-menu">
<li>College Profile</li>
<li>Principals Message</li>
<li>Vision & Mission</li>
<li>Committee List</li>
<li>Photo Gallery</li>
</ul>
</li>
<li>CONTACT
</ul>
</div><!-- /.navbar-collapse -->
</nav> <!-- /.theme-feature-menu -->
</div>
</header> <!-- /.theme-main-header -->""
Within the desired CSS file of yours declare definition sizes and then use float: right;
Example:
#media (min-width: 576px) and (max-width: 767px) {
.navigation.navbar {
float: right;
display: inherit !important;
padding: 0;
width: 100%;
}
.navigation .navbar-collapse {
background: #fff;
padding: 20px;
margin-top: 56px;
position: absolute;
width: 100%;
margin-right: 20px;
z-index: 999;
}
.navigation.navbar-dark .navbar-nav .nav-link {
padding: 10px 0;
color: #000;
}
.navigation.navbar-dark .navbar-toggler {
border-color: #fff;
float: right;
}}
Without the float atrribute the navbar will not responsively move to the given definitions.
first post here so please be gentle ;-)
I have a query about popup modals, that not only have an image within the modal, but some text too. Attached my current status of the coding, however could not figure out an easy way to get the text caption for each image. The image popups are correct, however text returned is TEXT1 for whichever I click.
Any help would be appreciated. Many thanks
Sabs
function onClick(element) {
document.getElementById("modal01").style.display = "block";
document.getElementById("img01").src = element.src;
document.getElementsByClassName("modal-content").innerHTML = this.alt;
}
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
/*height: 100%;*/
}
body {
background: url('../img/dark.jpg');
background-size: cover;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.main {
margin: 0 auto;
height: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 5px;
margin-top: 100px;
margin-right: 2rem;
margin-left: 2rem;
}
.mainInner img{
width: 100%;
object-fit: cover;
/*display:inline-block;*/
}
/* ---------------- placement of images within our grid system -----*/
.mainInner:nth-child(1){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(2){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(3){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(1):hover, .mainInner:nth-child(2):hover, .mainInner:nth-child(3):hover{
transform: scale(1.05);
cursor: pointer;
transition: .5s;
opacity: 0.30;
}
/*----------------------- styling the modal ------------------------*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 60px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /*Full height*/
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
/*styling the caption text*/
color: #f1f1f1;
font-size: 20px;
font-weight: bold;
text-align: center;
}
/* Modal Content */
.modal-content {
margin: auto;
display: block;
/*position: absolute;*/
/*transform: translate(-50%, -50%);*/
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 650px){
.main{
display: block;
}
.mainInner{
margin-bottom: 1rem;
}
.modal-content {
width: 100%;
}
}
/*----------------- end modal styling -----------------*/
<!DOCTYPE html>
<html>
<head>
<title>Popup Modal Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" onclick="onClick(this)"></div>
</div>
<!-- 1st IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT1</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 2nd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT2</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 3rd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT3</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script2.js"></script>
</body>
</html>
I'm a little bit late on this post - welcome to SO, Sabs! Kudos for making a first post with a clear and concise problem, and including your relevant code.
At first glance, the reason you're always returning "Text 1" is because your JS file hardcodes modal01 as the ID for each modal. So while the function is called whenever you click any of the images, it will always show that ID.
You don't have to re-invent the JS and CSS for a modal popup, though - a much simpler way is to use Bootstrap. You can still edit CSS and JS to your heart's content by giving IDs and classes, but you don't need much to call it. You need to include source CSS/JS files (from CDN here for simplicity's sake):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Calling the modal from your HTML uses a data-toggle and a data-target:
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" data-toggle="modal" data-target="#myModal1"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" data-toggle="modal" data-target="#myModal2"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" data-toggle="modal" data-target="#myModal3"></div>
</div>
The modals:
<!-- Beginning Modal 1 -->
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 1</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>The first modal..</p>
<img src="img/brands/AyalaBar.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 1 -->
<!-- Beginning Modal 2 -->
<div class="modal fade" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 2</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>A second modal..</p>
<img src="img/brands/BastianInverun.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 2 -->
<!-- Beginning Modal 3 -->
<div class="modal fade" id="myModal3">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 3</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>The third modal..</p>
<img src="img/brands/breuning.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 3 -->
The task is to insert a simple modal popover as an alert for clients to be notified of a temporary relocation. On page load, a transparent background appears but the image nor the close button appears.
DATA
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/popover.js"></script>
<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalContent {
width: 750px;
z-index: 10000;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: none;
background: -moz-linear-gradient;
background: -webkit-linear-gradient;
background: -o-linear-gradient;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
</style>
CODE
<div id="myModal" class="modal fade in">
<div class="modalDialog">
<div class="modalContent">
X
<img src="image.jpg" width="750px"/>
</div>
</div>
</div>
This seems like a fairly straightforward task but I cannot seem to resolve this issue by multiple attempts. Your help is greatly appreciated.
I have no idea about popover plugin, but i have created fiddle for this using bootstrap plugin, when the page gets opened modal will be appear with some content (You can replace it by your content).
Sample HTML:
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And JS
$(document).ready(function(){
$("#myModal").modal('show');
});
JSFIDDLE
Note: I did not included popover.js.
I'm trying to vertically align my text on my screen. I've read through the docs on how to do this. But I'm still not having any luck. This is my code:
<div class="row">
<div class="col col-center text-center">
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</div>
HTML
<div class="row">
<div class="col">
<div class="text-center">
<h5 style="text-align: center;">This text is in the center of the screen</h5>
</div>
</div>
</div>
This works on Ionic Framework 3.0.1:
HTML:
<ion-content padding>
<div>
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</ion-content>
SASS:
ion-content {
div {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
Try this solution:
1.Add new css styles:
.home .scroll-content {
display: table !important;
width: 100% !important;
height: 100% !important;
margin-top: -50px; /* the height of the centered content */
text-align: center;
}
.home .scroll {
display: table-cell;
vertical-align: middle;
}
2.Apply home class to ion-view:
<ion-view class="home">
demo
How about specify the "height"?
Anyway, centralize your text in horizontal, you can also use align="center".
(To make it clear, I added the color to row and col.)
<div class="row" style="height: 900px; background-color: blue;">
<div class="col col-center" style="background-color: red;>
<h4 class="gray" align="center">This text is in the center of the screen</h4>
</div>
</div>
Here is the code which isn't working. Basically I'm allowing the user to edit some text in the div and then display its screenshot. Can someone please tell why is it not working?
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<input id="submit" type="submit" value="SUBMIT" />
</div>
<script type="text/javascript">
window.onload = function() {
html2canvas( [ document.body ], {
onrendered: function( canvas ) {
document.body.appendChild( canvas );
}
});
};
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
I changed your code a little bit and it works:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var Submit = function() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
};
</script>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<button onclick="Submit();" >Submit</button>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
First, I added html2canvas JavaScript file (<script type="text/javascript" src="html2canvas.js"></script>). You can download it at https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js and put that file to the same folder as your HTML. Apparently, you are trying to create something like a form, but there's no form tag in your code. You can call html2canvas either when you submit a form (you have to add <form> then) or using onclick attribute of a button. I changed your submit input element to button and bind Submit method to its onclick attribute. When user clicks the button, screenshot appears below the form.
Just use this code
document.querySelector('button').addEventListener('click', function() {
html2canvas(document.querySelector('.specific'), {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
return Canvas2Image.saveAsPNG(canvas);
}
});
});
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
h1 {
font-size: 36px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 small {
font-size: 65%;
font-weight: 400;
line-height: 1;
color: #777;
display: block;
padding-top: 15px;
}
.specific {
background-color: #fff;
}
p a {
padding: 5px;
}
<script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="specific">
<h1>Click to Take a Screenshot & Download it! <small>using html2canvas.js + canvas2image.js</small></h1>
<p>This is a simple demo.</p>
<p>Use html2canvas.js to take a screenshot of a specific div and then use canvas2image.js to download the screenshot as an image locally to your filesystem.</p>
<button type="button" class="btn btn-default">Take a Screenshot!</button>
<p>References: html2canvas.jscanvas2image.js
</p>
</div>