function takeshot() {
let div = document.getElementById('result');
html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
})
}
html2canvas(document.getElementById("result"), {scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alphardex/aqua.css#master/dist/aqua.min.css">
<script src="https://cdn.jsdelivr.net/npm/html2canvas#1.0.0-rc.5/dist/html2canvas.min.js">
</script>
<script type="module"
src="https://unpkg.com/#deckdeckgo/drag-resize-rotate#latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js"></script>
<script nomodule=""
src="https://unpkg.com/#deckdeckgo/drag-resize-rotate#latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.js"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> -->
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="subj.css"> -->
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#500&family=Gloria+Hallelujah&family=Indie+Flower&family=Lobster&family=Special+Elite&display=swap"
rel="stylesheet">
<title>Constructor</title>
</head>
<body>
<div class="parent">
<div id="result">
<img src="https://picsum.photos/500/500" alt="" />
en inch piti tpvi
<h3>Heading </h3>
</div>
<form class="login-form" action="javascript:void(0);">
<button onclick="takeshot()">
Take Screenshot
</button>
</form>
</div>
<div id="output"></div>
<!-- <button onclick="delete1()">Delete</button> -->
<script src="script.js"></script>
</body>
</html>
In this code, capturing is working for both texts, but not for <img /> tags or some other external tags like <deckgo-drr>, Is there some way to screenshot the screen that we are actually seeing, like smartphone's screenshot function just capture the moment that's all
Why it is not working?
Capturing everything except img tags, and not only I am using tag they are not getting captured neither...
try setting useCORS to true
html2canvas(document.getElementById("result"), {useCORS: true, scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
Related
I am creating a empty grid with gridstack.js and them adding new elements thougth its API. The new items are visualized correctly. They and are re-sizable, but I can not drag them around the grid. I tried to use enable() and also enableMove(true, true) but it seem have no effect.
This example only contains one elements, but i pretend to add more when it works.
This is the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="/static/css/jquery-ui.min.css" rel="stylesheet">
<link href="/static/fonts/css/fontawesome-all.css" rel="stylesheet">
<link href="/static/css/energy.css" rel="stylesheet">
<link href="/static/css/icons.css" rel="stylesheet">
<link rel="stylesheet" href="/static/css/gridstack.min.css" />
</head>
<body>
<header>
</header>
<main>
<article class="container-fluid">
<div class="slot big text-center">
<div class="grid-stack"></div>
</div>
</article>
</main>
<footer></footer>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.11/lodash.min.js" integrity="sha256-7/yoZS3548fXSRXqc/xYzjsmuW3sFKzuvOCHd06Pmps=" crossorigin="anonymous"></script>
<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/js/jquery-ui.js"></script>
<script src="/static/js/materialize.min.js"></script>
<script src="/static/js/clipboard.min.js"></script>
<script type="text/javascript" src='/static/js/gridstack.min.js'></script>
<script type="text/javascript" src='/static/js/gridstack.jQueryUI.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$Grid = $('.grid-stack');
$Grid.enableMove(true, true);
$Grid.gridstack(
{
}
);
const widget = '<div data-widget-source="/widgets/1/" class="widget" style="background-color: red;"></div>';
$Grid.data('gridstack').addWidget(
widget,
1, 1, 1, 1,false,
1,12,1,12, id ="slot_1"
);
});
</script>
</body>
</html>
The div pased to the addWidget function should have this structure to work correctly:
<div >
<div class="grid-stack-item-content" >
... your stuff here..
</div>
</div>
try this code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
I'm trying to use owl carousel in my new project but it seems the owl carousel isn't working, i have tried with the above code dont know where im going wrong please can any one help me so that it will help me to fix the issue, since im new to this field im unable to solve the issue,please can any one help me out in this
remove <script src="jquery.min.js"></script> from last
and initialize Carousel like below
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({
});
});
or try this code
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</body>
</html>
I have a silly problem I think, but I've tried several answers found on the net and nothing works so far.
I'd just like to have an id=modal
Here's the code:
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Cabinet</title>
<link rel="shortcut icon" href="img/logo-min.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style-sheet.css">
<link rel="stylesheet" href="css/mystyles.scss">
</head>
<body>
<main>
<div class="container">
<section class="columns">
<div>
<button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus d’infomartions...</button>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<p class="modal-card-title modal__title"></p>
</section>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
<script type="text/javascript" src="js/burger.js"></script>
</html>
script:
const modal = document.getElementById('modal');
console.log('modal', modal);
function toggleClass() {
modal.classList.toggle('is-active');
}
And modal return null,I can't get the id.
I don't see where you inject/insert your script.
You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- My super html -->
<script src="path/to" type="text/javascript"></script>
</body>
</html>
I was trying to develop webix header and sidebar by using html which I have seen below. Currently it is developed in javascript.
http://docs.webix.com/samples/28_sidemenu/01_sidebar.html
I am changing from javascript to html
Header,icons,sidebar eveything appearing in the html, however the contents on the sidebar does not appear. I am not sure whats the mistake I have done. Below is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./codebase/webix.css" type="text/css"
media="screen" charset="utf-8">
<link rel="stylesheet" href="./codebase/sidebar.css" type="text/css"
media="screen" charset="utf-8">
<script src="./codebase/webix.js" type="text/javascript" charset="utf-8"></script>
<script src="./codebase/sidebar.js" type="text/javascript"
charset="utf-8"></script>
<script src="./codebase/data.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
webix.ready(function() {
webix.markup.init();
});
function toggle(){
$$("$sidebar1").toggle()
}
</script>
<div class="container" id="mainDiv"></div>
<div data-view="rows">
<div data-view="toolbar" data-padding="5">
<div data-view="button" data-type="icon" data-icon="bars"
data-width="37" data-align="left" data-css="app_button"
data-click="toggle()"></div>
<div data-view="label" data-label="My App"></div>
<div data-view="button" data-type="icon" data-icon="envelope-o"
data-width="45" data-css="app_button" data-badge="4"></div>
<div data-view="button" data-type="icon" data-icon="bell-o"
data-width="45" data-css="app_button" data-badge="10"></div>
</div>
</div>
<div data-view="cols">
<div data-view="sidebar" data-id="sidebar" data-data="menu_data"></div>
</div>
</body>
</html>
Hy guys ! I have a problem with my menu from index.It appears that after i load another page with ajax , the menu isn't working anymore.Can you help ? Thanks
Is a problem that index and header1 have the same javascript ?
INDEX HTML :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lukcomputers</title>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="fonts/fonts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<!--Menu-->
<div id="menu"><img src="img/menu/menu.png" width="900" height="517" /></div>
<div id="service" class="font-menu" >SERVICE</div>
<div id="service-buton" class="font-menu-bold" >SERVICE</div>
</div>
<!--End of Menu-->
<div id="content"></div>
</body>
</html>
Javascript :
$(document).ready(function() {
$("#toggle").hide();
$('#service').click(function() { $('#toggle').toggle();$("#service").css('visibility', 'hidden');$("#service-buton").css('visibility', 'visible');});
$('#service-buton').click(function() { $('#toggle').toggle();$("#service").css('visibility', 'visible');$("#service-buton").css('visibility', 'hidden');});
$('#acasa').click(function() {
$.ajax({
url:"header1.html",
success: function(data) {
$("#content").html(data)}
});
});
});
Header1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lukcomputers</title>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="fonts/fonts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Content-->
<div id="paragraf1" class="myriad">Instalare sisteme oferare<br />(WINDOWS, LINUX),<br />instalare aplicatii, back-up date.</div>
<!--End of Content-->
</body>
</html>
What you are doing is a bad practice. use .load() if you want to load a specific part of a page into your current page. In your case, it is
$('#content').load('header1.html #paragraf1');
Your header1 html file shoud have only this line
<div id="paragraf1" class="myriad">Instalare sisteme oferare<br />(WINDOWS, LINUX),<br />instalare aplicatii, back-up date.</div>