Is it possible to have x-axis only on Zing Line Chart and also only display existing points on x-axis ?
Thanks.
I'm not sure if you are looking for a line chart with the y-axis hidden? I will update my answer once you see this chart.
var myConfig = {
type: 'line',
scaleY:{visible:false},
series: [
{
values: [35,42,67,89,25,34,67,85]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
Related
curtain effect
Hello I need to make this effect in a photo viewer, I have no idea how to make it, please any help?
If we assume there are two layers, top layer has color, bottom layer has greyscale we can achieve the desired results. Here is an example using a single HTML file and two image files. The image files are identical except one is color, the other is greyscale. We use CSS for position of the elements and z-index order, and use jquery for mouse event handling to reduce the size of the top layer giving a clipping effect. The only other piece I can tell is changing the mouse pointer to some arbitrary horizontal rule, and vertical rule to give a curtain effect...
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
.picture-container
{
position: absolute;
}
#picture-container-color
{
z-index:2;
background-image: url("flower-color.jpg");
background-repeat: no-repeat;
background-color: red;
width: 500px;
height: 500px;
}
#picture-container-grey
{
z-index:1;
background-image: url("flower-grey.jpg");
background-repeat: no-repeat;
background-color: yellow;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="picture-container-color" class="picture-container"></div>
<div id="picture-container-grey" class="picture-container"></div>
<script>
var mousedown = false;
$(".picture-container").mousedown(function(event) {
mousedown = true;
});
$(".picture-container").mousemove(function(event) {
if (mousedown === true) {
$("#picture-container-color").width(event.pageX);
$("#picture-container-color").height(event.pageY);
}
});
$(".picture-container").mouseup(function(event) {
mousedown = false;
});
</script>
</body>
</html>
For some reason my code is not working. I don't get an error with badfile.jpg and regardless of the file, when I drop an image it just displays the image in the browser regardless of where it is dropped. I have not defined the button action yet. Any idea on why it's not working?
HomeController.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
namespace MVCDropZone.Controllers
{
public class HomeController : Controller
{
public IActionResult Index() {
return View();
}
private IHostingEnvironment _hostingEnvironment;
public HomeController(IHostingEnvironment environment)
{
_hostingEnvironment = environment;
}
[HttpPost]
public async Task<IActionResult> UploadFiles(IFormFile file)
{
var uploads = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
if (file.Length > 0)
{
using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
}
return RedirectToAction("Index");
}
}
}
Index.cshtml
#{
ViewData["Title"] = "Index";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Dropzone simple example</title>
<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>
<script src="~/Scripts/dropzone.js"></script>
</head>
<body>
<style>
.dropzone-container {
width: 100%;
}
.dropzone-drop-area {
background-color: lightcyan;
border: dashed 3px grey;
width: 450px;
min-height: 150px;
box-sizing: border-box;
padding: 6px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
cursor: pointer;
position: relative;
}
.dropzone-drop-area:hover {
background-color: darkorange;
border: dashed 3px black;
}
</style>
<script>
$(document).ready(function () {
Dropzone.options.uploader = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
maxFiles: 1,
clickable: true,
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
uploadMultiple: false,
createImageThumbnails: true,
accept: function (file, done) {
if (file.name == "badfile.jpg") {
done("This is a bad file!");
}
else {
//Show a confirm alert and display the image on the page.
}
}
};
});
</script>
<div class="col-md-9">
<h2>File Drag & Drop Upload</h2>
<div class="dropzone-container" id="dropzone">
<form action="/Home/UploadFiles" id="uploader">
<div id="dropzone-drop-area" class="dropzone-drop-area">
</div>
</form>
</div>
<br />
<button type="button" class="btn btn-primary">Upload Files</button>
</div>
</body>
</html>
Your code looks fine, except the missing class dropzone in your form.
Dropzone.js attaches itself to all elements with the dropzone class.
See: https://www.dropzonejs.com/#usage
So try to change your Form-Code to:
<form action="/Home/UploadFiles" id="uploader" class="dropzone">
<div id="dropzone-drop-area" class="dropzone-drop-area">
</div>
</form>
Whenever i try to load the google maps html code i never get anything to display and i get the following error:
ReferenceError: google is not defined
I can create a hyperlink to google maps but this isn't what i want. I also went ahead and got my own API key and put it into my code. Why isn't google defined? This seems too common of a problem to not have a solution.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>My first Google Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDX71YSt1efYJH3MdIsH3SF3kyJNjN-Z78&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(54.124634, -3.237029)
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var myMarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "A place on Earth",
draggable: true,
})
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" />
</body>
</html>
I have a simple page with a BorderContainer. The top region is a simple ContentPange, and the center region is a TabContainer. On the top region there is a button that creates a dijit.Menu and binds it to the top region. There is also another button that creates a EnhancedGrid and adds it to the TabContainer. The issue is a follows:
Scenario 1) If you create the menu, and then do a right-click, the menu will show correctly, as long as the grid is not created before the menu is shown for the first time.
Scenario 2) Any other option (create the menu, the grid, and then do the right-click, or create the grid, the menu and then do the right-click) will provoke a blink in the page, (like the page is resizing). A scroll bar will be shown for a second on the right side of the body, and the menu will appear for a second, and then disappear. If you click again, the menu will appear, but opening a sub menu will close will close the main menu, and the options in the sub menu will not work.
I've been able to create a small test case. The behavior is reproducible with any version of dojo previous to 1.8. I've also seen that the menu works just fine if the Border Container has an height diferent than 100% (the width does not affect)
I believe the issue is related to that blink. It seems like the moment the menu is shown the layout is resizing, and in that moment the menu lost the focus and closes itself.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - demo</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojo/dojo.js' djConfig="parseOnLoad: true, locale: 'en-us'"></script>
<script>
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dijit.Menu");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojox.layout.ContentPane");
</script>
<style type='text/css'>
#import url('http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojox/grid/enhanced/resources/tundra/EnhancedGrid.css');
#import url('http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/tundra/tundra.css');
</style>
<style type="text/css">
html, body { overflow: auto; width: 100%; height: 100%; margin: 0; }
</style>
<script>
function createMenu(){
var sMenu = new dijit.Menu({});
var pSubMenu = new dijit.Menu();
// Para enviar por mail
pSubMenu.addChild(new dijit.MenuItem({
label: "email 1",
onClick: function(e){
alert(1)
}
}));
pSubMenu.addChild(new dijit.MenuItem({
label: "email 2",
onClick: function(e){
alert(2)
}
}));
// Añadimos el submenu a la entrada de SendTo
sMenu.addChild(new dijit.PopupMenuItem({
label: "SendTo",
popup: pSubMenu
}));
sMenu.addChild(new dijit.MenuItem({
label: "Open"
}))
sMenu.startup();
return sMenu;
}
</script>
</head>
<body class="tundra eco">
<div id="BorderContainerLevel1" dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%; background: none; border:none; padding:10px 0px 0px 0px;">
<div id="pane-test-1" dojoType="dijit.layout.ContentPane" region="top" style="height: 105px; "><!-- z-index:10-->
La cabecera
<button dojoType="dijit.form.Button" type="button" onclick='launch()'>Create grid</button>
<button dojoType="dijit.form.Button" type="button" onclick='launchMenu()'>Create Menu</button>
</div>
<script>
function launch(){
var layout = [[
{
name: ' ',
hidden: true,
field: 'idDocument'},
{
name: ' ',
field: 'contentType',
width: '8%'},
{
name: "Name",
field: 'name',
width: '62%'},
{
name: "Date",
field: 'date',
width: '20%'},
{
name: "Size",
field: 'size',
width: '10%'}
]];
var i = 0;
var gridId = "grid_" + i
var grid = new dojox.grid.EnhancedGrid({
id: gridId,
query: {
idDocument: '*'
},
title:"titulo",
structure: layout
})
bankerTabContainer.addChild(grid)
grid.startup();
var myJson = {"identifier":"idDocument","items":[{"contentType":"pdf","date":"2011-10-26T16:10:45","documentType":"USERDOCUMENT","documentTypeDescription":"User Document","idDocument":534044,"idUser":"OFFMARA","name":"test II Modules.pdf","size":15704}]}
grid.setStore(new dojo.data.ItemFileWriteStore({
data: myJson
}));
}
</script>
<div dojoType="dijit.layout.TabContainer" id="bankerTabContainer" jsId="bankerTabContainer" style="height: 100%;width: 100%; border: 0px; padding: 0px;" region="center"></div>
</div>
<script>
function launchMenu(){
dijit.byId('BorderContainerLevel1').resize();
var menu1 = createMenu();
menu1.bindDomNode(dojo.byId("pane-test-1"));
}
</script>
</body>
</html>
I've got some problem with css, the content is sticking out from the boundaries.
It is expected to have a scrollbar rather than hidden overflow, but the boundaries.
Please help.
Here's the code, which reflects my CSS structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{
border:3px solid #FFAD17;
background-color:#FFF;
border-radius:7px;
font:9.5pt Tahoma;
margin:0px;
padding:0px;
}
html {
margin:0px;
padding:0px;
}
div.header{
background-color:yellow;
background-position:top;
padding: 3px;
}
div.wrapper{
float:left;
}
div.context_wrapper{
margin-left:158px;
padding: 3px;
}
div.context{
float:left;
}
div.menu{
text-align:center;
padding: 3px;
width:140px;
float:left;
}
div.footer{
background-color:yellow;
background-position:bottom;
width:auto;
padding: 3px;
clear:both;
}
</style>
</head>
<body>
<div class="header">Head</div>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="context_wrapper">
<div class="context">
ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
<div class="footer">Foot</div>
</body>
</html>
a busy cat http://img215.imageshack.us/img215/6065/20120223132157.png
I shouldn't style the body element like it was a <div> element, better to make a new wrapper. Furthermore, from your question I gather you're looking for something like this: http://jsfiddle.net/SQDXt/
Basically, this adds the wrapper div with the scrollbar when your content exceeds the size of the wrapper. Also, the header and footer are within the second wrapper, to span the whole width when the content exceeds the first wrapper's width.