Here is the code that I have written -
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<style>
div.bar{
display: inline-block;
width: 20px;
height: 75px;
background-color: blue;
margin-right: 5px;
}
</style>
<head>
<title> Simplebar - Out Dataset </title>
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
<script type="text/javascript">
d3.csv("officedata.csv", function(data){
console.log(data);
d3.select("body")
.selectAll("div")
.data(data)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d){
var bheight = d.age*5; //scales the bar height 10 times
return bheight + "px";
})
.style("color", function(d){
if( d.age > 30) { return "red"; }
else { return "blue"; })
});
</script>
</body>
</html>
and here is the csv file -
name,age
pragyan,23
rashmi,26
tumon,40
debajit,50
dhiraj,19
I want to give condition that the color should be red if the age is above 30. I have tried the color part in a separate code and it was working but when I tried it in here, it is not working. Removing the color part, the height is working just fine.
How can I add two style properties? Please help.
1) Instead of color use background-color.
2) Make the age a number by setting d.age = +d.age.
Currently its a string so d.age > 30 will not work as expected.
.style("background-color", function(d) {
d.age = +d.age;
if (d.age > 30) {
return "red";
} else {
return "blue";
}
});
working code here
Related
I created following simple website. I have Starfield and galaxy pictures. Starfield is animated by JS code. Stars are moving. But when I place Galaxy over starfield with CSS code stars stop moving.
Below I placed JS code and HTML code without placing galaxy over starfield. How can I place one over another with stars moving?
Regards
Piotr
<head>
<meta charset ="utf-8">
<title> Galaktyka</title>
<script src ="Code17.js"></script>
<style>
#galaxy{
display: block;
margin-left: 0;
margin-top: 0;
}
#star{
position: relative;
}
</style>
</head>
<body>
<script>
window.onscroll = function () {
window.scrollTo(0,0);
}
</script>
<style type="text/css">
body {
overflow: hidden;
}
</style>
<img id="galaxy" src="Galaktyka.jpg" style="width: 70%">
<img id="star" src="starfield.jpg">
</body>
And below JS
window.onload = function(){
let image = document.getElementById("star");
imageLeft = -175;
setInterval(move, 100, image);
}
var motion = true;
function move() {
if(motion) {
let image = document.getElementById("star");
imageLeft = imageLeft + 1;
image.style.left = imageLeft + "px";
if (imageLeft == 0) {
motion = false;
} else {
let image = document.getElementById("star");
imageLeft = imageLeft - 1;
image.style.left = imageLeft + "px";
}
if (imageLeft == -175){
motion = true;
}
}
}
I've got a super simple site I'm experimenting with jquery. I've a CSS stylesheet but some of the properties are just getting ignored. For example, I'm setting the padding and border-radius properties. I checked the browser (firefox, though chrome is the same):
Error in parsing value for 'padding'. Declaration dropped. stylesheet.css:26:12
Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:28:15
Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:33:15
Error in parsing value for 'width'. Declaration dropped. stylesheet.css:40:7
Error in parsing value for 'height'. Declaration dropped.
Even width and height, which I've actually managed to set for some other divs! It seems totally random, some properties just don't get parsed, such as the border-radius.
So the result (snippet below) looks like this:
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);
$(document).ready(function() {
$('.square').mouseenter(function() {
$(this).animate({
width: '+=30px'
});
});
$('.square').mouseleave(function() {
$(this).animate({
width: '-=30px'
});
});
$('.square').click(function() {
$(this).toggle(1000);
});
var size = 10;
var graphData = [new Array(size),new Array(size)];
var column1 = graphData[0];
var column2 = graphData[1];
column1[0] = "Data1";
column2[0] = "Data2";
for (i = 1; i < column1.length; i++) {
column1[i] = i;
column2[i] = 2*i;
}
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['Data set 1'].concat(column1),
['Data set 2'].concat(column2)
],
types: {
'Data set 1': "step",
'Data set 2': "step"
}
}
});
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
var size = 40;
var column1 = new Array(size);
var last = 0;
for (i = 0; i < column1.length; i++) {
var newn = last + (0.5 - Math.random());
column1[i] = [i,newn];
last = newn;
}
data.addRows(column1);
var options = {
hAxis: {
title: 'Time2'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
#CHARSET "ISO-8859-1";
#red {
background-color:#FF0000;
}
#blue {
background-color:#0000FF;
}
#yellow {
background-color:#E2BE22;
}
#green {
background-color:#008800;
}
.blockspace {
height:70px;
width:400px;
margin-left:auto;
margin-right:auto;
padding:10;
border-radius:10;
background-color:#c8d8e8;
}
.square {
border-radius:10;
height:50px;
width:50px;
display: inline-block;
}
.chart {
width:350;
height:300;
display:inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hello World!</title>
<!-- Load c3.css -->
<!-- <link rel="stylesheet" type="text/css" href="libraries/bootstrap-3.3.5-dist/css/bootstrap.css">-->
<link rel="stylesheet" type="text/css" href="libraries/c3-0.4.10/c3.css">
<link rel="stylesheet" type="text/css" href="libraries/nvd3-master/build/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="style/stylesheet.css"/>
<!-- Load d3.js and c3.js -->
<!-- <script src="libraries/c3-0.4.10/d3.v3.min.js" charset="utf-8"></script> -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="libraries/c3-0.4.10/c3.min.js"></script>
<script src="libraries/nvd3-master/build/nv.d3.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Load jquery and script -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
<h1>A big hello</h1>
<p>Why don't you enjoy these coloured squares:</p>
<div class="blockspace">
<div class="square" id="red"></div>
<div class="square" id="blue"></div>
<div class="square" id="yellow"></div>
<div class="square" id="green"></div>
</div>
<div class="chartExperiments">
<div class="chart" id="chart"></div>
<div class="chart" id="chart_div"></div>
</div>
</body>
</html>
You forget to define the unit of measure, so just add the unit of measure and the issue will be resolved.
.chart {
width:350px; <--px unit of measure
height:300px; <--px unit of measure
display:inline-block;
}
.square {
border-radius:10px; <--px unit of measure
height:50px;
width:50px;
display: inline-block;
}
I've trying to combine inline a small d3.js animation with a separate image, but can't get it to work cross-browser. My code works OK in Chrome and Safari but not Firefox, or properly in Internet Explorer. In FF they're not inline. For IE I followed this tip - they do render inline, but with a big gap.
Assistance much appreciated. Here's a jsfiddle of the model. As it's a css problem I think only the top 2 javascript chains might be relevant - the rest is animation.
<!DOCTYPE html>
<html>
<head>
<title>In-line problem</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.img {-webkit-backface-visibility: hidden;}
#container .logoElement{
display: inline-block;
*display: inline;
zoom: 1;
width: 400;
}
</style>
</head>
<body>
<span id="container">
<div id="d3div" class="logoElement"></div>
<div id="imagediv" class="logoElement"></div>
</span>
<script>
// right-side (static) image element
d3.select("#imagediv").append("img")
.attr("src", "https://cdn.tutsplus.com/mobile/uploads/legacy/Free-App-Marketing-Tips/city-landscape.png")
.style("max-width", "200px")
.attr("class", "logoElement");
// left-side (dynamic) d3 element
var g = d3.select("#d3div").append("svg")
.attr("class", "logoElement")
.style("height", 110)
.style("width", 180)
.append("g")
.attr("transform", "scale(1.1)");
// I THINK BELOW CAN BE IGNORED
var start = Date.now(),
speed = .02;
// initialise dynamic animation elements
var big = g.append("image")
.attr("xlink:href", "http://www.cs.cmu.edu/~junggon/tools/gear.png")
.attr("class", "img")
.attr("width", 100).attr("height", 100)
.attr("x", -50).attr("y", -50);
var small = g.append("image")
.attr("xlink:href", "http://www.cs.cmu.edu/~junggon/tools/gear.png")
.attr("class", "img")
.attr("width", 50).attr("height", 50)
.attr("x", -25).attr("y", -25);
// animate
d3.timer(function() {
var angle = (Date.now() - start) * speed,
transform = function(d) { return "translate(50,50)," + "rotate(" + angle/2 + ")"; };
big.selectAll("frame").attr("transform", transform);
big.attr("transform", transform);
});
d3.timer(function() {
var angle = (Date.now() - start) * speed,
transform = function(d) { return "translate(124,50)," + "rotate(" + -angle + ")"; };
small.selectAll("frame").attr("transform", transform);
small.attr("transform", transform);
});
</script>
</body>
</html>
you forgot a unit to your width declaration for your .logoElement.
Also set a white-space: nowrap; to the container, just to be sure to always have the elements aligned side by side with no line-breaks
Example fiddle: http://jsfiddle.net/xm3fLyxz/6/
Demo
#container .logoElement{
display: inline-block;
*display: inline;
zoom: 1;
width: 200px; /* You forgot to add 'px', to show it in one line I reduced the width */
}
I have a JQuery select component and a javascript function to handle the stop event:
<script type="text/javascript">
$("#selectable").selectable({
stop: function() {
$(".ui-selected", this).each(function(i, selected) {
if ($(selected).text() == "Google") {
$("#openid_identifier").val("https://www.google.com/accounts/o8/id");
}
else if ($(selected).text() == "Yahoo") {
$("#openid_identifier").val("http://yahoo.com/");
}
});
}
});
</script>
The script works fine in firefox and chrome but not in IE7/8. It is normally supposed to send a string to the openid_identifier textbox once the google or yahoo select box is clicked.
Any ideas how to get this to work in IE?
right I took another look at the code, and I realised I made a bit of a mistake oops!
This is some cleaner code for you, it just removes all white space:
<script type="text/javascript">
$(function() {
$("#selectable").selectable({
stop: function(event, ui) { $(".ui-selected", this).each(function(i, selected) {
if($(selected).html().replace(/\s/g, "") == "Google") {
alert("https://www.google.com/accounts/o8/id");
}
else if ($(selected).html().replace(/\s/g, "") == "Yahoo") {
alert("http://yahoo.com/");
}
});
}
});
});
</script>
Looks like Text isnt liked by IE
try this instead:
<script type="text/javascript">
$("#selectable").selectable({
stop: function() {
$(".ui-selected", this).each(function(i, selected) {
if ($(selected).html() == "Google") {
$("#openid_identifier").val("https://www.google.com/accounts/o8/id");
}
else if ($(selected).html() == "Yahoo") {
$("#openid_identifier").val("http://yahoo.com/");
}
});
}
});
</script>
That worked for me when I tried your code
EDIT:
here is the code I used to test with
<html>
<head>
<html>
<head>
<meta charset="UTF-8" />
<title>make layout</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<style type="text/css">
.testdiv { background: silver; float:left;margin:0;padding:0;}
</style>
</head>
<body>
<style type="text/css">
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script type="text/javascript">
$(function() {
$("#selectable").selectable({
stop: function(event, ui) { $(".ui-selected", this).each(function(i, selected) {
alert($(selected).html());
if($(selected).text() == "Google") {
alert("https://www.google.com/accounts/o8/id");
}
else if ($(selected).text() == "Yahoo") {
alert("http://yahoo.com/");
}
});
}
});
});
</script>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Google</li>
<li class="ui-widget-content">Yahoo</li>
</ol>
</div>
</body>
</html>
It looks like the issue was $(selected).html() returned "Google " (with a space) in ie7 but returned "Google" in ie8, firefox and chrome.
Background: I tried the exact html as James Studdart's answer which worked under ie8 but under IE7 the if($(selected).html() == "Google") statement returned false every time and even after trying .text, .val, .html etc... and different machines/configs. I then tried creating a variable with the .html value as such: var chosen = $(selected).html(). This returned "Google " in IE7. To fix this mysterious IE7 space character I modified the script to ensure the space didn't affect the result:
<script type="text/javascript">
$("#selectable").selectable({
stop: function() {
$(".ui-selected", this).each(function(i, selected) {
var chosen = $(selected).html();
var subSection = chosen.substring(4, 0);
if (subSection == "Goog") {
$("#openid_identifier").val("https://www.google.com/accounts/o8/id");
}
else if (subSection == "Yaho") {
$("#openid_identifier").val("http://yahoo.com/");
}
});
}
});
I am having a Html hyperlink. I need to link this hyperlink to another page.When I place the mouse over the link. It should show the image.
how to do this
That depends on where you need to display the image. If you are looking for something along the lines of an icon next to or behind the link, you could accomplish this through CSS using a background image on the hover state of the link:
a:link
{
background-image:none;
}
a:hover
{
background-image:url('images/icon.png');
background-repeat:no-repeat;
background-position:right;
padding-right:10px /*adjust based on icon size*/
}
I did this off the top of my head, so you may need to make some minor adjustments.
If you wanted to show an image somewhere else on the page, you could accomplish that using javascript to hide/show the image on the link's mouseover event.
If this doesn't solve your problem, maybe you could supply some additional information to help guide everybody to the right answer.
You can do this easily with jquery:
$("li").hover(
function () {
$(this).append($("<img src="myimage.jpg"/>"));
},
function () {
$(this).find("img:last").remove();
}
);
Some more comprehensive examples which are actually tested:
http://docs.jquery.com/Events/hover
you can do this using javascript..
This will create a square that follows your mouse on div or element hover.
Create a .js file with those contents here:
var WindowVisible = null;
function WindowShow() {
this.bind = function(obj,url,height,width) {
obj.url = url;
obj.mheight = height;
obj.mwidth = width;
obj.onmouseover = function(e) {
if (WindowVisible == null) {
if (!e) e = window.event;
var tmp = document.createElement("div");
tmp.style.position = 'absolute';
tmp.style.top = parseInt(e.clientY + 15) + 'px';
tmp.style.left = parseInt(e.clientX + 15) + 'px';
var iframe = document.createElement('iframe');
iframe.src = this.url;
iframe.style.border = '0px';
iframe.style.height = parseInt(this.mheight)+'px';
iframe.style.width = parseInt(this.mwidth)+'px';
iframe.style.position = 'absolute';
iframe.style.top = '0px';
iframe.style.left = '0px';
tmp.appendChild(iframe);
tmp.style.display = 'none';
WindowVisible = tmp;
document.body.appendChild(tmp);
tmp.style.height = parseInt(this.mheight) + 'px';
tmp.style.width = parseInt(this.mwidth) + 'px';
tmp.style.display = 'block';
}
}
obj.onmouseout = function() {
if (WindowVisible != null) {
document.body.removeChild(WindowVisible);
WindowVisible = null;
}
}
obj.onmousemove = function(e) {
if (!e) e = window.event;
WindowVisible.style.top = parseInt(e.clientY + 15) + 'px';
WindowVisible.style.left = parseInt(e.clientX + 15) + 'px';
}
}
}
Then in your html do the following:
Include the .js file <script type="text/javascript" src="myfile.js"></script>
Put in your web page:
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
Here is a full implementation in a HTML:
<html>
<head>
<title>test page</title>
<style>
div.block { width: 300px; height: 300px; background-color: red; }
iframe { border: 0px; padding: 0px; margin: 0px; }
</style>
<script type="text/javascript" src="window_show.js"></script>
</head>
<body>
<div id="go1" style="background-color: red; width: 200px; height: 200px;"></div>
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
</body>
bye bye!