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>
Related
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);
});
I have this weird bug. If I add box2dweb to my list of javascripts. My bootstrap tooltip will no longer accept HTML. I have this code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<button class="btn-sm btn-primary col" id="btn-test" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<font size='30'>Tooltip</font> <u>with</u> <b>HTML</b>">Test</button>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/external/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/external/box2d.min.js"></script>
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
It doesn't render the HTML in the tooltip as HTML. But if I remove the script line which is embeding box2dweb it will work.
Is there a way to fix this?
Box2DWeb: Github
Make sure that you include
<script type="text/javascript" src="js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/external/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/external/box2d.min.js"></script>
in <head> tag
and
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
outside <body> tag.
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>
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>