I have made a google pie chart I am trying to get my heading in center of the pie.
I can get it there by, some css but I cant get it to be responsive, you need to reload the page for the chart to adjust, but then the heading is out?
h4.piechartheader {
position: absolute;
z-index: 100;
top: 268px;
left: 41%;
}
<div class="main-wrap" style="min-height:0px;">
<div class="piechart">
<h4 class="piechartheader">Your Business</h4>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Service', 'link', 'Hours per Day'],
['Marketing', '/ec/marketing.php', 1],
['Accounts', '/ec/bookkeeping.php', 1],
['Administration', '/ec/reception.php', 1],
['Job Execution', '',1],
['Job Management', '/ec/servicem8.php', 1]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 2]);
var options = {
title: 'Your Business',
pieSliceText: 'label',
legend: 'none',
pieHole: 0.4,
slices: [{color: '#CC9933'}, {color: 'black'}, {color: '#876D2D'}, {color: '#777'}, {color: '#0D72A8'}],
'tooltip' : {trigger: 'none'},
titlePosition: 'none',
width: '100%',
height: '100%',
};
$(window).on("throttledresize", function (event) {
initChart();
});
var chart = new google.visualization.PieChart(
document.getElementById('chart_div'));
chart.draw(view, options);
var selectHandler = function(e) {
window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
}
// Add our selection handler.
google.visualization.events.addListener(chart, 'select', selectHandler);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 100%; margin:0;"></div>
</body>
<style>
body{ text-align: center;}
#chart_div{width: 100%; margin: 0 auto;}
</style>
</html>
</div><!---piechart--->
example is on http://www.vestedutility.com.au/ec/
any ideas?
I work it add added some div's and css
<body style="width:100%;">
<div id="chart_wrap">
<div class="centro_total"><div class="alinhar_middle estilo_total">
<h4 class="piechartheader">Your Business</h4>
</div>
</div>
<div id="chart_div"></div>
</div>
</body>
/***********Pie chart****************/
#chart_wrap {
border:1px solid gray;
position: relative;
padding-bottom: 100%;
height: 0;
overflow:hidden;
background:#fff;
}
div#chart_div {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
}
.chart_wrap {
position: relative;
padding-bottom: 100%;
}
.centro_total {
position: absolute;
left: 25%;
top: 25%;
width: 50%;
height: 50%;
vertical-align: middle;
text-align: center;
z-index: 0;
}
.alinhar_middle {
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
/* etc */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
h4.piechartheader {
font-size: 1em;
}
<!----Finish Pie chart--->
Related
I am Trying to use more then one style means i want to apply dynamic CSS i am having a line i want to move the line from left:0 to Left:450.
And i want to set the height of the line means top:0 to Top:200
Means At First i want to move the line from top:0 to top:200
and at top:200 i want to Move the Line in Right Direction It means To move the line in Left:0 to Left:450
so how van i use both the styles in Single Object.
<script src="react.development.js"></script>
<script src="babel.js"></script>
<script src="react-dom.development.js"></script>
<style>
.arrow{
width: 50px;
border: 2px solid red;
display: inline-block;
position: absolute;
top: 50px;
left: 0px;
}
.wall1{
margin-top: 25px;
height: 50px;
border: 2px solid green;
display: inline block;
position: absolute;
left: 500px;
}
.wall2{
margin-top: 80px;
height: 60px;
border: 2px solid green;
display: inline block;
position: absolute;
left: 300px;
}
.wall3{
margin-top: 160px;
height: 60px;
border: 2px solid green;
display: inline block;
position: absolute;
left: 400px;
}
</style>
<div id="root"></div>
<script type="text/babel">
class Shoot extends React.Component{
constructor(){
super();
this.FnGame=this.FnGame.bind(this);
this.FnDown=this.FnDown.bind(this);
this.FnUp=this.FnUp.bind(this);
this.state={
left:0,
top:50
}
}
FnGame(){
let id=setInterval(()=> {
this.setState({
left:++this.state.left
})
if(this.state.left==450){
clearInterval(id)
}
},12);
}
FnDown(){
let id=setInterval(()=> {
this.setState({
top:++this.state.top
})
if(this.state.top==200){
clearInterval(id)
}
},10);
}
FnUp(){
let id=setInterval(()=> {
this.setState({
top:--this.state.top
})
if(this.state.top==50){
clearInterval(id)
}
},10);
}
render(){
return <div>
<button onClick={this.FnUp} >Up</button>
<button onClick={this.FnGame} >SHOOT..</button>
<button onClick={this.FnDown} >Down</button>
<div style={{left:this.state.left}} className="arrow"></div>
<div style={{top:this.state.top}} className="arrow"></div>
<div className="wall1"></div>
<div className="wall2"></div>
<div className="wall3"></div>
</div>
}
}
ReactDOM.render(<Shoot />,document.getElementById("root"));
</script>
I am trying to go for a needle effect and I cannot seem to get the needle to rotate from its bottom. I want the bottom of the image to stay fixed in its position and just the top of the needle to move along the half circle. This is was I have so far. Any suggestions on how to get this effect to work?
$(document).ready(function() {
setTimeout(function() {
$(".needle").css("transform", "rotate(0deg)");
}, 1000)
})
figure {
position: relative;
display: inline-block;
}
.graph {
width: 300px;
}
.needle {
position: absolute;
width: 160px;
left: 15px;
bottom: -28px;
transform: rotate(-171deg);
-webkit-transform: rotate(-171deg);
transition: all 7s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure>
<img src="http://1.bp.blogspot.com/-XqCc5ql8Xqc/T6DuArRFB0I/AAAAAAAAADA/IK6fKAjzkOc/s1600/Finished+semi-circle+3.png" class="graph" />
<img src="http://www.kiteinnovation.com/wp-content/themes/naked-wordpress-master/images/arrow.png" class="needle" />
</figure>
Use css transform-origin property
$(document).ready(function() {
setTimeout(function() {
$(".needle").css("transform", "rotate(0deg)");
}, 1000)
})
figure {
position: relative;
display: inline-block;
}
.graph {
width: 300px;
}
.needle {
position: absolute;
width: 160px;
right: 15px;
bottom: -28px;
transform: rotate(-171deg);
transform-origin: left;
-webkit-transform: rotate(-171deg);
transition: all 7s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure>
<img src="http://1.bp.blogspot.com/-XqCc5ql8Xqc/T6DuArRFB0I/AAAAAAAAADA/IK6fKAjzkOc/s1600/Finished+semi-circle+3.png" class="graph" />
<img src="http://www.kiteinnovation.com/wp-content/themes/naked-wordpress-master/images/arrow.png" class="needle" />
</figure>
I'm following along this tutorial: https://ihatetomatoes.net/greensock-timelinelite-tutorial
My code pen so far (only at about 1/4 of the tutorial):
http://codepen.io/Chiz/pen/qOxVvm
Based on the JS code, the 3 boxes should run right? I compare the code in the tutorial article and it's the same. I wonder if there's errors in the tutorial code.
Another thing is: the JQuery UI slider should show up below the 3 boxes, but nothing shows up in mine although I'm very sure the JQuery UI slider code is correct.
Any ideas?
// 1. Create a variable
var $box = $("#box"),
$box2 = $("#box2"),
$box3 = $("#box3"),
t1 = new TimelineLite();
tl.from($box, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
}) // no comma or semi-colon
.from($box2, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
}) // no comma or semi-colon
.from($box3, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
});
// 4. Create a Slider to Control Playback
$("#slider").slider();
// updateSlider function
function updateSlider() {
$("#slider").slider("value", tl.progress() * 100);
}
html,
body {
height: 100%;
}
body {
background-color: #262626;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
h1 {
font-size: 16px;
width: 300px;
color: #838484;
font-weight: 300;
text-align: center;
span {
color: #89c540;
}
strong {
color: #fff;
}
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,
-180px);
padding:10px 20px;
border:1px solid transparentize(white,
.7);
}
.box {
background-color: #88ce02;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-155%, -50%);
z-index: 1;
}
#box2 {
transform: translate(-50%, -50%);
}
#box3 {
transform: translate(55%, -50%);
}
.boxSmall {
position: absolute;
background-color: #70a40b;
position: absolute;
bottom: 0;
left: 0;
width: 25px;
height: 75px;
z-index: 2;
}
.boxTiny {
background-color: #577a14;
height: 50px;
bottom: 0;
right: 0;
left: auto;
z-index: 3;
}
#controls {
position: absolute;
top: 50%;
left: 50%;
width: 310px;
transform: translate(-50%, 120px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<h1><strong>Green<span>Sock</span></strong> - TimelineLite</h1>
<div id="box" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="box2" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="box3" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="controls">
<div id="slider"></div>
</div>
It is not supposed to be t1 but it is supposed to be tl.
Change:
t1 = new TimelineLite();
to:
tl = new TimelineLite();
I am trying to display element on mouse hover using below codes, this works fine in all browsers except IE.
test_g1.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax(ID) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'test_g2.php';
var pmeters = "tID="+ID;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function() {
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "<div>Now is Loading...</div>";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
$('#mySpan div').hide();
$('#mySpan div').each(function(index){
$(this).delay(50*index).fadeIn(500);
});
}
}
}
</script>
</head>
<body Onload="JavaScript:doCallAjax('cat');">
<h1>CAT OR FLOWER</h1>
cat<br>
flower<br>
<span id="mySpan"></span>
</body>
</html>
test_g2.php
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<style type="text/css">
<!--
.recent-items {
list-style: none;
margin: 0 auto;
width: 940px;
overflow: hidden;
padding-left: 22px;
padding-top: 360px;
padding-bottom: 11px;
margin-top: -207px;
}
.thumbnail {
float: left;
margin: 7px;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
.imgWrap {
position: relative;
}
.imgDescription1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
}
.imgWrap:hover .imgDescription1 {
visibility: visible;
opacity: 1;
border: 1px solid #000;
background: #333;
padding: 0px 10px 7px;
margin-left: 94px;
width: 201px;
height: 286px;
text-align: center;
position: absolute;
margin-top: -225px;
display: none;
z-index: 999;
padding-top: 10px;
}
-->
</style>
<?PHP
$strID = $_POST["tID"];
if ($strID == "cat")
{
$show[0] = "www.catchannel.com/images/articles/cat-yellow-200px.jpg";
$show[1] = "www.fairydol.com/wp-content/uploads/2013/09/c4-200x200.jpg";
$show[2] = "www.fairydol.com/wp-content/uploads/2013/09/cat3-200x200.jpg";
}
else
{
$show[0] = "www.flowerpicturegallery.com/d/228-4/flowers-rose-pictures.jpg";
$show[1] = "www.no1reviews.com/images/category-images/flower-delivery-usa.jpg";
$show[2] = "images.all-free-download.com/images/graphicmedium/hd_flower_picture_03_hd_pictures_169251.jpg";
}
?>
<ul class="recent-items" style=" width: 940px; ">
<?PHP
for($i=0;$i<3;$i++)
{
?>
<li class="thumbnail" style=" float: left; margin: 7px; width: 80px; ">
<div class="imgWrap">
<div style=" float: left; " >
<a href="aa.php">
<img border="0" src="http://<?PHP echo $show[$i]; ?>" width="80" height="80" />
</a>
</div>
<div class="imgDescription1"><img src="http://<?PHP echo $show[$i]; ?>"/><br>description.........</div>
</div>
</li>
<?PHP
}
?>
</ul>
What could be the possible issue and what am i missing here?
if manupulation is done with visibility 'display:none' is redundant here:
imgWrap:hover .imgDescription1 {
visibility: visible;
opacity: 1;
display: none;
}
I'm trying to do a loading overlay effect with an rotating icon in the middle. I use fontawesome.
So I coded this: http://jsfiddle.net/eys3d/7/
It works, but I'm trying to make it responsive. I mean, when the section size decreases, the spin size will decrease too (remaining centered). An if the size of the section increases, the oposite.
I tried to use em units, but I didn't get the result I expected.
Is this the best way to do it? How I can make it responsive?
CSS
section {
width: 200px;
height: 200px;
margin: 50px;
}
#overlay {
position: relative;
width: 100%;
height: 100%;
z-index: 99999999999;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
position: absolute;
top: 50%;
left: 50%;
}
.spin-big {
font-size: 50px;
height: 50px;
width: 50px;
margin-top: -25px;
margin-left: -25px;
}
.spin-normal {
font-size: 35px;
height: 35px;
width: 35px;
margin-top: -22.5px;
margin-left: -22.5px;
}
.spin-small {
font-size: 20px;
height: 20px;
width: 20px;
margin-top: -10px;
margin-left: -10px;
}
HTML
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-big"></i>
</div>
</section>
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-normal"></i>
</div>
</section>
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-small"></i>
</div>
</section>
Any tip, advice or help will be appreciated, and If you need more info, let me know and I'll edit the post.
Why you won't try to use display:table attribute to your overlay div and display:table-cell to fontawesome i class? as below:
#overlay {
width: 100%;
height: 100%;
display:table;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
display:table-cell;
vertical-align:middle;
text-align:center;
}
Working Demo
you can use this for good effect
.loading
{
pointer-events: all;
z-index: 99999;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: wait;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
}
Just run into this looking for a similar solution.
The only way to responsively change the font-size would be through media queries.
I.e:
#media min-device-width: 300px{
font-size: 8px;
}
#media min-device-width: 480px{
font-size: 12px;
}
ext..
-----------div in Layout Page---------------
<div class="loading-bg" id="dvSpinner">
<img src="~/Areas/Images/loader.gif">
</div>
----------css-----------
.loading-bg {
background: #e9e9e9;
display: none;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
z-index: 5000;
width: 100%;
}
.loading-bg img{
position: absolute;
top: 42%;
left: 46%;
height: 100px;
width: 100px;
}
-------------html------------
<div class="appendInputFieldForUAIHiddenDiv"
id="appendInputFieldForUAIHiddenDiv">
#Html.TextBoxFor(model => model.PrimaryEmail, new { #class = "form-control enter-email-FPHidden-div", id = "email-address-entered", name = "email-address-entered" })
#Html.ValidationMessageFor(model => model.PrimaryEmail)
<button type="submit" class="btn btn-info submit-button-FPHidden" onclick="submitbuttonFPHidden()">
#ASRP.Resources.Resource.Submit
</button>
</div>
--------------scripts--------------------------
function submitbuttonFPHidden() {
var username = $('#email-address-entered').val();
if (username == null || username == "") {
document.getElementById("email-address-entered").style.borderColor = "#ff0232";
return false;
}
if (!validateEmail(username)) {
document.getElementById("email-address-entered").style.borderColor = "#ff0232";
return false;
}
document.getElementById('dvSpinner').style.display = "block";
$.ajax({
url: "../User/ForgotPassword",
data: { email: username },
dataType: "json",
type: "post",
error: function (error, msg) {
$('div#dvSpinner').hide();
return false;
},
success: function (data) {
if (data.success) {
if (data.emailSent == "Successful") {
document.getElementById('FPHiddenDivContainer').style.display = "none";
document.getElementById('entered-email-address').style.display = "block";
document.getElementById('entered-email-address-para').innerHTML = document.getElementById('email-address-entered').value;
document.getElementById('PwdMsgNew').style.display = "none";
}
else if (data.emailSent == "Failure")
{
document.getElementById('FPHiddenDivContainer').style.display = "none";
document.getElementById('entered-email-address').style.display = "block";
document.getElementById('entered-email-address-para').innerHTML = document.getElementById('email-address-entered').value;
document.getElementById('PwdMsg').style.display = "none";
document.getElementById('lblThankYou').style.display = "none";
}
}
else {
var ddlLangValue = $('#ddlLangs').val();
setCookie("culture", ddlLangValue, 31536e3);
var resources = {}; // Global variable.
(function ($) {
$.getJSON("Resource/GetResources", function (data) {
resources = data;
alert(resources.fpUnabletoProcessReq);
});
})(jQuery);
}
document.getElementById('dvSpinner').style.display = "none";
}
});
return true;
}