I have a DataTables and below a chart.
I have this :
Here is my Html code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Css/jquery.visualize.plugin.css" />
</head>
<body>
<table id="table_statistic_1" class="display">
<caption style="font-size: 20px">Omzetcijfer per geografische zone</caption>
<thead>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
After filling the DataTables, I put the chart.
$('table').visualize({ type: 'line' });
I would like to add my chart to the right of my DataTables. How?
I solved the problem.
I saw that the datatables loaded a *dataTables_wrapper* that took up the entire width of my page and therefore my graph is displayed below.
I then added div tags for the dataTables and the graph as a css float left and I have a container which includes these 2 tag div. I place the tags div tags left and right with width :50%
Html code :
<div id="left">
<table id="table_statistic_1" class="display">
<caption class ="caption">Omzetcijfer per geografische zone</caption>
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="right"></div>
Css code :
.container { display:block; margin:0; padding:0; width:100%; height:400px; }
#left, #right{ float:left; display:block; margin:0; padding:0; width:50%; height:400px;}
Related
Here i have a code which I found on the internet but there some issues that I want to modify.
I found html, css, js text editor but I want key words to be colored like in w3schools.com. And also I want to run the code manually not live.
Here is my code: https://jsfiddle.net/qd9sp3a5/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Editor</title>
</head>
<body>
<table>
<tr>
<td>
<div class="tag">HTML (Body)</div>
<div id="html" class="content" contenteditable></div>
</td>
<td>
<div class="tag">CSS</div>
<div id="css" class="content" contenteditable></div>
</td>
</tr>
<tr>
<td>
<div class="tag">JavaScript</div>
<div id="js" class="content" contenteditable></div>
</td>
<td>
<div class="tag">Output</div>
<iframe id="output"></iframe>
</td>
</tr>
</table>
</body>
</html>
<script>
window.onload=function(){
var html=document.getElementById("html"),
css=document.getElementById("css"),
js=document.getElementById("js"),
output=document.getElementById("output"),
working=false,
fill=function(){
if(working){
return false;
}
working=true;
var document=output.contentDocument,
style=document.createElement("style"),
script=document.createElement("script");
document.body.innerHTML=html.textContent;
style.innerHTML=css.textContent.replace(/\s/g,"");
script.innerHTML=js.textContent;
document.body.appendChild(style);
document.body.appendChild(script);
working=false;
};
html.onkeyup=fill;
css.onkeyup=fill;
js.onkeyup=fill;
}
</script>
<style>
html,body,table,div.content,iframe{
border:0;
height:100%;
margin:0;
padding:0;
width:100%;
}
td{
border:2px solid black;
height:50%;
padding:25px 5px 5px 5px;
position:relative;
vertical-align:top;
width:50%;
}
div.tag{
position:absolute;
right:5px;
top:5px;
}
</style>
Here i have a code which I found on the internet but there some issues that I want to modify.
I found html, css, js text editor but I want key words to be colored like in w3schools.com. And also I want to run the code manually not live.
Here is my code: https://jsfiddle.net/qd9sp3a5/
Key words as in the tags? if so, all you need to do is:
div.tag{
position:absolute;
right:5px;
top:5px;
color: 'your color'
}
by keywords he means like <head></head> <div></div> or really anything that is a tag header or footer for css,html,js etc not the pieces they has in the code already i’ve been searching for this answer for a while and still cant find a direct answer that actually works
i am trying to print full page but it doesn't work tried different codes but no success
here is tried code.
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
<style type="text/css" media="all">
body{font-size:1em;}
table{font-size:0.9em;}
.price{text-align:right;padding-right:5px;}
.center{text-align:center;}
table tr{height:20px;}
#media print {body, html{width: 100%;}}
#top, #bottom {display: none;}
</style>
</head>
<body style="width:100%;">
<table width="94%" style="margin-left:2%;">
<tr>
<td width="100%" colspan="3" class="center" style="height:35px;"> <span style="text-transform:uppercase;"><b>ORDER TYPE </b></span></td>
</tr>
<tr></table>
</body></html>
please help me with it.
thanks
are you trying to render your page through javascript? If yes the following tutorial may help.
http://www.w3schools.com/js/js_htmldom_html.asp
Recommend reading the following API of the tutorial
document.getElementById(id).innerHTML = new HTML
Hope this helps.
this should work for you:
<html>
<head>
<style type="text/css" media="all">
body{font-size:1em;}
table{font-size:0.9em;}
.price{text-align:right;padding-right:5px;}
.center{text-align:center;}
table tr{height:20px;}
#media print {body, html{width: 100%;}}
#top, #bottom {display: none;}
</style>
</head>
<body style="width:100%;">
<input type=button name=print value="Print" onClick="window.print()">
<table style="margin-left:2%;width:94%;">
<tr>
<td width="100%" colspan="3" class="center" style="height:35px;"> <span style="text-transform:uppercase;"><b>ORDER TYPE </b></span></td>
</tr>
<tr></table>
</body></html>
note: always construct you html properly. width is a part of style tag it is not a tag itself.
So, I have a simple onclick function set up that is supposed to change the background of a div. Here is my JS code;
var colour = document.getElementById("backgroundColour");
function changeToColour1() {
colour.style.backgroundColor = "#47535F";
}
function changeToColour2() {
colour.style.backgroundColor = "#82A3B2";
}
Here is my HTML code;
<button id="colour1" class="colours" onclick="changeToColour1()"></button>
<button id="colour2" class="colours" onclick="changeToColour2()"></button>
<div id="backgroundColour"></div>
How would I get the div to change its colour when the button is clicked?
a much cleaner way of doing this would be to just use javascript to add classes to your elements, and let CSS control the colors.
$('#colour1').on('click',function(){
$('#backgroundColour').removeClass('colour1 colour2').addClass('colour1');
});
$('#colour2').on('click',function(){
$('#backgroundColour').removeClass('colour1 colour2').addClass('colour2');
});
and in your CSS put
#backgroundColour.colour1 {
background-color: #47535F;
}
#backgroundColour.colour2 {
background-color: #82A3B2;
}
Give the Div a proper width and height or some content, otherwise the
div cannot be seen.
Avoid inline event handlers and use DOM3 event handlers.
You can also use data-* attributes to store the colors instead of
having a seperate function for each button.
HTML
<button id="colour1" class="colours" data-color="#47535F" >Click me</button>
<button id="colour2" class="colours" data-color="#82A3B2">Click me</button>
<div id="backgroundColour">fff</div>
JS
var colourDiv = document.getElementById("backgroundColour");
var colours = document.getElementsByClassName('colours');
for(var i=0; i< colours.length; i++) {
colours[i].addEventListener('click', function() {
var color = this.getAttribute('data-color');
colourDiv.style.backgroundColor = color;
});
}
Check Fiddle
first and foremost i recommend you to use JQuery for the task you are trying to accomplish, im recommending you do for the simple fact JQuery is a simple straight forward library for javascript that makes our lives as coders a lot more simple, now that im done saying that here is the code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<style type="text/css">
html, body{
width:auto;
height:auto;
}
#changing{ /*this is the css for our javascript*/
margin:0px;
padding:0px;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
#wrap{ /*this is to keep the browse menu that has your buttons from disappearing below the changing div*/
margin:0px;
padding:0px;
width:100%;
height:40px;;
background-color:#000000;
border-bottom:5px solid #D8D8D8;
border-radius:0px;
position:fixed;
top:0px;
left:0px;
z-index:10;
}
#button1, #button2{
margin:0px;
padding:0px;
width:auto;
height:auto;
position:fixed;
}
#button1{
top:0px;
left:0px;
}
#button2{
top:0px;
right:0px;
}
</style>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
<script>
$("#button1").click(function(){
$("#changing").css("background-color", "#47535F");//changes the color of the background to #47535F
})
$("#button2").click(function(){
$("#changing").css("background-color", "#82A3B2");//changes the color of the background to #82A3B2
})
</script>
</body>
</html>
in this code we use inline css and javascript with the JQuery library, we first start the document how we should always start a html document by adding the DOCTYPE and our meta tags with the attributes content-type and content-language we also add a title.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
</head>
<body>
</body>
</html>
next we add our our script to import the JQuery library, i usually go with the google hosted version because its usually up and running and i dont have to constantly update it , google does that for you, the only thing you need to do is add the new url in the src to replace the old version of JQuery.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>
next we add our html, in our html we added two buttons and placed them in a div called wrap and added our changing div and placed both the changing div and the wrap div into a div called body-container.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
</body>
</html>
now time to add the icing to the cake with our script and css, here we added our css to determine the style of our page we made ours so that the browse menu were are buttons are located scroll with the page and are always onto, now onto the script, we made our script so that if the button is pressed it will change the background of the div body-container.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<style type="text/css">
html, body{
width:auto;
height:auto;
}
#changing{ /*this is the css for our javascript*/
margin:0px;
padding:0px;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
#wrap{ /*this is to keep the browse menu that has your buttons from disappearing below the changing div*/
margin:0px;
padding:0px;
width:100%;
height:40px;;
background-color:#000000;
border-bottom:5px solid #D8D8D8;
border-radius:0px;
position:fixed;
top:0px;
left:0px;
z-index:10;
}
#button1, #button2{
margin:0px;
padding:0px;
width:auto;
height:auto;
position:fixed;
}
#button1{
top:0px;
left:0px;
}
#button2{
top:0px;
right:0px;
}
</style>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
<script>
$("#button1").click(function(){
$("#changing").css("background-color", "#47535F");//changes the color of the background to #47535F
})
$("#button2").click(function(){
$("#changing").css("background-color", "#82A3B2");//changes the color of the background to #82A3B2
})
</script>
</body>
</html>
i hoped this helped, for any information on JQuery i recommend you go visit their online documents, they have a lot of useful info there, here is the link
http://api.jquery.com/
you can also check out w3chools they have a lot of good stuff on JQuery as well as many other programming languages, here is the link
http://www.w3schools.com/
best of luck with your project or learning the javascript language (=
I am trying to fit a canvas element into a table cell with no padding at all, i.e. I want no margins between my canvas and top/bottom of the cell. Therefore, I define row height as 20px and canvas height as 20px. I also use padding:0px styling. However, I get no padding only from top and left and I still do get padding at the bottom. In fact, it looks like the table cell gets taller in order to accommodate for the undesired margin. How can I resolve it?
Also, what is the difference between defining canvas width and height in HTML and CSS? Will one override the other?
Below is my HTML code.
Thanks.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>experiment</title>
<body>
<script>
$(function() {
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,20,20);
$("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas"));
})
</script>
</head>
<style media="screen" type="text/css">
.my_cell {height:20px; width:100px; padding:0}
.my_canvas {height:20px; width:20px}
</style>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0">
<tbody>
<tr><td class="my_cell"></td></tr>
</tbody>
</table>
<canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas>
</body>
</html>
Try adding the following to the canvas's style:
display : block;
Demo: http://jsfiddle.net/S7YJu/
You can see why if you look at this: http://jsfiddle.net/S7YJu/1/ - by default the canvas displays inline which means it lines up in a way that leaves space for the bottom of letters like "y" or "p" to hang beneath...
Despite your question has been already answered i would like to point the following.
Canvas element are treated very like inline elements despite the seem to be block level elements, similar to how an image element is treated. To fix your problem you have to set the style rule display to block for canvas.
with the best of intentions i would like to give you some advice :
1 You omitted th opening body tag.
2 Is recomended to put script tags at bottom.
4 Use divs instead of table elements when possible.
5 You don't always use Jquery selectors...
i.e.
document.getElementById('my_canvas');
Copy ->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.my_cell {width:100px; }
.my_canvas {display: block;height:20px; width:20px; background-color: red}
</style>
</head>
<body>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0" cellpadding="0">
<tbody>
<tr>
<td class="my_cell"></td>
</tr>
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function () {
$(".my_cell").html('<canvas class="my_canvas" width="20" height="20"></canvas>');
});
var canvas = $('.my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,0,20,20);
</script>
</body>
</html>
I'm working on a webpage that has a javascript image rotator, but it needs to be able to handle images of different sizes.
The code that I'm using as a base has a DIV outside floating LIs which contain the images, but no matter what I try I can't seem to get the images to all be centered. The only one that's centered is the one that's the full 800px wide.
I have a feeling it's something to do with float, position, or display, but I've been messing around for hours with no luck.
Here's my site:
Here's where I borrowed the image rotator code from:
http://www.serie3.info/s3slider/ (code) http://www.serie3.info/s3slider/demonstration.html (demo)
Thanks for any help you can provide!
This works as well (In Firefox and Safari, haven't tried IE). Save as a .html for an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="A picture and caption that you can change for everyone in the world to see.">
<meta name="keywords" content="pic and words, pic words, caption">
<title>Pic and Words</title>
<link href="http://picandwords.be-better.net/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://picandwords.be-better.net/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>
<style>
body, html
{
margin:0px;
width:100%;
height:100%;
padding:0px;
}
#slider1
{
text-align:center;
vertical-align:middle;
margin:0px;
padding:0px;
width:auto;
height:auto;
}
#slider1Content
{
text-align:center;
display:table; /* this is KEY to centering the UL */
position:static;
margin:0px auto 0px auto;
padding:0px;
width:auto;
top:auto;
}
#pageWrapper
{
width:810px;
height:700px;
margin:0px auto 0px auto;
text-align:center;
}
</style>
</head>
<body>
<div id="pageWrapper">
<h1>Pic and Words</h1>
<!--Upload -->
<br /><br />
<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282179782-2zdr66e.jpg"
alt="Somewhere down Baja on the way to Cabo."
title="Somewhere down Baja on the way to Cabo." align="center" />
<span class="bottom">"Somewhere down Baja on the way to Cabo."</span>
</div>
</li>
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282180309-bicycle.jpg"
alt="Drunk dude on a bike"
title="Drunk dude on a bike" align="center" />
<span class="bottom">"Drunk dude on a bike"</span>
</div>
</li>
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282180338-captions03211.jpg"
alt="Do not want!"
title="Do not want!" align="center" />
<span class="bottom">"Do not want!"</span>
</div>
</li>
<div class="clear slider1Image"></div>
</ul>
</div>
</div>
</body>
</html>
Add:
left: 0;
padding: 0;
to the #slider1Content style.
Then delete the float: left; from the .slider1Image style.
Note that the source CSS contains this warning: "important to be same as image width" on several dimensions. Since this CSS isn't sized for each image, you'll have that white margin around each picture.
If you desire to reset those key dimensions dynamically (I think the site looks OK without this), then that is a separate question that has been answered here on SO before.