It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I am working with a site that requires perfect viewing in all resolutions. Because of this I have used ems, % and the code found in the thread below:
Is it possible to dynamically scale text size based on browser width?
Only problem now is that the font-size doesn't change based on the height of the browser window.
Does anyone know how to change this code to get the height of the browser so I can make to font adjust not only to width but also to height? (I tried to change the "scaleSource = $body.width()," to "scaleSource = $body.height()," but it didnt make anything happen... :
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="./test_files/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$( document ).ready( function() {
var $body = $('body'); //Cache this for performance
var setBodyScale = function() {
var scaleFactor = 0.35,
scaleSource = $body.width(),
maxScale = 600,
minScale = 200;
var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('body').css('font-size', fontSize + '%');
}
$(window).resize(function(){
setBodyScale();
});
//Fire it when the page first loads:
setBodyScale();
});
</script>
Thanks in advance!
-- EDIT
here´s the solution, found it after ALOT of testing :) :
<!DOCTYPE html>
<title>Dynamic text sizing</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8">
$( document ).ready( function() {
var $body = $('body'); //Cache this for performance
var setBodyScale = function() {
var scaleFactor = 0.55,
scaleSource = $(window).height(),
maxScale = 600,
minScale = 10;
var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('body').css('font-size', fontSize + '%');
}
$(window).resize(function(){
setBodyScale();
});
//Fire it when the page first loads:
setBodyScale();
});
</script>
Related
I'm trying to load data from a csv-File to create a pie chart.
I found a example and copied it to test it. But it doesn't work. It seems that I'm the only one with this Problem. Whats my fault? Can someone help me?
My html-file:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.arc path {
stroke: #fff;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.population = +d.population;
});
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.age); });
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.age; });
});
</script>
and the csv:
age,population
<5,2704659
5-13,4499890
14-17,2159981
18-24,3853788
25-44,14106543
45-64,8819342
≥65,612463
Perhaps I have to edit, that I'm using it with django. Without django it works.
So here is my view:
def test(request):
t = get_template('test.html')
html = t.render()
return HttpResponse(html)
i am new here and trying add a image slider in my webpage. but i have tried several codes, the problem is my IE just showing only first image. then there is no image. MY IE is IE 11 and i am using netbeans8.0.2 and xampp.
what is the problem of not showing all the images in the slide?
here is the code:
<!DOCTYPE html>
<html>
<head>
<title>image slider!</title>
<script type="text/javascript">
var im1 = new Im();
im1.src = "1.jpg";
var im2 = new Im();
im2.src = "2.jpg";
var im3 = new Im();
im3.src = "3.jpg";
var im4 = new Im();
im.src = "4.jpg";
var im5 = new Im();
im5.src = "5.jpg";
</script>
</head>
<body>
<center>
<img src="slides/1.jpg" name="slider1" width=800 height=380 />
<script type="text/javascript">
var i=1;
function slidimage()
{
document.images.slider1.src = eval("im"+i+".src");
if (i<5)
{
i++;
}
else
{
i=1;
}
setTimeout("slidimage()",2000);
}
slidimage();
</script>
</center>
</body>
</html>
i have got this code from another post in stackoverflow by amin
sorry for the copy.
I am trying to use Raphael and jQuery UI. A very simple example of my problem involves a simple button which opens a jQuery dialog.
Inside that dialog I am using a Raphael paper to draw a list of texts from an array, overlaid by some transparent rectangles assigned with a click event.
I don't know how to create a jsfiddle for this example, therefore pasting my code below.
First, the html part:
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css"/>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.3.min.js"></script>
<script type="text/javascript" src="js/raphael-2.1.2.min.js"></script>
<script type="text/javascript" src="js/jscode.js"></script>
</head>
<body>
<div><button id="fireit">Open</button></div>
<div id="content"></div>
</body>
</html>
Next, the jscode.js part:
$( function() {
$("#content").dialog({
position: {my: "left top", at: "left+5px top+40px", of: window},
title: "A title",
width: 350,
height: 375,
resizable: false,
closeOnEscape: true,
autoOpen: false
});
var paper_content = Raphael("content", 300, 30);
var info = ["foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo"];
paper_content.setStart();
var texts = paper_content.setFinish();
function print_texts() {
texts.remove();
var i;
var row = 10;
paper_content.setStart();
for (i = 0; i < info.length; i++) {
paper_content.text(25, row, info[i])
.attr({'text-anchor': 'start', 'font-size': '14px'});
row += 20;
}
row = 10;
var somerect;
for (i = 0; i < info.length; i++) {
somerect = paper_content
.rect(5, row - 10, 500, 20)
.attr({fill: "#acadea", 'stroke-opacity': '0.5', 'fill-opacity': 0.5});
somerect.id = i;
somerect.click(function() {
alert(info[this.id]);
})
row += 20;
}
texts = paper_content.setFinish();
}
$("#fireit").click(function() {
print_texts();
$(paper_content.canvas).height(texts.getBBox().height + 20);
$("#content").dialog("open");
})
});
The click function triggers the print_texts() function, and since what Raphael printed is taller than the paper, the paper canvas gets resized.
The problem appears when firing the button: the texts printed by Raphael are not where they were supposed to be...!
A second click on the button magically arranges them in the right order.
Now the question: how can I overcome this? I need to have the correct order from the first click.
Thanks in advance for any hint,
Adrian
As usual, once obtaining a minimal example, the answer pops up by itself.
The point was to first open the dialog and only then to run the other instructions:
$("#fireit").click(function() {
$("#content").dialog("open");
print_texts();
$(paper_content.canvas).height(texts.getBBox().height + 20);
})
<script type="text/javascript" src="raphael.js"></script>
<script>
var paper = new Raphael("holder", 320, 200);
function testPaper(){
var width10 = paper.width * 0.1;
var height10 = paper.height * 0.1;
var width80 = paper.width * 0.8;
var height80 = paper.height * 0.8
var c = paper.rect( width10, height10, width80, height80, Math.min( width10, height10 ) );
}
</script>
</head>
<body onload = "testPaper()">
<div id="holder"></div>
</body>
What's wrong with the above code? I've been trying to get Raphael working for over an hour now & it always complains:
Uncaught TypeError: Cannot read property 'x' of undefined raphael.js:11
The script that uses Raphael is probably running before the "holder" element has been created.
Either create the Raphael in a ready/onload event or trivially arrange the HTML like so:
<body>
<div id="holder"></div> <!-- also use correct closing tag -->
<script src="raphael.js"></script>
<script>
var paper = new Raphael("holder", 320, 200);
// ..
</script>
</body>
I had the same problem using draw2d library in Angular. I couldn't initialize the canvas. It's worth to note that the element MUST have the same name as the initialized canvas.
I did compare my code to the example code from Google and I couldn't find anything different. I have no idea why my chart only display 2 data columns instead of 3. Is it because of my browser (I'm using Chrome) ? I tried with IE and had the same problem.
Google's example code:Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Chart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1', {packages: ['corechart']});</script>
<script type="text/javascript">
function drawVisualization2() {
var data = google.visualization.arrayToDataTable([
['Day', 'V5161.198', 'V5161.200', 'V5161.202'],
['27/09/2013', 4.0, 9.0, 4.0],
['29/09/2013', 5.0, 8.0, 4.0]
]);
var options = {title : 'Daily usage of heaters',
vAxis: {title: "Minutes"},
hAxis: {title: "day"},
seriesType: "bars",
series: {2: {type: "line"}} // This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
};
var chart = new google.visualization.ComboChart(document.getElementById('chart2_div'));chart.draw(data, options);}google.setOnLoadCallback(drawVisualization2);
</script>
</head>
<body>
<div id="chart2_div" style="width: 1100px; height: 500px;"></div>
</body>
</html>
Can anyone give me an advise ?
Thank you very much.
You say in the comments of your code on this line: series: {2: {type: "line"}}
This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
The Orange Line is not an average of the values of the three fields. It is the third column of data formatted as a line (not a bar). If you want to have an average line, this code works:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Chart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1', {packages: ['corechart']});</script>
<script type="text/javascript">
function drawVisualization2() {
var data = google.visualization.arrayToDataTable([
['Day', 'V5161.198', 'V5161.200', 'V5161.202'],
['27/09/2013', 4.0, 9.0, 4.0],
['29/09/2013', 5.0, 8.0, 4.0]
]);
data.addColumn('number', 'Average');
var average = 0;
for (var i = 0; i < data.getNumberOfRows(); i++){
average = 0;
for (var j = 1; j < data.getNumberOfColumns(); j++){
average = average + data.getValue(i, j);
}
average = average / 3;
data.setValue(i,4,average);
}
var options = {title : 'Daily usage of heaters',
vAxis: {title: "Minutes"},
hAxis: {title: "day"},
seriesType: "bars",
series: {3: {type: "line"}} // This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
};
var chart = new google.visualization.ComboChart(document.getElementById('chart2_div'));chart.draw(data, options);}google.setOnLoadCallback(drawVisualization2);
</script>
</head>
<body>
<div id="chart2_div" style="width: 1100px; height: 500px;"></div>
</body>
</html>