I am doing a proof-of-concept to see if ZingCharts is a viable solution in our web application. I am trying to create a simple stacked bar chart. Everything works fine in my example until I add a title to my style tag, title="mystyle". I am using the title in the style tag as this models the situation in our full-blown application where we include a number of css files all titled with our custom page style.
Here is my example code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello ZingChart World</title>
<style title="mystyle">
.h1 {
margin: 0 0 1px 0;
padding: 5px 7px 7px 7px;
font-size: 11px;
font-weight: bold;
background-color: #ceceb5;
border-color:#ffffff #ffffff #998B74 #ffffff;
border-width:0px 0px 2px 0px;
border-style:solid solid ridge solid;
}
table.fullTable {
width: 100%;
}
td.jsChartSection {
text-align: center;
border: 1px solid #888888;
background-color: #EFEFEF;
padding: 10px 20px 10px;
}
</style>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script>
var chartData={
"type": "bar",
"stacked":true,
"stack-type":"normal",
"backgroundColor":"#FFF0FF",
"hoverMode":"node",
"tooltip": {
"htmlMode":false
},
"legend":{
"align":"center",
"vertical-align":"bottom"
},
"plotarea": {
"width": '100%',
"height": '100%',
"margin": '20 20 50 70'
},
"scale-x":{
"values":["2009","2010","2011","2012","2013", "2014"],
"items-overlap":true,
"item":{
"font-angle":-45,
"auto-align":true
}
},
"scale-y":{
"label":{
"text":"# of Widgets"
},
"values": [-100,0,100,200,300,400,500,600,700,800,900,1000,1100]
},
"series": [
{ "values": [909, 579, 311, 275, 683, 921 ], "stack":1, "text":"Widget Increase", "background-color":"#404090" },
{ "values": [-95, -59, -32, -20, -65, -98 ], "stack":1, "text":"Widget Decrease", "background-color":"#008C50" }
]
};
window.onload=function(){
zingchart.render({
id:'chartDiv',
height:"320",
width:"100%",
data:chartData
});
};
</script>
</head>
<body>
<div class="h1">Chart Management with Zingcharts</div>
<div class="h1">Another div element</div>
<div class="h1">And another div element</div>
<div class="h1">And yet another div element</div>
<div class="databox">
<table cellspacing="5" class="fullTable">
<tr>
<td class="jsChartSection">
<div>
<div id='chartDiv'></div>
</div>
</td>
</tr>
</table>
<!-- databox -->
</div>
<!-- Content -->
</body>
</html>
When I do this in this example it causes an issue with the following img element that is generated by ZingChart...
<img id="chartDiv-img" class="zc-img" usemap="#chartDiv-map" style="position: absolute; border-width: 0px; width: 1825px; height: 320px; left: 0px; top: 0px; z-index: 0; opacity: 0; clip: rect(1px, 1824px, 319px, 1px);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
This element is placed in the top left-hand corner of my page, and the tooltips now behave strangely.
How can I get ZingChart to work correctly while still using my custom page style?
Thanks!
Place this in your <head> element:
<style title="zingchart"></style>
This will force ZingChart to inject its own styles into that element, preventing conflicts.
I'm on the ZingChart team, please let me know if you need anything else :)
Edit:
Apparently browsers implement the concept of "preferred" stylesheets, the idea being that if on one page you have:
<link rel="stylesheet" title="A">
<link rel="stylesheet" title="B">
...only the style from one CSS element will be used, the other will be ignored. The same happens with inline tags.
The problem is that ZingChart creates its own CSS rules dynamically, and injects a tag with title="zingchart". So, when in the HTML page there is another <style> or <link> with a different "title", one of them (most likely the ZingChart style) will be ignored.
We have removed the code which sets the "title" from our code, which will be available in our next public release. Meanwhile, you will need to remove the "title" attribute from your <style> element.
Related
do you know how to change background color. i tried using
body.darkmode{
background-color:black;
color: white;
still not working. my code is also very messy because i just started coding in html yesterday. so this is my first time. i'm tring to make a darkmode version. so please dont worry about the content because it just for demonstration. i also make the simmilar post yesterday, but in this case i put some scroll bar and navbar.
<!DOCTYPE html>
<html>
<head>
<title>UwU</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div style="padding:15px 15px 2500px;font-size:15px">
<script>
// When the user scrolls down 20px from the top of the document, slide down the navbar
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
}
</script>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
Settings
</div>
<style>
h1 {text-align: center;}
p {text-align: left;}
div {text-align: left;}
.left {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>UwU</h1>
<p>you just got uwu.</p>
<p>say uwu after you saw master uwu for ton of luck UwU</p>
<div>UwU.</div>
<p></p>
<img src="data:image/jpeg;base64,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" alt="avatar" style="width:300px">
</body>
</html>
<style type ="text/css" >
.footer{
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020
<br>use light mode<a>•••</a>Page 2 UwU
</div>
</body>
You have not added class = "darkmode" to the body tag.
Add this and it should work.
<body class = "darkmode">
HTML CODE:
(Image is present in the right directory)
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Sample Header</h1>
</header>
<main>
<article>
<h2>Sample Header 2</h2>
<p>Sample Paragraph 1</p>
<p>Sample Paragraph 2</p>
</article>
</main>
</body>
CSS CODE:
html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
background-image does not work in the above form,but when the same css-code is included in style tag,background-image works perfectly fine,why not in external stylesheet?
I think this is a path issue for the background-image: url(...). I can't reproduce at the moment because of lacking information but please be aware of your folder structure. When you use <style> for CSS the starting point for the relative path is your root folder (or where the HTML is located).
In case of the style.css the starting point is the folder styles. So mind that in that case the path might have to change. You can use the Firefox developer tools or Chrome developer tools to modify your path on the fly. This way you can easily find out yourself where the issue with the path originates or if the background-image rule was applied properly on your element.
Updated: added links to developer tools (Mozilla, Google)
I have created Multifield dialog i AEM 5.6.1 and wold like to know How do I make an AEM CQ5 component responsive? fit to different devices/screens based on users viewpoint??
Better way for responsive design is CSS3 #media Rule.
In the following snippet menu for devices with width < 500 will be 100% width of screen:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
font-family: "Lucida Sans", Verdana, sans-serif;
}
.main img {
width: 100%;
}
h1{
font-size: 1.625em;
}
h2{
font-size: 1.375em;
}
.header {
padding: 1.0121457489878542510121457489879%;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
}
.menuitem {
margin: 4.310344827586206896551724137931%;
margin-left: 0;
margin-top: 0;
padding: 4.310344827586206896551724137931%;
border-bottom: 1px solid #e9e9e9;
cursor: pointer;
}
.main {
padding: 2.0661157024793388429752066115702%;
}
.right {
padding: 4.310344827586206896551724137931%;
background-color: #CDF0F6;
}
.footer {
padding: 1.0121457489878542510121457489879%;
text-align: center;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
font-size: 0.625em;
}
.gridcontainer {
width: 100%;
}
.gridwrapper {
overflow: hidden;
}
.gridbox {
margin-bottom: 2.0242914979757085020242914979757%;
margin-right: 2.0242914979757085020242914979757%;
float: left;
}
.gridheader {
width: 100%;
}
.gridmenu {
width: 23.481781376518218623481781376518%;
}
.gridmain {
width: 48.987854251012145748987854251012%;
}
.gridright {
width: 23.481781376518218623481781376518%;
margin-right: 0;
}
.gridfooter {
width: 100%;
margin-bottom: 0;
}
#media only screen and (max-width: 500px) {
.gridmenu {
width: 100%;
}
.menuitem {
margin: 1.0121457489878542510121457489879%;
padding: 1.0121457489878542510121457489879%;
}
.gridmain {
width: 100%;
}
.main {
padding: 1.0121457489878542510121457489879%;
}
.gridright {
width: 100%;
}
.right {
padding: 1.0121457489878542510121457489879%;
}
.gridbox {
margin-right: 0;
float: left;
}
}
</style>
</head>
<body>
<div class="gridcontainer">
<div class="gridwrapper">
<div class="gridbox gridheader">
<div class="header">
<h1>The Pulpit Rock</h1>
</div>
</div>
<div class="gridbox gridmenu">
<div class="menuitem">The Drive</div>
<div class="menuitem">The Walk</div>
<div class="menuitem">The Return</div>
<div class="menuitem">The End</div>
</div>
<div class="gridbox gridmain">
<div class="main">
<h1>The Walk</h1>
<p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="http://www.w3schools.com/cssref/pulpitrock.jpg" alt="Pulpit rock" width="" height="">
</div>
</div>
<div class="gridbox gridright">
<div class="right">
<h2>What?</h2>
<p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
<h2>Where?</h2>
<p>The Pulpit Rock is in Norway</p>
<h2>Price?</h2>
<p>The walk is free!</p>
</div>
</div>
<div class="gridbox gridfooter">
<div class="footer">
<p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p>
</div>
</div>
</div>
</div>
</body>
</html>
See more in fo in the following page
I want to make a responsive site that has an image with links you can click.
This site has invisible divs that sync up with the picture even as the image scales and resizes with the browser.
I want to first try to do the same thing with an image, and then I want to try it with a video.
Are they using any scss or javasript to make that happen, or are they just using css and html?
You can do it using just CSS and HTML, I've made a quick JSFiddle with a full size image background and a little nav.
As with the links you make the text on the image, then create a div ontop of them, don't set a background and just use a border until you get them in the correct place.
https://jsfiddle.net/2mow8qhv/2/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="bgHeader"></header>
<nav id="topNav">
Description | Gallery | Map |
Comments
</nav>
<div id="pageWrapper">
<div id="description">
<body>
</html>
/* Set all padding and margins to 0 by default, and colour to a grey unless overwritten*/
*{
padding: 0px;
margin: 0;
color: #333;
}
/* HEADER AND NAVIGATION*/
/* Sets a background image to fill 100% of the screen and fixes it in place*/
header#bgHeader{
background-image:url("http://seattlebubble.com/blog/wp-content/uploads/2014/11/Weyerhaeuser-Mansion_Tacoma.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
position:absolute;
width:100%;
height:100%;
}
/* Sets the navigation menu to the bottom of the page, and layered above the image*/
nav#topNav{
height: 60px;
width: 100%;
position: absolute;
bottom: 0px;
font-size: 1.5em;
line-height: 55px;
z-index: 2;
background: #000;
opacity: 0.7;
text-align: center;
}#topNav a{
text-decoration: none;
color: #FFF;
}#topNav a:hover{
color: #CCC;
}
heres the the code, can someone help me fix this, i want it to stay centered and it will relatively expand the mask even if you zoom in your browser, give it a try so you'll know what im talking about, im not an expert, im still learning
<!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>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
});
</script>
<style type="text/css">
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
.close {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
background-color:#f9f9f9;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:-0.48px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:Verdana;
font-size:11px;
font-weight:bold;
font-style:normal;
height:18px;
line-height:18px;
width:18px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
display:inline;
z-index:3200; position:absolute; top: -10px; right:-10px; cursor:pointer;}
}
.close:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
background-color:#e9e9e9;
}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:728px;
height:90px;
padding:10px;
background-color:#ffffff;
}
</style>
</head>
<body>
<div id="boxes">
<div id="dialog" class="window">
X
</div>
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>
</html>
Try inserting <body align="center"> or wrap the whole body in a <div id="something"> and give
#something {
text-align:center;
}
in the CSS in the <head></head> of your code.